[BUG] (#1104) (#1105)

* fixes bad parsing of BigInt returned from scValToNative for maps, tweaks styles for params that include maps * combine duplicate branches
stellar · Feb 8, 2024 · ab8f3c7 · ab8f3c7
1 parent 68c8950
commit ab8f3c7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 13 deletions.
diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx
@@ -20,6 +20,7 @@ import {
   getArgsForTokenInvocation,
   buildInvocationTree,
 } from "popup/helpers/soroban";
+import "./styles.scss";
 
 const ScValByType = ({ scVal }: { scVal: xdr.ScVal }) => {
   switch (scVal.switch()) {
@@ -45,16 +46,13 @@ const ScValByType = ({ scVal }: { scVal: xdr.ScVal }) => {
       return instance.executable().wasmHash().toString();
     }
 
-    case xdr.ScValType.scvTimepoint():
-    case xdr.ScValType.scvDuration(): {
-      return scValToNative(scVal).toString();
-    }
-
     case xdr.ScValType.scvError(): {
       const error = scVal.error();
       return `${error.contractCode()} - ${error.code().name}`;
     }
 
+    case xdr.ScValType.scvTimepoint():
+    case xdr.ScValType.scvDuration():
     case xdr.ScValType.scvI128():
     case xdr.ScValType.scvI256():
     case xdr.ScValType.scvI32():
@@ -73,7 +71,11 @@ const ScValByType = ({ scVal }: { scVal: xdr.ScVal }) => {
 
     case xdr.ScValType.scvVec():
     case xdr.ScValType.scvMap(): {
-      return JSON.stringify(scValToNative(scVal));
+      return JSON.stringify(
+        scValToNative(scVal),
+        (_, val) => (typeof val === "bigint" ? val.toString() : val),
+        2,
+      );
     }
 
     case xdr.ScValType.scvString():
@@ -295,13 +297,15 @@ export const KeyValueSignerKeyOptions = ({
 };
 
 export const KeyValueInvokeHostFnArgs = ({ args }: { args: xdr.ScVal[] }) => (
-  <div className="Operations__pair" data-testid="OperationKeyVal">
+  <div className="Operations__pair--invoke" data-testid="OperationKeyVal">
     <div>Parameters</div>
-    {args.map((arg) => (
-      <div>
-        <ScValByType scVal={arg} />
-      </div>
-    ))}
+    <div className="OperationParameters">
+      {args.map((arg) => (
+        <div className="Parameter">
+          <ScValByType scVal={arg} />
+        </div>
+      ))}
+    </div>
   </div>
 );
 

diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/styles.scss b/extension/src/popup/components/signTransaction/Operations/KeyVal/styles.scss
@@ -0,0 +1,13 @@
+.OperationParameters {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  font-size: 0.875rem;
+  width: 100%;
+
+  .Parameter {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
diff --git a/extension/src/popup/components/signTransaction/Operations/index.tsx b/extension/src/popup/components/signTransaction/Operations/index.tsx
@@ -388,7 +388,7 @@ export const Operations = ({
         return (
           <>
             {source && (
-              <KeyValueList
+              <KeyValueWithPublicKey
                 operationKey={t("Source")}
                 operationValue={source}
               />

diff --git a/extension/src/popup/components/signTransaction/Operations/styles.scss b/extension/src/popup/components/signTransaction/Operations/styles.scss
@@ -22,6 +22,15 @@
       justify-content: space-between;
       line-height: 1.5rem;
 
+      &--invoke {
+        flex-direction: column;
+        align-items: baseline;
+        color: var(--color-gray-60);
+        display: flex;
+        justify-content: space-between;
+        line-height: 1.5rem;
+      }
+
       &--smart-contract {
         flex-direction: column;