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;