From 20b2fad639ff52a70e9f7ece4b5f8e579386eead Mon Sep 17 00:00:00 2001 From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Date: Mon, 11 Dec 2023 21:28:54 +0000 Subject: [PATCH] Hotfix: Balance display should not show the token and should not format the amount (#462) Co-authored-by: Andrew Snaith Co-authored-by: Andrew Snaith --- chopsticks-config.yml | 4 +- .../fixtures/extrinsicsDisplayAccounts.ts | 14 +++ .../page-objects/components/expander.ts | 4 + .../support/page-objects/sendTxModal.ts | 14 ++- .../ui/cypress/tests/extrinsic-display.cy.ts | 93 +++++++++++++++++++ packages/ui/src/components/CallInfo.tsx | 4 +- .../src/components/EasySetup/FromCallData.tsx | 1 + .../components/EasySetup/ManualExtrinsic.tsx | 19 +++- packages/ui/src/components/Expander.tsx | 8 +- packages/ui/src/components/modals/Send.tsx | 5 +- packages/ui/src/constants.ts | 44 +++++++++ packages/ui/src/utils/isTypeBalance.ts | 9 +- 12 files changed, 206 insertions(+), 13 deletions(-) create mode 100644 packages/ui/cypress/fixtures/extrinsicsDisplayAccounts.ts create mode 100644 packages/ui/cypress/support/page-objects/components/expander.ts create mode 100644 packages/ui/cypress/tests/extrinsic-display.cy.ts diff --git a/chopsticks-config.yml b/chopsticks-config.yml index 90435ad7..d9d88141 100644 --- a/chopsticks-config.yml +++ b/chopsticks-config.yml @@ -1,4 +1,4 @@ -endpoint: wss://kusama-rpc.dwellir.com +endpoint: wss://rpc.ibp.network/kusama mock-signature-host: true block: 20487320 db: ./db.sqlite @@ -61,4 +61,4 @@ import-storage: - [[5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY], rank: 7] Voting: [] ParasDisputes: - $removePrefix: ['disputes'] # those can makes block building super slow + # $removePrefix: ['disputes'] # those can makes block building super slow diff --git a/packages/ui/cypress/fixtures/extrinsicsDisplayAccounts.ts b/packages/ui/cypress/fixtures/extrinsicsDisplayAccounts.ts new file mode 100644 index 00000000..9cf6ce95 --- /dev/null +++ b/packages/ui/cypress/fixtures/extrinsicsDisplayAccounts.ts @@ -0,0 +1,14 @@ +import { InjectedAccountWitMnemonic } from './testAccounts' + +export const expectedMultisigAddress = '7J9rSWpjfQjSYr1QDKPr6KjhnC2b2kLWfyBTiTpMgkNvD7vr' + +export const extrinsicsDisplayAccounts = { + // it has no token but is part of a multisig + Alice: { + address: '7NPoMQbiA6trJKkjB35uk96MeJD4PGWkLQLH7k7hXEkZpiba', + publicKey: '0xb4b72576a091c5d691c2fd37f6eaa3d51c7480c2baaeab48737e5a209db4a431', + name: 'Alice', + type: 'sr25519', + mnemonic: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk//Alice' + } as InjectedAccountWitMnemonic +} diff --git a/packages/ui/cypress/support/page-objects/components/expander.ts b/packages/ui/cypress/support/page-objects/components/expander.ts new file mode 100644 index 00000000..7cdac461 --- /dev/null +++ b/packages/ui/cypress/support/page-objects/components/expander.ts @@ -0,0 +1,4 @@ +export const expander = { + paramExpander: () => cy.get('[data-cy=label-expander]'), + contentExpander: () => cy.get('[data-cy=content-expander]') +} diff --git a/packages/ui/cypress/support/page-objects/sendTxModal.ts b/packages/ui/cypress/support/page-objects/sendTxModal.ts index cc7bedd1..de7588c2 100644 --- a/packages/ui/cypress/support/page-objects/sendTxModal.ts +++ b/packages/ui/cypress/support/page-objects/sendTxModal.ts @@ -1,5 +1,6 @@ export const sendTxModal = { sendTxTitle: () => cy.get('[data-cy=title-send-tx]'), + sendTxContent: () => cy.get('[data-cy=modal-send-tx]'), sendTokensFieldTo: () => cy.get('[data-cy=send-tokens-field-to]'), sendTokensFieldAmount: () => cy.get('[data-cy=send-tokens-field-amount]'), buttonSend: () => cy.get('[data-cy=button-send]'), @@ -10,5 +11,16 @@ export const sendTxModal = { cy.get(`[data-cy=set-identity-field-${field}] > ${element}`), sendTxError: () => cy.get('[data-cy=error-send-tx]'), selectEasySetup: () => cy.get('[data-cy=select-easy-setup]'), - selectionEasySetupSetIdentity: () => cy.get('[data-cy=select-option-easy-setup-set-identity]') + selectionEasySetupSetIdentity: () => cy.get('[data-cy=select-option-easy-setup-set-identity]'), + selectionEasySetupSetupManualExtrinsic: () => + cy.get('[data-cy=select-option-easy-setup-manual-extrinsic]'), + selectionEasySetupSetupFromCallData: () => + cy.get('[data-cy=select-option-easy-setup-from-call-data]'), + manualPalletSelection: () => cy.get('[data-cy=select-manual-pallet]'), + manualMethodSelection: () => cy.get('[data-cy=select-manual-method]'), + optionPallet: (pallet: string) => cy.get(`[data-cy=option-pallet-${pallet}]`), + optionMethod: (method: string) => cy.get(`[data-cy=option-method-${method}]`), + paramField: (param: string) => cy.get(`[data-cy=param-field-${param}]`), + paramInput: (param: string) => cy.get(`[data-cy=param-input-${param}]`), + callDataInput: () => cy.get('[data-cy=input-from-call-data]') } diff --git a/packages/ui/cypress/tests/extrinsic-display.cy.ts b/packages/ui/cypress/tests/extrinsic-display.cy.ts new file mode 100644 index 00000000..a207a38d --- /dev/null +++ b/packages/ui/cypress/tests/extrinsic-display.cy.ts @@ -0,0 +1,93 @@ +import { + expectedMultisigAddress, + extrinsicsDisplayAccounts +} from '../fixtures/extrinsicsDisplayAccounts' +import { landingPageNetwork } from '../fixtures/landingData' +import { accountDisplay } from '../support/page-objects/components/accountDisplay' +import { expander } from '../support/page-objects/components/expander' +import { multisigPage } from '../support/page-objects/multisigPage' +import { sendTxModal } from '../support/page-objects/sendTxModal' + +describe('Verify extrinsics display', () => { + beforeEach(() => { + cy.setupAndVisit({ + url: landingPageNetwork('hydradx'), + extensionConnectionAllowed: true, + injectExtensionWithAccounts: [extrinsicsDisplayAccounts['Alice']] + }) + }) + + it('The omnipool.sell extrinsic is displayed in plank', () => { + multisigPage.accountHeader().within(() => { + accountDisplay.addressLabel().should('contain.text', expectedMultisigAddress.slice(0, 6)) + }) + + multisigPage + .transactionList() + .should('be.visible') + .within(() => { + multisigPage.pendingTransactionItem().should('have.length', 1) + multisigPage.pendingTransactionItem().within(() => { + multisigPage.pendingTransactionCallName().should('contain.text', 'omnipool.sell') + multisigPage.unknownCallIcon().should('not.exist') + multisigPage.unknownCallAlert().should('not.exist') + expander.paramExpander().click() + expander.contentExpander().should('contain', 'amount: 10,000,000,000,000') + expander.contentExpander().should('contain', 'min_buy_amount: 59,509') + }) + }) + }) + + it('A manual omnipool.sell extrinsic creation has input in plank', () => { + multisigPage.newTransactionButton().click() + sendTxModal.sendTxTitle().should('be.visible') + sendTxModal.selectEasySetup().click() + sendTxModal.selectionEasySetupSetupManualExtrinsic().click() + sendTxModal.manualPalletSelection().click() + sendTxModal.optionPallet('omnipool').click() + + sendTxModal.manualMethodSelection().click() + sendTxModal.optionMethod('sell').click() + sendTxModal.paramField('amount').should('be.visible') + sendTxModal.paramField('amount').should('not.contain', 'HDX') + }) + + it('A manual balances.transferKeepAlive extrinsic has input in HDX', () => { + multisigPage.accountHeader().within(() => { + accountDisplay.addressLabel().should('contain.text', expectedMultisigAddress.slice(0, 6)) + }) + + multisigPage.newTransactionButton().click() + sendTxModal.sendTxTitle().should('be.visible') + sendTxModal.selectEasySetup().click() + sendTxModal.selectionEasySetupSetupManualExtrinsic().click() + sendTxModal.manualPalletSelection().click() + sendTxModal.optionPallet('balances').click() + + sendTxModal.manualMethodSelection().click() + sendTxModal.optionMethod('transferKeepAlive').click() + sendTxModal.paramField('value').should('be.visible') + sendTxModal.paramField('value').should('contain', 'HDX') + }) + + it('A from call data balances.transferKeepAlive extrinsic has balance displayed in HDX and identicon for destination', () => { + const balanceTransferCallData = + '0x0703d43593c715fdd31c61141abd04a99fd6822c8558854ccde39a5684e7a56da27d0b00b04e2bde6f' + const sendingAmount = '123 HDX' + const expectedRecipient = '7NPoMQ..kZpiba' + + multisigPage.newTransactionButton().click() + sendTxModal.sendTxTitle().should('be.visible') + sendTxModal.selectEasySetup().click() + sendTxModal.selectionEasySetupSetupFromCallData().click() + sendTxModal.callDataInput().click().type(balanceTransferCallData) + sendTxModal.sendTxContent().within(() => { + expander.contentExpander().should('contain', sendingAmount) + expander.contentExpander().within(() => { + accountDisplay.addressLabel().should('contain', expectedRecipient) + accountDisplay.identicon().should('be.visible') + accountDisplay.nameLabel().should('contain', extrinsicsDisplayAccounts['Alice'].name) + }) + }) + }) +}) diff --git a/packages/ui/src/components/CallInfo.tsx b/packages/ui/src/components/CallInfo.tsx index 2cfa7047..3a1db40f 100644 --- a/packages/ui/src/components/CallInfo.tsx +++ b/packages/ui/src/components/CallInfo.tsx @@ -11,7 +11,7 @@ import { Link } from './library' import { usePjsLinks } from '../hooks/usePjsLinks' import { Alert } from '@mui/material' import { ApiPromise } from '@polkadot/api' -import { isTypeBalance, isTypeAccount } from '../utils' +import { isTypeBalanceWithBalanceCall, isTypeAccount } from '../utils' import { CallDataInfoFromChain } from '../hooks/usePendingTx' interface Props { @@ -128,7 +128,7 @@ const createUlTree = ({ name, args, decimals, unit, api, typeName }: CreateTreeP } // generically show nice value for Balance type - if (isTypeBalance(_typeName)) { + if (isTypeBalanceWithBalanceCall(_typeName, name)) { return handleBalanceDisplay({ value, decimals, unit, key }) } diff --git a/packages/ui/src/components/EasySetup/FromCallData.tsx b/packages/ui/src/components/EasySetup/FromCallData.tsx index c2f08fa8..24f6a500 100644 --- a/packages/ui/src/components/EasySetup/FromCallData.tsx +++ b/packages/ui/src/components/EasySetup/FromCallData.tsx @@ -97,6 +97,7 @@ const FromCallData = ({ className, onSetExtrinsic, isProxySelected, onSetErrorMe )} onPalletCallableParamChange(event, 'callable')} value={callable} @@ -370,6 +373,7 @@ const ManualExtrinsic = ({ > {callables.map(({ text }) => ( @@ -381,7 +385,10 @@ const ManualExtrinsic = ({
    {paramFields?.map((paramField, ind) => { return ( -
  • +
  • onParamChange(event, { ind, paramField })} InputProps={{ - endAdornment: isTypeBalance(paramField.typeName) && ( + endAdornment: isTypeBalanceWithBalanceCall( + paramField.typeName, + `${palletRpc}.${callable}` + ) && ( {chainInfo?.tokenSymbol || ''} ) }} + inputProps={{ 'data-cy': `param-input-${paramField.name}` }} />
    • ) diff --git a/packages/ui/src/components/Expander.tsx b/packages/ui/src/components/Expander.tsx index 3a4e9566..3d2aa2f1 100644 --- a/packages/ui/src/components/Expander.tsx +++ b/packages/ui/src/components/Expander.tsx @@ -16,13 +16,19 @@ const Expander = ({ className = '', title, content, expanded = false }: Props) = return (
    setOpen(!open)} className="titleWrapper" > {title}
    - {content} + + {content} +     ) } diff --git a/packages/ui/src/components/modals/Send.tsx b/packages/ui/src/components/modals/Send.tsx index 5d010fcc..44ca5374 100644 --- a/packages/ui/src/components/modals/Send.tsx +++ b/packages/ui/src/components/modals/Send.tsx @@ -278,7 +278,10 @@ const Send = ({ onClose, className, onSuccess, onFinalized, preselected }: Props > Send tx - + - !!typeName && ['Balance', 'BalanceOf', 'Amount'].includes(typeName) +import { balanceCalls } from '../constants' + +export const isTypeBalanceWithBalanceCall = (typeName?: string, call?: string) => + !!typeName && + !!call && + ['Balance', 'BalanceOf', 'Amount'].includes(typeName) && + balanceCalls.includes(call)