From 1370806147de532632aa609712a9dd6e1ce6fbee Mon Sep 17 00:00:00 2001
From: Bolaji Ahmad <56865496+bolajahmad@users.noreply.github.com>
Date: Mon, 29 Jan 2024 13:43:15 +0100
Subject: [PATCH] update: display the type of proxy on multisig view (#490)

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
---
 .../ui/cypress/support/page-objects/multisigPage.ts |  1 +
 packages/ui/src/pages/Home/MultisigView.tsx         | 13 +++++++++++++
 packages/ui/src/utils/camelcasetoString.ts          |  4 ++++
 packages/ui/src/utils/index.ts                      |  1 +
 4 files changed, 19 insertions(+)
 create mode 100644 packages/ui/src/utils/camelcasetoString.ts

diff --git a/packages/ui/cypress/support/page-objects/multisigPage.ts b/packages/ui/cypress/support/page-objects/multisigPage.ts
index e3be0bca..ac8c5bdc 100644
--- 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
index 4ae8fd87..6b595268 100644
--- 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
new file mode 100644
index 00000000..86c81ece
--- /dev/null
+++ 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
index aa0515d2..b9a2c28a 100644
--- 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'