From 9e57e6e2f8771f923913b8c8e48aaf39eb7e0d58 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 13 Jun 2024 19:58:46 +0530 Subject: [PATCH 01/10] fix: formatting of deadline in permit signature page --- .../app/confirm/info/row/date.stories.tsx | 26 + .../app/confirm/info/row/date.test.tsx | 13 + ui/components/app/confirm/info/row/date.tsx | 27 + ui/components/app/confirm/info/row/index.ts | 1 + ui/helpers/utils/util.js | 13 +- ui/helpers/utils/util.test.js | 12 + .../personal-sign/siwe-sign/siwe-sign.tsx | 5 +- .../__snapshots__/typed-sign.test.tsx.snap | 473 ++++++++++++++++++ .../info/typed-sign/typed-sign.test.tsx | 6 +- .../confirm/info/typed-sign/typed-sign.tsx | 1 + .../components/confirm/row/dataTree.tsx | 55 +- .../row/typed-sign-data/typedSignData.tsx | 4 +- 12 files changed, 610 insertions(+), 26 deletions(-) create mode 100644 ui/components/app/confirm/info/row/date.stories.tsx create mode 100644 ui/components/app/confirm/info/row/date.test.tsx create mode 100644 ui/components/app/confirm/info/row/date.tsx diff --git a/ui/components/app/confirm/info/row/date.stories.tsx b/ui/components/app/confirm/info/row/date.stories.tsx new file mode 100644 index 000000000000..a97b5ee4fd1a --- /dev/null +++ b/ui/components/app/confirm/info/row/date.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import { ConfirmInfoRow } from './row'; +import { ConfirmInfoRowDate } from './date'; + +const ConfirmInfoRowDateStory = { + title: 'Components/App/Confirm/InfoRowText', + component: ConfirmInfoRowDate, + + decorators: [ + (story) => {story()}, + ], + + argTypes: { + url: { + control: 'text', + }, + }, +}; + +export const DefaultStory = ({ date }) => ; +DefaultStory.args = { + date: '2021-09-30T16:25:24.000Z', +}; + +export default ConfirmInfoRowDateStory; diff --git a/ui/components/app/confirm/info/row/date.test.tsx b/ui/components/app/confirm/info/row/date.test.tsx new file mode 100644 index 000000000000..64befdf2d83b --- /dev/null +++ b/ui/components/app/confirm/info/row/date.test.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import { ConfirmInfoRowDate } from './date'; + +describe('ConfirmInfoRowDate', () => { + it('should match snapshot', () => { + const { getByText } = render( + , + ); + expect(getByText('30 September 2021, 16:25')).toBeInTheDocument(); + }); +}); diff --git a/ui/components/app/confirm/info/row/date.tsx b/ui/components/app/confirm/info/row/date.tsx new file mode 100644 index 000000000000..47fa8e4ea56a --- /dev/null +++ b/ui/components/app/confirm/info/row/date.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { + AlignItems, + Display, + FlexWrap, + TextColor, +} from '../../../../../helpers/constants/design-system'; +import { formatUTCDate } from '../../../../../helpers/utils/util'; +import { Box, Text } from '../../../../component-library'; + +export type ConfirmInfoRowDateProps = { + date: number; +}; + +export const ConfirmInfoRowDate = ({ date }: ConfirmInfoRowDateProps) => ( + + + {formatUTCDate(date)} + + +); diff --git a/ui/components/app/confirm/info/row/index.ts b/ui/components/app/confirm/info/row/index.ts index ef2102b280a1..0fc08d5887bb 100644 --- a/ui/components/app/confirm/info/row/index.ts +++ b/ui/components/app/confirm/info/row/index.ts @@ -1,4 +1,5 @@ export * from './address'; +export * from './date'; export * from './divider'; export * from './row'; export * from './text'; diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js index 1353f2703741..1ddc23b3a21d 100644 --- a/ui/helpers/utils/util.js +++ b/ui/helpers/utils/util.js @@ -2,7 +2,7 @@ import punycode from 'punycode/punycode'; import abi from 'human-standard-token-abi'; import BigNumber from 'bignumber.js'; import * as ethUtil from 'ethereumjs-util'; -import { DateTime } from 'luxon'; +import { DateTime, Duration } from 'luxon'; import { getFormattedIpfsUrl, fetchTokenContractExchangeRates, @@ -43,6 +43,17 @@ export function formatDate(date, format = "M/d/y 'at' T") { return DateTime.fromMillis(date).toFormat(format); } +export const formatUTCDate = (dateInMillis) => { + if (!dateInMillis) { + return dateInMillis; + } + + return DateTime.fromMillis(dateInMillis) + .setLocale('en') + .setZone('utc') + .toFormat('dd LLLL yyyy, HH:mm'); +}; + export function formatDateWithYearContext( date, formatThisYear = 'MMM d', diff --git a/ui/helpers/utils/util.test.js b/ui/helpers/utils/util.test.js index bd9cbee4ebdf..5945452bf168 100644 --- a/ui/helpers/utils/util.test.js +++ b/ui/helpers/utils/util.test.js @@ -1042,4 +1042,16 @@ describe('util', () => { expect(util.hexToText(hexValue)).toBe(hexValue); }); }); + + describe('formatUTCDate', () => { + it('formats passed date string', () => { + expect(util.formatUTCDate(1633019124000)).toEqual( + '30 September 2021, 16:25', + ); + }); + + it('returns empty string if empty string is passed', () => { + expect(util.formatUTCDate('')).toEqual(''); + }); + }); }); diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx index 8c1260c3ede5..0a80f28d3a12 100644 --- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx +++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx @@ -9,9 +9,10 @@ import { SignatureRequestType } from '../../../../../types/confirm'; import { ConfirmInfoRow, ConfirmInfoRowAddress, + ConfirmInfoRowDate, ConfirmInfoRowText, } from '../../../../../../../components/app/confirm/info/row'; -import { formatDate } from '../../../../../utils/date'; +import { DateTime } from 'luxon'; const SIWESignInfo: React.FC = () => { const t = useI18nContext(); @@ -64,7 +65,7 @@ const SIWESignInfo: React.FC = () => { - + {requestId && ( diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap index 1d14c6815c89..6607ccb81abe 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap @@ -1,5 +1,478 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`TypedSignInfo correctly renders permit sign type 1`] = ` +
+
+
+
+
+

+ Spender +

+
+
+
+ +

+ 0x5B38D...eddC4 +

+
+
+
+
+
+
+
+
+

+ Request from +

+
+
+ +
+
+
+
+

+ metamask.github.io +

+
+
+
+
+
+
+

+ Interacting with +

+
+
+
+ +

+ 0xCcCCc...ccccC +

+
+
+
+
+
+
+
+
+

+ Message +

+
+
+
+
+

+ Primary type: +

+
+
+

+ Permit +

+
+
+
+
+
+
+

+ Owner: +

+
+
+
+ +

+ 0x935E7...05477 +

+
+
+
+
+
+

+ Spender: +

+
+
+
+ +

+ 0x5B38D...eddC4 +

+
+
+
+
+
+

+ Value: +

+
+
+

+ 3000 +

+
+
+
+
+

+ Nonce: +

+
+
+

+ 0 +

+
+
+
+
+

+ Deadline: +

+
+
+

+ 02 August 1971, 16:53 +

+
+
+
+
+
+
+
+
+`; + exports[`TypedSignInfo does not render if required data is not present in the transaction 1`] = `
`; exports[`TypedSignInfo renders origin for typed sign data request 1`] = ` diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx index 4d64d3a38f28..332b3f79a6ff 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx @@ -80,7 +80,7 @@ describe('TypedSignInfo', () => { expect(getByText('Estimated changes')).toBeDefined(); }); - it('displays "Spender" for permit signature type', () => { + it('correctly renders permit sign type', () => { const state = { ...mockState, confirm: { @@ -88,7 +88,7 @@ describe('TypedSignInfo', () => { }, }; const mockStore = configureMockStore([])(state); - const { getByText } = renderWithProvider(, mockStore); - expect(getByText('Spender')).toBeDefined(); + const { container } = renderWithProvider(, mockStore); + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx index 766ef740e952..44125cabacb4 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx @@ -86,6 +86,7 @@ const TypedSignInfo: React.FC = () => { diff --git a/ui/pages/confirmations/components/confirm/row/dataTree.tsx b/ui/pages/confirmations/components/confirm/row/dataTree.tsx index c72fc6113292..8936ad134844 100644 --- a/ui/pages/confirmations/components/confirm/row/dataTree.tsx +++ b/ui/pages/confirmations/components/confirm/row/dataTree.tsx @@ -8,6 +8,7 @@ import { BlockSize } from '../../../../../helpers/constants/design-system'; import { ConfirmInfoRow, ConfirmInfoRowAddress, + ConfirmInfoRowDate, ConfirmInfoRowText, } from '../../../../../components/app/confirm/info/row'; @@ -20,32 +21,50 @@ export type TreeData = { export const DataTree = ({ data, + isPermit = false, }: { data: Record | TreeData[]; + isPermit?: boolean; }) => ( - {Object.entries(data).map(([label, { value, type }], i) => { - return ( - - { - // eslint-disable-next-line @typescript-eslint/no-use-before-define - - } - - ); - })} + {Object.entries(data).map(([label, { value, type }], i) => ( + + { + // eslint-disable-next-line @typescript-eslint/no-use-before-define + + } + + ))} ); -const DataField = ({ value, type }: { value: ValueType; type: string }) => { +const DataField = ({ + label, + isPermit, + type, + value, +}: { + label: string; + isPermit: boolean; + type: string; + value: ValueType; +}) => { if (typeof value === 'object' && value !== null) { - return ; + return ; + } + if (isPermit && label === 'deadline') { + return ; } if ( type === 'address' && diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx index 3b3d1db72ca4..75a207bc997f 100644 --- a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx +++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx @@ -11,7 +11,7 @@ import { import { DataTree } from '../dataTree'; import { parseSanitizeTypedDataMessage } from '../../../../utils'; -export const ConfirmInfoRowTypedSignData = ({ data }: { data: string }) => { +export const ConfirmInfoRowTypedSignData = ({ data, isPermit }: { data: string, isPermit?: boolean }) => { const t = useI18nContext(); if (!data) { @@ -29,7 +29,7 @@ export const ConfirmInfoRowTypedSignData = ({ data }: { data: string }) => { - + ); From 5ee78f2c468883522d0b467f925581e56f986d20 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Fri, 14 Jun 2024 17:59:23 +0530 Subject: [PATCH 02/10] fix --- ui/components/app/confirm/info/row/date.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/app/confirm/info/row/date.stories.tsx b/ui/components/app/confirm/info/row/date.stories.tsx index a97b5ee4fd1a..3e5087152824 100644 --- a/ui/components/app/confirm/info/row/date.stories.tsx +++ b/ui/components/app/confirm/info/row/date.stories.tsx @@ -20,7 +20,7 @@ const ConfirmInfoRowDateStory = { export const DefaultStory = ({ date }) => ; DefaultStory.args = { - date: '2021-09-30T16:25:24.000Z', + date: 1633019124000, }; export default ConfirmInfoRowDateStory; From 343b38ada61f869dff5778f3c0d923478acd5714 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Fri, 14 Jun 2024 18:19:00 +0530 Subject: [PATCH 03/10] fix --- ui/components/app/confirm/info/row/date.test.tsx | 4 +--- ui/helpers/utils/util.js | 2 +- ui/helpers/utils/util.test.js | 4 ++-- .../confirm/info/personal-sign/siwe-sign/siwe-sign.tsx | 6 ++++-- .../confirmations/components/confirm/row/dataTree.tsx | 2 +- .../confirm/row/typed-sign-data/typedSignData.tsx | 10 ++++++++-- 6 files changed, 17 insertions(+), 11 deletions(-) diff --git a/ui/components/app/confirm/info/row/date.test.tsx b/ui/components/app/confirm/info/row/date.test.tsx index 64befdf2d83b..eda8510e4e7c 100644 --- a/ui/components/app/confirm/info/row/date.test.tsx +++ b/ui/components/app/confirm/info/row/date.test.tsx @@ -5,9 +5,7 @@ import { ConfirmInfoRowDate } from './date'; describe('ConfirmInfoRowDate', () => { it('should match snapshot', () => { - const { getByText } = render( - , - ); + const { getByText } = render(); expect(getByText('30 September 2021, 16:25')).toBeInTheDocument(); }); }); diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js index 1ddc23b3a21d..02ff35ecff1e 100644 --- a/ui/helpers/utils/util.js +++ b/ui/helpers/utils/util.js @@ -2,7 +2,7 @@ import punycode from 'punycode/punycode'; import abi from 'human-standard-token-abi'; import BigNumber from 'bignumber.js'; import * as ethUtil from 'ethereumjs-util'; -import { DateTime, Duration } from 'luxon'; +import { DateTime } from 'luxon'; import { getFormattedIpfsUrl, fetchTokenContractExchangeRates, diff --git a/ui/helpers/utils/util.test.js b/ui/helpers/utils/util.test.js index 5945452bf168..22cafbf5f131 100644 --- a/ui/helpers/utils/util.test.js +++ b/ui/helpers/utils/util.test.js @@ -1045,13 +1045,13 @@ describe('util', () => { describe('formatUTCDate', () => { it('formats passed date string', () => { - expect(util.formatUTCDate(1633019124000)).toEqual( + expect(util.formatUTCDate(1633019124000)).toStrictEqual( '30 September 2021, 16:25', ); }); it('returns empty string if empty string is passed', () => { - expect(util.formatUTCDate('')).toEqual(''); + expect(util.formatUTCDate('')).toStrictEqual(''); }); }); }); diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx index 0a80f28d3a12..94389b253450 100644 --- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx +++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { DateTime } from 'luxon'; import { useSelector } from 'react-redux'; import { toHex } from '@metamask/controller-utils'; @@ -12,7 +13,6 @@ import { ConfirmInfoRowDate, ConfirmInfoRowText, } from '../../../../../../../components/app/confirm/info/row'; -import { DateTime } from 'luxon'; const SIWESignInfo: React.FC = () => { const t = useI18nContext(); @@ -65,7 +65,9 @@ const SIWESignInfo: React.FC = () => { - + {requestId && ( diff --git a/ui/pages/confirmations/components/confirm/row/dataTree.tsx b/ui/pages/confirmations/components/confirm/row/dataTree.tsx index 8936ad134844..307b608488d9 100644 --- a/ui/pages/confirmations/components/confirm/row/dataTree.tsx +++ b/ui/pages/confirmations/components/confirm/row/dataTree.tsx @@ -64,7 +64,7 @@ const DataField = ({ return ; } if (isPermit && label === 'deadline') { - return ; + return ; } if ( type === 'address' && diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx index 75a207bc997f..9b3934cef651 100644 --- a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx +++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx @@ -11,7 +11,13 @@ import { import { DataTree } from '../dataTree'; import { parseSanitizeTypedDataMessage } from '../../../../utils'; -export const ConfirmInfoRowTypedSignData = ({ data, isPermit }: { data: string, isPermit?: boolean }) => { +export const ConfirmInfoRowTypedSignData = ({ + data, + isPermit, +}: { + data: string; + isPermit?: boolean; +}) => { const t = useI18nContext(); if (!data) { @@ -29,7 +35,7 @@ export const ConfirmInfoRowTypedSignData = ({ data, isPermit }: { data: string, - + ); From a15aaa12b1e879ed05aa25ee15b339a454602432 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Fri, 14 Jun 2024 18:47:04 +0530 Subject: [PATCH 04/10] fix --- ui/components/app/confirm/info/row/date.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/app/confirm/info/row/date.stories.tsx b/ui/components/app/confirm/info/row/date.stories.tsx index 3e5087152824..18fa7e62fb8b 100644 --- a/ui/components/app/confirm/info/row/date.stories.tsx +++ b/ui/components/app/confirm/info/row/date.stories.tsx @@ -4,7 +4,7 @@ import { ConfirmInfoRow } from './row'; import { ConfirmInfoRowDate } from './date'; const ConfirmInfoRowDateStory = { - title: 'Components/App/Confirm/InfoRowText', + title: 'Components/App/Confirm/InfoRowDate', component: ConfirmInfoRowDate, decorators: [ @@ -13,7 +13,7 @@ const ConfirmInfoRowDateStory = { argTypes: { url: { - control: 'text', + control: 'date', }, }, }; From 4e3dc6857b46f5ecaa44c980a35eaeeab93fcba2 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Fri, 14 Jun 2024 19:48:20 +0530 Subject: [PATCH 05/10] fix --- test/e2e/tests/confirmations/signatures/permit.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/tests/confirmations/signatures/permit.spec.ts b/test/e2e/tests/confirmations/signatures/permit.spec.ts index 5afe288f869b..8320fd748f63 100644 --- a/test/e2e/tests/confirmations/signatures/permit.spec.ts +++ b/test/e2e/tests/confirmations/signatures/permit.spec.ts @@ -85,7 +85,7 @@ async function assertInfoValues(driver: Driver) { }); const value = driver.findElement({ text: '3000' }); const nonce = driver.findElement({ text: '0' }); - const deadline = driver.findElement({ text: '50000000000' }); + const deadline = driver.findElement({ text: '02 August 1971, 16:53' }); assert.ok(await origin, 'origin'); assert.ok(await contractPetName, 'contractPetName'); From b6ddf18d903664ef534701b5d21db1ccfc855d81 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Wed, 19 Jun 2024 01:07:11 +0530 Subject: [PATCH 06/10] Update --- ui/components/app/confirm/info/row/date.stories.tsx | 2 +- ui/helpers/utils/util.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/components/app/confirm/info/row/date.stories.tsx b/ui/components/app/confirm/info/row/date.stories.tsx index 18fa7e62fb8b..971ba7624f3e 100644 --- a/ui/components/app/confirm/info/row/date.stories.tsx +++ b/ui/components/app/confirm/info/row/date.stories.tsx @@ -8,7 +8,7 @@ const ConfirmInfoRowDateStory = { component: ConfirmInfoRowDate, decorators: [ - (story) => {story()}, + (story) => {story()}, ], argTypes: { diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js index 02ff35ecff1e..96a5ab724218 100644 --- a/ui/helpers/utils/util.js +++ b/ui/helpers/utils/util.js @@ -49,7 +49,6 @@ export const formatUTCDate = (dateInMillis) => { } return DateTime.fromMillis(dateInMillis) - .setLocale('en') .setZone('utc') .toFormat('dd LLLL yyyy, HH:mm'); }; From b0b36b8c3e02446e8d67349b02faabc81d90c91a Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Wed, 19 Jun 2024 15:32:48 +0530 Subject: [PATCH 07/10] merge --- .../__snapshots__/typed-sign.test.tsx.snap | 11 +---- .../permit-simulation.test.tsx.snap | 2 +- .../permit-simulation.test.tsx | 5 +- .../permit-simulation/permit-simulation.tsx | 10 +++- .../info/typed-sign/typed-sign.test.tsx | 6 +++ .../confirm/info/typed-sign/typed-sign.tsx | 21 ++++++++- .../components/confirm/row/dataTree.tsx | 24 +++++++++- .../row/typed-sign-data/typedSignData.tsx | 11 +++-- .../components/confirm/utils.test.ts | 46 +++++++++++-------- .../confirmations/components/confirm/utils.ts | 11 +++++ 10 files changed, 109 insertions(+), 38 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap index 6607ccb81abe..09d221d1f621 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap @@ -406,16 +406,7 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = ` Value:

-
-

- 3000 -

-
+ 3,000
- 3000 + 30.00

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.test.tsx index ea0ffcc47bc1..daca28ece848 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.test.tsx @@ -15,7 +15,10 @@ describe('PermitSimulation', () => { }, }; const mockStore = configureMockStore([])(state); - const { container } = renderWithProvider(, mockStore); + const { container } = renderWithProvider( + , + mockStore, + ); expect(container).toMatchSnapshot(); }); }); diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx index 6aa8ec159ec0..e4c57da9e3e3 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx @@ -21,8 +21,11 @@ import { import { SignatureRequestType } from '../../../../../types/confirm'; import useTokenExchangeRate from '../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate'; import { IndividualFiatDisplay } from '../../../../simulation-details/fiat-display'; +import { formatNumber } from '../../../utils'; -const PermitSimulation: React.FC = () => { +const PermitSimulation: React.FC<{ + tokenDecimals: number; +}> = ({ tokenDecimals }) => { const t = useI18nContext(); const currentConfirmation = useSelector( currentConfirmationSelector, @@ -65,7 +68,10 @@ const PermitSimulation: React.FC = () => { paddingInline={2} textAlign={TextAlign.Center} > - {value} + {formatNumber( + value / Math.pow(10, tokenDecimals), + tokenDecimals, + )} diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx index 332b3f79a6ff..1ac473dd40f8 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx @@ -10,6 +10,12 @@ import { } from '../../../../../../../test/data/confirmations/typed_sign'; import TypedSignInfo from './typed-sign'; +jest.mock('../../../../../../store/actions', () => { + return { + getTokenStandardAndDetails: jest.fn().mockResolvedValue({ decimals: 2 }), + }; +}); + describe('TypedSignInfo', () => { it('renders origin for typed sign data request', () => { const state = { diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx index 44125cabacb4..6cab5029d779 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { isValidAddress } from 'ethereumjs-util'; @@ -16,6 +16,7 @@ import { BackgroundColor, BorderRadius, } from '../../../../../../helpers/constants/design-system'; +import { getTokenStandardAndDetails } from '../../../../../../store/actions'; import { SignatureRequestType } from '../../../../types/confirm'; import { isPermitSignatureRequest } from '../../../../utils'; import { selectUseTransactionSimulations } from '../../../../selectors/preferences'; @@ -30,6 +31,7 @@ const TypedSignInfo: React.FC = () => { const useTransactionSimulations = useSelector( selectUseTransactionSimulations, ); + const [decimals, setDecimals] = useState(0); if (!currentConfirmation?.msgParams) { return null; @@ -42,9 +44,23 @@ const TypedSignInfo: React.FC = () => { const isPermit = isPermitSignatureRequest(currentConfirmation); + useEffect(() => { + (async () => { + if (!isPermit) { + return; + } + const { decimals: tokenDecimals } = await getTokenStandardAndDetails( + verifyingContract, + ); + setDecimals(parseInt(tokenDecimals ?? '0', 10)); + })(); + }, [verifyingContract]); + return ( <> - {isPermit && useTransactionSimulations && } + {isPermit && useTransactionSimulations && ( + + )} { diff --git a/ui/pages/confirmations/components/confirm/row/dataTree.tsx b/ui/pages/confirmations/components/confirm/row/dataTree.tsx index 307b608488d9..9f5511e72446 100644 --- a/ui/pages/confirmations/components/confirm/row/dataTree.tsx +++ b/ui/pages/confirmations/components/confirm/row/dataTree.tsx @@ -11,6 +11,7 @@ import { ConfirmInfoRowDate, ConfirmInfoRowText, } from '../../../../../components/app/confirm/info/row'; +import { formatNumber } from '../utils'; type ValueType = string | Record | TreeData[]; @@ -22,9 +23,11 @@ export type TreeData = { export const DataTree = ({ data, isPermit = false, + tokenDecimals = 0, }: { data: Record | TreeData[]; isPermit?: boolean; + tokenDecimals?: number; }) => ( {Object.entries(data).map(([label, { value, type }], i) => ( @@ -42,6 +45,7 @@ export const DataTree = ({ isPermit={isPermit} value={value} type={type} + tokenDecimals={tokenDecimals} /> } @@ -54,14 +58,32 @@ const DataField = ({ isPermit, type, value, + tokenDecimals, }: { label: string; isPermit: boolean; type: string; value: ValueType; + tokenDecimals: number; }) => { if (typeof value === 'object' && value !== null) { - return ; + return ( + + ); + } + if (isPermit && label === 'value') { + return ( + + ); } if (isPermit && label === 'deadline') { return ; diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx index 9b3934cef651..0b60f45b6a38 100644 --- a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx +++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx @@ -7,16 +7,17 @@ import { ConfirmInfoRow, ConfirmInfoRowText, } from '../../../../../../components/app/confirm/info/row'; - -import { DataTree } from '../dataTree'; import { parseSanitizeTypedDataMessage } from '../../../../utils'; +import { DataTree } from '../dataTree'; export const ConfirmInfoRowTypedSignData = ({ data, isPermit, + tokenDecimals, }: { data: string; isPermit?: boolean; + tokenDecimals?: number; }) => { const t = useI18nContext(); @@ -35,7 +36,11 @@ export const ConfirmInfoRowTypedSignData = ({ - + ); diff --git a/ui/pages/confirmations/components/confirm/utils.test.ts b/ui/pages/confirmations/components/confirm/utils.test.ts index 87e6307de7be..b967a81e8f77 100644 --- a/ui/pages/confirmations/components/confirm/utils.test.ts +++ b/ui/pages/confirmations/components/confirm/utils.test.ts @@ -8,29 +8,39 @@ import { unapprovedPersonalSignMsg, } from '../../../../../test/data/confirmations/personal_sign'; import { SignatureRequestType } from '../../types/confirm'; -import { getConfirmationSender } from './utils'; +import { formatNumber, getConfirmationSender } from './utils'; -describe('getConfirmationSender()', () => { - test("returns the sender address from a signature if it's passed", () => { - const testCurrentConfirmation = - genUnapprovedContractInteractionConfirmation() as TransactionMeta; - const { from } = getConfirmationSender(testCurrentConfirmation); +describe('confirm - utils', () => { + describe('getConfirmationSender()', () => { + test("returns the sender address from a signature if it's passed", () => { + const testCurrentConfirmation = + genUnapprovedContractInteractionConfirmation() as TransactionMeta; + const { from } = getConfirmationSender(testCurrentConfirmation); - expect(from).toEqual(CONTRACT_INTERACTION_SENDER_ADDRESS); - }); + expect(from).toEqual(CONTRACT_INTERACTION_SENDER_ADDRESS); + }); - test("returns the sender address from a transaction if it's passed", () => { - const { from } = getConfirmationSender( - unapprovedPersonalSignMsg as SignatureRequestType, - ); + test("returns the sender address from a transaction if it's passed", () => { + const { from } = getConfirmationSender( + unapprovedPersonalSignMsg as SignatureRequestType, + ); - expect(from).toEqual(PERSONAL_SIGN_SENDER_ADDRESS); - }); + expect(from).toEqual(PERSONAL_SIGN_SENDER_ADDRESS); + }); - test('returns no sender address if no confirmation is passed', () => { - const testCurrentConfirmation = undefined; - const { from } = getConfirmationSender(testCurrentConfirmation); + test('returns no sender address if no confirmation is passed', () => { + const testCurrentConfirmation = undefined; + const { from } = getConfirmationSender(testCurrentConfirmation); + + expect(from).toEqual(undefined); + }); + }); - 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'); + }); }); }); diff --git a/ui/pages/confirmations/components/confirm/utils.ts b/ui/pages/confirmations/components/confirm/utils.ts index 21b4aac78998..581bf1a5ccee 100644 --- a/ui/pages/confirmations/components/confirm/utils.ts +++ b/ui/pages/confirmations/components/confirm/utils.ts @@ -17,3 +17,14 @@ export const getConfirmationSender = ( return { from }; }; + +export const formatNumber = (value: number, decimals: number) => { + if (value === undefined) { + return value; + } + const formatter = new Intl.NumberFormat('en-US', { + minimumFractionDigits: decimals, + maximumFractionDigits: decimals, + }); + return formatter.format(value); +}; From 448e558212b26d3f8fb24351d5e04b7735d1018b Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Wed, 19 Jun 2024 17:25:31 +0530 Subject: [PATCH 08/10] update --- .../typed-sign/__snapshots__/typed-sign.test.tsx.snap | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap index 09d221d1f621..df75c8803667 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap @@ -406,7 +406,16 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = ` Value:

- 3,000 +
+

+ 3,000 +

+
Date: Wed, 19 Jun 2024 19:36:53 +0530 Subject: [PATCH 09/10] update --- test/e2e/tests/confirmations/signatures/permit.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/tests/confirmations/signatures/permit.spec.ts b/test/e2e/tests/confirmations/signatures/permit.spec.ts index 8320fd748f63..03941dbecc3f 100644 --- a/test/e2e/tests/confirmations/signatures/permit.spec.ts +++ b/test/e2e/tests/confirmations/signatures/permit.spec.ts @@ -83,7 +83,7 @@ async function assertInfoValues(driver: Driver) { css: '.name__value', text: '0x5B38D...eddC4', }); - const value = driver.findElement({ text: '3000' }); + const value = driver.findElement({ text: '3,000' }); const nonce = driver.findElement({ text: '0' }); const deadline = driver.findElement({ text: '02 August 1971, 16:53' }); From 5ef63d38f6bf9334e2cb32d1bc984ffe098c138e Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Mon, 24 Jun 2024 11:02:37 +0530 Subject: [PATCH 10/10] update --- .../__snapshots__/typed-sign.test.tsx.snap | 254 +++++++++--------- 1 file changed, 121 insertions(+), 133 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap index 08a5bc459ba2..328fe4209390 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap @@ -3,200 +3,188 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `
-
-

- Spender -

-
+ Spender +

+
+
-

- 0x5B38D...eddC4 -

+

+ 0x5B38D...eddC4 +

-
-

+

+
- Request from -

-
-
- -
+
-
+
+

-

- metamask.github.io -

-
+ metamask.github.io +

-
-

- Interacting with -

-
+ Interacting with +

+
+
-

- 0xCcCCc...ccccC -

+

+ 0xCcCCc...ccccC +