Merge pull request #2 from alephium/more-updates

More updates
alephium · Aug 24, 2023 · 4993ee1 · 4993ee1
2 parents 0d0e157 + e10e08d
commit 4993ee1
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 114 deletions.
diff --git 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() {

diff --git a/src/components/Misc/MyBox.tsx b/src/components/Misc/MyBox.tsx
@@ -8,13 +8,13 @@ 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',
         borderRadius: theme.radius.md,
-        boxShadow: theme.shadows.md,
+        boxShadow: theme.shadows.sm,
       })}
       {...others}
     >

diff --git a/src/components/Misc/MyTable.tsx b/src/components/Misc/MyTable.tsx
@@ -1,11 +1,12 @@
 import {
-  Box,
+  MantineNumberSize,
   SpacingValue,
   SystemProp,
   Table,
   Text,
   useMantineTheme,
 } from '@mantine/core'
+import MyBox from './MyBox'
 
 function Caption({ caption }: { caption: string }) {
   const theme = useMantineTheme()
@@ -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,29 +44,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={px ?? 'lg'} py={py ?? 'lg'} ta="center">
       <Table
-        horizontalSpacing={'xs'}
-        verticalSpacing={'xl'}
+        horizontalSpacing={horizontalSpacing ?? 'xs'}
+        verticalSpacing={verticalSpacing ?? 'xl'}
         fontSize={'md'}
-        highlightOnHover
         withColumnBorders
       >
         <tbody>{rows}</tbody>
       </Table>
-    </Box>
+    </MyBox>
   )
 }
 

diff --git a/src/components/Multisig/BuildMultiSigTx.tsx → src/components/Multisig/BuildMultisigTx.tsx b/src/components/Multisig/BuildMultiSigTx.tsx → 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/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,18 +144,21 @@ function CreateMultisig() {
   ))
 
   return (
-    <Box maw={900} mx="auto" mt="xl">
+    <Box maw={900} mx="auto" mt="5rem">
       <form onSubmit={onSubmit}>
-        <Group position="center" mb="xl">
-          <Text fw="700">Choose a Name</Text>
+        <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>
+        <MyBox mt="2rem" px="2rem" py="1.5rem">
           <Text ta="left" fw="700">
             Signers
           </Text>
@@ -194,8 +196,7 @@ function CreateMultisig() {
           </Group>
         </MyBox>
 
-        <Space h="lg" />
-        <MyBox>
+        <MyBox mt="xl" px="2rem" py="1.5rem">
           <Text weight={700} ta="left">
             Signatures Required
           </Text>
@@ -255,7 +256,7 @@ function CreateMultisig() {
         </MyBox>
         {/* </Group> */}
 
-        <Group position="right" mt="lg">
+        <Group position="right" mt="xl">
           <Button type="submit">Create Multisig</Button>
         </Group>
       </form>

diff --git a/src/components/Multisig/ImportMultiSig.tsx → src/components/Multisig/ImportMultisig.tsx b/src/components/Multisig/ImportMultiSig.tsx → 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="5rem">
+      <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}