From ff0fdbf006c24a11d2b2888ec9996113c5306bb3 Mon Sep 17 00:00:00 2001 From: Bolaji Ahmad <56865496+bolajahmad@users.noreply.github.com> Date: Fri, 26 Jan 2024 11:31:29 +0100 Subject: [PATCH 1/4] update: display the type of proxy on multisig view --- .../support/page-objects/multisigPage.ts | 1 + packages/ui/src/pages/Home/MultisigView.tsx | 16 +++++++++++++++- .../ui/src/utils/proxyTypeRendererUtils.ts | 19 +++++++++++++++++++ 3 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 packages/ui/src/utils/proxyTypeRendererUtils.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..e24b45b6 100644 --- 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 = () => { {selectedMultiProxy && selectedMultiProxy.multisigs.map((multisig) => { + console.log({ multisig }) return ( { Threshold + {multisig.type && ( + + Proxy Type + {renderProxyTypeToText(multisig.type)} + + )} {selectedHasProxy && ( Balance @@ -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 new file mode 100644 index 00000000..17679d18 --- /dev/null +++ b/packages/ui/src/utils/proxyTypeRendererUtils.ts @@ -0,0 +1,19 @@ +import { ProxyType } from '../../types-and-hooks' + +export const ProxyEnumToTextMap: Record = { + [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] +} From 1a82bd8cbc2ffefed5bb087ee8cf32afd54c4c1f Mon Sep 17 00:00:00 2001 From: Bolaji Ahmad <56865496+bolajahmad@users.noreply.github.com> Date: Mon, 29 Jan 2024 11:11:54 +0100 Subject: [PATCH 2/4] fix: replaced proxy renderer with string transform logic --- packages/ui/src/pages/Home/MultisigView.tsx | 5 ++--- .../ui/src/utils/proxyTypeRendererUtils.ts | 19 ------------------- packages/ui/src/utils/stringUtils.ts | 4 ++++ 3 files changed, 6 insertions(+), 22 deletions(-) delete mode 100644 packages/ui/src/utils/proxyTypeRendererUtils.ts create mode 100644 packages/ui/src/utils/stringUtils.ts diff --git a/packages/ui/src/pages/Home/MultisigView.tsx b/packages/ui/src/pages/Home/MultisigView.tsx index e24b45b6..037c0d49 100644 --- a/packages/ui/src/pages/Home/MultisigView.tsx +++ b/packages/ui/src/pages/Home/MultisigView.tsx @@ -6,7 +6,7 @@ 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' +import { camelcasetoString } from '../../utils/stringUtils' const MultisigView = () => { const { selectedMultiProxy, selectedHasProxy } = useMultiProxy() @@ -27,7 +27,6 @@ const MultisigView = () => { {selectedMultiProxy && selectedMultiProxy.multisigs.map((multisig) => { - console.log({ multisig }) return ( { {multisig.type && ( Proxy Type - {renderProxyTypeToText(multisig.type)} + {camelcasetoString(multisig.type)} )} {selectedHasProxy && ( diff --git a/packages/ui/src/utils/proxyTypeRendererUtils.ts b/packages/ui/src/utils/proxyTypeRendererUtils.ts deleted file mode 100644 index 17679d18..00000000 --- a/packages/ui/src/utils/proxyTypeRendererUtils.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { ProxyType } from '../../types-and-hooks' - -export const ProxyEnumToTextMap: Record = { - [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] -} diff --git a/packages/ui/src/utils/stringUtils.ts b/packages/ui/src/utils/stringUtils.ts new file mode 100644 index 00000000..86c81ece --- /dev/null +++ b/packages/ui/src/utils/stringUtils.ts @@ -0,0 +1,4 @@ +export const camelcasetoString = (proxy: string) => + proxy.replace(/[A-Z]/g, function (match, index) { + return index === 0 ? match : ` ${match}` + }) From 840f3ebef7bf61e4c3df0dd30e06f49b59b70d78 Mon Sep 17 00:00:00 2001 From: Bolaji Ahmad <56865496+bolajahmad@users.noreply.github.com> Date: Mon, 29 Jan 2024 13:02:47 +0100 Subject: [PATCH 3/4] update: renamed stringUtils file and replaced typography with div --- packages/ui/src/pages/Home/MultisigView.tsx | 8 ++++---- .../ui/src/utils/{stringUtils.ts => camelcasetoString.ts} | 0 packages/ui/src/utils/index.ts | 1 + 3 files changed, 5 insertions(+), 4 deletions(-) rename packages/ui/src/utils/{stringUtils.ts => camelcasetoString.ts} (100%) diff --git a/packages/ui/src/pages/Home/MultisigView.tsx b/packages/ui/src/pages/Home/MultisigView.tsx index 037c0d49..afea4e83 100644 --- a/packages/ui/src/pages/Home/MultisigView.tsx +++ b/packages/ui/src/pages/Home/MultisigView.tsx @@ -6,7 +6,7 @@ import { Chip, Typography } from '@mui/material' import { useMultiProxy } from '../../contexts/MultiProxyContext' import MultisigAccordion from './MultisigAccordion' import { Balance } from '../../components/library' -import { camelcasetoString } from '../../utils/stringUtils' +import { camelcasetoString } from '../../utils' const MultisigView = () => { const { selectedMultiProxy, selectedHasProxy } = useMultiProxy() @@ -50,7 +50,7 @@ const MultisigView = () => { {multisig.type && ( Proxy Type - {camelcasetoString(multisig.type)} + {camelcasetoString(multisig.type)} )} {selectedHasProxy && ( @@ -141,8 +141,8 @@ const ListFieldText = styled('div')` color: ${({ theme }) => theme.custom.gray[800]}; ` -const ListFieldValue = styled(Typography)` - color: ${({ theme }) => theme.custom.gray[800]}; +const ListFieldValue = styled('div')` + color: ${({ theme }) => theme.custom.text.secondary}; font-size: 1rem; font-weight: 400; ` diff --git a/packages/ui/src/utils/stringUtils.ts b/packages/ui/src/utils/camelcasetoString.ts similarity index 100% rename from packages/ui/src/utils/stringUtils.ts rename to packages/ui/src/utils/camelcasetoString.ts 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' From ef012ff1d58afe4ad8fca12ed0804d6c9f4a282a Mon Sep 17 00:00:00 2001 From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Date: Mon, 29 Jan 2024 13:40:40 +0100 Subject: [PATCH 4/4] Update packages/ui/src/pages/Home/MultisigView.tsx --- packages/ui/src/pages/Home/MultisigView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/pages/Home/MultisigView.tsx b/packages/ui/src/pages/Home/MultisigView.tsx index afea4e83..6b595268 100644 --- a/packages/ui/src/pages/Home/MultisigView.tsx +++ b/packages/ui/src/pages/Home/MultisigView.tsx @@ -2,7 +2,7 @@ import AccountDisplay from '../../components/AccountDisplay' import { AccountBadge } from '../../types' // import MultisigActionMenu from './MultisigActionMenu' import { styled } from '@mui/material/styles' -import { Chip, Typography } from '@mui/material' +import { Chip } from '@mui/material' import { useMultiProxy } from '../../contexts/MultiProxyContext' import MultisigAccordion from './MultisigAccordion' import { Balance } from '../../components/library'