View XDR: add Signatures Checked message (#1061)

* View XDR: add Signatures Checked message * Improve fetch latest XDR sign check * Clear old data when fetching new tx
stellar · Sep 26, 2024 · 245afd5 · 245afd5
1 parent e7eb0eb
commit 245afd5
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 3 deletions.
diff --git a/src/app/(sidebar)/xdr/view/page.tsx b/src/app/(sidebar)/xdr/view/page.tsx
@@ -11,9 +11,10 @@ import {
   Icon,
   CopyText,
 } from "@stellar/design-system";
+import { useQueryClient } from "@tanstack/react-query";
+import { stringify } from "lossless-json";
 
 import { useLatestTxn } from "@/query/useLatestTxn";
-import { stringify } from "lossless-json";
 import * as StellarXdr from "@/helpers/StellarXdr";
 import { XDR_TYPE_TRANSACTION_ENVELOPE } from "@/constants/settings";
 
@@ -26,6 +27,7 @@ import { PrettyJsonTransaction } from "@/components/PrettyJsonTransaction";
 import { parseToLosslessJson } from "@/helpers/parseToLosslessJson";
 import { useIsXdrInit } from "@/hooks/useIsXdrInit";
 import { useStore } from "@/store/useStore";
+import { delayedAction } from "@/helpers/delayedAction";
 
 export default function ViewXdr() {
   const { xdr, network } = useStore();
@@ -42,6 +44,8 @@ export default function ViewXdr() {
     refetch: fetchLatestTxn,
   } = useLatestTxn(network.horizonUrl);
 
+  const queryClient = useQueryClient();
+
   useEffect(() => {
     if (isLatestTxnSuccess && latestTxn) {
       updateXdrBlob(latestTxn);
@@ -102,7 +106,21 @@ export default function ViewXdr() {
                 Input a base-64 encoded XDR blob,{" "}
                 <Link
                   onClick={() => {
-                    fetchLatestTxn();
+                    if (latestTxn) {
+                      // Reset query to clear old data
+                      queryClient.resetQueries({
+                        queryKey: ["xdr", "latestTxn"],
+                        exact: true,
+                      });
+                      updateXdrBlob("");
+                    }
+
+                    delayedAction({
+                      action: () => {
+                        fetchLatestTxn();
+                      },
+                      delay: 500,
+                    });
                   }}
                   isDisabled={isFetchingLatestTxn}
                   icon={isFetchingLatestTxn ? <Loader /> : null}

diff --git a/src/components/PrettyJson/index.tsx b/src/components/PrettyJson/index.tsx
@@ -29,6 +29,7 @@ type PrettyJsonProps = {
     key: string,
     parentKey?: string,
   ) => React.ReactNode | null;
+  customKeyRenderer?: (item: any, key: string) => React.ReactNode | null;
   isLoading?: boolean;
   isCollapsible?: boolean;
 };
@@ -39,6 +40,7 @@ export const PrettyJson = ({
   json,
   customKeyValueLinkMap,
   customValueRenderer,
+  customKeyRenderer,
   isLoading,
   isCollapsible = true,
 }: PrettyJsonProps) => {
@@ -64,9 +66,16 @@ export const PrettyJson = ({
     children: React.ReactNode;
   }) => {
     const [isExpanded, setIsExpanded] = useState(true);
+    const customRender =
+      itemKey && customKeyRenderer
+        ? customKeyRenderer(children, itemKey)
+        : null;
 
     return (
-      <div className="PrettyJson__nested">
+      <div
+        className="PrettyJson__nested"
+        {...(customRender ? { "data-is-custom-key": "" } : {})}
+      >
         <div
           className={`PrettyJson__inline ${isCollapsible ? "PrettyJson--click" : ""}`}
           {...(isCollapsible
@@ -83,6 +92,7 @@ export const PrettyJson = ({
           {itemKey ? <Key>{itemKey}</Key> : null}
           <Bracket char={char} isCollapsed={!isExpanded} />
           {isCollapsible ? <ItemCount itemList={itemList} /> : null}
+          {customRender}
         </div>
         {isExpanded ? (
           <div>

diff --git a/src/components/PrettyJson/styles.scss b/src/components/PrettyJson/styles.scss
@@ -15,6 +15,16 @@
   &__nested {
     padding-left: pxToRem(16px);
 
+    // Show "Signatures Checked" message only if signatures are validated
+    &[data-is-custom-key] {
+      &:has(.PrettyJson--success),
+      &:has(.PrettyJson--error) {
+        .PrettyJson__key__note {
+          display: block;
+        }
+      }
+    }
+
     &:has(+ .PrettyJson--success) {
       .PrettyJson__key {
         color: var(--sds-clr-green-11);
@@ -63,6 +73,15 @@
     color: var(--sds-clr-gray-12);
   }
 
+  &__key {
+    &__note {
+      display: none;
+      font-size: pxToRem(12px);
+      margin-left: pxToRem(4px);
+      color: var(--sds-clr-gray-09);
+    }
+  }
+
   .Link {
     font-family: var(--sds-ff-monospace);
   }

diff --git a/src/components/PrettyJsonTransaction.tsx b/src/components/PrettyJsonTransaction.tsx
@@ -109,10 +109,19 @@ export const PrettyJsonTransaction = ({
     return null;
   };
 
+  const customKeyRenderer = (item: any, key: string) => {
+    if (key === "signatures" && item?.length > 0) {
+      return <div className="PrettyJson__key__note">· Signatures Checked</div>;
+    }
+
+    return null;
+  };
+
   return (
     <PrettyJson
       json={json}
       customValueRenderer={customValueRenderer}
+      customKeyRenderer={customKeyRenderer}
       isLoading={isLoading || isFetching}
     />
   );