feat: update header view for solo multisig (#346)

Co-authored-by: Thibaut Sardan <[email protected]> Co-authored-by: Thibaut Sardan <[email protected]>
ChainSafe · Sep 19, 2023 · f414a5d · f414a5d
1 parent a393b46
commit f414a5d
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 93 deletions.
diff --git a/packages/ui/src/components/AccountDisplay.tsx b/packages/ui/src/components/AccountDisplay.tsx
@@ -152,6 +152,7 @@ const NameStyled = styled('div')`
 export default styled(AccountDisplay)`
   display: flex;
   align-items: center;
+  margin-left: 0.5rem;
 
   .identityBadge {
     margin-right: 0.3rem;

diff --git a/packages/ui/src/components/OptionsMenu.tsx b/packages/ui/src/components/OptionsMenu.tsx
@@ -1,11 +1,10 @@
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
-import { ListItemIcon, ListItemText, Theme } from '@mui/material'
+import { ListItemIcon, ListItemText } from '@mui/material'
 import { MouseEvent, ReactNode, useCallback, useState } from 'react'
 import { styled } from '@mui/material/styles'
 import { HiEllipsisVertical as MoreVertIcon } from 'react-icons/hi2'
 import { ButtonWithIcon } from './library'
-import useMediaQuery from '@mui/material/useMediaQuery'
 
 export interface MenuOption {
   text: string
@@ -18,10 +17,10 @@ const ITEM_HEIGHT = 48
 interface Props {
   className?: string
   options: MenuOption[]
+  menuButtonBorder?: CSSStyleDeclaration['border']
 }
 
-const OptionsMenu = ({ className, options }: Props) => {
-  const matchesMediumScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'))
+const OptionsMenu = ({ className, options, menuButtonBorder }: Props) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const open = Boolean(anchorEl)
   const handleMenuClick = useCallback((event: MouseEvent<HTMLElement>) => {
@@ -43,14 +42,15 @@ const OptionsMenu = ({ className, options }: Props) => {
   return (
     <div className={className}>
       <ButtonWithIconStyled
+        border={menuButtonBorder}
         aria-label="more"
         id="long-button"
         aria-controls={open ? 'long-menu' : undefined}
         aria-expanded={open ? 'true' : undefined}
         aria-haspopup="true"
         onClick={handleMenuClick}
       >
-        {matchesMediumScreen ? <MoreVertIcon /> : 'Settings'}
+        <MoreVertIcon />
       </ButtonWithIconStyled>
       <Menu
         id="long-menu"
@@ -88,8 +88,9 @@ const ButtonWithIconStyled = styled(ButtonWithIcon)`
   padding: 0.5rem;
   width: 100%;
   border-radius: 0.5rem;
+  border: ${({ theme, border }) => border || `1px solid ${theme.custom.text.borderColor}`};
 
-  @media (min-width: ${(props) => props.theme.breakpoints.values.md}px) {
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     width: 2.25rem;
   }
 

diff --git a/packages/ui/src/components/library/Balance.tsx b/packages/ui/src/components/library/Balance.tsx
@@ -15,7 +15,6 @@ 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/Button.tsx b/packages/ui/src/components/library/Button.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'link'
+  border?: CSSStyleDeclaration['border']
 }
 
 export const Button = styled('button')<ButtonProps>`
@@ -87,10 +88,13 @@ Button.defaultProps = {
   variant: 'secondary'
 }
 
-export const ButtonWithIcon = styled(Button)`
+export const ButtonWithIcon = styled(Button)<ButtonProps>`
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: none;
+  border: none;
+  color: ${({ theme }) => theme.custom.text.primary};
 
   svg {
     margin: 0 4px;

diff --git a/...ui/src/pages/Home/PureProxyHeaderView.tsx → packages/ui/src/pages/Home/HeaderView.tsx b/...ui/src/pages/Home/PureProxyHeaderView.tsx → packages/ui/src/pages/Home/HeaderView.tsx
@@ -2,20 +2,21 @@ import AccountDisplay from '../../components/AccountDisplay'
 import { AccountBadge } from '../../types'
 import MultisigActionMenu from './MultisigActionMenu'
 import { styled } from '@mui/material/styles'
-import { useGetBalance } from '../../hooks/useGetBalance'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
-import { ButtonWithIcon } from '../../components/library'
+import { Balance, ButtonWithIcon } from '../../components/library'
 import { HiOutlineArrowLongRight } from 'react-icons/hi2'
 import { useNavigate } from 'react-router-dom'
+import { useMemo } from 'react'
 
-const PureProxyHeaderView = () => {
+const HeaderView = () => {
   const navigate = useNavigate()
   const { selectedMultiProxy, selectedHasProxy, selectedIsWatched } = useMultiProxy()
-  const { balanceFormatted: pureProxyBalance } = useGetBalance({
-    address: selectedMultiProxy?.proxy || ''
-  })
 
-  if (!selectedHasProxy) return null
+  const selectedAddress = useMemo((): string => {
+    return String(
+      selectedHasProxy ? selectedMultiProxy?.proxy : selectedMultiProxy?.multisigs[0].address
+    )
+  }, [selectedHasProxy, selectedMultiProxy])
 
   return (
     <PureProxyWrapper>
@@ -31,15 +32,19 @@ const PureProxyHeaderView = () => {
       <PureHeaderStyled>
         <AccountDisplayStyled
           iconSize={'large'}
-          address={selectedMultiProxy?.proxy || ''}
-          badge={AccountBadge.PURE}
+          address={selectedAddress}
+          badge={selectedHasProxy ? AccountBadge.PURE : AccountBadge.MULTI}
         />
-        <BalanceStyled>
-          <BalanceHeaderStyled>Balance</BalanceHeaderStyled>
-          <BalanceAmountStyled>{pureProxyBalance}</BalanceAmountStyled>
-        </BalanceStyled>
+        <BalanceStyledWrapper>
+          <BalanceStyled>
+            <BalanceHeaderStyled>Balance</BalanceHeaderStyled>
+            <BalanceAmountStyled>
+              <Balance address={selectedAddress} />
+            </BalanceAmountStyled>
+          </BalanceStyled>
+        </BalanceStyledWrapper>
         <BoxStyled>
-          <MultisigActionMenu withSendButton={!selectedIsWatched} />
+          <MultisigActionMenu withNewTransactionButton={!selectedIsWatched} />
         </BoxStyled>
       </PureHeaderStyled>
     </PureProxyWrapper>
@@ -66,16 +71,20 @@ const OverviewWrapper = styled('div')`
 
 const PureHeaderStyled = styled('div')`
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
+  justify-content: center;
   margin: 0 0 1rem 0.5rem;
-  padding: 1rem 1.3rem 1rem 0.625rem;
+  padding: 1rem 1.3rem 0 1rem;
 
   @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: space-between;
   }
 
   & > div:first-of-type {
-    margin: auto;
+    margin: auto auto 1rem auto;
 
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       margin: initial;
@@ -84,30 +93,33 @@ const PureHeaderStyled = styled('div')`
 
   & > div:nth-of-type(2) {
     display: flex;
-    justify-content: center;
+    flex-direction: row-reverse;
+    justify-self: flex-end;
+    justify-content: space-between !important;
+    align-items: center;
     align-self: center;
-    flex-direction: column;
     flex: 1;
-    margin-top: 1rem;
     text-align: center;
 
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       text-align: initial;
       justify-content: initial;
       align-self: flex-end;
-      flex: 0;
+      flex: 1;
       margin: 0;
     }
   }
 
   & > div:last-of-type {
-    flex: 1;
+    flex: 0;
     justify-content: center;
-    align-self: flex-end;
-    margin-top: 16px;
+    align-self: center;
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
 
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       justify-content: flex-end;
+      align-self: flex-end;
       margin-top: 0;
     }
   }
@@ -131,22 +143,30 @@ const AccountDisplayStyled = styled(AccountDisplay)`
   }
 
   & > div:last-child {
-    margin: 1.44rem 1.37rem 0.75rem 0.87rem;
+    margin: 1.44rem 1.37rem 0.75rem 0.5rem;
   }
 `
 
+const BalanceStyledWrapper = styled('div')`
+  align-self: flex-end;
+  flex-direction: row;
+`
+
 const BalanceStyled = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  max-width: 19rem;
+  width: 100%;
   padding: 0.5rem 1rem;
-  background: ${({ theme }) => theme.custom.gray[100]};
+  background: ${({ theme }) => theme.custom.gray[200]};
   border-radius: ${({ theme }) => theme.custom.borderRadius};
   border: 1px solid ${({ theme }) => theme.custom.gray[400]};
-  align-self: flex-end;
 `
 
 const BalanceHeaderStyled = styled('div')`
   font-size: 1rem;
   color: ${({ theme }) => theme.custom.gray[700]};
-  margin-right: 0.25rem;
+  margin-right: 1rem;
 `
 
 const BalanceAmountStyled = styled('div')`
@@ -159,7 +179,14 @@ const BoxStyled = styled('div')`
   display: flex;
   align-items: center;
   align-self: flex-end;
-  padding-left: 1rem;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    padding-left: 1rem;
+  }
+
+  & > :last-child {
+    margin-left: 0.25rem;
+  }
 `
 
-export default PureProxyHeaderView
+export default HeaderView
diff --git a/packages/ui/src/pages/Home/Home.tsx b/packages/ui/src/pages/Home/Home.tsx
@@ -12,12 +12,12 @@ import { useAccounts } from '../../contexts/AccountsContext'
 import { useWatchedAddresses } from '../../contexts/WatchedAddressesContext'
 import { useApi } from '../../contexts/ApiContext'
 import { useNetwork } from '../../contexts/NetworkContext'
-import PureProxyHeaderView from './PureProxyHeaderView'
+import HeaderView from './HeaderView'
 import MultisigView from './MultisigView'
 import TransactionList from '../../components/Transactions/TransactionList'
-// import CurrentReferendumBanner from '../../components/CurrentReferendumBanner'
 import { ConnectOrWatch } from '../../components/ConnectOrWatch'
 import { HiOutlineArrowTopRightOnSquare as LaunchIcon } from 'react-icons/hi2'
+// import CurrentReferendumBanner from '../../components/CurrentReferendumBanner'
 
 interface HomeProps {
   className?: string
@@ -28,12 +28,7 @@ const Home = ({ className }: HomeProps) => {
   const [searchParams, setSearchParams] = useSearchParams({
     creationInProgress: 'false'
   })
-  const {
-    isLoading,
-    multiProxyList,
-    selectedMultiProxy,
-    error: multisigQueryError
-  } = useMultiProxy()
+  const { isLoading, multiProxyList, error: multisigQueryError } = useMultiProxy()
   const { selectedNetworkInfo } = useNetwork()
   const { api } = useApi()
   const [showNewMultisigAlert, setShowNewMultisigAlert] = useState(false)
@@ -162,7 +157,7 @@ const Home = ({ className }: HomeProps) => {
         alignItems="center"
         xs={12}
       >
-        {selectedMultiProxy && <PureProxyHeaderView />}
+        <HeaderView />
       </Grid>
       <Grid
         item

diff --git a/packages/ui/src/pages/Home/MultisigAccordion.tsx b/packages/ui/src/pages/Home/MultisigAccordion.tsx
@@ -17,6 +17,7 @@ const MultisigAccordion = ({ multisig }: AccordionProps) => {
           <HiOutlineChevronDown
             color="black"
             size="1rem"
+            strokeWidth="2"
           />
         }
       >
@@ -78,6 +79,7 @@ const AccordionMuiStyled = styled(AccordionMui)`
   }
 
   .MuiButtonBase-root {
+    background-color: ${({ theme }) => theme.custom.gray[200]};
     min-height: auto !important;
     padding: 0.75rem 0.75rem 0.75rem 0;
     margin: 0;
@@ -101,8 +103,8 @@ const AccordionMuiStyled = styled(AccordionMui)`
   }
 
   .Mui-expanded {
-    min-height: auto !important;
     margin: 0 !important;
+    background-color: ${({ theme }) => theme.custom.gray[200]};
   }
 
   ul {

diff --git a/packages/ui/src/pages/Home/MultisigActionMenu.tsx b/packages/ui/src/pages/Home/MultisigActionMenu.tsx
@@ -9,10 +9,14 @@ import { HiOutlineArrowTopRightOnSquare as LaunchIcon } from 'react-icons/hi2'
 import { useGetSubscanLinks } from '../../hooks/useSubscanLink'
 
 interface MultisigActionMenuProps {
-  withSendButton?: boolean
+  withNewTransactionButton?: boolean
+  menuButtonBorder?: CSSStyleDeclaration['border']
 }
 
-const MultisigActionMenu = ({ withSendButton = true }: MultisigActionMenuProps) => {
+const MultisigActionMenu = ({
+  withNewTransactionButton = true,
+  menuButtonBorder
+}: MultisigActionMenuProps) => {
   const { selectedHasProxy, selectedIsWatched, selectedMultiProxy } = useMultiProxy()
   const { setIsEditModalOpen, setIsChangeMultiModalOpen, setIsSendModalOpen } = useModals()
   const { getSubscanAccountLink } = useGetSubscanLinks()
@@ -45,28 +49,42 @@ const MultisigActionMenu = ({ withSendButton = true }: MultisigActionMenuProps)
         onClick: () => setIsChangeMultiModalOpen(true)
       })
 
+    // If we are NOT rendering "new transaction button" and is it's NOT a Watched account,
+    // the "Send transaction" item will appear in the list menu
+    // TODO: Individual transaction button for each mulisig
+    // if (!withNewTransactionButton && !selectedIsWatched) {
+    //   opts.unshift({
+    //     text: 'Send transaction',
+    //     icon: <HiOutlinePaperAirplane size={20} />,
+    //     onClick: () => setIsSendModalOpen(true)
+    //   })
+    // }
+
     return opts
   }, [
-    getSubscanAccountLink,
     selectedHasProxy,
     selectedIsWatched,
+    getSubscanAccountLink,
     selectedMultiProxy,
     setIsChangeMultiModalOpen,
     setIsEditModalOpen
   ])
 
   return (
     <>
-      {withSendButton && (
+      {withNewTransactionButton && (
         <Button
           variant="primary"
           aria-label="send"
           onClick={() => setIsSendModalOpen(true)}
         >
-          New Transaction
+          New transaction
         </Button>
       )}
-      <OptionsMenu options={options} />
+      <OptionsMenu
+        menuButtonBorder={menuButtonBorder}
+        options={options}
+      />
     </>
   )
 }