diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx index 0bea2984e4..4be1aa6ffa 100644 --- 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[] }) => ( -
+
Parameters
- {args.map((arg) => ( -
- -
- ))} +
+ {args.map((arg) => ( +
+ +
+ ))} +
); diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/styles.scss b/extension/src/popup/components/signTransaction/Operations/KeyVal/styles.scss new file mode 100644 index 0000000000..8677241679 --- /dev/null +++ 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 index 20453271d8..968e0a3b9c 100644 --- 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 && ( - diff --git a/extension/src/popup/components/signTransaction/Operations/styles.scss b/extension/src/popup/components/signTransaction/Operations/styles.scss index ce2fe93bd4..eb00508f66 100644 --- 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;