diff --git a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx index 1f70eb9e00a8..de17a81ff0cc 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx @@ -36,6 +36,7 @@ const BottomSheet = forwardRef( children, onClose, onOpen, + style, isInteractable = true, shouldNavigateBack = true, isFullscreen = false, @@ -107,6 +108,7 @@ const BottomSheet = forwardRef( onOpen={onOpenCB} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} + style={style} > {children} diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.styles.ts b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.styles.ts index 6d949b7dc4bc..4ec431815680 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.styles.ts +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.styles.ts @@ -1,4 +1,5 @@ // Third party dependencies. +// eslint-disable-next-line @typescript-eslint/no-shadow import { StyleSheet, ViewStyle } from 'react-native'; // External dependencies. @@ -21,7 +22,7 @@ const styleSheet = (params: { }) => { const { vars, theme } = params; const { colors, shadows } = theme; - const { maxSheetHeight, screenBottomPadding, isFullscreen } = vars; + const { isFullscreen, maxSheetHeight, screenBottomPadding, style } = vars; return StyleSheet.create({ base: Object.assign({ @@ -30,18 +31,21 @@ const styleSheet = (params: { left: 0, right: 0, } as ViewStyle) as ViewStyle, - sheet: { - backgroundColor: colors.background.default, - borderTopLeftRadius: 8, - borderTopRightRadius: 8, - maxHeight: maxSheetHeight, - overflow: 'hidden', - paddingBottom: screenBottomPadding, - borderWidth: 1, - borderColor: colors.border.muted, - ...(isFullscreen && { height: maxSheetHeight }), - ...shadows.size.lg, - }, + sheet: Object.assign( + { + backgroundColor: colors.background.default, + borderTopLeftRadius: 8, + borderTopRightRadius: 8, + maxHeight: maxSheetHeight, + overflow: 'hidden', + paddingBottom: screenBottomPadding, + borderWidth: 1, + borderColor: colors.border.muted, + ...(isFullscreen && { height: maxSheetHeight }), + ...shadows.size.lg, + }, + style, + ) as ViewStyle, notchWrapper: { alignSelf: 'stretch', padding: 4, diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx index 61e3cfe9c780..822c7c55b379 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx @@ -59,6 +59,7 @@ const BottomSheetDialog = forwardRef< isInteractable = true, onClose, onOpen, + style, ...props }, ref, @@ -71,6 +72,7 @@ const BottomSheetDialog = forwardRef< const { styles } = useStyles(styleSheet, { maxSheetHeight, screenBottomPadding, + style, isFullscreen, }); // X and Y values start on top left of the DIALOG diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.types.ts b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.types.ts index da2ba4a6f35f..9326e95f6ed8 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.types.ts +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.types.ts @@ -1,5 +1,5 @@ // Third party dependencies. -import { ViewProps } from 'react-native'; +import { StyleProp, ViewProps, ViewStyle } from 'react-native'; /** * BottomSheetDialog component props. @@ -40,5 +40,6 @@ export interface BottomSheetDialogRef { export interface BottomSheetDialogStyleSheetVars { maxSheetHeight: number; screenBottomPadding: number; + style: StyleProp; isFullscreen: boolean; } diff --git a/app/components/Nav/App/index.js b/app/components/Nav/App/index.js index e6a03c14531e..e2a54e4a37e4 100644 --- a/app/components/Nav/App/index.js +++ b/app/components/Nav/App/index.js @@ -1039,12 +1039,10 @@ const App = (props) => { diff --git a/app/components/Views/confirmations/Approval/__snapshots__/index.test.tsx.snap b/app/components/Views/confirmations/Approval/__snapshots__/index.test.tsx.snap index d74d9b1a64a0..90ee8367306f 100644 --- a/app/components/Views/confirmations/Approval/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/confirmations/Approval/__snapshots__/index.test.tsx.snap @@ -595,7 +595,7 @@ exports[`Approval render matches snapshot 1`] = ` { +const styleSheet = (params: { + theme: Theme; +}) => { const { theme } = params; return StyleSheet.create({ + bottomSheetDialogSheet: { + backgroundColor: theme.colors.background.alternative, + }, flatContainer: { position: 'absolute', top: 0, @@ -16,22 +19,9 @@ const styleSheet = (params: { theme: Theme }) => { zIndex: 9999, backgroundColor: theme.colors.background.alternative, justifyContent: 'space-between', - paddingHorizontal: 16, }, - modalContainer: { - backgroundColor: theme.colors.background.alternative, + scrollView: { paddingHorizontal: 16, - paddingVertical: 24, - borderTopLeftRadius: 20, - borderTopRightRadius: 20, - paddingBottom: Device.isIphoneX() ? 20 : 0, - height: '85%', - }, - scrollableSection: { - padding: 4, - }, - scrollable: { - height: '75%', }, }); }; diff --git a/app/components/Views/confirmations/Confirm/Confirm.test.tsx b/app/components/Views/confirmations/Confirm/Confirm.test.tsx index 74ff06e38bd1..bf12b63f2ee4 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.test.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.test.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +import { act } from '@testing-library/react-native'; import renderWithProvider from '../../../../util/test/renderWithProvider'; import { @@ -12,6 +14,40 @@ import * as ConfirmationRedesignEnabled from '../hooks/useConfirmationRedesignEn import { Confirm } from './Confirm'; +jest.mock('@react-navigation/native', () => ({ + ...jest.requireActual('@react-navigation/native'), + useNavigation: () => ({ + addListener: jest.fn(), + dispatch: jest.fn(), + goBack: jest.fn(), + navigate: jest.fn(), + removeListener: jest.fn(), + }), +})); + +jest.mock('react-native/Libraries/Linking/Linking', () => ({ + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + openURL: jest.fn(), + canOpenURL: jest.fn(), + getInitialURL: jest.fn(), +})); + +jest.mock('react-native-safe-area-context', () => { + const inset = { top: 0, right: 0, bottom: 0, left: 0 }; + const frame = { width: 0, height: 0, x: 0, y: 0 }; + + return { + ...jest.requireActual('react-native-safe-area-context'), + SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children), + SafeAreaConsumer: jest + .fn() + .mockImplementation(({ children }) => children(inset)), + useSafeAreaInsets: jest.fn().mockImplementation(() => inset), + useSafeAreaFrame: jest.fn().mockImplementation(() => frame), + }; +}); + jest.mock('../../../../core/Engine', () => ({ getTotalFiatAccountBalance: () => ({ tokenFiat: 10 }), context: { @@ -31,14 +67,10 @@ jest.mock('../../../../core/Engine', () => ({ }, controllerMessenger: { subscribe: jest.fn(), + unsubscribe: jest.fn(), }, })); -jest.mock('../../../../util/address', () => ({ - ...jest.requireActual('../../../../util/address'), - getAddressAccountType: (str: string) => str, -})); - jest.mock('react-native-gzip', () => ({ deflate: (str: string) => str, })); @@ -61,10 +93,22 @@ describe('Confirm', () => { expect(getByTestId('modal-confirmation-container')).toBeDefined(); }); - it('renders correct information for personal sign', async () => { - const { getAllByRole, getByText } = renderWithProvider(, { - state: personalSignatureConfirmationState, + it('renders a flat confirmation for specified type(s): staking deposit', () => { + const { getByTestId } = renderWithProvider(, { + state: stakingDepositConfirmationState, }); + expect(getByTestId('flat-confirmation-container')).toBeDefined(); + }); + + it('renders correct information for personal sign', () => { + const { getAllByRole, getByText } = renderWithProvider( + + + , + { + state: personalSignatureConfirmationState, + }, + ); expect(getByText('Signature request')).toBeDefined(); expect( getByText('Review request details before you confirm.'), @@ -76,11 +120,16 @@ describe('Confirm', () => { expect(getAllByRole('button')).toHaveLength(2); }); - it('renders correct information for typed sign v1', async () => { + it('renders correct information for typed sign v1', () => { const { getAllByRole, getAllByText, getByText, queryByText } = - renderWithProvider(, { - state: typedSignV1ConfirmationState, - }); + renderWithProvider( + + + , + { + state: typedSignV1ConfirmationState, + }, + ); expect(getByText('Signature request')).toBeDefined(); expect(getByText('Request from')).toBeDefined(); expect(getByText('metamask.github.io')).toBeDefined(); @@ -102,18 +151,21 @@ describe('Confirm', () => { expect(getByText('Advanced details')).toBeDefined(); }); - it('renders blockaid banner if confirmation has blockaid error response', async () => { + it('renders a blockaid banner if the confirmation has blockaid error response', async () => { const { getByText } = renderWithProvider(, { state: { ...typedSignV1ConfirmationState, signatureRequest: { securityAlertResponse }, }, }); + + await act(async () => undefined); + expect(getByText('Signature request')).toBeDefined(); expect(getByText('This is a deceptive request')).toBeDefined(); }); - it('returns null if re-design is not enabled for confirmation', () => { + it('returns null if confirmation redesign is not enabled', () => { jest .spyOn(ConfirmationRedesignEnabled, 'useConfirmationRedesignEnabled') .mockReturnValue({ isRedesignedEnabled: false }); diff --git a/app/components/Views/confirmations/Confirm/Confirm.tsx b/app/components/Views/confirmations/Confirm/Confirm.tsx index a5e4897e66e0..8c03d1d748d2 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.tsx @@ -6,34 +6,36 @@ import { View, } from 'react-native'; +import BottomSheet from '../../../../component-library/components/BottomSheets/BottomSheet'; import { useStyles } from '../../../../component-library/hooks'; -import BottomModal from '../components/UI/BottomModal'; -import Footer from '../components/Confirm/Footer'; +import { Footer } from '../components/Confirm/Footer'; import Info from '../components/Confirm/Info'; import { LedgerContextProvider } from '../context/LedgerContext'; import { QRHardwareContextProvider } from '../context/QRHardwareContext/QRHardwareContext'; import SignatureBlockaidBanner from '../components/Confirm/SignatureBlockaidBanner'; import Title from '../components/Confirm/Title'; -import useApprovalRequest from '../hooks/useApprovalRequest'; -import { useConfirmActions } from '../hooks/useConfirmActions'; import { useConfirmationRedesignEnabled } from '../hooks/useConfirmationRedesignEnabled'; import { useFlatConfirmation } from '../hooks/useFlatConfirmation'; +import useApprovalRequest from '../hooks/useApprovalRequest'; +import { useConfirmActions } from '../hooks/useConfirmActions'; import styleSheet from './Confirm.styles'; const ConfirmWrapped = ({ styles, + testID, }: { styles: StyleSheet.NamedStyles>; + testID?: string; }) => ( - <ScrollView style={styles.scrollable}> - <TouchableWithoutFeedback> - <View style={styles.scrollableSection}> + <ScrollView style={styles.scrollView}> + <TouchableWithoutFeedback testID={testID}> + <> <SignatureBlockaidBanner /> <Info /> - </View> + </> </TouchableWithoutFeedback> </ScrollView> <Footer /> @@ -62,10 +64,13 @@ export const Confirm = () => { } return ( - <BottomModal onClose={onReject} testID="modal-confirmation-container"> - <View style={styles.modalContainer} testID={approvalRequest?.type}> - <ConfirmWrapped styles={styles} /> - </View> - </BottomModal> + <BottomSheet + isInteractable={false} + onClose={onReject} + style={styles.bottomSheetDialogSheet} + testID="modal-confirmation-container" + > + <ConfirmWrapped testID={approvalRequest?.type} styles={styles} /> + </BottomSheet> ); }; diff --git a/app/components/Views/confirmations/SendFlow/Confirm/styles.ts b/app/components/Views/confirmations/SendFlow/Confirm/styles.ts index cc48fbdf0e6c..e54ab1dbbd73 100644 --- a/app/components/Views/confirmations/SendFlow/Confirm/styles.ts +++ b/app/components/Views/confirmations/SendFlow/Confirm/styles.ts @@ -135,7 +135,7 @@ const createStyles = (colors: any) => textDecorationLine: 'underline', ...fontStyles.bold, }, - blockaidBanner: { + blockaidBannerContainer: { marginBottom: 10, marginTop: 20, marginHorizontal: 10, diff --git a/app/components/Views/confirmations/components/ApproveTransactionReview/styles.ts b/app/components/Views/confirmations/components/ApproveTransactionReview/styles.ts index 1e784c99285d..e0bde730402d 100644 --- a/app/components/Views/confirmations/components/ApproveTransactionReview/styles.ts +++ b/app/components/Views/confirmations/components/ApproveTransactionReview/styles.ts @@ -167,7 +167,7 @@ const createStyles = (colors: any) => justifyContent: 'center', alignItems: 'center', }, - blockaidWarning: { + blockaidBannerContainer: { marginBottom: 10, marginTop: 20, marginHorizontal: 10, diff --git a/app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts b/app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts index 144b3db7963c..5df96fb7026e 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts +++ b/app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts @@ -1,34 +1,15 @@ +import { Theme } from '@metamask/design-tokens'; import { StyleSheet } from 'react-native'; -import { Theme } from '../../../../../../util/theme/models'; -const styleSheet = (params: { - theme: Theme; - vars: { confirmDisabled: boolean; isStakingConfirmation: boolean }; -}) => { - const { - theme, - vars: { confirmDisabled, isStakingConfirmation }, - } = params; +const styleSheet = (params: { theme: Theme }) => { + const { theme: { colors }} = params; return StyleSheet.create({ - rejectButton: { - flex: 1, - }, - confirmButton: { - flex: 1, - opacity: confirmDisabled ? 0.5 : 1, - }, - divider: { - height: 1, - backgroundColor: theme.colors.border.muted, - }, - buttonsContainer: { - flexDirection: 'row', + base: { + backgroundColor: colors.background.alternative, + paddingHorizontal: 16, + paddingBottom: 8, paddingTop: 16, - paddingBottom: isStakingConfirmation ? 6 : 16, - }, - buttonDivider: { - width: 8, }, linkText: { textDecorationLine: 'underline', @@ -38,6 +19,7 @@ const styleSheet = (params: { justifyContent: 'center', flexWrap: 'wrap', marginBottom: 24, + paddingBottom: 16, }, }); }; diff --git a/app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx b/app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx index 6b06721221d4..0b7e7ea9c8c7 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx +++ b/app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx @@ -8,7 +8,7 @@ import { personalSignatureConfirmationState, stakingDepositConfirmationState } f import * as QRHardwareHook from '../../../context/QRHardwareContext/QRHardwareContext'; // eslint-disable-next-line import/no-namespace import * as LedgerContext from '../../../context/LedgerContext/LedgerContext'; -import Footer from './index'; +import { Footer } from './index'; import { Linking } from 'react-native'; import AppConstants from '../../../../../../core/AppConstants'; diff --git a/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx b/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx index 68c70c346c49..20638c1daf15 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx +++ b/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx @@ -3,11 +3,12 @@ import React, { useMemo } from 'react'; import { Linking, View } from 'react-native'; import { ConfirmationFooterSelectorIDs } from '../../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors'; import { strings } from '../../../../../../../locales/i18n'; -import Button, { +import { ButtonSize, ButtonVariants, - ButtonWidthTypes, } from '../../../../../../component-library/components/Buttons/Button'; +import BottomSheetFooter from '../../../../../../component-library/components/BottomSheets/BottomSheetFooter'; +import { ButtonsAlignment } from '../../../../../../component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.types'; import Text, { TextVariant, } from '../../../../../../component-library/components/Texts/Text'; @@ -21,7 +22,7 @@ import { useTransactionMetadataRequest } from '../../../hooks/useTransactionMeta import { ResultType } from '../../BlockaidBanner/BlockaidBanner.types'; import styleSheet from './Footer.styles'; -const Footer = () => { +export const Footer = () => { const { onConfirm, onReject } = useConfirmActions(); const { isQRSigningInProgress, needsCameraPermission } = useQRHardwareContext(); @@ -49,31 +50,32 @@ const Footer = () => { return strings('confirm.confirm'); }, [isLedgerAccount, isQRSigningInProgress]); + const buttons = [ + { + variant: ButtonVariants.Secondary, + label: strings('confirm.reject'), + size: ButtonSize.Lg, + onPress: onReject, + testID: ConfirmationFooterSelectorIDs.CANCEL_BUTTON, + }, + { + variant: ButtonVariants.Primary, + isDanger: securityAlertResponse?.result_type === ResultType.Malicious, + isDisabled: needsCameraPermission, + label: confirmButtonLabel, + size: ButtonSize.Lg, + onPress: onConfirm, + testID: ConfirmationFooterSelectorIDs.CONFIRM_BUTTON, + }, + ]; + return ( - <View> - <View style={styles.buttonsContainer}> - <Button - onPress={onReject} - label={strings('confirm.reject')} - style={styles.rejectButton} - size={ButtonSize.Lg} - testID={ConfirmationFooterSelectorIDs.CANCEL_BUTTON} - variant={ButtonVariants.Secondary} - width={ButtonWidthTypes.Full} - /> - <View style={styles.buttonDivider} /> - <Button - onPress={onConfirm} - label={confirmButtonLabel} - style={styles.confirmButton} - size={ButtonSize.Lg} - testID={ConfirmationFooterSelectorIDs.CONFIRM_BUTTON} - variant={ButtonVariants.Primary} - width={ButtonWidthTypes.Full} - isDanger={securityAlertResponse?.result_type === ResultType.Malicious} - disabled={confirmDisabled} - /> - </View> + <> + <BottomSheetFooter + buttonsAlignment={ButtonsAlignment.Horizontal} + buttonPropsArray={buttons} + style={styles.base} + /> {isStakingConfirmation && ( <View style={styles.textContainer}> <Text variant={TextVariant.BodySM}> @@ -103,8 +105,6 @@ const Footer = () => { </Text> </View> )} - </View> + </> ); }; - -export default Footer; diff --git a/app/components/Views/confirmations/components/Confirm/Footer/index.ts b/app/components/Views/confirmations/components/Confirm/Footer/index.ts index be92134c1baa..65e2506faf5c 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/index.ts +++ b/app/components/Views/confirmations/components/Confirm/Footer/index.ts @@ -1 +1 @@ -export { default } from './Footer'; +export { Footer } from './Footer'; diff --git a/app/components/Views/confirmations/components/Confirm/Title/Title.styles.ts b/app/components/Views/confirmations/components/Confirm/Title/Title.styles.ts index c2760dbbaf31..c3acb68b7210 100644 --- a/app/components/Views/confirmations/components/Confirm/Title/Title.styles.ts +++ b/app/components/Views/confirmations/components/Confirm/Title/Title.styles.ts @@ -8,7 +8,7 @@ const styleSheet = (params: { theme: Theme }) => { return StyleSheet.create({ titleContainer: { - marginBottom: 24, + marginVertical: 24, }, title: { color: theme.colors.text.default, diff --git a/app/components/Views/confirmations/components/SignatureRequest/index.js b/app/components/Views/confirmations/components/SignatureRequest/index.js index 9ba8a8eaf0cc..46303529c21a 100644 --- a/app/components/Views/confirmations/components/SignatureRequest/index.js +++ b/app/components/Views/confirmations/components/SignatureRequest/index.js @@ -116,7 +116,7 @@ const createStyles = (colors) => arrowIcon: { color: colors.icon.muted, }, - blockaidBanner: { + blockaidBannerContainer: { marginHorizontal: 20, marginBottom: 20, }, @@ -361,11 +361,12 @@ class SignatureRequest extends PureComponent { {strings('signature_request.signing')} </Text> </View> - <BlockaidBanner - securityAlertResponse={securityAlertResponse} - style={styles.blockaidBanner} - onContactUsClicked={this.onContactUsClicked} - /> + <View style={styles.blockaidBannerContainer}> + <BlockaidBanner + securityAlertResponse={securityAlertResponse} + onContactUsClicked={this.onContactUsClicked} + /> + </View> {this.renderActionViewChildren()} </View> </ActionView> diff --git a/app/components/Views/confirmations/components/TransactionReview/__snapshots__/index.test.tsx.snap b/app/components/Views/confirmations/components/TransactionReview/__snapshots__/index.test.tsx.snap index db03a1543961..621575792ee9 100644 --- a/app/components/Views/confirmations/components/TransactionReview/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/confirmations/components/TransactionReview/__snapshots__/index.test.tsx.snap @@ -78,7 +78,7 @@ exports[`TransactionReview should match snapshot 1`] = ` <View style={ { - "marginBottom": -8, + "marginBottom": 8, "marginHorizontal": 16, } } diff --git a/app/components/Views/confirmations/components/TransactionReview/index.js b/app/components/Views/confirmations/components/TransactionReview/index.js index 0c508503388f..43cf7499c914 100644 --- a/app/components/Views/confirmations/components/TransactionReview/index.js +++ b/app/components/Views/confirmations/components/TransactionReview/index.js @@ -113,9 +113,9 @@ const createStyles = (colors) => marginRight: 24, marginBottom: 24, }, - blockAidBannerContainer: { + blockaidBannerContainer: { marginHorizontal: 16, - marginBottom: -8, + marginBottom: 8, }, smartTransactionsMigrationBanner: { marginHorizontal: 16, @@ -596,10 +596,9 @@ class TransactionReview extends PureComponent { sdkDappMetadata={sdkDappMetadata} url={url} /> - <View style={styles.blockAidBannerContainer}> + <View style={styles.blockaidBannerContainer}> <TransactionBlockaidBanner transactionId={transactionId} - style={styles.blockaidWarning} onContactUsClicked={this.onContactUsClicked} /> </View> diff --git a/app/components/Views/confirmations/components/TypedSign/__snapshots__/index.test.tsx.snap b/app/components/Views/confirmations/components/TypedSign/__snapshots__/index.test.tsx.snap index 62ce87f7c0de..64ad0efbdb45 100644 --- a/app/components/Views/confirmations/components/TypedSign/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/confirmations/components/TypedSign/__snapshots__/index.test.tsx.snap @@ -111,6 +111,14 @@ exports[`TypedSign onConfirm signs message 1`] = ` Sign this message? </Text> </View> + <View + style={ + { + "marginBottom": 20, + "marginHorizontal": 20, + } + } + /> <View style={ { @@ -776,6 +784,14 @@ exports[`TypedSign onReject rejects message 1`] = ` Sign this message? </Text> </View> + <View + style={ + { + "marginBottom": 20, + "marginHorizontal": 20, + } + } + /> <View style={ { diff --git a/app/components/Views/confirmations/context/LedgerContext/LedgerContext.test.tsx b/app/components/Views/confirmations/context/LedgerContext/LedgerContext.test.tsx index 25968cdf7237..73337dbd18be 100644 --- a/app/components/Views/confirmations/context/LedgerContext/LedgerContext.test.tsx +++ b/app/components/Views/confirmations/context/LedgerContext/LedgerContext.test.tsx @@ -6,7 +6,7 @@ import renderWithProvider from '../../../../../util/test/renderWithProvider'; import * as AddressUtils from '../../../../../util/address'; import { LedgerContextProvider, useLedgerContext } from './LedgerContext'; import { personalSignatureConfirmationState } from '../../../../../util/test/confirm-data-helpers'; -import Footer from '../../components/Confirm/Footer'; +import { Footer } from '../../components/Confirm/Footer'; import { fireEvent } from '@testing-library/react-native'; jest.mock('@react-navigation/native', () => ({ diff --git a/app/components/Views/confirmations/context/QRHardwareContext/QRHardwareContext.test.tsx b/app/components/Views/confirmations/context/QRHardwareContext/QRHardwareContext.test.tsx index 480a395d4d27..46f7a5187fa5 100644 --- a/app/components/Views/confirmations/context/QRHardwareContext/QRHardwareContext.test.tsx +++ b/app/components/Views/confirmations/context/QRHardwareContext/QRHardwareContext.test.tsx @@ -6,7 +6,7 @@ import Engine from '../../../../../core/Engine'; import renderWithProvider from '../../../../../util/test/renderWithProvider'; import { personalSignatureConfirmationState } from '../../../../../util/test/confirm-data-helpers'; import { IQRState } from '../../../../UI/QRHardware/types'; -import Footer from '../../components/Confirm/Footer'; +import { Footer } from '../../components/Confirm/Footer'; import QRInfo from '../../components/Confirm/Info/QRInfo'; // eslint-disable-next-line import/no-namespace import * as Camera from './useCamera';