update: display the type of proxy on multisig view (#490)

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
ChainSafe · Jan 29, 2024 · 1370806 · 1370806
1 parent 0f211d5
commit 1370806
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
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
@@ -6,6 +6,7 @@ import { Chip } from '@mui/material'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import MultisigAccordion from './MultisigAccordion'
 import { Balance } from '../../components/library'
+import { camelcasetoString } from '../../utils'
 
 const MultisigView = () => {
   const { selectedMultiProxy, selectedHasProxy } = useMultiProxy()
@@ -46,6 +47,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>{camelcasetoString(multisig.type)}</ListFieldValue>
+                    </ListElement>
+                  )}
                   {selectedHasProxy && (
                     <ListElement data-cy="list-item-balance">
                       <ListFieldText>Balance</ListFieldText>
@@ -134,6 +141,12 @@ const ListFieldText = styled('div')`
   color: ${({ theme }) => theme.custom.gray[800]};
 `
 
+const ListFieldValue = styled('div')`
+  color: ${({ theme }) => theme.custom.text.secondary};
+  font-size: 1rem;
+  font-weight: 400;
+`
+
 const AccountDisplayWrapperStyled = styled('div')`
   width: 100%;
   display: flex;

diff --git a/packages/ui/src/utils/camelcasetoString.ts b/packages/ui/src/utils/camelcasetoString.ts
@@ -0,0 +1,4 @@
+export const camelcasetoString = (proxy: string) =>
+  proxy.replace(/[A-Z]/g, function (match, index) {
+    return index === 0 ? match : ` ${match}`
+  })
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
@@ -14,3 +14,4 @@ export * from './getApproveAsMultiTx'
 export * from './getAsMultiTx'
 export * from './getErrorMessageReservedFunds'
 export * from './extinsicErrorChecks'
+export * from './camelcasetoString'