Add CallSc component for smart contract calls and update confirmation…

… dialog

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/massalabs/metamask-massa.git"
   },
   "source": {
-    "shasum": "GWlYHiEuClZPjO9VXkNBTjjYkIW7nDLSKLL15ADEYvg=",
+    "shasum": "AbWGAAPhnQAeiVM5K22HpNLXDInm9vR/BkmmqoLjVhA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/components/CallSc.tsx

@@ -0,0 +1,53 @@
+import { toMAS } from '@massalabs/massa-web3';
+import {
+  SnapComponent,
+  Container,
+  Box,
+  Heading,
+  Text,
+  Section,
+  Bold,
+  Copyable,
+} from '@metamask/snaps-sdk/jsx';
+
+type CallScProps = {
+  fee: string;
+  functionName: string;
+  at: string;
+  args: number[];
+  coins: string;
+};
+
+export const CallSc: SnapComponent<CallScProps> = (params: CallScProps) => {
+  return (
+    <Container>
+      <Box>
+        <Heading>Do you want to call the following smart contract?</Heading>
+        <Section>
+          <Text>
+            <Bold>Contract: </Bold>
+          </Text>
+          <Copyable value={params.at} />
+        </Section>
+        <Section>
+          <Text>
+            <Bold>Function: </Bold>
+            {params.functionName}
+          </Text>
+          <Text>
+            <Bold>Coins: </Bold>
+            {toMAS(params.coins).toString()} MAS
+          </Text>
+          <Text>
+            <Bold>Fee: </Bold>
+            {toMAS(params.fee).toString()} MAS
+          </Text>
+          <Text>
+            <Bold>Arguments: </Bold>
+            {params.args.toString()}
+          </Text>
+        </Section>
+      </Box>
+    </Container>
+  );
+};

packages/snap/src/handlers/call-smart-contract.ts → packages/snap/src/handlers/call-smart-contract.tsx

@@ -1,5 +1,5 @@
 import type { ICallData } from '@massalabs/massa-web3';
-import { panel, text } from '@metamask/snaps-sdk';
+import { CallSc } from '../components/CallSc';
 
 import { getClient } from '../accounts/clients';
 import { getHDAccount } from '../accounts/hd-deriver';
@@ -78,14 +78,15 @@ export const callSmartContract: Handler<
     method: 'snap_dialog',
     params: {
       type: 'confirmation',
-      content: panel([
-        text('Do you want to call the following smart contract?'),
-        text(`**Contract:** ${params.at}`),
-        text(`**Function:** ${params.functionName}`),
-        text(`**Fee:** ${params.fee}`),
-        text(`**args:** ${params.args ? JSON.stringify(params.args) : '[]'}`),
-        text(`**coins:** ${params.coins}`),
-      ]),
+      content: (
+        <CallSc
+          fee={params.fee}
+          functionName={params.functionName}
+          at={params.at}
+          args={params.args}
+          coins={params.coins}
+        />
+      ),
     },
   });