From 66a04dd4b6c0a84e0e9be91aef74e5ab6b3f87db Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 20:08:36 -0400 Subject: [PATCH 01/16] refactor: rn isScrollToBottomNeeded-> isScrollToBottomFulfilled --- .../components/confirm/footer/footer.test.tsx | 6 +++--- .../components/confirm/footer/footer.tsx | 4 ++-- .../scroll-to-bottom/scroll-to-bottom.test.tsx | 12 ++++++------ .../confirm/scroll-to-bottom/scroll-to-bottom.tsx | 2 +- ui/pages/confirmations/types/confirm.ts | 2 +- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx index 425a217143a7..58f9e9912920 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx @@ -41,7 +41,7 @@ const render = (args = {}) => { from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', }, }, - isScrollToBottomNeeded: false, + isScrollToBottomFulfilled: false, }, ...args, }); @@ -54,7 +54,7 @@ describe('ConfirmFooter', () => { const { container } = render({ confirm: { currentConfirmation: unapprovedPersonalSignMsg, - isScrollToBottomNeeded: false, + isScrollToBottomFulfilled: false, }, }); expect(container).toMatchSnapshot(); @@ -64,7 +64,7 @@ describe('ConfirmFooter', () => { const { container } = render({ confirm: { currentConfirmation: genUnapprovedContractInteractionConfirmation(), - isScrollToBottomNeeded: false, + isScrollToBottomFulfilled: false, }, }); expect(container).toMatchSnapshot(); diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx index 2d833ecc1d19..cd06d469bb69 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.tsx @@ -109,7 +109,7 @@ const Footer = () => { const confirm = useSelector(confirmSelector); const customNonceValue = useSelector(getCustomNonceValue); - const { currentConfirmation, isScrollToBottomNeeded } = confirm; + const { currentConfirmation, isScrollToBottomFulfilled } = confirm; const { from } = getConfirmationSender(currentConfirmation); ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) @@ -198,7 +198,7 @@ const Footer = () => { ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) mmiSubmitDisabled || ///: END:ONLY_INCLUDE_IF - isScrollToBottomNeeded || + isScrollToBottomFulfilled || hardwareWalletRequiresConnection } onCancel={onCancel} diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx index 67bd9a9b9dae..f211f1e8dae2 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx @@ -52,7 +52,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); }); - it('sets isScrollToBottomNeeded to false', () => { + it('sets isScrollToBottomFulfilled to false', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); renderWithConfirmContextProvider( foobar, @@ -60,7 +60,7 @@ describe('ScrollToBottom', () => { ); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomNeeded: false, + isScrollToBottomFulfilled: false, }); }); }); @@ -86,7 +86,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).toBeInTheDocument(); }); - it('sets isScrollToBottomNeeded to true', () => { + it('sets isScrollToBottomFulfilled to true', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); renderWithConfirmContextProvider( foobar, @@ -94,7 +94,7 @@ describe('ScrollToBottom', () => { ); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomNeeded: true, + isScrollToBottomFulfilled: true, }); }); @@ -155,7 +155,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); }); - it('sets isScrollToBottomNeeded to false', () => { + it('sets isScrollToBottomFulfilled to false', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); const { container } = renderWithConfirmContextProvider( foobar, @@ -164,7 +164,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomNeeded: true, + isScrollToBottomFulfilled: true, }); }); }); diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx index 199d4bc5e7ce..dbd93e569be6 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx @@ -74,7 +74,7 @@ const ScrollToBottom = ({ children }: ContentProps) => { useEffect(() => { dispatch( updateConfirm({ - isScrollToBottomNeeded: isScrollable && !hasScrolledToBottom, + isScrollToBottomFulfilled: isScrollable && !hasScrolledToBottom, }), ); }, [isScrollable, hasScrolledToBottom]); diff --git a/ui/pages/confirmations/types/confirm.ts b/ui/pages/confirmations/types/confirm.ts index 0f1af0d9183d..41c3bdbca000 100644 --- a/ui/pages/confirmations/types/confirm.ts +++ b/ui/pages/confirmations/types/confirm.ts @@ -44,7 +44,7 @@ export type Confirmation = SignatureRequestType | TransactionMeta; export type ConfirmMetamaskState = { confirm: { currentConfirmation?: Confirmation; - isScrollToBottomNeeded?: boolean; + isScrollToBottomFulfilled?: boolean; }; metamask: { pendingApprovals: ApprovalControllerState['pendingApprovals']; From aace264c2b03ccb200b745ae32b6da39a81615b5 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 20:40:25 -0400 Subject: [PATCH 02/16] refactor: mv conditional to isConfirmDisabled --- .../components/confirm/footer/footer.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx index cd06d469bb69..f5b39f73aea7 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.tsx @@ -124,6 +124,13 @@ const Footer = () => { return false; }); + const isConfirmDisabled = + ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) + mmiSubmitDisabled || + ///: END:ONLY_INCLUDE_IF + isScrollToBottomFulfilled || + hardwareWalletRequiresConnection; + const onCancel = useCallback( ({ location }: { location?: MetaMetricsEventLocation }) => { if (!currentConfirmation) { @@ -194,13 +201,7 @@ const Footer = () => { onSubmit()} - disabled={ - ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) - mmiSubmitDisabled || - ///: END:ONLY_INCLUDE_IF - isScrollToBottomFulfilled || - hardwareWalletRequiresConnection - } + disabled={isConfirmDisabled} onCancel={onCancel} /> From 2c59ab8895785c1a1d5ac86db56613122ac0f64b Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 20:43:25 -0400 Subject: [PATCH 03/16] fix: rn isScrollToBottomFulfilled -> isScrollToBottomUnfulfilled --- .../components/confirm/footer/footer.test.tsx | 6 +++--- .../components/confirm/footer/footer.tsx | 4 ++-- .../scroll-to-bottom/scroll-to-bottom.test.tsx | 12 ++++++------ .../confirm/scroll-to-bottom/scroll-to-bottom.tsx | 2 +- ui/pages/confirmations/types/confirm.ts | 2 +- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx index 58f9e9912920..f33d6f5ee7b0 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx @@ -41,7 +41,7 @@ const render = (args = {}) => { from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', }, }, - isScrollToBottomFulfilled: false, + isScrollToBottomUnfulfilled: false, }, ...args, }); @@ -54,7 +54,7 @@ describe('ConfirmFooter', () => { const { container } = render({ confirm: { currentConfirmation: unapprovedPersonalSignMsg, - isScrollToBottomFulfilled: false, + isScrollToBottomUnfulfilled: false, }, }); expect(container).toMatchSnapshot(); @@ -64,7 +64,7 @@ describe('ConfirmFooter', () => { const { container } = render({ confirm: { currentConfirmation: genUnapprovedContractInteractionConfirmation(), - isScrollToBottomFulfilled: false, + isScrollToBottomUnfulfilled: false, }, }); expect(container).toMatchSnapshot(); diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx index f5b39f73aea7..f396bc88b622 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.tsx @@ -109,7 +109,7 @@ const Footer = () => { const confirm = useSelector(confirmSelector); const customNonceValue = useSelector(getCustomNonceValue); - const { currentConfirmation, isScrollToBottomFulfilled } = confirm; + const { currentConfirmation, isScrollToBottomUnfulfilled } = confirm; const { from } = getConfirmationSender(currentConfirmation); ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) @@ -128,7 +128,7 @@ const Footer = () => { ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) mmiSubmitDisabled || ///: END:ONLY_INCLUDE_IF - isScrollToBottomFulfilled || + isScrollToBottomUnfulfilled || hardwareWalletRequiresConnection; const onCancel = useCallback( diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx index f211f1e8dae2..d99b69dfafed 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx @@ -52,7 +52,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); }); - it('sets isScrollToBottomFulfilled to false', () => { + it('sets isScrollToBottomUnfulfilled to false', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); renderWithConfirmContextProvider( foobar, @@ -60,7 +60,7 @@ describe('ScrollToBottom', () => { ); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomFulfilled: false, + isScrollToBottomUnfulfilled: false, }); }); }); @@ -86,7 +86,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).toBeInTheDocument(); }); - it('sets isScrollToBottomFulfilled to true', () => { + it('sets isScrollToBottomUnfulfilled to true', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); renderWithConfirmContextProvider( foobar, @@ -94,7 +94,7 @@ describe('ScrollToBottom', () => { ); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomFulfilled: true, + isScrollToBottomUnfulfilled: true, }); }); @@ -155,7 +155,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); }); - it('sets isScrollToBottomFulfilled to false', () => { + it('sets isScrollToBottomUnfulfilled to false', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); const { container } = renderWithConfirmContextProvider( foobar, @@ -164,7 +164,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomFulfilled: true, + isScrollToBottomUnfulfilled: true, }); }); }); diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx index dbd93e569be6..aed6ec94cccb 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx @@ -74,7 +74,7 @@ const ScrollToBottom = ({ children }: ContentProps) => { useEffect(() => { dispatch( updateConfirm({ - isScrollToBottomFulfilled: isScrollable && !hasScrolledToBottom, + isScrollToBottomUnfulfilled: isScrollable && !hasScrolledToBottom, }), ); }, [isScrollable, hasScrolledToBottom]); diff --git a/ui/pages/confirmations/types/confirm.ts b/ui/pages/confirmations/types/confirm.ts index 41c3bdbca000..26fa8e1b3480 100644 --- a/ui/pages/confirmations/types/confirm.ts +++ b/ui/pages/confirmations/types/confirm.ts @@ -44,7 +44,7 @@ export type Confirmation = SignatureRequestType | TransactionMeta; export type ConfirmMetamaskState = { confirm: { currentConfirmation?: Confirmation; - isScrollToBottomFulfilled?: boolean; + isScrollToBottomUnfulfilled?: boolean; }; metamask: { pendingApprovals: ApprovalControllerState['pendingApprovals']; From 5f682310d4cd16be6013a43484571c509ed70b7f Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 20:43:44 -0400 Subject: [PATCH 04/16] refactor: update isSIWESignatureRequest to allow Confirmation types to check condition --- ui/pages/confirmations/utils/confirm.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/pages/confirmations/utils/confirm.ts b/ui/pages/confirmations/utils/confirm.ts index f5dadbdfe9c0..0c9429a1189e 100644 --- a/ui/pages/confirmations/utils/confirm.ts +++ b/ui/pages/confirmations/utils/confirm.ts @@ -8,7 +8,7 @@ import { } from '../../../../shared/constants/signatures'; import { parseTypedDataMessage } from '../../../../shared/modules/transaction.utils'; import { sanitizeMessage } from '../../../helpers/utils/util'; -import { SignatureRequestType } from '../types/confirm'; +import { Confirmation, SignatureRequestType } from '../types/confirm'; import { TYPED_SIGNATURE_VERSIONS } from '../constants'; export const REDESIGN_APPROVAL_TYPES = [ @@ -50,8 +50,13 @@ export const parseSanitizeTypedDataMessage = (dataToParse: string) => { return { sanitizedMessage, primaryType }; }; -export const isSIWESignatureRequest = (request: SignatureRequestType) => - Boolean(request?.msgParams?.siwe?.isSIWEMessage); +/** + * Returns true if the request is a SIWE signature request + * + * @param request - The confirmation request to check + */ +export const isSIWESignatureRequest = (request?: Confirmation) => + Boolean((request as SignatureRequestType)?.msgParams?.siwe?.isSIWEMessage); export const isOrderSignatureRequest = (request: SignatureRequestType) => { if ( From 5491bc7c7db7b38dc4ca1fddc30722238e2cc085 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 20:46:25 -0400 Subject: [PATCH 05/16] feat: add ConfirmFooter scroll tests --- .../components/confirm/footer/footer.test.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx index f33d6f5ee7b0..a1c2980fcd75 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx @@ -78,6 +78,26 @@ describe('ConfirmFooter', () => { expect(getByText('Cancel')).toBeInTheDocument(); }); + it('renders enabled "Confirm" button when isScrollToBottomUnfulfilled is false', () => { + const { getByText } = render(); + const confirmButton = getByText('Confirm'); + expect(confirmButton).not.toBeDisabled(); + }); + + describe.only('renders disabled "Confirm" Button', () => { + it('when isScrollToBottomUnfulfilled is true', () => { + const { getByText } = render({ + confirm: { + currentConfirmation: genUnapprovedContractInteractionConfirmation(), + isScrollToBottomUnfulfilled: true, + }, + }); + + const confirmButton = getByText('Confirm'); + expect(confirmButton).toBeDisabled(); + }); + }); + it('invoke action rejectPendingApproval when cancel button is clicked', () => { const { getAllByRole } = render(); const cancelButton = getAllByRole('button')[0]; From 00a29982fc3b20705900370e8bf203fc11c472f2 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 20:49:21 -0400 Subject: [PATCH 06/16] refactor: rn isScrollToBottomUncompleted unfulfilled -> uncomplete --- .../components/confirm/footer/footer.test.tsx | 12 ++++++------ .../components/confirm/footer/footer.tsx | 4 ++-- .../scroll-to-bottom/scroll-to-bottom.test.tsx | 12 ++++++------ .../confirm/scroll-to-bottom/scroll-to-bottom.tsx | 2 +- ui/pages/confirmations/types/confirm.ts | 2 +- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx index a1c2980fcd75..0d8a7d0d43be 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx @@ -41,7 +41,7 @@ const render = (args = {}) => { from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', }, }, - isScrollToBottomUnfulfilled: false, + isScrollToBottomUncompleted: false, }, ...args, }); @@ -54,7 +54,7 @@ describe('ConfirmFooter', () => { const { container } = render({ confirm: { currentConfirmation: unapprovedPersonalSignMsg, - isScrollToBottomUnfulfilled: false, + isScrollToBottomUncompleted: false, }, }); expect(container).toMatchSnapshot(); @@ -64,7 +64,7 @@ describe('ConfirmFooter', () => { const { container } = render({ confirm: { currentConfirmation: genUnapprovedContractInteractionConfirmation(), - isScrollToBottomUnfulfilled: false, + isScrollToBottomUncompleted: false, }, }); expect(container).toMatchSnapshot(); @@ -78,18 +78,18 @@ describe('ConfirmFooter', () => { expect(getByText('Cancel')).toBeInTheDocument(); }); - it('renders enabled "Confirm" button when isScrollToBottomUnfulfilled is false', () => { + it('renders enabled "Confirm" button when isScrollToBottomUncompleted is false', () => { const { getByText } = render(); const confirmButton = getByText('Confirm'); expect(confirmButton).not.toBeDisabled(); }); describe.only('renders disabled "Confirm" Button', () => { - it('when isScrollToBottomUnfulfilled is true', () => { + it('when isScrollToBottomUncompleted is true', () => { const { getByText } = render({ confirm: { currentConfirmation: genUnapprovedContractInteractionConfirmation(), - isScrollToBottomUnfulfilled: true, + isScrollToBottomUncompleted: true, }, }); diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx index f396bc88b622..08289973780c 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.tsx @@ -109,7 +109,7 @@ const Footer = () => { const confirm = useSelector(confirmSelector); const customNonceValue = useSelector(getCustomNonceValue); - const { currentConfirmation, isScrollToBottomUnfulfilled } = confirm; + const { currentConfirmation, isScrollToBottomUncompleted } = confirm; const { from } = getConfirmationSender(currentConfirmation); ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) @@ -128,7 +128,7 @@ const Footer = () => { ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) mmiSubmitDisabled || ///: END:ONLY_INCLUDE_IF - isScrollToBottomUnfulfilled || + isScrollToBottomUncompleted || hardwareWalletRequiresConnection; const onCancel = useCallback( diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx index d99b69dfafed..62cbbb25ee99 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx @@ -52,7 +52,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); }); - it('sets isScrollToBottomUnfulfilled to false', () => { + it('sets isScrollToBottomUncompleted to false', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); renderWithConfirmContextProvider( foobar, @@ -60,7 +60,7 @@ describe('ScrollToBottom', () => { ); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomUnfulfilled: false, + isScrollToBottomUncompleted: false, }); }); }); @@ -86,7 +86,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).toBeInTheDocument(); }); - it('sets isScrollToBottomUnfulfilled to true', () => { + it('sets isScrollToBottomUncompleted to true', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); renderWithConfirmContextProvider( foobar, @@ -94,7 +94,7 @@ describe('ScrollToBottom', () => { ); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomUnfulfilled: true, + isScrollToBottomUncompleted: true, }); }); @@ -155,7 +155,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); }); - it('sets isScrollToBottomUnfulfilled to false', () => { + it('sets isScrollToBottomUncompleted to false', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); const { container } = renderWithConfirmContextProvider( foobar, @@ -164,7 +164,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomUnfulfilled: true, + isScrollToBottomUncompleted: true, }); }); }); diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx index aed6ec94cccb..61aaa399ed96 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx @@ -74,7 +74,7 @@ const ScrollToBottom = ({ children }: ContentProps) => { useEffect(() => { dispatch( updateConfirm({ - isScrollToBottomUnfulfilled: isScrollable && !hasScrolledToBottom, + isScrollToBottomUncompleted: isScrollable && !hasScrolledToBottom, }), ); }, [isScrollable, hasScrolledToBottom]); diff --git a/ui/pages/confirmations/types/confirm.ts b/ui/pages/confirmations/types/confirm.ts index 26fa8e1b3480..eb32ed428562 100644 --- a/ui/pages/confirmations/types/confirm.ts +++ b/ui/pages/confirmations/types/confirm.ts @@ -44,7 +44,7 @@ export type Confirmation = SignatureRequestType | TransactionMeta; export type ConfirmMetamaskState = { confirm: { currentConfirmation?: Confirmation; - isScrollToBottomUnfulfilled?: boolean; + isScrollToBottomUncompleted?: boolean; }; metamask: { pendingApprovals: ApprovalControllerState['pendingApprovals']; From fc6377bfff0d4a7cf70558bb2cea5f022320a1d5 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 20:55:24 -0400 Subject: [PATCH 07/16] refactor: reverse isScrollToBottomUncompleted -> isScrollToBottomCompleted --- .../components/confirm/footer/footer.test.tsx | 12 ++++++------ .../components/confirm/footer/footer.tsx | 4 ++-- .../scroll-to-bottom/scroll-to-bottom.test.tsx | 12 ++++++------ .../confirm/scroll-to-bottom/scroll-to-bottom.tsx | 2 +- ui/pages/confirmations/types/confirm.ts | 2 +- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx index 0d8a7d0d43be..bdad6e86cbd0 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx @@ -41,7 +41,7 @@ const render = (args = {}) => { from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', }, }, - isScrollToBottomUncompleted: false, + isScrollToBottomCompleted: true, }, ...args, }); @@ -54,7 +54,7 @@ describe('ConfirmFooter', () => { const { container } = render({ confirm: { currentConfirmation: unapprovedPersonalSignMsg, - isScrollToBottomUncompleted: false, + isScrollToBottomCompleted: true, }, }); expect(container).toMatchSnapshot(); @@ -64,7 +64,7 @@ describe('ConfirmFooter', () => { const { container } = render({ confirm: { currentConfirmation: genUnapprovedContractInteractionConfirmation(), - isScrollToBottomUncompleted: false, + isScrollToBottomCompleted: true, }, }); expect(container).toMatchSnapshot(); @@ -78,18 +78,18 @@ describe('ConfirmFooter', () => { expect(getByText('Cancel')).toBeInTheDocument(); }); - it('renders enabled "Confirm" button when isScrollToBottomUncompleted is false', () => { + it('renders enabled "Confirm" button when isScrollToBottomCompleted is false', () => { const { getByText } = render(); const confirmButton = getByText('Confirm'); expect(confirmButton).not.toBeDisabled(); }); describe.only('renders disabled "Confirm" Button', () => { - it('when isScrollToBottomUncompleted is true', () => { + it('when isScrollToBottomCompleted is true', () => { const { getByText } = render({ confirm: { currentConfirmation: genUnapprovedContractInteractionConfirmation(), - isScrollToBottomUncompleted: true, + isScrollToBottomCompleted: true, }, }); diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx index 08289973780c..855a83e29fd0 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.tsx @@ -109,7 +109,7 @@ const Footer = () => { const confirm = useSelector(confirmSelector); const customNonceValue = useSelector(getCustomNonceValue); - const { currentConfirmation, isScrollToBottomUncompleted } = confirm; + const { currentConfirmation, isScrollToBottomCompleted } = confirm; const { from } = getConfirmationSender(currentConfirmation); ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) @@ -128,7 +128,7 @@ const Footer = () => { ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) mmiSubmitDisabled || ///: END:ONLY_INCLUDE_IF - isScrollToBottomUncompleted || + !isScrollToBottomCompleted || hardwareWalletRequiresConnection; const onCancel = useCallback( diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx index 62cbbb25ee99..b06f959e062b 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx @@ -52,7 +52,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); }); - it('sets isScrollToBottomUncompleted to false', () => { + it('sets isScrollToBottomCompleted to true', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); renderWithConfirmContextProvider( foobar, @@ -60,7 +60,7 @@ describe('ScrollToBottom', () => { ); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomUncompleted: false, + isScrollToBottomCompleted: true, }); }); }); @@ -86,7 +86,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).toBeInTheDocument(); }); - it('sets isScrollToBottomUncompleted to true', () => { + it('sets isScrollToBottomCompleted to false', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); renderWithConfirmContextProvider( foobar, @@ -94,7 +94,7 @@ describe('ScrollToBottom', () => { ); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomUncompleted: true, + isScrollToBottomCompleted: false, }); }); @@ -155,7 +155,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); }); - it('sets isScrollToBottomUncompleted to false', () => { + it('sets isScrollToBottomCompleted to true', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); const { container } = renderWithConfirmContextProvider( foobar, @@ -164,7 +164,7 @@ describe('ScrollToBottom', () => { expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); expect(updateSpy).toHaveBeenCalledWith({ - isScrollToBottomUncompleted: true, + isScrollToBottomCompleted: true, }); }); }); diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx index 61aaa399ed96..e9eb6709034b 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx @@ -74,7 +74,7 @@ const ScrollToBottom = ({ children }: ContentProps) => { useEffect(() => { dispatch( updateConfirm({ - isScrollToBottomUncompleted: isScrollable && !hasScrolledToBottom, + isScrollToBottomCompleted: !isScrollable || hasScrolledToBottom, }), ); }, [isScrollable, hasScrolledToBottom]); diff --git a/ui/pages/confirmations/types/confirm.ts b/ui/pages/confirmations/types/confirm.ts index eb32ed428562..b540589c2a83 100644 --- a/ui/pages/confirmations/types/confirm.ts +++ b/ui/pages/confirmations/types/confirm.ts @@ -44,7 +44,7 @@ export type Confirmation = SignatureRequestType | TransactionMeta; export type ConfirmMetamaskState = { confirm: { currentConfirmation?: Confirmation; - isScrollToBottomUncompleted?: boolean; + isScrollToBottomCompleted?: boolean; }; metamask: { pendingApprovals: ApprovalControllerState['pendingApprovals']; From c159bf0e1c51469085df6824cf92eedf98575756 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 21:05:37 -0400 Subject: [PATCH 08/16] fix: ConfirmFooter scroll tests --- .../components/confirm/footer/footer.test.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx index bdad6e86cbd0..4f866db2c783 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx @@ -78,18 +78,23 @@ describe('ConfirmFooter', () => { expect(getByText('Cancel')).toBeInTheDocument(); }); - it('renders enabled "Confirm" button when isScrollToBottomCompleted is false', () => { - const { getByText } = render(); + it('renders enabled "Confirm" button when isScrollToBottomCompleted is true', () => { + const { getByText } = render({ + confirm: { + currentConfirmation: genUnapprovedContractInteractionConfirmation(), + isScrollToBottomCompleted: true, + }, + }); const confirmButton = getByText('Confirm'); expect(confirmButton).not.toBeDisabled(); }); - describe.only('renders disabled "Confirm" Button', () => { - it('when isScrollToBottomCompleted is true', () => { + describe('renders disabled "Confirm" Button', () => { + it('when isScrollToBottomCompleted is false', () => { const { getByText } = render({ confirm: { currentConfirmation: genUnapprovedContractInteractionConfirmation(), - isScrollToBottomCompleted: true, + isScrollToBottomCompleted: false, }, }); From 2c8673a3032a4db7234dde371ad77cb3270e45ce Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 21:12:56 -0400 Subject: [PATCH 09/16] feat: ConfirmFooter do not require scroll for SIWE --- .../components/confirm/footer/footer.test.tsx | 36 ++++++++++++++----- .../components/confirm/footer/footer.tsx | 18 ++++++---- 2 files changed, 39 insertions(+), 15 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx index 4f866db2c783..b6374c865128 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx @@ -5,7 +5,10 @@ import { } from '../../../../../../shared/constants/hardware-wallets'; import { BlockaidResultType } from '../../../../../../shared/constants/security-provider'; import { genUnapprovedContractInteractionConfirmation } from '../../../../../../test/data/confirmations/contract-interaction'; -import { unapprovedPersonalSignMsg } from '../../../../../../test/data/confirmations/personal_sign'; +import { + signatureRequestSIWE, + unapprovedPersonalSignMsg, +} from '../../../../../../test/data/confirmations/personal_sign'; import mockState from '../../../../../../test/data/mock-state.json'; import { fireEvent, renderWithProvider } from '../../../../../../test/jest'; import * as MMIConfirmations from '../../../../../hooks/useMMIConfirmations'; @@ -78,15 +81,30 @@ describe('ConfirmFooter', () => { expect(getByText('Cancel')).toBeInTheDocument(); }); - it('renders enabled "Confirm" button when isScrollToBottomCompleted is true', () => { - const { getByText } = render({ - confirm: { - currentConfirmation: genUnapprovedContractInteractionConfirmation(), - isScrollToBottomCompleted: true, - }, + describe('renders enabled "Confirm" Button', () => { + it('when isScrollToBottomCompleted is true', () => { + const { getByText } = render({ + confirm: { + currentConfirmation: genUnapprovedContractInteractionConfirmation(), + isScrollToBottomCompleted: true, + }, + }); + + const confirmButton = getByText('Confirm'); + expect(confirmButton).not.toBeDisabled(); + }); + + it('when the confirmation is a Sign-in With Ethereum (SIWE) request', () => { + const { getByText } = render({ + confirm: { + currentConfirmation: signatureRequestSIWE, + isScrollToBottomCompleted: false, + }, + }); + + const confirmButton = getByText('Confirm'); + expect(confirmButton).not.toBeDisabled(); }); - const confirmButton = getByText('Confirm'); - expect(confirmButton).not.toBeDisabled(); }); describe('renders disabled "Confirm" Button', () => { diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx index 855a83e29fd0..773ff16afee3 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.tsx @@ -29,7 +29,10 @@ import { ///: END:ONLY_INCLUDE_IF } from '../../../../../store/actions'; import { confirmSelector } from '../../../selectors'; -import { REDESIGN_DEV_TRANSACTION_TYPES } from '../../../utils'; +import { + REDESIGN_DEV_TRANSACTION_TYPES, + isSIWESignatureRequest, +} from '../../../utils'; import { getConfirmationSender } from '../utils'; import { MetaMetricsEventLocation } from '../../../../../../shared/constants/metametrics'; @@ -124,12 +127,15 @@ const Footer = () => { return false; }); + const isSIWE = isSIWESignatureRequest(currentConfirmation); + const isConfirmDisabled = - ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) - mmiSubmitDisabled || - ///: END:ONLY_INCLUDE_IF - !isScrollToBottomCompleted || - hardwareWalletRequiresConnection; + !isSIWE && + (!isScrollToBottomCompleted || + ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) + mmiSubmitDisabled || + ///: END:ONLY_INCLUDE_IF + hardwareWalletRequiresConnection); const onCancel = useCallback( ({ location }: { location?: MetaMetricsEventLocation }) => { From 9f30b986a5737335e5f280a6eb94fee918e0e41b Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 21:23:59 -0400 Subject: [PATCH 10/16] refactor: isPermitSignatureRequest can accept any Confirmation to test condition --- ui/pages/confirmations/utils/confirm.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/ui/pages/confirmations/utils/confirm.ts b/ui/pages/confirmations/utils/confirm.ts index 0c9429a1189e..7407f42f738d 100644 --- a/ui/pages/confirmations/utils/confirm.ts +++ b/ui/pages/confirmations/utils/confirm.ts @@ -74,17 +74,23 @@ export const isOrderSignatureRequest = (request: SignatureRequestType) => { return PRIMARY_TYPES_ORDER.includes(primaryType); }; -export const isPermitSignatureRequest = (request: SignatureRequestType) => { +/** + * Returns true if the request is a Permit Typed Sign signature request + * + * @param request - The confirmation request to check + */ +export const isPermitSignatureRequest = (request?: Confirmation) => { if ( !request || !isSignatureTransactionType(request) || request.type !== 'eth_signTypedData' || - request.msgParams?.version?.toUpperCase() === TYPED_SIGNATURE_VERSIONS.V1 + (request as SignatureRequestType).msgParams?.version?.toUpperCase() === + TYPED_SIGNATURE_VERSIONS.V1 ) { return false; } const { primaryType } = parseTypedDataMessage( - request.msgParams?.data as string, + (request as SignatureRequestType).msgParams?.data as string, ); return PRIMARY_TYPES_PERMIT.includes(primaryType); From dcf9a9c557a8e608159a727cec9b9d7434660a37 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 21:33:10 -0400 Subject: [PATCH 11/16] feat: do not require scroll if Permit Simulation is shown --- .../components/confirm/footer/footer.test.tsx | 38 ++++++++++++++++++- .../components/confirm/footer/footer.tsx | 22 ++++++++--- 2 files changed, 53 insertions(+), 7 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx index b6374c865128..e6c3bd0040eb 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx @@ -9,6 +9,7 @@ import { signatureRequestSIWE, unapprovedPersonalSignMsg, } from '../../../../../../test/data/confirmations/personal_sign'; +import { permitSignatureMsg } from '../../../../../../test/data/confirmations/typed_sign'; import mockState from '../../../../../../test/data/mock-state.json'; import { fireEvent, renderWithProvider } from '../../../../../../test/jest'; import * as MMIConfirmations from '../../../../../hooks/useMMIConfirmations'; @@ -33,10 +34,11 @@ jest.mock( }), ); -const render = (args = {}) => { +const render = (args = {}, metamaskState = {}) => { const store = configureStore({ metamask: { ...mockState.metamask, + ...metamaskState, }, confirm: { currentConfirmation: { @@ -105,6 +107,23 @@ describe('ConfirmFooter', () => { const confirmButton = getByText('Confirm'); expect(confirmButton).not.toBeDisabled(); }); + + it('when the confirmation is a Permit with the transaction simulation setting enabled', () => { + const { getByText } = render( + { + confirm: { + currentConfirmation: permitSignatureMsg, + isScrollToBottomCompleted: false, + }, + }, + { + useTransactionSimulations: true, + }, + ); + + const confirmButton = getByText('Confirm'); + expect(confirmButton).not.toBeDisabled(); + }); }); describe('renders disabled "Confirm" Button', () => { @@ -119,6 +138,23 @@ describe('ConfirmFooter', () => { const confirmButton = getByText('Confirm'); expect(confirmButton).toBeDisabled(); }); + + it('when the confirmation is a Permit with the transaction simulation setting disabled', () => { + const { getByText } = render( + { + confirm: { + currentConfirmation: permitSignatureMsg, + isScrollToBottomCompleted: false, + }, + }, + { + useTransactionSimulations: false, + }, + ); + + const confirmButton = getByText('Confirm'); + expect(confirmButton).toBeDisabled(); + }); }); it('invoke action rejectPendingApproval when cancel button is clicked', () => { diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx index 773ff16afee3..a2c4a0de4063 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.tsx @@ -29,8 +29,11 @@ import { ///: END:ONLY_INCLUDE_IF } from '../../../../../store/actions'; import { confirmSelector } from '../../../selectors'; +import { selectUseTransactionSimulations } from '../../../selectors/preferences'; + import { REDESIGN_DEV_TRANSACTION_TYPES, + isPermitSignatureRequest, isSIWESignatureRequest, } from '../../../utils'; import { getConfirmationSender } from '../utils'; @@ -111,6 +114,9 @@ const Footer = () => { const t = useI18nContext(); const confirm = useSelector(confirmSelector); const customNonceValue = useSelector(getCustomNonceValue); + const useTransactionSimulations = useSelector( + selectUseTransactionSimulations, + ); const { currentConfirmation, isScrollToBottomCompleted } = confirm; const { from } = getConfirmationSender(currentConfirmation); @@ -128,14 +134,18 @@ const Footer = () => { }); const isSIWE = isSIWESignatureRequest(currentConfirmation); + const isPermit = isPermitSignatureRequest(currentConfirmation); + const isPermitSimulationShown = isPermit && useTransactionSimulations; + + console.log('isPermit', isPermit); + console.log('isPermitSimulationShown', isPermitSimulationShown); const isConfirmDisabled = - !isSIWE && - (!isScrollToBottomCompleted || - ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) - mmiSubmitDisabled || - ///: END:ONLY_INCLUDE_IF - hardwareWalletRequiresConnection); + (!isScrollToBottomCompleted && !isSIWE && !isPermitSimulationShown) || + ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) + mmiSubmitDisabled || + ///: END:ONLY_INCLUDE_IF + hardwareWalletRequiresConnection; const onCancel = useCallback( ({ location }: { location?: MetaMetricsEventLocation }) => { From 64cbdd4e0a6622e238fe7048ac8110864a37f8d1 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 23:11:15 -0400 Subject: [PATCH 12/16] fix: confirm snapshots Footer is not using useConfirmContext yet throwing disabled logic off --- .../components/confirm/footer/footer.tsx | 3 --- .../confirm/__snapshots__/confirm.test.tsx.snap | 12 ++++++++---- ui/pages/confirmations/confirm/confirm.test.tsx | 2 +- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx index a2c4a0de4063..ea69bbede1f3 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.tsx @@ -137,9 +137,6 @@ const Footer = () => { const isPermit = isPermitSignatureRequest(currentConfirmation); const isPermitSimulationShown = isPermit && useTransactionSimulations; - console.log('isPermit', isPermit); - console.log('isPermitSimulationShown', isPermitSimulationShown); - const isConfirmDisabled = (!isScrollToBottomCompleted && !isSIWE && !isPermitSimulationShown) || ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap index 82859fd5c17f..c36d3ee6135d 100644 --- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap +++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap @@ -218,8 +218,9 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = ` Cancel @@ -1149,8 +1150,9 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = ` Cancel @@ -1894,8 +1896,9 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] = Cancel @@ -2670,8 +2673,9 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = ` Cancel diff --git a/ui/pages/confirmations/confirm/confirm.test.tsx b/ui/pages/confirmations/confirm/confirm.test.tsx index 7182fb7ef165..8bb7fe861eab 100644 --- a/ui/pages/confirmations/confirm/confirm.test.tsx +++ b/ui/pages/confirmations/confirm/confirm.test.tsx @@ -107,7 +107,7 @@ describe('Confirm', () => { expect(container).toMatchSnapshot(); }); - it('should match snapshot for signature - typed sign - V4', async () => { + it('should match snapshot for signature - typed sign - V4', () => { const mockStateTypedSign = getMockTypedSignConfirmState(); const mockStore = configureMockStore(middleware)(mockStateTypedSign); const { container } = renderWithConfirmContextProvider( From 7ceebad266725a20bdb484fd6c6c4efdf04e11ad Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 3 Sep 2024 23:48:34 -0400 Subject: [PATCH 13/16] fix: restore async ConfirmPage test --- ui/pages/confirmations/confirm/confirm.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/pages/confirmations/confirm/confirm.test.tsx b/ui/pages/confirmations/confirm/confirm.test.tsx index 8bb7fe861eab..7182fb7ef165 100644 --- a/ui/pages/confirmations/confirm/confirm.test.tsx +++ b/ui/pages/confirmations/confirm/confirm.test.tsx @@ -107,7 +107,7 @@ describe('Confirm', () => { expect(container).toMatchSnapshot(); }); - it('should match snapshot for signature - typed sign - V4', () => { + it('should match snapshot for signature - typed sign - V4', async () => { const mockStateTypedSign = getMockTypedSignConfirmState(); const mockStore = configureMockStore(middleware)(mockStateTypedSign); const { container } = renderWithConfirmContextProvider( From f0db665d36e2f886036458b97e2d9aebb48c67e0 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Wed, 4 Sep 2024 21:01:26 -0400 Subject: [PATCH 14/16] fix: update ConfirmPage & Footer tests following merge changes --- test/data/confirmations/helper.ts | 39 +- .../components/confirm/footer/footer.test.tsx | 9 +- .../__snapshots__/confirm.test.tsx.snap | 2310 ++++++++++++++--- .../confirmations/confirm/confirm.test.tsx | 91 +- 4 files changed, 2025 insertions(+), 424 deletions(-) diff --git a/test/data/confirmations/helper.ts b/test/data/confirmations/helper.ts index 13ba7a9a72ed..54c1576ed207 100644 --- a/test/data/confirmations/helper.ts +++ b/test/data/confirmations/helper.ts @@ -1,4 +1,5 @@ import { ApprovalType } from '@metamask/controller-utils'; +import { merge } from 'lodash'; import { Confirmation, @@ -142,28 +143,34 @@ export const getMockConfirmStateForTransaction = ( transaction: Confirmation, args: RootState = { metamask: {} }, ) => - getMockConfirmState({ - ...args, - metamask: { - ...args.metamask, - pendingApprovals: { - [transaction.id]: { - id: transaction.id, - type: ApprovalType.Transaction, + getMockConfirmState( + merge( + { + metamask: { + ...args.metamask, + pendingApprovals: { + [transaction.id]: { + id: transaction.id, + type: ApprovalType.Transaction, + }, + }, + transactions: [transaction], + }, + confirm: { + currentConfirmation: transaction, }, }, - transactions: [transaction], - }, - confirm: { - currentConfirmation: transaction, - }, - }); + args, + ), + ); -export const getMockContractInteractionConfirmState = () => { +export const getMockContractInteractionConfirmState = ( + args: RootState = { metamask: {} }, +) => { const contractInteraction = genUnapprovedContractInteractionConfirmation({ chainId: mockState.metamask.networkConfigurations.goerli.chainId, }); - return getMockConfirmStateForTransaction(contractInteraction); + return getMockConfirmStateForTransaction(contractInteraction, args); }; export const getMockApproveConfirmState = () => { diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx index 95f8e37ca9f7..bd1a8172f7e1 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx @@ -55,7 +55,14 @@ describe('ConfirmFooter', () => { }); it('should match snapshot with transaction confirmation', () => { - const { container } = render(getMockContractInteractionConfirmState()); + const { container } = render( + getMockContractInteractionConfirmState({ + confirm: { + isScrollToBottomCompleted: true, + }, + metamask: {}, + }), + ); expect(container).toMatchSnapshot(); }); diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap index c36d3ee6135d..a90c43d7d783 100644 --- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap +++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap @@ -1,6 +1,203 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Confirm matches snapshot for signature - personal sign type 1`] = ` +
+
+
+
+
+
+
+
+
+
+ Chain 5 logo +
+
+
+

+ Test Account +

+

+ Chain 5 +

+
+
+
+
+
+
+ +
+
+
+
+
+
+
+

+ Signature request +

+

+ Only confirm this message if you approve the content and trust the requesting site. +

+
+
+
+

+ Request from +

+
+
+ +
+
+
+
+

+ metamask.github.io +

+
+
+
+
+
+
+

+ Message +

+
+
+

+ Example \`personal_sign\` message +

+
+
+
+
+
+
+ + +
+
+
+
+`; + +exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitBatch 1`] = `
- Test Account -

+ />

- Signature request + Spending cap request

- Only confirm this message if you approve the content and trust the requesting site. + This site wants permission to spend your tokens.

- Request from + Estimated changes

-
-

- metamask.github.io -

-
-
-
-
-
-
-

- Message -

-
-
-

- Example \`personal_sign\` message -

-
+
+

+ You're giving the spender permission to spend this many tokens from your account. +

+
+
+
+
+

+ Spending cap +

+
+
+
+
+
+
+
+
+

+ 14,615,016,373,... +

+
+
+
+
+
+ +

+ 0xA0b86...6eB48 +

+
+
+
+
+
+
+
+
+
+
+

+ 24,615,016,373,... +

+
+
+
+
+
+ +

+ 0xb0B86...6EB48 +

+
+
+
+
+
+
+
+
+
+
+
+
+

+ Spender +

+
+
+
+ +

+ 0x3fC91...b7FAD +

+
+
+
+
+
+
+

+ Request from +

+
+
+ +
+
+
+
+

+ metamask.github.io +

+
+
+
+
+

+ Interacting with +

+
+
+
+ +

+ 0x00000...78BA3 +

+
+
+
+
+
+
+
+

+ Message +

+
+
+
+
+

+ Primary type: +

+
+
+

+ PermitBatch +

+
+
+
+
+
+
+

+ Details: +

+
+
+
+
+

+ 0: +

+
+
+
+
+

+ Token: +

+
+
+
+ +

+ 0xA0b86...6eB48 +

+
+
+
+
+
+

+ Amount: +

+
+
+
+
+

+ 14,615,016,373,... +

+
+
+
+
+
+
+

+ Expiration: +

+
+
+

+ 20 January 1970, 22:34 +

+
+
+
+
+

+ Nonce: +

+
+
+

+ 5 +

+
+
+
+
+
+
+

+ 1: +

+
+
+
+
+

+ Token: +

+
+
+
+ +

+ 0xb0B86...6EB48 +

+
+
+
+
+
+

+ Amount: +

+
+
+
+
+

+ 24,615,016,373,... +

+
+
+
+
+
+
+

+ Expiration: +

+
+
+

+ 20 January 1970, 22:34 +

+
+
+
+
+

+ Nonce: +

+
+
+

+ 6 +

+
+
+
+
+
+
+
+
+

+ Spender: +

+
+
+
+ +

+ 0x3fC91...b7FAD +

+
+
+
+
+
+

+ SigDeadline: +

+
+
+

+ 20 January 1970, 21:51 +

+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+`; + +exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitSingle 1`] = ` +
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+ C +
+
+
+

+

+ Chain 5 +

+
+
+
+
+
+
+ +
+
+
+
+
+
+
+

+ Spending cap request +

+

+ This site wants permission to spend your tokens. +

+
+
+
+

+ Estimated changes +

+
+
+ +
+
+
+
+

+ You're giving the spender permission to spend this many tokens from your account. +

+
+
+
+
+

+ Spending cap +

+
+
+
+
+
+
+
+
+

+ 14,615,016,373,... +

+
+
+
+
+
+ +

+ 0xA0b86...6eB48 +

+
+
+
+
+
+
+
+
+
+
+
+
+

+ Spender +

+
+
+
+ +

+ 0x3fC91...b7FAD +

+
+
+
+
+
+
+

+ Request from +

+
+
+ +
+
+
+
+

+ metamask.github.io +

+
+
+
+
+

+ Interacting with +

+
+
+
+ +

+ 0x00000...78BA3 +

+
+
+
+
+
+
+
+

+ Message +

+
+
+
+
+

+ Primary type: +

+
+
+

+ PermitSingle +

+
+
+
+
+
+
+

+ Details: +

+
+
+
+
+

+ Token: +

+
+
+
+ +

+ 0xA0b86...6eB48 +

+
+
+
+
+
+

+ Amount: +

+
+
+
+
+

+ 14,615,016,373,... +

+
+
+
+
+
+
+

+ Expiration: +

+
+
+

+ 20 January 1970, 22:34 +

+
+
+
+
+

+ Nonce: +

+
+
+

+ 5 +

+
+
+
+
+
+
+

+ Spender: +

+
+
+
+ +

+ 0x3fC91...b7FAD +

+
+
+
+
+
+

+ SigDeadline: +

+
+
+

+ 20 January 1970, 21:51 +

+
+
+
+
+
@@ -218,9 +2028,8 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = ` Cancel @@ -254,48 +2063,16 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
-
- - - - - -
-
+ />
- C + Chain 5 logo
+ />

+ />

+ />

+ />

+ />

+ />

+ />

@@ -1357,51 +2881,55 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] = style="margin-left: auto; max-width: 100%;" >

-

- 30 -

+

+ 30 +

+
-
-
-
- -

+

- 0xCcCCc...ccccC -

+ +

+ 0xCcCCc...ccccC +

+
+
-
@@ -1896,9 +3424,8 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] = Cancel @@ -2673,9 +4200,8 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = ` Cancel diff --git a/ui/pages/confirmations/confirm/confirm.test.tsx b/ui/pages/confirmations/confirm/confirm.test.tsx index 7182fb7ef165..0b10976ab48c 100644 --- a/ui/pages/confirmations/confirm/confirm.test.tsx +++ b/ui/pages/confirmations/confirm/confirm.test.tsx @@ -6,6 +6,8 @@ import { act } from '@testing-library/react'; import { orderSignatureMsg, permitSignatureMsg, + permitSingleSignatureMsg, + permitBatchSignatureMsg, } from '../../../../test/data/confirmations/typed_sign'; import mockState from '../../../../test/data/mock-state.json'; import { @@ -34,11 +36,14 @@ describe('Confirm', () => { it('should render', () => { const mockStore = configureMockStore(middleware)(mockState); - const { container } = renderWithConfirmContextProvider( - , - mockStore, - ); - expect(container).toBeDefined(); + + act(() => { + const { container } = renderWithConfirmContextProvider( + , + mockStore, + ); + expect(container).toBeDefined(); + }); }); it('should match snapshot for signature - typed sign - permit', async () => { @@ -68,14 +73,17 @@ describe('Confirm', () => { expect(container).toMatchSnapshot(); }); - it('matches snapshot for signature - personal sign type', () => { + it('matches snapshot for signature - personal sign type', async () => { const mockStatePersonalSign = getMockPersonalSignConfirmState(); const mockStore = configureMockStore(middleware)(mockStatePersonalSign); - const { container } = renderWithConfirmContextProvider( - , - mockStore, - ); - expect(container).toMatchSnapshot(); + + await act(async () => { + const { container } = await renderWithConfirmContextProvider( + , + mockStore, + ); + expect(container).toMatchSnapshot(); + }); }); it('should match snapshot signature - typed sign - order', async () => { @@ -110,10 +118,63 @@ describe('Confirm', () => { it('should match snapshot for signature - typed sign - V4', async () => { const mockStateTypedSign = getMockTypedSignConfirmState(); const mockStore = configureMockStore(middleware)(mockStateTypedSign); - const { container } = renderWithConfirmContextProvider( - , - mockStore, + + await act(async () => { + const { container } = await renderWithConfirmContextProvider( + , + mockStore, + ); + expect(container).toMatchSnapshot(); + }); + }); + + it('should match snapshot for signature - typed sign - V4 - PermitSingle', async () => { + const mockStateTypedSign = getMockTypedSignConfirmStateForRequest( + permitSingleSignatureMsg, + { + metamask: { useTransactionSimulations: true }, + }, ); - expect(container).toMatchSnapshot(); + const mockStore = configureMockStore(middleware)(mockStateTypedSign); + + jest.spyOn(actions, 'getTokenStandardAndDetails').mockResolvedValue({ + decimals: '2', + standard: 'erc20', + }); + + await act(async () => { + const { container, findByText } = await renderWithConfirmContextProvider( + , + mockStore, + ); + + expect(await findByText('1,461,501,637,3...')).toBeInTheDocument(); + expect(container).toMatchSnapshot(); + }); + }); + + it('should match snapshot for signature - typed sign - V4 - PermitBatch', async () => { + const mockStateTypedSign = getMockTypedSignConfirmStateForRequest( + permitBatchSignatureMsg, + { + metamask: { useTransactionSimulations: true }, + }, + ); + const mockStore = configureMockStore(middleware)(mockStateTypedSign); + + jest.spyOn(actions, 'getTokenStandardAndDetails').mockResolvedValue({ + decimals: '2', + standard: 'erc20', + }); + + await act(async () => { + const { container, findByText } = await renderWithConfirmContextProvider( + , + mockStore, + ); + + expect(await findByText('1,461,501,637,3...')).toBeInTheDocument(); + expect(container).toMatchSnapshot(); + }); }); }); From fb116e51651d8aa08eec36df44f38b123fe6f58a Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Wed, 4 Sep 2024 23:49:29 -0400 Subject: [PATCH 15/16] fix: ScrollToBottom test --- .../confirm/scroll-to-bottom/scroll-to-bottom.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx index b06f959e062b..3a23f9dac45e 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx @@ -144,6 +144,7 @@ describe('ScrollToBottom', () => { describe('when user has scrolled to the bottom', () => { beforeEach(() => { mockedUseScrollRequiredResult.isScrolledToBottom = true; + mockedUseScrollRequiredResult.hasScrolledToBottom = true; }); it('hides the button', () => { @@ -157,12 +158,11 @@ describe('ScrollToBottom', () => { it('sets isScrollToBottomCompleted to true', () => { const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm'); - const { container } = renderWithConfirmContextProvider( + renderWithConfirmContextProvider( foobar, configureMockStore([])(mockState), ); - expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); expect(updateSpy).toHaveBeenCalledWith({ isScrollToBottomCompleted: true, }); From 3d47a03a1d0b7acb0c9fa888a39dce2f26d7a357 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 5 Sep 2024 14:05:42 -0400 Subject: [PATCH 16/16] fix: isScrollToBottomNeeded -> isScrollToBottomCompleted --- ui/ducks/confirm/confirm.ts | 2 +- ui/pages/confirmations/types/confirm.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/ducks/confirm/confirm.ts b/ui/ducks/confirm/confirm.ts index 9a1c7ff37753..6e546eae9f9c 100644 --- a/ui/ducks/confirm/confirm.ts +++ b/ui/ducks/confirm/confirm.ts @@ -9,7 +9,7 @@ const createActionType = (action: string): string => export const UPDATE_CONFIRM = createActionType('UPDATE_CONFIRM'); const initState = { - isScrollToBottomNeeded: false, + isScrollToBottomCompleted: true, }; export default function confirmReducer( diff --git a/ui/pages/confirmations/types/confirm.ts b/ui/pages/confirmations/types/confirm.ts index 226f74c540ca..da4981c10216 100644 --- a/ui/pages/confirmations/types/confirm.ts +++ b/ui/pages/confirmations/types/confirm.ts @@ -43,7 +43,7 @@ export type Confirmation = SignatureRequestType | TransactionMeta; export type ConfirmMetamaskState = { confirm: { - isScrollToBottomNeeded?: boolean; + isScrollToBottomCompleted?: boolean; }; metamask: { pendingApprovals: ApprovalControllerState['pendingApprovals'];