Update sign multisig tx

alephium · Aug 24, 2023 · e10e08d · e10e08d
1 parent 7b8fe32
commit e10e08d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 20 deletions.
diff --git a/src/components/Misc/MyTable.tsx b/src/components/Misc/MyTable.tsx
@@ -1,4 +1,5 @@
 import {
+  MantineNumberSize,
   SpacingValue,
   SystemProp,
   Table,
@@ -25,10 +26,14 @@ function Caption({ caption }: { caption: string }) {
 
 interface MyTableProps {
   w?: SystemProp<SpacingValue> | undefined
+  px?: SystemProp<SpacingValue> | undefined
+  py?: SystemProp<SpacingValue> | undefined
+  horizontalSpacing?: MantineNumberSize
+  verticalSpacing?: MantineNumberSize
   data: { [key: string]: string | React.ReactNode }
 }
 
-function MyTable({ w, data }: MyTableProps) {
+function MyTable({ w, px, py, data, horizontalSpacing, verticalSpacing }: MyTableProps) {
   const rows = Object.entries(data).map(([key, value]) => (
     <tr key={key}>
       <td width={'30%'}>
@@ -39,10 +44,10 @@ function MyTable({ w, data }: MyTableProps) {
   ))
 
   return (
-    <MyBox w={w} mx="auto" px="lg" py="lg" ta="center">
+    <MyBox w={w} mx="auto" px={px ?? 'lg'} py={py ?? 'lg'} ta="center">
       <Table
-        horizontalSpacing={'xs'}
-        verticalSpacing={'xl'}
+        horizontalSpacing={horizontalSpacing ?? 'xs'}
+        verticalSpacing={verticalSpacing ?? 'xl'}
         fontSize={'md'}
         withColumnBorders
       >

diff --git a/src/components/Multisig/SignMultisigTx.tsx b/src/components/Multisig/SignMultisigTx.tsx
@@ -5,6 +5,7 @@ import { MultisigConfig, getAllMultisigConfig, signMultisigTx } from './shared'
 import { NodeProvider, isHexString } from '@alephium/web3'
 import CopyTextarea from '../Misc/CopyTextarea'
 import { useAlephium } from '../../utils/utils'
+import MyTable from '../Misc/MyTable'
 
 type P2MPKUnlockScript = { pubkey: string; index: number }[]
 
@@ -71,7 +72,7 @@ function SignMultisigTx() {
       <Text ta="left" fw="700" size="xl">
         Transaction to sign
       </Text>
-      <Input.Description ta="left" size='md'>
+      <Input.Description ta="left" size="md">
         The transaction must be created by the multisig address.
       </Input.Description>
       <Textarea
@@ -93,32 +94,41 @@ function SignMultisigTx() {
           {error}
         </Text>
       ) : loadingConfig || !unsignedTx ? null : (
-        <Text ta="left" fw="700" mt="lg">
-          The multisig address to sign is{' '}
-          {multisigConfig ? (
-            <Anchor
-              href={`/alephium-toolkit/#/multisig/show?name=${multisigConfig.name}`}
-              target="_blank"
-            >
-              {multisigConfig.name}
-            </Anchor>
-          ) : (
-            <Mark color="red">unknown</Mark>
-          )}
-        </Text>
+        <Box mt="xl">
+          <Text ta="left" fw="700" mb="lg">Transaction Details</Text>
+          <MyTable
+          px={0}
+          py={0}
+          verticalSpacing={'sm'}
+            data={{
+              Multisig: multisigConfig ? (
+                <Anchor
+                  href={`/alephium-toolkit/#/multisig/show?name=${multisigConfig.name}`}
+                  target="_blank"
+                >
+                  {multisigConfig.name}
+                </Anchor>
+              ) : (
+                <Mark color="red">unknown</Mark>
+              ),
+              Recipient: "???",
+              "ALPH amount": "???"
+            }}
+          />
+        </Box>
       )}
 
       {signature ? (
         <Box>
           <Text ta="left" fw="700" mt="xl">
             Copy and share the signature:
           </Text>
-          <Group position="apart">
+          <Group position="apart" mt="md">
             <CopyTextarea value={signature.signature} />
           </Group>
         </Box>
       ) : (
-        <Group position="right" mt="xl">
+        <Group position="right" mt="xl" mx="md">
           <Button onClick={sign}>Sign Transaction</Button>
         </Group>
       )}