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`] = `
+
+
+
+
+
+
+
+
+
+ 0x5B38D...eddC4
+
+
+
+
+
+
+
+
+
+
+
+ metamask.github.io
+
+
+
+
+
+
+
+
+
+
+
+ 0xCcCCc...ccccC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0x935E7...05477
+
+
+
+
+
+
+
+
+
+
+ 0x5B38D...eddC4
+
+
+
+
+
+
+
+
+
+
+ 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:
-
+ 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
+
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`] = `
-
-
+
+
-
+
+
-
- metamask.github.io
-
-
+ metamask.github.io
+