From 5ccc74a719ac0283450c9bf0bb8d94f63c0e842f Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Thu, 24 Aug 2023 22:32:29 +0200
Subject: [PATCH 01/10] Update MyTable

---
 src/components/Misc/MyBox.tsx              |   4 +-
 src/components/Misc/MyTable.tsx            |  19 +-
 src/components/Multisig/CreateMultisig.tsx | 211 +++++++++++----------
 src/components/Multisig/SignMultisigTx.tsx |   4 +-
 src/components/Wallet/WalletInfo.tsx       |   4 +-
 5 files changed, 117 insertions(+), 125 deletions(-)

diff --git a/src/components/Misc/MyBox.tsx b/src/components/Misc/MyBox.tsx
index 08a6c73..18643a8 100644
--- a/src/components/Misc/MyBox.tsx
+++ b/src/components/Misc/MyBox.tsx
@@ -8,8 +8,8 @@ function MyBox({ children, ...others }: MyTableProps) {
   return (
     <Box
       mx="auto"
-      px="1.5rem"
-      py="2rem"
+      px="lg"
+      py="lg"
       sx={(theme) => ({
         backgroundColor:
           theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
diff --git a/src/components/Misc/MyTable.tsx b/src/components/Misc/MyTable.tsx
index 98116c9..6c7c9d7 100644
--- a/src/components/Misc/MyTable.tsx
+++ b/src/components/Misc/MyTable.tsx
@@ -1,11 +1,11 @@
 import {
-  Box,
   SpacingValue,
   SystemProp,
   Table,
   Text,
   useMantineTheme,
 } from '@mantine/core'
+import MyBox from './MyBox'
 
 function Caption({ caption }: { caption: string }) {
   const theme = useMantineTheme()
@@ -39,29 +39,16 @@ function MyTable({ w, data }: MyTableProps) {
   ))
 
   return (
-    <Box
-      w={w}
-      mx="auto"
-      sx={(theme) => ({
-        backgroundColor:
-          theme.colorScheme === 'dark'
-            ? theme.colors.dark[5]
-            : theme.colors.gray[1],
-        textAlign: 'center',
-        padding: theme.spacing.xl,
-        borderRadius: theme.radius.md,
-      })}
-    >
+    <MyBox w={w} mx="auto" px="lg" py="lg" ta="center">
       <Table
         horizontalSpacing={'xs'}
         verticalSpacing={'xl'}
         fontSize={'md'}
-        highlightOnHover
         withColumnBorders
       >
         <tbody>{rows}</tbody>
       </Table>
-    </Box>
+    </MyBox>
   )
 }
 
diff --git a/src/components/Multisig/CreateMultisig.tsx b/src/components/Multisig/CreateMultisig.tsx
index 62aa9b0..b77d68a 100644
--- a/src/components/Multisig/CreateMultisig.tsx
+++ b/src/components/Multisig/CreateMultisig.tsx
@@ -145,121 +145,126 @@ function CreateMultisig() {
   ))
 
   return (
-    <Box maw={900} mx="auto" mt="xl">
-      <form onSubmit={onSubmit}>
-        <Group position="center" mb="xl">
-          <Text fw="700">Choose a Name</Text>
-          <TextInput
-            placeholder="Multisig Name"
-            ta="left"
-            {...form.getInputProps('name')}
-          />
-        </Group>
-
-        <MyBox>
-          <Text ta="left" fw="700">
-            Signers
-          </Text>
-          <DragDropContext
-            onDragEnd={({ destination, source }) =>
-              form.reorderListItem('pubkeys', {
-                from: source.index,
-                to: destination!.index,
-              })
-            }
-          >
-            <Droppable droppableId="dnd-list" direction="vertical">
-              {(provided) => (
-                <div {...provided.droppableProps} ref={provided.innerRef}>
-                  {fields}
-                  {provided.placeholder}
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
+    <Center h="70%">
+      <Box maw={900} mx="auto">
+        <form onSubmit={onSubmit}>
+          <Group position="center">
+            <Text fw="700">Choose a Name</Text>
+            <TextInput
+              placeholder="Multisig Name"
+              ta="left"
+              {...form.getInputProps('name')}
+            />
+          </Group>
 
-          <Group position="apart" mt="lg">
-            <Button variant="light" radius={'md'} onClick={() => form.reset()}>
-              Reset Signers
-            </Button>
-            <Button
-              variant="light"
-              radius={'md'}
-              onClick={() =>
-                form.insertListItem('pubkeys', { name: '', pubkey: '' })
+          <MyBox mt="2rem" px="2rem" py="1.5rem">
+            <Text ta="left" fw="700">
+              Signers
+            </Text>
+            <DragDropContext
+              onDragEnd={({ destination, source }) =>
+                form.reorderListItem('pubkeys', {
+                  from: source.index,
+                  to: destination!.index,
+                })
               }
             >
-              Add Signer
-            </Button>
-          </Group>
-        </MyBox>
+              <Droppable droppableId="dnd-list" direction="vertical">
+                {(provided) => (
+                  <div {...provided.droppableProps} ref={provided.innerRef}>
+                    {fields}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
 
-        <Space h="lg" />
-        <MyBox>
-          <Text weight={700} ta="left">
-            Signatures Required
-          </Text>
-          <Group position="apart">
-            <Slider
-              mt={rem('2.5rem')}
-              w={'70%'}
-              pb={'md'}
-              px="md"
-              min={0}
-              max={form.values.pubkeys.length}
-              step={1}
-              value={form.values.mOfN}
-              label={(val) => `${val} of ${form.values.pubkeys.length}`}
-              labelAlwaysOn
-              thumbSize={1}
-              styles={(theme) => ({
-                label: {
-                  backgroundColor:
-                    theme.colorScheme === 'dark'
-                      ? theme.colors.dark[3]
-                      : theme.colors.blue[3],
-                },
-              })}
-            />
-            <Group spacing={5} mt="md">
-              <ActionIcon
-                size={42}
-                variant="default"
-                onClick={() => handlers.current!.decrement()}
+            <Group position="apart" mt="lg">
+              <Button
+                variant="light"
+                radius={'md'}
+                onClick={() => form.reset()}
               >
-                –
-              </ActionIcon>
-
-              <NumberInput
-                hideControls
-                value={form.values.mOfN}
-                onChange={(val) =>
-                  form.setValues({ mOfN: val !== '' ? val : 1 })
+                Reset Signers
+              </Button>
+              <Button
+                variant="light"
+                radius={'md'}
+                onClick={() =>
+                  form.insertListItem('pubkeys', { name: '', pubkey: '' })
                 }
-                handlersRef={handlers}
+              >
+                Add Signer
+              </Button>
+            </Group>
+          </MyBox>
+
+          <MyBox mt="xl" px="2rem" py="1.5rem">
+            <Text weight={700} ta="left">
+              Signatures Required
+            </Text>
+            <Group position="apart">
+              <Slider
+                mt={rem('2.5rem')}
+                w={'70%'}
+                pb={'md'}
+                px="md"
+                min={0}
                 max={form.values.pubkeys.length}
-                min={1}
                 step={1}
-                styles={{ input: { width: rem(54), textAlign: 'center' } }}
+                value={form.values.mOfN}
+                label={(val) => `${val} of ${form.values.pubkeys.length}`}
+                labelAlwaysOn
+                thumbSize={1}
+                styles={(theme) => ({
+                  label: {
+                    backgroundColor:
+                      theme.colorScheme === 'dark'
+                        ? theme.colors.dark[3]
+                        : theme.colors.blue[3],
+                  },
+                })}
               />
+              <Group spacing={5} mt="md">
+                <ActionIcon
+                  size={42}
+                  variant="default"
+                  onClick={() => handlers.current!.decrement()}
+                >
+                  –
+                </ActionIcon>
 
-              <ActionIcon
-                size={42}
-                variant="default"
-                onClick={() => handlers.current!.increment()}
-              >
-                +
-              </ActionIcon>
+                <NumberInput
+                  hideControls
+                  value={form.values.mOfN}
+                  onChange={(val) =>
+                    form.setValues({ mOfN: val !== '' ? val : 1 })
+                  }
+                  handlersRef={handlers}
+                  max={form.values.pubkeys.length}
+                  min={1}
+                  step={1}
+                  styles={{ input: { width: rem(54), textAlign: 'center' } }}
+                />
+
+                <ActionIcon
+                  size={42}
+                  variant="default"
+                  onClick={() => handlers.current!.increment()}
+                >
+                  +
+                </ActionIcon>
+              </Group>
             </Group>
-          </Group>
-        </MyBox>
-        {/* </Group> */}
+          </MyBox>
+          {/* </Group> */}
 
-        <Group position="right" mt="lg">
-          <Button type="submit">Create Multisig</Button>
-        </Group>
-      </form>
-    </Box>
+          <Group position="right" mt="xl">
+            <Button type="submit">Create Multisig</Button>
+          </Group>
+        </form>
+      </Box>
+    </Center>
   )
 }
 
diff --git a/src/components/Multisig/SignMultisigTx.tsx b/src/components/Multisig/SignMultisigTx.tsx
index eebeb95..149d7ef 100644
--- a/src/components/Multisig/SignMultisigTx.tsx
+++ b/src/components/Multisig/SignMultisigTx.tsx
@@ -69,7 +69,7 @@ function SignMultisigTx() {
   return (
     <Box maw={900} mx="auto" mt="xl">
       <Text ta="left" fw="700">
-        Multisig Transaction
+        Transaction to sign
       </Text>
       <Textarea
         placeholder="Paste your multisig transaction here"
@@ -108,7 +108,7 @@ function SignMultisigTx() {
       {signature ? (
         <Box>
           <Text ta="left" fw="700" mt="xl">
-            Signature:{' '}
+            Copy and share the signature:
           </Text>
           <Group position="apart">
             <CopyTextarea value={signature.signature} />
diff --git a/src/components/Wallet/WalletInfo.tsx b/src/components/Wallet/WalletInfo.tsx
index 6cf1ed0..82e6931 100644
--- a/src/components/Wallet/WalletInfo.tsx
+++ b/src/components/Wallet/WalletInfo.tsx
@@ -18,9 +18,9 @@ function WalletInfo() {
 
   const account = wallet.account
   return (
-    <Center h={rem('80%')}>
+    <Center h="80%">
       <MyTable
-        w={rem('60rem')}
+        w={900}
         data={{
           'Network Type': account?.network,
           'Address Group': account?.group,

From cbb9fb574b3fee6399219cbcb132514d50348716 Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Thu, 24 Aug 2023 23:34:20 +0200
Subject: [PATCH 02/10] Improve show multisig

---
 src/components/Multisig/CreateMultisig.tsx |   7 +-
 src/components/Multisig/ShowMultiSig.tsx   | 180 ++++++++++++---------
 2 files changed, 107 insertions(+), 80 deletions(-)

diff --git a/src/components/Multisig/CreateMultisig.tsx b/src/components/Multisig/CreateMultisig.tsx
index b77d68a..7476ba9 100644
--- a/src/components/Multisig/CreateMultisig.tsx
+++ b/src/components/Multisig/CreateMultisig.tsx
@@ -145,14 +145,17 @@ function CreateMultisig() {
   ))
 
   return (
-    <Center h="70%">
+    <Center mt="5rem">
       <Box maw={900} mx="auto">
         <form onSubmit={onSubmit}>
           <Group position="center">
-            <Text fw="700">Choose a Name</Text>
+            <Text fw="700" size={'xl'}>
+              Choose a Name
+            </Text>
             <TextInput
               placeholder="Multisig Name"
               ta="left"
+              size="md"
               {...form.getInputProps('name')}
             />
           </Group>
diff --git a/src/components/Multisig/ShowMultiSig.tsx b/src/components/Multisig/ShowMultiSig.tsx
index c8d2b10..0c77ac9 100644
--- a/src/components/Multisig/ShowMultiSig.tsx
+++ b/src/components/Multisig/ShowMultiSig.tsx
@@ -2,11 +2,16 @@ import {
   Alert,
   Box,
   Button,
+  Center,
   CopyButton,
+  Grid,
   Group,
   Mark,
   Modal,
   Select,
+  Stack,
+  Table,
+  Text,
   Tooltip,
 } from '@mantine/core'
 import {
@@ -22,6 +27,7 @@ import { useDisclosure } from '@mantine/hooks'
 import { IconAlertCircle } from '@tabler/icons-react'
 import MyTable from '../Misc/MyTable'
 import CopyTextarea from '../Misc/CopyTextarea'
+import { addressFromPublicKey } from '@alephium/web3'
 
 function useMultisigConfig(): [
   AllMultisig,
@@ -57,89 +63,107 @@ function ShowMultiSig() {
   const navigate = useNavigate()
 
   return (
-    <Box maw={700} mx="auto" mt="xl" ta={'left'}>
-      <Select
-        w={'30rem'}
-        mx="auto"
-        label="Select Multisig"
-        placeholder="Pick one"
-        data={allMultisig.map((multisig) => ({
-          value: multisig.name,
-          label: multisig.name,
-        }))}
-        value={multisigName}
-        onChange={(value) => navigate('/multisig/show?name=' + value)}
-      />
+    <Center mt="5rem">
+      <Box maw={800} mx="auto" mt="xl" ta={'left'}>
+        <Group position="center">
+          <Text fw="700" size="xl">
+            Select Multisig
+          </Text>
+          <Select
+            size="md"
+            placeholder="Pick one"
+            data={allMultisig.map((multisig) => ({
+              value: multisig.name,
+              label: multisig.name,
+            }))}
+            value={multisigName}
+            onChange={(value) => navigate('/multisig/show?name=' + value)}
+          />
+        </Group>
 
-      <Modal
-        opened={opened}
-        onClose={close}
-        withCloseButton={false}
-        styles={{
-          inner: {
-            right: 0,
-          },
-        }}
-      >
-        <Alert
-          icon={<IconAlertCircle size="1rem" />}
-          title="Attention!"
-          color="red"
-          mt="lg"
+        <Modal
+          opened={opened}
+          onClose={close}
+          withCloseButton={false}
+          styles={{
+            inner: {
+              right: 0,
+            },
+          }}
         >
-          This action will remove multisig <Mark>{multisigName}</Mark> from your
-          browser. You will need to re-import the configuration to use it again.
-        </Alert>
-        <Group position="center" mt="lg">
-          <Button
+          <Alert
+            icon={<IconAlertCircle size="1rem" />}
+            title="Attention!"
             color="red"
-            onClick={() => {
-              close()
-              if (multisigName) {
-                removeMultisigConfig(multisigName)
-                navigate('/multisig/show')
-              }
-            }}
+            mt="lg"
           >
-            Confirm
-          </Button>
-        </Group>
-      </Modal>
-
-      {multisigName && theMultisig && (
-        <Box mx="auto" mt="xl" w="100%">
-          <MyTable
-            data={{
-              Address: (
-                <Group position="center" mx="auto">
-                  <CopyTextarea value={buildMultisigAddress(theMultisig)} />
-                </Group>
-              ),
-              // Address: <CopyText value={buildMultisigAddress(theMultisig)} />,
-              'Number of Signers': theMultisig.pubkeys.length,
-              'Required Signers': theMultisig.mOfN,
-              // 'Address Group': groupOfAddress(
-              //   addressFromPublicKey(theMultisig.pubkeys[0].pubkey)
-              // ),
-            }}
-          />
-          <Group position="apart" mt="lg">
-            <Button onClick={open}>Remove !!!</Button>
-            <CopyButton value={configToSting(theMultisig)} timeout={1000}>
-              {({ copied, copy }) => (
-                <Tooltip
-                  label={copied ? 'Copied' : null}
-                  opened={copied}
-                  withArrow
-                >
-                  <Button onClick={copy}>Export</Button>
-                </Tooltip>
-              )}
-            </CopyButton>
+            This action will remove multisig <Mark>{multisigName}</Mark> from
+            your browser. You will need to re-import the configuration to use it
+            again.
+          </Alert>
+          <Group position="center" mt="lg">
+            <Button
+              color="red"
+              onClick={() => {
+                close()
+                if (multisigName) {
+                  removeMultisigConfig(multisigName)
+                  navigate('/multisig/show')
+                }
+              }}
+            >
+              Confirm
+            </Button>
           </Group>
-        </Box>
-      )}
-    </Box>
+        </Modal>
+
+        {multisigName && theMultisig && (
+          <Box mx="auto" mt="2rem" w="100%">
+            <MyTable
+              data={{
+                Address: (
+                  <Group position="center" mx="auto">
+                    <CopyTextarea value={buildMultisigAddress(theMultisig)} />
+                  </Group>
+                ),
+                'Number of Signers': theMultisig.pubkeys.length,
+                'Required Signers': theMultisig.mOfN,
+                Signers: (
+                  <Grid>
+                    {theMultisig.pubkeys.map(({ name, pubkey }) => [
+                      <Grid.Col span={2} key={pubkey}>
+                        <Stack h="100%">
+                          <Text fw="450" my="auto" ta="right">
+                            {name}
+                          </Text>
+                        </Stack>
+                      </Grid.Col>,
+                      <Grid.Col span={10} key={pubkey}>
+                        <CopyTextarea value={addressFromPublicKey(pubkey)} />
+                      </Grid.Col>,
+                    ])}
+                  </Grid>
+                ),
+              }}
+            />
+            <Group position="apart" mt="2rem" mx="lg">
+              <Button onClick={open}>Remove</Button>
+              <CopyButton value={configToSting(theMultisig)} timeout={1000}>
+                {({ copied, copy }) => (
+                  <Tooltip
+                    label={copied ? 'Copied' : null}
+                    opened={copied}
+                    withArrow
+                  >
+                    <Button onClick={copy}>Export</Button>
+                  </Tooltip>
+                )}
+              </CopyButton>
+            </Group>
+          </Box>
+        )}
+      </Box>
+    </Center>
   )
 }
 

From 058114c3b979534cc93b2ebb462d882ef3a23aba Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Fri, 25 Aug 2023 00:09:06 +0200
Subject: [PATCH 03/10] Improve import multisig

---
 src/components/Multisig/ImportMultiSig.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Multisig/ImportMultiSig.tsx b/src/components/Multisig/ImportMultiSig.tsx
index cf77ad6..6d6423b 100644
--- a/src/components/Multisig/ImportMultiSig.tsx
+++ b/src/components/Multisig/ImportMultiSig.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Group, Text, Textarea } from '@mantine/core'
+import { Box, Button, Group, Input, Text, Textarea } from '@mantine/core'
 import { useCallback, useState } from 'react'
 import {
   MultisigConfig,
@@ -37,18 +37,22 @@ function ImportMultisig() {
   )
 
   return (
-    <Box maw={900} mx="auto" mt="xl">
-      <Text ta="left" fw="700">
-        Multisig configuration
+    <Box maw={800} mx="auto" mt="xl">
+      <Text ta="left" fw="700" size="xl">
+        Multisig Configuration
       </Text>
+      <Input.Description ta="left" size='md'>
+        You can import the multisig configuration shared by the creator of the
+        multisig address.
+      </Input.Description>
       <Textarea
-        placeholder="Paste your configuration here"
+        placeholder="Paste the configuration here"
         minRows={8}
-        mt="md"
+        mt="lg"
         onChange={(event) => onContentChange(event.target.value)}
       />
       {error ? (
-        <Text color="red" mt="md">
+        <Text color="red" mt="md" ta="right">
           {error}
         </Text>
       ) : null}

From 89ab3b16868ec20ae961f44563bc3005d78c9d7c Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Fri, 25 Aug 2023 00:09:46 +0200
Subject: [PATCH 04/10] Update path

---
 src/components/AppShell.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 3e313fa..9791824 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -9,10 +9,10 @@ import { useAlephiumConnectContext } from '@alephium/web3-react'
 import { useEffect } from 'react'
 import { web3 } from '@alephium/web3'
 import CreateMultisig from './Multisig/CreateMultisig'
-import ImportMultisig from './Multisig/ImportMultiSig'
-import ShowMultiSig from './Multisig/ShowMultiSig'
+import ImportMultisig from './Multisig/ImportMultisig'
+import ShowMultiSig from './Multisig/ShowMultisig'
 import SignMultisigTx from './Multisig/SignMultisigTx'
-import BuildMultisigTx from './Multisig/BuildMultiSigTx'
+import BuildMultisigTx from './Multisig/BuildMultisigTx'
 import { useAlephium } from '../utils/utils'
 
 function AppShellExample() {

From 96e9a41343e1309148f6bd79652fc59b9fcf4998 Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Fri, 25 Aug 2023 00:11:02 +0200
Subject: [PATCH 05/10] Rename

---
 src/components/AppShell.tsx                            | 10 +++++-----
 .../{BuildMultiSigTx.tsx => BuildMultisigTx_.tsx}      |  0
 .../{CreateMultisig.tsx => CreateMultisig_.tsx}        |  0
 .../{ImportMultiSig.tsx => ImportMultisig_.tsx}        |  0
 .../Multisig/{ShowMultiSig.tsx => ShowMultisig_.tsx}   |  0
 .../{SignMultisigTx.tsx => SignMultisigTx_.tsx}        |  0
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/Multisig/{BuildMultiSigTx.tsx => BuildMultisigTx_.tsx} (100%)
 rename src/components/Multisig/{CreateMultisig.tsx => CreateMultisig_.tsx} (100%)
 rename src/components/Multisig/{ImportMultiSig.tsx => ImportMultisig_.tsx} (100%)
 rename src/components/Multisig/{ShowMultiSig.tsx => ShowMultisig_.tsx} (100%)
 rename src/components/Multisig/{SignMultisigTx.tsx => SignMultisigTx_.tsx} (100%)

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 9791824..214e772 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -8,11 +8,11 @@ import TokenInfo from './Token/TokenInfo'
 import { useAlephiumConnectContext } from '@alephium/web3-react'
 import { useEffect } from 'react'
 import { web3 } from '@alephium/web3'
-import CreateMultisig from './Multisig/CreateMultisig'
-import ImportMultisig from './Multisig/ImportMultisig'
-import ShowMultiSig from './Multisig/ShowMultisig'
-import SignMultisigTx from './Multisig/SignMultisigTx'
-import BuildMultisigTx from './Multisig/BuildMultisigTx'
+import CreateMultisig from './Multisig/CreateMultisig_'
+import ImportMultisig from './Multisig/ImportMultisig_'
+import ShowMultiSig from './Multisig/ShowMultisig_'
+import SignMultisigTx from './Multisig/SignMultisigTx_'
+import BuildMultisigTx from './Multisig/BuildMultisigTx_'
 import { useAlephium } from '../utils/utils'
 
 function AppShellExample() {
diff --git a/src/components/Multisig/BuildMultiSigTx.tsx b/src/components/Multisig/BuildMultisigTx_.tsx
similarity index 100%
rename from src/components/Multisig/BuildMultiSigTx.tsx
rename to src/components/Multisig/BuildMultisigTx_.tsx
diff --git a/src/components/Multisig/CreateMultisig.tsx b/src/components/Multisig/CreateMultisig_.tsx
similarity index 100%
rename from src/components/Multisig/CreateMultisig.tsx
rename to src/components/Multisig/CreateMultisig_.tsx
diff --git a/src/components/Multisig/ImportMultiSig.tsx b/src/components/Multisig/ImportMultisig_.tsx
similarity index 100%
rename from src/components/Multisig/ImportMultiSig.tsx
rename to src/components/Multisig/ImportMultisig_.tsx
diff --git a/src/components/Multisig/ShowMultiSig.tsx b/src/components/Multisig/ShowMultisig_.tsx
similarity index 100%
rename from src/components/Multisig/ShowMultiSig.tsx
rename to src/components/Multisig/ShowMultisig_.tsx
diff --git a/src/components/Multisig/SignMultisigTx.tsx b/src/components/Multisig/SignMultisigTx_.tsx
similarity index 100%
rename from src/components/Multisig/SignMultisigTx.tsx
rename to src/components/Multisig/SignMultisigTx_.tsx

From 5f3644eb7024ee174469b7588da3fc10151f5eca Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Fri, 25 Aug 2023 00:11:56 +0200
Subject: [PATCH 06/10] Rename

---
 src/components/AppShell.tsx                            | 10 +++++-----
 .../{BuildMultisigTx_.tsx => BuildMultisigTx.tsx}      |  0
 .../{CreateMultisig_.tsx => CreateMultisig.tsx}        |  0
 .../{ImportMultisig_.tsx => ImportMultisig.tsx}        |  0
 .../Multisig/{ShowMultisig_.tsx => ShowMultisig.tsx}   |  0
 .../{SignMultisigTx_.tsx => SignMultisigTx.tsx}        |  0
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/Multisig/{BuildMultisigTx_.tsx => BuildMultisigTx.tsx} (100%)
 rename src/components/Multisig/{CreateMultisig_.tsx => CreateMultisig.tsx} (100%)
 rename src/components/Multisig/{ImportMultisig_.tsx => ImportMultisig.tsx} (100%)
 rename src/components/Multisig/{ShowMultisig_.tsx => ShowMultisig.tsx} (100%)
 rename src/components/Multisig/{SignMultisigTx_.tsx => SignMultisigTx.tsx} (100%)

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 214e772..9791824 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -8,11 +8,11 @@ import TokenInfo from './Token/TokenInfo'
 import { useAlephiumConnectContext } from '@alephium/web3-react'
 import { useEffect } from 'react'
 import { web3 } from '@alephium/web3'
-import CreateMultisig from './Multisig/CreateMultisig_'
-import ImportMultisig from './Multisig/ImportMultisig_'
-import ShowMultiSig from './Multisig/ShowMultisig_'
-import SignMultisigTx from './Multisig/SignMultisigTx_'
-import BuildMultisigTx from './Multisig/BuildMultisigTx_'
+import CreateMultisig from './Multisig/CreateMultisig'
+import ImportMultisig from './Multisig/ImportMultisig'
+import ShowMultiSig from './Multisig/ShowMultisig'
+import SignMultisigTx from './Multisig/SignMultisigTx'
+import BuildMultisigTx from './Multisig/BuildMultisigTx'
 import { useAlephium } from '../utils/utils'
 
 function AppShellExample() {
diff --git a/src/components/Multisig/BuildMultisigTx_.tsx b/src/components/Multisig/BuildMultisigTx.tsx
similarity index 100%
rename from src/components/Multisig/BuildMultisigTx_.tsx
rename to src/components/Multisig/BuildMultisigTx.tsx
diff --git a/src/components/Multisig/CreateMultisig_.tsx b/src/components/Multisig/CreateMultisig.tsx
similarity index 100%
rename from src/components/Multisig/CreateMultisig_.tsx
rename to src/components/Multisig/CreateMultisig.tsx
diff --git a/src/components/Multisig/ImportMultisig_.tsx b/src/components/Multisig/ImportMultisig.tsx
similarity index 100%
rename from src/components/Multisig/ImportMultisig_.tsx
rename to src/components/Multisig/ImportMultisig.tsx
diff --git a/src/components/Multisig/ShowMultisig_.tsx b/src/components/Multisig/ShowMultisig.tsx
similarity index 100%
rename from src/components/Multisig/ShowMultisig_.tsx
rename to src/components/Multisig/ShowMultisig.tsx
diff --git a/src/components/Multisig/SignMultisigTx_.tsx b/src/components/Multisig/SignMultisigTx.tsx
similarity index 100%
rename from src/components/Multisig/SignMultisigTx_.tsx
rename to src/components/Multisig/SignMultisigTx.tsx

From 4ce652d6f44d27aed4067ff1e9bcf6462cba82b2 Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Fri, 25 Aug 2023 00:15:43 +0200
Subject: [PATCH 07/10] Update styles

---
 src/components/Misc/MyBox.tsx              |   2 +-
 src/components/Multisig/CreateMultisig.tsx | 217 ++++++++++-----------
 src/components/Multisig/ImportMultisig.tsx |   2 +-
 src/components/Multisig/ShowMultisig.tsx   | 191 +++++++++---------
 4 files changed, 200 insertions(+), 212 deletions(-)

diff --git a/src/components/Misc/MyBox.tsx b/src/components/Misc/MyBox.tsx
index 18643a8..54f7c68 100644
--- a/src/components/Misc/MyBox.tsx
+++ b/src/components/Misc/MyBox.tsx
@@ -14,7 +14,7 @@ function MyBox({ children, ...others }: MyTableProps) {
         backgroundColor:
           theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
         borderRadius: theme.radius.md,
-        boxShadow: theme.shadows.md,
+        boxShadow: theme.shadows.sm,
       })}
       {...others}
     >
diff --git a/src/components/Multisig/CreateMultisig.tsx b/src/components/Multisig/CreateMultisig.tsx
index 7476ba9..a0de62b 100644
--- a/src/components/Multisig/CreateMultisig.tsx
+++ b/src/components/Multisig/CreateMultisig.tsx
@@ -10,7 +10,6 @@ import {
   ActionIcon,
   rem,
   Slider,
-  Space,
   Tooltip,
 } from '@mantine/core'
 import { FORM_INDEX, useForm } from '@mantine/form'
@@ -145,129 +144,123 @@ function CreateMultisig() {
   ))
 
   return (
-    <Center mt="5rem">
-      <Box maw={900} mx="auto">
-        <form onSubmit={onSubmit}>
-          <Group position="center">
-            <Text fw="700" size={'xl'}>
-              Choose a Name
-            </Text>
-            <TextInput
-              placeholder="Multisig Name"
-              ta="left"
-              size="md"
-              {...form.getInputProps('name')}
-            />
-          </Group>
+    <Box maw={900} mx="auto" mt="5rem">
+      <form onSubmit={onSubmit}>
+        <Group position="center">
+          <Text fw="700" size={'xl'}>
+            Choose a Name
+          </Text>
+          <TextInput
+            placeholder="Multisig Name"
+            ta="left"
+            size="md"
+            {...form.getInputProps('name')}
+          />
+        </Group>
 
-          <MyBox mt="2rem" px="2rem" py="1.5rem">
-            <Text ta="left" fw="700">
-              Signers
-            </Text>
-            <DragDropContext
-              onDragEnd={({ destination, source }) =>
-                form.reorderListItem('pubkeys', {
-                  from: source.index,
-                  to: destination!.index,
-                })
+        <MyBox mt="2rem" px="2rem" py="1.5rem">
+          <Text ta="left" fw="700">
+            Signers
+          </Text>
+          <DragDropContext
+            onDragEnd={({ destination, source }) =>
+              form.reorderListItem('pubkeys', {
+                from: source.index,
+                to: destination!.index,
+              })
+            }
+          >
+            <Droppable droppableId="dnd-list" direction="vertical">
+              {(provided) => (
+                <div {...provided.droppableProps} ref={provided.innerRef}>
+                  {fields}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+
+          <Group position="apart" mt="lg">
+            <Button variant="light" radius={'md'} onClick={() => form.reset()}>
+              Reset Signers
+            </Button>
+            <Button
+              variant="light"
+              radius={'md'}
+              onClick={() =>
+                form.insertListItem('pubkeys', { name: '', pubkey: '' })
               }
             >
-              <Droppable droppableId="dnd-list" direction="vertical">
-                {(provided) => (
-                  <div {...provided.droppableProps} ref={provided.innerRef}>
-                    {fields}
-                    {provided.placeholder}
-                  </div>
-                )}
-              </Droppable>
-            </DragDropContext>
+              Add Signer
+            </Button>
+          </Group>
+        </MyBox>
 
-            <Group position="apart" mt="lg">
-              <Button
-                variant="light"
-                radius={'md'}
-                onClick={() => form.reset()}
-              >
-                Reset Signers
-              </Button>
-              <Button
-                variant="light"
-                radius={'md'}
-                onClick={() =>
-                  form.insertListItem('pubkeys', { name: '', pubkey: '' })
-                }
+        <MyBox mt="xl" px="2rem" py="1.5rem">
+          <Text weight={700} ta="left">
+            Signatures Required
+          </Text>
+          <Group position="apart">
+            <Slider
+              mt={rem('2.5rem')}
+              w={'70%'}
+              pb={'md'}
+              px="md"
+              min={0}
+              max={form.values.pubkeys.length}
+              step={1}
+              value={form.values.mOfN}
+              label={(val) => `${val} of ${form.values.pubkeys.length}`}
+              labelAlwaysOn
+              thumbSize={1}
+              styles={(theme) => ({
+                label: {
+                  backgroundColor:
+                    theme.colorScheme === 'dark'
+                      ? theme.colors.dark[3]
+                      : theme.colors.blue[3],
+                },
+              })}
+            />
+            <Group spacing={5} mt="md">
+              <ActionIcon
+                size={42}
+                variant="default"
+                onClick={() => handlers.current!.decrement()}
               >
-                Add Signer
-              </Button>
-            </Group>
-          </MyBox>
+                –
+              </ActionIcon>
 
-          <MyBox mt="xl" px="2rem" py="1.5rem">
-            <Text weight={700} ta="left">
-              Signatures Required
-            </Text>
-            <Group position="apart">
-              <Slider
-                mt={rem('2.5rem')}
-                w={'70%'}
-                pb={'md'}
-                px="md"
-                min={0}
+              <NumberInput
+                hideControls
+                value={form.values.mOfN}
+                onChange={(val) =>
+                  form.setValues({ mOfN: val !== '' ? val : 1 })
+                }
+                handlersRef={handlers}
                 max={form.values.pubkeys.length}
+                min={1}
                 step={1}
-                value={form.values.mOfN}
-                label={(val) => `${val} of ${form.values.pubkeys.length}`}
-                labelAlwaysOn
-                thumbSize={1}
-                styles={(theme) => ({
-                  label: {
-                    backgroundColor:
-                      theme.colorScheme === 'dark'
-                        ? theme.colors.dark[3]
-                        : theme.colors.blue[3],
-                  },
-                })}
+                styles={{ input: { width: rem(54), textAlign: 'center' } }}
               />
-              <Group spacing={5} mt="md">
-                <ActionIcon
-                  size={42}
-                  variant="default"
-                  onClick={() => handlers.current!.decrement()}
-                >
-                  –
-                </ActionIcon>
 
-                <NumberInput
-                  hideControls
-                  value={form.values.mOfN}
-                  onChange={(val) =>
-                    form.setValues({ mOfN: val !== '' ? val : 1 })
-                  }
-                  handlersRef={handlers}
-                  max={form.values.pubkeys.length}
-                  min={1}
-                  step={1}
-                  styles={{ input: { width: rem(54), textAlign: 'center' } }}
-                />
-
-                <ActionIcon
-                  size={42}
-                  variant="default"
-                  onClick={() => handlers.current!.increment()}
-                >
-                  +
-                </ActionIcon>
-              </Group>
+              <ActionIcon
+                size={42}
+                variant="default"
+                onClick={() => handlers.current!.increment()}
+              >
+                +
+              </ActionIcon>
             </Group>
-          </MyBox>
-          {/* </Group> */}
-
-          <Group position="right" mt="xl">
-            <Button type="submit">Create Multisig</Button>
           </Group>
-        </form>
-      </Box>
-    </Center>
+        </MyBox>
+        {/* </Group> */}
+
+        <Group position="right" mt="xl">
+          <Button type="submit">Create Multisig</Button>
+        </Group>
+      </form>
+    </Box>
   )
 }
 
diff --git a/src/components/Multisig/ImportMultisig.tsx b/src/components/Multisig/ImportMultisig.tsx
index 6d6423b..906c6e3 100644
--- a/src/components/Multisig/ImportMultisig.tsx
+++ b/src/components/Multisig/ImportMultisig.tsx
@@ -37,7 +37,7 @@ function ImportMultisig() {
   )
 
   return (
-    <Box maw={800} mx="auto" mt="xl">
+    <Box maw={800} mx="auto" mt="5rem">
       <Text ta="left" fw="700" size="xl">
         Multisig Configuration
       </Text>
diff --git a/src/components/Multisig/ShowMultisig.tsx b/src/components/Multisig/ShowMultisig.tsx
index 0c77ac9..7d47401 100644
--- a/src/components/Multisig/ShowMultisig.tsx
+++ b/src/components/Multisig/ShowMultisig.tsx
@@ -2,7 +2,6 @@ import {
   Alert,
   Box,
   Button,
-  Center,
   CopyButton,
   Grid,
   Group,
@@ -10,7 +9,6 @@ import {
   Modal,
   Select,
   Stack,
-  Table,
   Text,
   Tooltip,
 } from '@mantine/core'
@@ -63,107 +61,104 @@ function ShowMultiSig() {
   const navigate = useNavigate()
 
   return (
-    <Center mt="5rem">
-      <Box maw={800} mx="auto" mt="xl" ta={'left'}>
-        <Group position="center">
-          <Text fw="700" size="xl">
-            Select Multisig
-          </Text>
-          <Select
-            size="md"
-            placeholder="Pick one"
-            data={allMultisig.map((multisig) => ({
-              value: multisig.name,
-              label: multisig.name,
-            }))}
-            value={multisigName}
-            onChange={(value) => navigate('/multisig/show?name=' + value)}
-          />
-        </Group>
+    <Box maw={800} mx="auto" mt="5rem" ta={'left'}>
+      <Group position="center">
+        <Text fw="700" size="xl">
+          Select Multisig
+        </Text>
+        <Select
+          size="md"
+          placeholder="Pick one"
+          data={allMultisig.map((multisig) => ({
+            value: multisig.name,
+            label: multisig.name,
+          }))}
+          value={multisigName}
+          onChange={(value) => navigate('/multisig/show?name=' + value)}
+        />
+      </Group>
 
-        <Modal
-          opened={opened}
-          onClose={close}
-          withCloseButton={false}
-          styles={{
-            inner: {
-              right: 0,
-            },
-          }}
+      <Modal
+        opened={opened}
+        onClose={close}
+        withCloseButton={false}
+        styles={{
+          inner: {
+            right: 0,
+          },
+        }}
+      >
+        <Alert
+          icon={<IconAlertCircle size="1rem" />}
+          title="Attention!"
+          color="red"
+          mt="lg"
         >
-          <Alert
-            icon={<IconAlertCircle size="1rem" />}
-            title="Attention!"
+          This action will remove multisig <Mark>{multisigName}</Mark> from your
+          browser. You will need to re-import the configuration to use it again.
+        </Alert>
+        <Group position="center" mt="lg">
+          <Button
             color="red"
-            mt="lg"
+            onClick={() => {
+              close()
+              if (multisigName) {
+                removeMultisigConfig(multisigName)
+                navigate('/multisig/show')
+              }
+            }}
           >
-            This action will remove multisig <Mark>{multisigName}</Mark> from
-            your browser. You will need to re-import the configuration to use it
-            again.
-          </Alert>
-          <Group position="center" mt="lg">
-            <Button
-              color="red"
-              onClick={() => {
-                close()
-                if (multisigName) {
-                  removeMultisigConfig(multisigName)
-                  navigate('/multisig/show')
-                }
-              }}
-            >
-              Confirm
-            </Button>
-          </Group>
-        </Modal>
+            Confirm
+          </Button>
+        </Group>
+      </Modal>
 
-        {multisigName && theMultisig && (
-          <Box mx="auto" mt="2rem" w="100%">
-            <MyTable
-              data={{
-                Address: (
-                  <Group position="center" mx="auto">
-                    <CopyTextarea value={buildMultisigAddress(theMultisig)} />
-                  </Group>
-                ),
-                'Number of Signers': theMultisig.pubkeys.length,
-                'Required Signers': theMultisig.mOfN,
-                Signers: (
-                  <Grid>
-                    {theMultisig.pubkeys.map(({ name, pubkey }) => [
-                      <Grid.Col span={2} key={pubkey}>
-                        <Stack h="100%">
-                          <Text fw="450" my="auto" ta="right">
-                            {name}
-                          </Text>
-                        </Stack>
-                      </Grid.Col>,
-                      <Grid.Col span={10} key={pubkey}>
-                        <CopyTextarea value={addressFromPublicKey(pubkey)} />
-                      </Grid.Col>,
-                    ])}
-                  </Grid>
-                ),
-              }}
-            />
-            <Group position="apart" mt="2rem" mx="lg">
-              <Button onClick={open}>Remove</Button>
-              <CopyButton value={configToSting(theMultisig)} timeout={1000}>
-                {({ copied, copy }) => (
-                  <Tooltip
-                    label={copied ? 'Copied' : null}
-                    opened={copied}
-                    withArrow
-                  >
-                    <Button onClick={copy}>Export</Button>
-                  </Tooltip>
-                )}
-              </CopyButton>
-            </Group>
-          </Box>
-        )}
-      </Box>
-    </Center>
+      {multisigName && theMultisig && (
+        <Box mx="auto" mt="2rem" w="100%">
+          <MyTable
+            data={{
+              Address: (
+                <Group position="center" mx="auto">
+                  <CopyTextarea value={buildMultisigAddress(theMultisig)} />
+                </Group>
+              ),
+              'Number of Signers': theMultisig.pubkeys.length,
+              'Required Signers': theMultisig.mOfN,
+              Signers: (
+                <Grid>
+                  {theMultisig.pubkeys.map(({ name, pubkey }) => [
+                    <Grid.Col span={2} key={pubkey}>
+                      <Stack h="100%">
+                        <Text fw="450" my="auto" ta="right">
+                          {name}
+                        </Text>
+                      </Stack>
+                    </Grid.Col>,
+                    <Grid.Col span={10} key={pubkey}>
+                      <CopyTextarea value={addressFromPublicKey(pubkey)} />
+                    </Grid.Col>,
+                  ])}
+                </Grid>
+              ),
+            }}
+          />
+          <Group position="apart" mt="2rem" mx="lg">
+            <Button onClick={open}>Remove</Button>
+            <CopyButton value={configToSting(theMultisig)} timeout={1000}>
+              {({ copied, copy }) => (
+                <Tooltip
+                  label={copied ? 'Copied' : null}
+                  opened={copied}
+                  withArrow
+                >
+                  <Button onClick={copy}>Export</Button>
+                </Tooltip>
+              )}
+            </CopyButton>
+          </Group>
+        </Box>
+      )}
+    </Box>
   )
 }
 

From d236b2f0471929012492a559fd720b9d189e3395 Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Fri, 25 Aug 2023 00:30:10 +0200
Subject: [PATCH 08/10] Improve multisig transaction

---
 src/components/Multisig/BuildMultisigTx.tsx | 60 +++++++++++++--------
 src/components/Multisig/ShowMultisig.tsx    |  2 +-
 src/components/Multisig/SignMultisigTx.tsx  | 17 +++---
 src/utils/utils.ts                          | 24 ++++++---
 4 files changed, 68 insertions(+), 35 deletions(-)

diff --git a/src/components/Multisig/BuildMultisigTx.tsx b/src/components/Multisig/BuildMultisigTx.tsx
index 85714aa..50ba66b 100644
--- a/src/components/Multisig/BuildMultisigTx.tsx
+++ b/src/components/Multisig/BuildMultisigTx.tsx
@@ -6,10 +6,12 @@ import {
   Chip,
   Grid,
   Group,
+  Input,
   Loader,
   NumberInput,
   RingProgress,
   Select,
+  Space,
   Stack,
   Stepper,
   Text,
@@ -36,7 +38,7 @@ import {
   waitTxSubmitted,
 } from './shared'
 import CopyTextarea from '../Misc/CopyTextarea'
-import { useAlephium, useExplorer } from '../../utils/utils'
+import { useAlephium, useExplorer, useExplorerFE } from '../../utils/utils'
 
 function BuildMultisigTx() {
   const form = useForm<{
@@ -146,6 +148,8 @@ function BuildMultisigTx() {
     }
   }, [form, setSubmitTxResult])
 
+  const explorerUrl = useExplorerFE()
+
   const selectedConfig = useMemo(() => {
     if (form.values.multisig === '') return undefined
     return allMultisig.find((c) => c.name === form.values.multisig)!
@@ -170,14 +174,15 @@ function BuildMultisigTx() {
   }, [form.values])
 
   return (
-    <Box maw={1200} mx="auto">
-      <Grid>
+    <Box maw={1200} mx="auto" mt="5rem">
+      <Grid columns={13}>
         <Grid.Col span={9}>
           {form.values.step === 0 ? (
-            <Box maw={900} mx="0" mt="xl" ta="left">
+            <Box mx="auto" mt="xl" ta="left">
               <Select
                 w={'20rem'}
                 mx="auto"
+                size="md"
                 placeholder="Select Multisig"
                 data={allMultisig.map((multisig) => ({
                   value: multisig.name,
@@ -190,8 +195,8 @@ function BuildMultisigTx() {
                 }}
               />
               {selectedConfig && (
-                <Stack mt="xl">
-                  <MyBox mx="xl">
+                <>
+                  <MyBox mx="xl" mt="xl">
                     <Text ta="left" fw="700">
                       Select {selectedConfig.mOfN}-of-
                       {selectedConfig.pubkeys.length} Signers
@@ -245,7 +250,7 @@ function BuildMultisigTx() {
 
                   {/* <Code block>{selectedSigners}</Code> */}
 
-                  <MyBox mx="xl">
+                  <MyBox mx="xl" mt="xl">
                     <Text ta="left" fw="700">
                       Send Assets
                     </Text>
@@ -275,16 +280,26 @@ function BuildMultisigTx() {
                     <Button onClick={() => form.reset()}>Reset</Button>
                     <Button onClick={buildTxCallback}>Build Transaction</Button>
                   </Group>
-                </Stack>
+                </>
               )}
             </Box>
           ) : form.values.step === 1 ? (
             <Box maw={800} mx="lg" mt="xl" ta="left">
-              <Text fw="700" mb="lg">
-                Copy and share the transaction to singers
+              <Text fw="700" size="lg">
+                Copy and share the transaction to signers
               </Text>
-              <CopyTextarea value={form.values.unsignedTx ?? ''} />
-              <Group mt="lg" position="apart" mx="2rem">
+              <Input.Description ta="left" size="md">
+                Signers should paste the transaction on the page {' '}
+                <Anchor
+                  href={`/alephium-toolkit/#/multisig/sign-tx`}
+                  target="_blank"
+                >
+                  sign-tx
+                </Anchor>
+              </Input.Description>
+              <Space h="lg" />
+              <CopyTextarea value={btoa(form.values.unsignedTx ?? '')} />
+              <Group mt="xl" position="apart" mx="lg">
                 <Button
                   onClick={() => {
                     form.setValues({ step: 0 })
@@ -302,7 +317,7 @@ function BuildMultisigTx() {
               </Group>
             </Box>
           ) : form.values.step === 2 ? (
-            <Box maw={900} mx="auto" mt="xl" ta="left">
+            <Box mx="auto" mt="xl" ta="left">
               <MyBox mx="lg">
                 <Text ta="left" fw="700">
                   Signatures
@@ -323,7 +338,7 @@ function BuildMultisigTx() {
                   {submitTxError}
                 </Text>
               )}
-              <Group mt="lg" position="apart" mx="2rem">
+              <Group mt="xl" position="apart" mx="2rem">
                 <Button
                   onClick={() => {
                     form.setValues({ step: 1 })
@@ -360,21 +375,24 @@ function BuildMultisigTx() {
                 )}
               </Group>
               {txSubmitted && (
-                <Group mt="lg" position="apart" mx="2rem">
+                <Stack mt="lg"  mx="2rem">
+                  <Text fw={400} fz="1.5rem" ta="center">Transaction Submitted</Text>
                   <Anchor
-                    href={`https://explorer.alephium.org/tx/${submitTxResult?.txId}`}
+                    href={`${explorerUrl}/tx/${submitTxResult?.txId}`}
                     target="_blank"
+                    mx="auto"
                   >
-                    {`https://explorer.alephium.org/tx/${submitTxResult?.txId}`}
+                    View on Explorer
                   </Anchor>
-                </Group>
+                  <Button mx="auto">Create more transactions</Button>
+                </Stack>
               )}
             </Box>
           )}
         </Grid.Col>
 
-        <Grid.Col span={3}>
-          <Box maw={400} mx="auto" mt="xl" ta="left">
+        <Grid.Col offset={1} span={3}>
+          <Box maw={400} mx="auto" mt="2.5rem" ta="left">
             <Stepper
               active={form.values.step}
               onStepClick={(s) => form.setValues({ step: s })}
@@ -388,7 +406,7 @@ function BuildMultisigTx() {
               />
               <Stepper.Step
                 label="Sign"
-                description="Share the transaction to all signers for signature"
+                description="Share the transaction to all signers for signatures"
                 allowStepSelect={form.values.step !== 3}
               />
               <Stepper.Step
diff --git a/src/components/Multisig/ShowMultisig.tsx b/src/components/Multisig/ShowMultisig.tsx
index 7d47401..f706cfa 100644
--- a/src/components/Multisig/ShowMultisig.tsx
+++ b/src/components/Multisig/ShowMultisig.tsx
@@ -61,7 +61,7 @@ function ShowMultiSig() {
   const navigate = useNavigate()
 
   return (
-    <Box maw={800} mx="auto" mt="5rem" ta={'left'}>
+    <Box maw={850} mx="auto" mt="5rem" ta={'left'}>
       <Group position="center">
         <Text fw="700" size="xl">
           Select Multisig
diff --git a/src/components/Multisig/SignMultisigTx.tsx b/src/components/Multisig/SignMultisigTx.tsx
index 149d7ef..4ec06c1 100644
--- a/src/components/Multisig/SignMultisigTx.tsx
+++ b/src/components/Multisig/SignMultisigTx.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Box, Button, Group, Mark, Text, Textarea } from '@mantine/core'
+import { Anchor, Box, Button, Group, Input, Mark, Text, Textarea } from '@mantine/core'
 import { useCallback, useState } from 'react'
 import { useWallet } from '@alephium/web3-react'
 import { MultisigConfig, getAllMultisigConfig, signMultisigTx } from './shared'
@@ -67,10 +67,13 @@ function SignMultisigTx() {
   }, [setLoadingConfig, setSignature, setMultisigConfig])
 
   return (
-    <Box maw={900} mx="auto" mt="xl">
-      <Text ta="left" fw="700">
+    <Box maw={900} mx="auto" mt="5rem">
+      <Text ta="left" fw="700" size="xl">
         Transaction to sign
       </Text>
+      <Input.Description ta="left" size='md'>
+        The transaction must be created by the multisig address.
+      </Input.Description>
       <Textarea
         placeholder="Paste your multisig transaction here"
         minRows={8}
@@ -80,8 +83,8 @@ function SignMultisigTx() {
           if (e.target.value === '') {
             setUnsignedTx(undefined)
           } else {
-            setUnsignedTx(e.target.value)
-            tryLoadMultisigConfig(e.target.value)
+            setUnsignedTx(atob(e.target.value))
+            tryLoadMultisigConfig(atob(e.target.value))
           }
         }}
       />
@@ -94,7 +97,7 @@ function SignMultisigTx() {
           The multisig address to sign is{' '}
           {multisigConfig ? (
             <Anchor
-              href={`/multisig/show?name=${multisigConfig.name}`}
+              href={`/alephium-toolkit/#/multisig/show?name=${multisigConfig.name}`}
               target="_blank"
             >
               {multisigConfig.name}
@@ -116,7 +119,7 @@ function SignMultisigTx() {
         </Box>
       ) : (
         <Group position="right" mt="xl">
-          <Button onClick={sign}>Sign MultiSig Transaction</Button>
+          <Button onClick={sign}>Sign Transaction</Button>
         </Group>
       )}
     </Box>
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 521ed22..4787e83 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -9,9 +9,12 @@ import { useLocalStorage } from '@mantine/hooks'
 const mainnet_node_url = 'https://wallet-v20.mainnet.alephium.org'
 const testnet_node_url = 'https://wallet-v20.testnet.alephium.org'
 const devnet_node_url = 'http://127.0.0.1:22973'
-const mainnet_explorer_url = 'https://backend-v113.mainnet.alephium.org'
-const testnet_explorer_url = 'https://backend-v113.testnet.alephium.org'
-const devnet_explorer_url = 'http://127.0.0.1:9090'
+const mainnet_explorer_backend_url = 'https://backend-v113.mainnet.alephium.org'
+const testnet_explorer_backend_url = 'https://backend-v113.testnet.alephium.org'
+const devnet_explorer_backend_url = 'http://127.0.0.1:9090'
+const mainnet_explorer_url = 'https://explorer.alephium.org'
+const testnet_explorer_url = 'https://testnet.alephium.org'
+const devnet_explorer_url = 'http://localhost:23000'
 
 const networkStorageKey = 'alephium-network'
 
@@ -39,13 +42,22 @@ export function useExplorer(): ExplorerProvider {
   const [network] = useNetworkId()
   return new ExplorerProvider(
     network === 'mainnet'
-      ? mainnet_explorer_url
+      ? mainnet_explorer_backend_url
       : network === 'testnet'
-      ? testnet_explorer_url
-      : devnet_explorer_url
+      ? testnet_explorer_backend_url
+      : devnet_explorer_backend_url
   )
 }
 
+export function useExplorerFE(): string {
+  const [network] = useNetworkId()
+  return network === 'mainnet'
+    ? mainnet_explorer_url
+    : network === 'testnet'
+    ? testnet_explorer_url
+    : devnet_explorer_url
+}
+
 export function getTokenMetadata(network: 'mainnet' | 'testnet'): TokenList {
   return network === 'mainnet' ? mainnetTokensMetadata : testnetTokensMetadata
 }

From 7b8fe3251ccc8ad982558eb893e09b0cecfdb173 Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Fri, 25 Aug 2023 01:12:25 +0200
Subject: [PATCH 09/10] Minor

---
 src/components/Wallet/WalletInfo.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Wallet/WalletInfo.tsx b/src/components/Wallet/WalletInfo.tsx
index 82e6931..6287de2 100644
--- a/src/components/Wallet/WalletInfo.tsx
+++ b/src/components/Wallet/WalletInfo.tsx
@@ -1,5 +1,5 @@
 import { useWallet } from '@alephium/web3-react'
-import { Center, rem } from '@mantine/core'
+import { Center, Text } from '@mantine/core'
 import MyTable from '../Misc/MyTable'
 import CopyText from '../Misc/CopyText'
 import { useEffect } from 'react'
@@ -22,7 +22,7 @@ function WalletInfo() {
       <MyTable
         w={900}
         data={{
-          'Network Type': account?.network,
+          'Network Type': <Text tt="capitalize">{account?.network}</Text>,
           'Address Group': account?.group,
           Address: <CopyText value={account?.address ?? '???'} />,
           'Public Key': <CopyText value={account?.publicKey ?? '???'} />,

From e10e08de0e7f266076aafe90d8ef7592fa1f9a4b Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Fri, 25 Aug 2023 01:31:24 +0200
Subject: [PATCH 10/10] Update sign multisig tx

---
 src/components/Misc/MyTable.tsx            | 13 ++++---
 src/components/Multisig/SignMultisigTx.tsx | 42 +++++++++++++---------
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/components/Misc/MyTable.tsx b/src/components/Misc/MyTable.tsx
index 6c7c9d7..52b6d91 100644
--- 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
index 4ec06c1..751e039 100644
--- 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,19 +94,28 @@ 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 ? (
@@ -113,12 +123,12 @@ function SignMultisigTx() {
           <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>
       )}