feat: update Multisig view with Accordion (#313)

Co-authored-by: Thibaut Sardan <[email protected]> Co-authored-by: Thibaut Sardan <[email protected]>
ChainSafe · Sep 7, 2023 · 999f748 · 999f748
1 parent 1b7fe41
commit 999f748
Show file tree

Hide file tree

Showing 9 changed files with 286 additions and 77 deletions.
diff --git a/packages/ui/src/components/AccountDisplay.tsx b/packages/ui/src/components/AccountDisplay.tsx
@@ -8,7 +8,7 @@ import IdenticonBadge from './IdenticonBadge'
 import { useApi } from '../contexts/ApiContext'
 import { DeriveAccountInfo, DeriveAccountRegistration } from '@polkadot/api-derive/types'
 import IdentityIcon from './IdentityIcon'
-import { useGetBalance } from '../hooks/useGetBalance'
+import Balance from './library/Balance'
 import { useGetEncodedAddress } from '../hooks/useGetEncodedAddress'
 
 interface Props {
@@ -29,7 +29,6 @@ const AccountDisplay = ({
   iconSize = 'medium'
 }: Props) => {
   const { getNamesWithExtension } = useAccountNames()
-  const { balanceFormatted } = useGetBalance({ address })
   const localName = useMemo(() => getNamesWithExtension(address), [address, getNamesWithExtension])
   const [identity, setIdentity] = useState<DeriveAccountRegistration | null>(null)
   const { api } = useApi()
@@ -97,7 +96,7 @@ const AccountDisplay = ({
         </AddressStyled>
         {withBalance && (
           <Box>
-            <BalanceStyled>{balanceFormatted}</BalanceStyled>
+            <Balance address={address} />
           </Box>
         )}
       </BoxStyled>
@@ -142,13 +141,6 @@ const NameStyled = styled('div')`
   white-space: nowrap;
 `
 
-const BalanceStyled = styled('div')`
-  display: flex;
-  color: ${({ theme }) => theme.custom.text.addressColorLightGray};
-  font-size: small;
-  margin-top: 4px;
-`
-
 export default styled(AccountDisplay)`
   display: flex;
   align-items: center;

diff --git a/packages/ui/src/components/SuccessCreation.tsx b/packages/ui/src/components/SuccessCreation.tsx
@@ -41,8 +41,7 @@ const SuccessCreation = ({ className }: Props) => {
   )
 }
 
-export default styled(SuccessCreation)(
-  ({ theme }) => `
+export default styled(SuccessCreation)`
   display: flex;
   flex-direction: column;
   align-content: center;
@@ -51,17 +50,20 @@ export default styled(SuccessCreation)(
   .icon {
     animation: spin 10s linear infinite;
     @keyframes spin {
-                 0% { transform: rotate(-360deg); }
-                 100% { transform: rotate(0deg); }
-            }
-            
+      0% {
+        transform: rotate(-360deg);
+      }
+      100% {
+        transform: rotate(0deg);
+      }
+    }
+
     font-size: 10rem;
-    color: ${theme.custom.text.addressColorLightGray};
+    color: ${({ theme }) => theme.custom.text.addressColorLightGray};
     text-align: center;
   }
 
   .explainer {
     margin-left: 1rem;
   }
 `
-)
diff --git a/packages/ui/src/components/library/Balance.tsx b/packages/ui/src/components/library/Balance.tsx
@@ -0,0 +1,21 @@
+import { styled } from '@mui/material/styles'
+import { useGetBalance } from '../../hooks/useGetBalance'
+
+interface BalanceProps {
+  address: string
+}
+
+const Balance = ({ address }: BalanceProps) => {
+  const { balanceFormatted } = useGetBalance({ address })
+
+  return <BalanceStyled>{balanceFormatted}</BalanceStyled>
+}
+
+const BalanceStyled = styled('div')`
+  display: flex;
+  color: ${({ theme }) => theme.custom.gray[700]};
+  font-size: 1rem;
+  margin-top: 4px;
+`
+
+export default Balance
diff --git a/packages/ui/src/components/library/index.tsx b/packages/ui/src/components/library/index.tsx
@@ -5,9 +5,11 @@ import TextFieldStyled from './TextFieldStyled'
 import TextFieldLargeStyled from './TextFieldLargeStyled'
 import Select from './Select'
 import Autocomplete from './Autocomplete'
+import Balance from './Balance'
 
 export {
   Autocomplete,
+  Balance,
   Button,
   ButtonWithIcon,
   Link,

diff --git a/packages/ui/src/pages/Home/Home.tsx b/packages/ui/src/pages/Home/Home.tsx
@@ -162,15 +162,17 @@ const Home = ({ className }: HomeProps) => {
         item
         alignItems="center"
         xs={12}
-        md={6}
+        md={5}
+        lg={4}
       >
         <MultisigView />
       </Grid>
       {multiProxyList.length > 0 && (
         <Grid
           item
           xs={12}
-          md={6}
+          md={7}
+          lg={8}
         >
           <TransactionsWrapperStyled>
             <h3>Transactions</h3>

diff --git a/packages/ui/src/pages/Home/MultisigAccordion.tsx b/packages/ui/src/pages/Home/MultisigAccordion.tsx
@@ -0,0 +1,139 @@
+import { Accordion as AccordionMui, AccordionDetails, AccordionSummary, Paper } from '@mui/material'
+import { HiOutlineChevronDown } from 'react-icons/hi2'
+import { styled } from '@mui/material/styles'
+import React from 'react'
+import AccountDisplay from '../../components/AccountDisplay'
+import { MultisigAggregated } from '../../contexts/MultiProxyContext'
+
+interface AccordionProps {
+  multisig: MultisigAggregated
+}
+
+const MultisigAccordion = ({ multisig }: AccordionProps) => {
+  return (
+    <AccordionMuiStyled TransitionProps={{ timeout: { appear: 300, enter: 300, exit: 0 } }}>
+      <AccordionSummary
+        expandIcon={
+          <HiOutlineChevronDown
+            color="black"
+            size="1rem"
+          />
+        }
+      >
+        <SignatoriesHeadingStyled>
+          Signatories ({multisig?.signatories?.length})
+        </SignatoriesHeadingStyled>
+      </AccordionSummary>
+      <AccordionDetails>
+        <MultisigPaperStyled key={multisig.address}>
+          <AddressListStyled>
+            {multisig?.signatories?.map((signatory) => (
+              <li key={signatory}>
+                <AccountDisplay address={signatory} />
+              </li>
+            ))}
+          </AddressListStyled>
+        </MultisigPaperStyled>
+      </AccordionDetails>
+    </AccordionMuiStyled>
+  )
+}
+
+const AccordionMuiStyled = styled(AccordionMui)`
+  &.MuiPaper-root {
+    &.Mui-expanded {
+      background: ${({ theme }) => theme.custom.gray[200]};
+      border-radius: ${({ theme }) => theme.custom.borderRadius};
+      border: 1px solid ${({ theme }) => theme.custom.text.borderColor};
+      padding: 0 0.75rem;
+      margin: 0;
+
+      .MuiAccordionSummary-root,
+      .MuiCollapse-root,
+      .MuiPaper-root {
+        background: ${({ theme }) => theme.custom.gray[200]};
+      }
+
+      .MuiAccordionSummary-content {
+        padding: 0;
+      }
+
+      .MuiAccordionSummary-root {
+        border: none;
+      }
+
+      .MuiAccordionDetails-root {
+        border: none;
+      }
+
+      .MuiButtonBase-root {
+        padding-right: 0;
+      }
+    }
+  }
+
+  .MuiAccordionSummary-root {
+    border-radius: ${({ theme }) => theme.custom.borderRadius};
+    border: 1px solid ${({ theme }) => theme.custom.text.borderColor};
+  }
+
+  .MuiButtonBase-root {
+    min-height: auto !important;
+    padding: 0.75rem 0.75rem 0.75rem 0;
+    margin: 0;
+    border-radius: ${({ theme }) => theme.custom.borderRadius};
+  }
+
+  .MuiAccordionDetails-root {
+    padding: 0;
+    border: none;
+  }
+
+  .MuiAccordionSummary-content {
+    margin: 0;
+    padding: 0 0.75rem;
+  }
+
+  .MuiPaper-root {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  .Mui-expanded {
+    min-height: auto !important;
+    margin: 0 !important;
+  }
+
+  ul {
+    padding: 0.75rem 0 0 0;
+    margin: 0;
+  }
+`
+
+const SignatoriesHeadingStyled = styled('h4')`
+  color: ${({ theme }) => theme.custom.gray[700]};
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0;
+`
+
+const MultisigPaperStyled = styled(Paper)`
+  padding: 0.5rem 0;
+  margin-bottom: 0.5rem;
+  box-shadow: none;
+  border: 1px solid ${({ theme }) => theme.custom.text.borderColor};
+  border-radius: ${({ theme }) => theme.custom.borderRadius};
+`
+
+const AddressListStyled = styled('ul')`
+  padding-inline-start: 0;
+  margin-block-end: 0;
+  list-style-type: none;
+
+  > li {
+    margin-bottom: 1rem;
+  }
+`
+
+export default MultisigAccordion
diff --git a/packages/ui/src/pages/Home/MultisigActionMenu.tsx b/packages/ui/src/pages/Home/MultisigActionMenu.tsx
@@ -43,7 +43,7 @@ const MultisigActionMenu = ({ withSendButton = true }: MultisigActionMenuProps)
           aria-label="send"
           onClick={() => setIsSendModalOpen(true)}
         >
-          New transaction
+          New Transaction
         </Button>
       )}
       <OptionsMenu options={options} />