add multisig asset view

ChainSafe · Jan 27, 2025 · 3460986 · 3460986
1 parent 9c2d5d8
commit 3460986
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 38 deletions.
diff --git a/packages/ui/src/components/AccountDisplay/AccountDisplay.tsx b/packages/ui/src/components/AccountDisplay/AccountDisplay.tsx
@@ -5,7 +5,6 @@ import { AccountBadge, IconSizeVariant } from '../../types'
 import { getDisplayAddress } from '../../utils/getDisplayAddress'
 import IdenticonBadge from '../IdenticonBadge'
 import IdentityIcon from '../IdentityIcon'
-import Balance from '../library/Balance'
 import { useGetEncodedAddress } from '../../hooks/useGetEncodedAddress'
 import { IconButton } from '@mui/material'
 import {
@@ -26,7 +25,6 @@ interface Props {
   className?: string
   badge?: AccountBadge
   withName?: boolean
-  withBalance?: boolean
   iconSize?: IconSizeVariant
   canEdit?: boolean
   canCopy?: boolean
@@ -37,7 +35,6 @@ const AccountDisplay = ({
   address,
   badge,
   withName = true,
-  withBalance = false,
   iconSize = 'medium',
   canEdit = false,
   canCopy = false
@@ -152,11 +149,6 @@ const AccountDisplay = ({
             </CopyIconWrapperStyled>
           )}
         </AddressStyled>
-        {withBalance && (
-          <Box>
-            <Balance address={address} />
-          </Box>
-        )}
       </BoxStyled>
     </div>
   )

diff --git a/packages/ui/src/components/EasySetup/BalancesTransfer.tsx b/packages/ui/src/components/EasySetup/BalancesTransfer.tsx
@@ -212,6 +212,7 @@ const BalancesTransfer = ({ className, onSetExtrinsic, onSetErrorMessage, from }
         fullWidth
         menuItems={assetList.map(({ logo, symbol }) => ({ value: symbol, logo }))}
         testId="ah-assets"
+        upperCase
       />
     )
   }, [assetList, onAssetSelection, selectedAsset])
@@ -251,11 +252,15 @@ const BalancesTransfer = ({ className, onSetExtrinsic, onSetErrorMessage, from }
 }
 
 const SelectStyled = styled(Select)`
+  text-transform: uppercase;
   outline: none !important;
   .MuiSelect-select {
     margin-right: -1rem;
     padding-right: 3rem !important;
   }
+  li.MuiMenuItem-root {
+    text-transform: uppercase;
+  }
 `
 
 const TextFieldStyled = styled(TextField)`

diff --git a/packages/ui/src/components/library/AssetBalance.tsx b/packages/ui/src/components/library/AssetBalance.tsx
@@ -14,11 +14,11 @@ const AssetBalance = ({ address, assetId, logo }: BalanceProps) => {
 
   return (
     <BalanceStyled data-cy={`asset-balance-${assetId}`}>
+      {balanceFormatted}
       <ImgStyled
         src={logo}
         alt="balance"
       />
-      {balanceFormatted}
     </BalanceStyled>
   )
 }
@@ -28,10 +28,12 @@ const BalanceStyled = styled('div')`
   color: ${({ theme }) => theme.custom.gray[700]};
   font-size: 1rem;
   margin-top: 0.5rem;
+  text-transform: uppercase;
+  justify-content: flex-end;
 `
 
 const ImgStyled = styled('img')`
-  margin-right: 0.5rem;
+  margin-left: 0.5rem;
   width: 1.5rem;
 `
 export default AssetBalance
diff --git a/packages/ui/src/components/library/Balance.tsx b/packages/ui/src/components/library/Balance.tsx
@@ -4,22 +4,19 @@ import { useNetwork } from '../../contexts/NetworkContext'
 
 interface BalanceProps {
   address: string
-  withIcon?: boolean
 }
 
-const Balance = ({ address, withIcon = false }: BalanceProps) => {
+const Balance = ({ address }: BalanceProps) => {
   const { balanceFormatted } = useGetBalance({ address })
   const { selectedNetworkInfo } = useNetwork()
 
   return (
     <BalanceStyled data-cy="asset-balance-native">
-      {withIcon && (
-        <ImgStyled
-          src={selectedNetworkInfo?.nativeAssetLogo || selectedNetworkInfo?.networkLogo}
-          alt="balance"
-        />
-      )}
       {balanceFormatted}
+      <ImgStyled
+        src={selectedNetworkInfo?.nativeAssetLogo || selectedNetworkInfo?.networkLogo}
+        alt="balance"
+      />
     </BalanceStyled>
   )
 }
@@ -28,10 +25,11 @@ const BalanceStyled = styled('div')`
   display: flex;
   color: ${({ theme }) => theme.custom.gray[700]};
   font-size: 1rem;
+  justify-content: flex-end;
 `
 
 const ImgStyled = styled('img')`
-  margin-right: 0.5rem;
+  margin-left: 0.5rem;
   width: 1.5rem;
 `
 export default Balance
diff --git a/packages/ui/src/components/library/Select.tsx b/packages/ui/src/components/library/Select.tsx
@@ -23,6 +23,7 @@ interface SelectProps {
   sx?: SxProps<Theme>
   testId?: string
   className?: string
+  upperCase?: boolean
 }
 
 const Select = ({
@@ -35,7 +36,8 @@ const Select = ({
   inputSize = 'medium',
   children,
   sx,
-  testId
+  testId,
+  upperCase = false
 }: SelectProps) => {
   const matchesMediumScreen = !useMediaQuery((theme: Theme) => theme.breakpoints.up('md'))
   const minifiedVersion = minified ?? matchesMediumScreen
@@ -55,6 +57,7 @@ const Select = ({
       {menuItems
         ? menuItems.map(({ value, logo }) => (
             <MenuItemStyled
+              className={upperCase ? 'upperCase' : ''}
               key={value}
               value={value}
               data-cy={`select-option-${testId}-${value.toLocaleLowerCase().replace(/ /g, '-')}`}
@@ -148,6 +151,10 @@ const MenuItemStyled = styled(MenuItem)`
   padding: 0.75rem;
   max-width: 9.1875rem;
   box-sizing: content-box;
+
+  &.upperCase {
+    text-transform: uppercase;
+  }
 `
 
 const ImgStyled = styled('img')<

diff --git a/packages/ui/src/hooks/useGetAssetBalance.tsx b/packages/ui/src/hooks/useGetAssetBalance.tsx
@@ -12,7 +12,7 @@ interface useGetBalanceProps {
 
 export const useGetAssetBalance = ({
   address,
-  numberAfterComma = 4,
+  numberAfterComma = 2,
   assetId
 }: useGetBalanceProps) => {
   const ctx = useApi()

diff --git a/packages/ui/src/hooks/useGetBalance.tsx b/packages/ui/src/hooks/useGetBalance.tsx
@@ -7,7 +7,7 @@ interface useGetBalanceProps {
   numberAfterComma?: number
 }
 
-export const useGetBalance = ({ address, numberAfterComma = 4 }: useGetBalanceProps) => {
+export const useGetBalance = ({ address, numberAfterComma = 2 }: useGetBalanceProps) => {
   const { api, chainInfo } = useApi()
   const [balance, setBalance] = useState<bigint | null>(null)
   const [balanceFormatted, setFormattedBalance] = useState<string | null>(null)

diff --git a/packages/ui/src/pages/Home/HeaderView.tsx b/packages/ui/src/pages/Home/HeaderView.tsx
@@ -1,25 +1,22 @@
 import AccountDisplay from '../../components/AccountDisplay/AccountDisplay'
-import { AccountBadge } from '../../types'
+import { AccountBadge, assetHubKeys } from '../../types'
 import MultisigActionMenu from './MultisigActionMenu'
 import { styled } from '@mui/material/styles'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import { Balance, ButtonWithIcon } from '../../components/library'
 import { HiOutlineArrowLongRight } from 'react-icons/hi2'
 import { createSearchParams, useNavigate, useSearchParams } from 'react-router'
 import { useMemo } from 'react'
-import { useNetwork } from '../../contexts/NetworkContext'
 import AssetBalance from '../../components/library/AssetBalance'
 import { AH_SUPPORTED_ASSETS } from '../../constants'
+import { isContextIn, useApi } from '../../contexts/ApiContext'
 
 const HeaderView = () => {
-  const { selectedNetwork } = useNetwork()
+  const ctx = useApi()
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()
   const { selectedMultiProxy, selectedHasProxy, selectedIsWatched } = useMultiProxy()
-  const isAssetHub = useMemo(
-    () => selectedNetwork === 'asset-hub-polkadot' || selectedNetwork === 'asset-hub-kusama',
-    [selectedNetwork]
-  )
+  const isAssetHub = useMemo(() => isContextIn(ctx, assetHubKeys), [ctx])
 
   const selectedAddress = useMemo(() => {
     return selectedHasProxy ? selectedMultiProxy?.proxy : selectedMultiProxy?.multisigs[0].address
@@ -55,10 +52,7 @@ const HeaderView = () => {
             <BalanceStyled>
               <BalanceHeaderStyled>Balance</BalanceHeaderStyled>
               <BalanceAmountStyled data-cy="label-account-balance">
-                <Balance
-                  address={selectedAddress}
-                  withIcon={isAssetHub}
-                />
+                <Balance address={selectedAddress} />
                 {isAssetHub &&
                   AH_SUPPORTED_ASSETS.map(({ assetId, logo }) => (
                     <AssetBalance

diff --git a/packages/ui/src/pages/Home/MultisigView.tsx b/packages/ui/src/pages/Home/MultisigView.tsx
@@ -1,15 +1,21 @@
 import AccountDisplay from '../../components/AccountDisplay/AccountDisplay'
-import { AccountBadge } from '../../types'
+import { AccountBadge, assetHubKeys } from '../../types'
 // import MultisigActionMenu from './MultisigActionMenu'
 import { styled } from '@mui/material/styles'
 import { Chip } from '@mui/material'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import MultisigAccordion from './MultisigAccordion'
 import { Balance } from '../../components/library'
 import { camelcaseToString } from '../../utils/camelcasetoString'
+import { useMemo } from 'react'
+import { isContextIn, useApi } from '../../contexts/ApiContext'
+import { AH_SUPPORTED_ASSETS } from '../../constants'
+import AssetBalance from '../../components/library/AssetBalance'
 
 const MultisigView = () => {
+  const ctx = useApi()
   const { selectedMultiProxy, selectedHasProxy } = useMultiProxy()
+  const isAssetHub = useMemo(() => isContextIn(ctx, assetHubKeys), [ctx])
 
   return (
     <MultisigViewWrapperStyled>
@@ -38,7 +44,6 @@ const MultisigView = () => {
                     <AccountDisplay
                       address={multisig.address || ''}
                       badge={AccountBadge.MULTI}
-                      withBalance={false}
                       canEdit
                       canCopy
                     />
@@ -57,8 +62,19 @@ const MultisigView = () => {
                   )}
                   {selectedHasProxy && (
                     <ListElement data-cy="list-item-balance">
-                      <ListFieldText>Balance</ListFieldText>
-                      <Balance address={multisig.address} />
+                      <ListFieldText className="isBalance">Balance</ListFieldText>
+                      <BalanceAmountStyled>
+                        <Balance address={multisig.address} />
+                        {isAssetHub &&
+                          AH_SUPPORTED_ASSETS.map(({ assetId, logo }) => (
+                            <AssetBalance
+                              key={assetId}
+                              address={multisig.address}
+                              assetId={assetId}
+                              logo={logo}
+                            />
+                          ))}
+                      </BalanceAmountStyled>
                     </ListElement>
                   )}
                 </List>
@@ -71,6 +87,12 @@ const MultisigView = () => {
   )
 }
 
+const BalanceAmountStyled = styled('div')`
+  font-size: 1rem;
+  color: ${({ theme }) => theme.custom.gray[800]};
+  white-space: nowrap;
+`
+
 const HeaderStyled = styled('header')`
   display: flex;
   align-items: center;
@@ -127,7 +149,6 @@ const ListElement = styled('div')`
   align-items: center;
   padding: 0.75rem;
   margin-bottom: 0.5rem;
-  max-height: 2.9375rem;
   border-radius: ${({ theme }) => theme.custom.borderRadius};
   border: 1px solid ${({ theme }) => theme.custom.gray[400]};
   background: ${({ theme }) => theme.custom.gray[200]};
@@ -137,6 +158,9 @@ const ListFieldText = styled('div')`
   font-size: 1rem;
   font-weight: 400;
   color: ${({ theme }) => theme.custom.gray[800]};
+  &.isBalance {
+    align-self: flex-start;
+  }
 `
 
 const ListFieldValue = styled('div')`