update: display the type of proxy on multisig view

ChainSafe · Jan 26, 2024 · ff0fdbf · ff0fdbf
1 parent aaaa221
commit ff0fdbf
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/packages/ui/cypress/support/page-objects/multisigPage.ts b/packages/ui/cypress/support/page-objects/multisigPage.ts
@@ -13,6 +13,7 @@ export const multisigPage = {
   multisigDetailsContainer: () => cy.get('[data-cy=container-multisig-details]'),
   multisigAccountSummary: () => cy.get('[data-cy=container-multisig-account-summary]'),
   thresholdListItem: () => cy.get('[data-cy=list-item-threshold]'),
+  proxyTypeListItem: () => cy.get('[data-cy=list-item-proxy-type]]'),
   balanceListItem: () => cy.get('[data-cy=list-item-balance]'),
   signatoriesAccordion: () => cy.get('[data-cy=accordion-signatories]'),
   expandSignatoriesIcon: () => cy.get('[data-cy=icon-expand-signatories-summary]'),

diff --git a/packages/ui/src/pages/Home/MultisigView.tsx b/packages/ui/src/pages/Home/MultisigView.tsx
@@ -2,10 +2,11 @@ import AccountDisplay from '../../components/AccountDisplay'
 import { AccountBadge } from '../../types'
 // import MultisigActionMenu from './MultisigActionMenu'
 import { styled } from '@mui/material/styles'
-import { Chip } from '@mui/material'
+import { Chip, Typography } from '@mui/material'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import MultisigAccordion from './MultisigAccordion'
 import { Balance } from '../../components/library'
+import { renderProxyTypeToText } from '../../utils/proxyTypeRendererUtils'
 
 const MultisigView = () => {
   const { selectedMultiProxy, selectedHasProxy } = useMultiProxy()
@@ -26,6 +27,7 @@ const MultisigView = () => {
       <MultisigList>
         {selectedMultiProxy &&
           selectedMultiProxy.multisigs.map((multisig) => {
+            console.log({ multisig })
             return (
               <MultisigWrapperStyled
                 selectedHasProxy={selectedHasProxy}
@@ -46,6 +48,12 @@ const MultisigView = () => {
                     <ListFieldText>Threshold</ListFieldText>
                     <ChipStyled label={`${multisig.threshold}/${multisig.signatories?.length}`} />
                   </ListElement>
+                  {multisig.type && (
+                    <ListElement data-cy="list-item-proxy-type">
+                      <ListFieldText>Proxy Type</ListFieldText>
+                      <ListFieldValue as="p">{renderProxyTypeToText(multisig.type)}</ListFieldValue>
+                    </ListElement>
+                  )}
                   {selectedHasProxy && (
                     <ListElement data-cy="list-item-balance">
                       <ListFieldText>Balance</ListFieldText>
@@ -134,6 +142,12 @@ const ListFieldText = styled('div')`
   color: ${({ theme }) => theme.custom.gray[800]};
 `
 
+const ListFieldValue = styled(Typography)`
+  color: ${({ theme }) => theme.custom.gray[800]};
+  font-size: 1rem;
+  font-weight: 400;
+`
+
 const AccountDisplayWrapperStyled = styled('div')`
   width: 100%;
   display: flex;

diff --git a/packages/ui/src/utils/proxyTypeRendererUtils.ts b/packages/ui/src/utils/proxyTypeRendererUtils.ts
@@ -0,0 +1,19 @@
+import { ProxyType } from '../../types-and-hooks'
+
+export const ProxyEnumToTextMap: Record<ProxyType, string> = {
+  [ProxyType.NonTransfer]: 'Non Transfer',
+  [ProxyType.IdentityJudgement]: 'Identity Judgement',
+  [ProxyType.CancelProxy]: 'Cancel Proxy',
+  [ProxyType.SudoBalances]: 'Sudo Balances',
+  [ProxyType.NominationPools]: 'Nomination Pools',
+  [ProxyType.Any]: 'Any',
+  [ProxyType.Auction]: 'Auction',
+  [ProxyType.Governance]: 'Governance',
+  [ProxyType.Society]: 'Society',
+  [ProxyType.Staking]: 'Staking',
+  [ProxyType.Unknown]: 'Unknown'
+}
+
+export function renderProxyTypeToText(proxy: ProxyType) {
+  return ProxyEnumToTextMap[proxy]
+}