From ce982e3b098fcd6d719ee95dd476ee492381acbb Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 11 Jul 2024 14:41:58 +0530 Subject: [PATCH] cherry-pick: feat improvement for how we display big and small numbers (#25720) --- .../app/confirm/info/row/text.stories.tsx | 1 + ui/components/app/confirm/info/row/text.tsx | 24 +++- .../__snapshots__/typed-sign.test.tsx.snap | 25 ++++- .../permit-simulation.test.tsx.snap | 21 +++- .../permit-simulation/permit-simulation.tsx | 39 +++++-- .../row/__snapshots__/dataTree.test.tsx.snap | 99 +++++++++++++++++ .../components/confirm/row/dataTree.test.tsx | 11 ++ .../components/confirm/row/dataTree.tsx | 103 ++++++++++-------- .../components/confirm/utils.test.ts | 10 +- 9 files changed, 253 insertions(+), 80 deletions(-) diff --git a/ui/components/app/confirm/info/row/text.stories.tsx b/ui/components/app/confirm/info/row/text.stories.tsx index 49ae403679df..094ca92edef5 100644 --- a/ui/components/app/confirm/info/row/text.stories.tsx +++ b/ui/components/app/confirm/info/row/text.stories.tsx @@ -22,6 +22,7 @@ const ConfirmInfoRowTextStory = { export const DefaultStory = ({ text }) => ; DefaultStory.args = { text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', }; export const EditableStory = (props) => ; diff --git a/ui/components/app/confirm/info/row/text.tsx b/ui/components/app/confirm/info/row/text.tsx index dc1a35d2c14e..dacedf310457 100644 --- a/ui/components/app/confirm/info/row/text.tsx +++ b/ui/components/app/confirm/info/row/text.tsx @@ -8,17 +8,26 @@ import { TextColor, } from '../../../../../helpers/constants/design-system'; import { Box, ButtonIcon, IconName, Text } from '../../../../component-library'; +import Tooltip from '../../../../ui/tooltip'; + +const InfoText = ({ text }: { text: string }) => ( + + {text} + +); export type ConfirmInfoRowTextProps = { text: string; onEditClick?: () => void; editIconClassName?: string; + tooltip?: string; }; export const ConfirmInfoRowText: React.FC = ({ text, onEditClick, editIconClassName, + tooltip, }) => { const t = useContext(I18nContext); @@ -31,9 +40,18 @@ export const ConfirmInfoRowText: React.FC = ({ flexWrap={FlexWrap.Wrap} gap={2} > - - {text} - + {tooltip ? ( + + + + ) : ( + + )} {isEditable ? (
-

- 3,000 -

+
+

+ 3,000 +

+
+
-

- 30.00 -

+
+

+ 30 +

+
+
{ + const valueBN = new BigNumber(value / Math.pow(10, tokenDecimals)); + return { + tokenValue: formatAmount('en-US', valueBN), + tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', valueBN), + }; + }, [tokenDecimals, value]); + return ( - - {formatNumber( - value / Math.pow(10, tokenDecimals), - tokenDecimals, - )} - + + {tokenValue} + + diff --git a/ui/pages/confirmations/components/confirm/row/__snapshots__/dataTree.test.tsx.snap b/ui/pages/confirmations/components/confirm/row/__snapshots__/dataTree.test.tsx.snap index 26966d4ac1d6..841f032ef091 100644 --- a/ui/pages/confirmations/components/confirm/row/__snapshots__/dataTree.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/row/__snapshots__/dataTree.test.tsx.snap @@ -606,3 +606,102 @@ exports[`DataTree should match snapshot 1`] = `
`; + +exports[`DataTree should match snapshot for permit signature type 1`] = ` +
+
+
+
+

+ Types: +

+
+
+

+

+
+
+
+

+ PrimaryType: +

+
+
+

+

+
+
+
+

+ Domain: +

+
+
+

+

+
+
+
+

+ Message: +

+
+
+

+ 3000 +

+
+
+
+
+`; diff --git a/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx b/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx index 8b83a01e4082..435f9333f6e0 100644 --- a/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx +++ b/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import { permitSignatureMsg } from '../../../../../../test/data/confirmations/typed_sign'; import mockState from '../../../../../../test/data/mock-state.json'; import { renderWithProvider } from '../../../../../../test/lib/render-helpers'; import configureStore from '../../../../../store/store'; @@ -69,6 +70,16 @@ describe('DataTree', () => { expect(container).toMatchSnapshot(); }); + it('should match snapshot for permit signature type', () => { + const { container } = renderWithProvider( + , + store, + ); + expect(container).toMatchSnapshot(); + }); + it('correctly renders reverse strings', () => { const data = { 'Sign into \u202E EVIL': { diff --git a/ui/pages/confirmations/components/confirm/row/dataTree.tsx b/ui/pages/confirmations/components/confirm/row/dataTree.tsx index 9f5511e72446..f822651fad0f 100644 --- a/ui/pages/confirmations/components/confirm/row/dataTree.tsx +++ b/ui/pages/confirmations/components/confirm/row/dataTree.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import { BigNumber } from 'bignumber.js'; +import React, { memo } from 'react'; import { isValidHexAddress } from '../../../../../../shared/modules/hexstring-utils'; import { sanitizeString } from '../../../../../helpers/utils/util'; @@ -11,7 +12,10 @@ import { ConfirmInfoRowDate, ConfirmInfoRowText, } from '../../../../../components/app/confirm/info/row'; -import { formatNumber } from '../utils'; +import { + formatAmount, + formatAmountMaxPrecision, +} from '../../simulation-details/formatAmount'; type ValueType = string | Record | TreeData[]; @@ -53,48 +57,53 @@ export const DataTree = ({ ); -const DataField = ({ - label, - isPermit, - type, - value, - tokenDecimals, -}: { - label: string; - isPermit: boolean; - type: string; - value: ValueType; - tokenDecimals: number; -}) => { - if (typeof value === 'object' && value !== null) { - return ( - - ); - } - if (isPermit && label === 'value') { - return ( - - ); - } - if (isPermit && label === 'deadline') { - return ; - } - if ( - type === 'address' && - isValidHexAddress(value, { - mixedCaseUseChecksum: true, - }) - ) { - return ; - } - return ; -}; +const DataField = memo( + ({ + label, + isPermit, + type, + value, + tokenDecimals, + }: { + label: string; + isPermit: boolean; + type: string; + value: ValueType; + tokenDecimals: number; + }) => { + if (typeof value === 'object' && value !== null) { + return ( + + ); + } + if (isPermit && label === 'value') { + const valueBN = new BigNumber( + parseInt(value, 10) / Math.pow(10, tokenDecimals), + ); + const tokenValue = formatAmount('en-US', valueBN); + const tokenValueMaxPrecision = formatAmountMaxPrecision('en-US', valueBN); + return ( + + ); + } + if (isPermit && label === 'deadline') { + return ; + } + if ( + type === 'address' && + isValidHexAddress(value, { + mixedCaseUseChecksum: true, + }) + ) { + return ; + } + return ; + }, +); diff --git a/ui/pages/confirmations/components/confirm/utils.test.ts b/ui/pages/confirmations/components/confirm/utils.test.ts index b967a81e8f77..2d5e8fe9e4de 100644 --- a/ui/pages/confirmations/components/confirm/utils.test.ts +++ b/ui/pages/confirmations/components/confirm/utils.test.ts @@ -8,7 +8,7 @@ import { unapprovedPersonalSignMsg, } from '../../../../../test/data/confirmations/personal_sign'; import { SignatureRequestType } from '../../types/confirm'; -import { formatNumber, getConfirmationSender } from './utils'; +import { getConfirmationSender } from './utils'; describe('confirm - utils', () => { describe('getConfirmationSender()', () => { @@ -35,12 +35,4 @@ describe('confirm - utils', () => { expect(from).toEqual(undefined); }); }); - - describe('formatNumber()', () => { - test('formats number according to decimal places passed', () => { - expect(formatNumber(123456, 2)).toEqual('123,456.00'); - expect(formatNumber(123456, 0)).toEqual('123,456'); - expect(formatNumber(123456, 7)).toEqual('123,456.0000000'); - }); - }); });