From 04a974b13911c02a14142197b995ac6adde0f23b Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 30 Jan 2025 02:23:14 +0300 Subject: [PATCH 01/24] refactor: rm background color form bottom sheet footer and header no need because BottomSheetDialog provides background color --- .../BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts | 3 +-- .../components/HeaderBase/HeaderBase.styles.ts | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts index 6754be11ffe..85d22004cb2 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts @@ -22,7 +22,7 @@ const styleSheet = (params: { theme: Theme; vars: BottomSheetFooterStyleSheetVars; }) => { - const { vars, theme } = params; + const { vars } = params; const { style, buttonsAlignment } = vars; const buttonStyle: ViewStyle = buttonsAlignment === ButtonsAlignment.Horizontal @@ -32,7 +32,6 @@ const styleSheet = (params: { return StyleSheet.create({ base: Object.assign( { - backgroundColor: theme.colors.background.default, flexDirection: buttonsAlignment === ButtonsAlignment.Horizontal ? 'row' : 'column', paddingVertical: 4, diff --git a/app/component-library/components/HeaderBase/HeaderBase.styles.ts b/app/component-library/components/HeaderBase/HeaderBase.styles.ts index fb481958a19..a50be1456d4 100644 --- a/app/component-library/components/HeaderBase/HeaderBase.styles.ts +++ b/app/component-library/components/HeaderBase/HeaderBase.styles.ts @@ -19,7 +19,7 @@ const styleSheet = (params: { theme: Theme; vars: HeaderBaseStyleSheetVars; }) => { - const { vars, theme } = params; + const { vars } = params; const { style, startAccessorySize, endAccessorySize } = vars; let accessoryWidth; if (startAccessorySize && endAccessorySize) { @@ -29,7 +29,6 @@ const styleSheet = (params: { return StyleSheet.create({ base: Object.assign( { - backgroundColor: theme.colors.background.default, flexDirection: 'row', } as ViewStyle, style, From a7c069848b340289f08f7e1822978bc433d3fecf Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 30 Jan 2025 04:16:55 +0300 Subject: [PATCH 02/24] refactor: use BottomSheet for redesign Confirm --- .../BottomSheets/BottomSheet/BottomSheet.tsx | 2 + .../BottomSheetDialog/BottomSheetDialog.tsx | 3 +- .../BottomSheetDialog.types.ts | 6 ++- .../confirmations/Confirm/Confirm.styles.ts | 14 ++--- .../Views/confirmations/Confirm/Confirm.tsx | 20 ++++---- .../Confirm/Footer/Footer.styles.ts | 25 ++------- .../components/Confirm/Footer/Footer.tsx | 51 ++++++++++--------- 7 files changed, 56 insertions(+), 65 deletions(-) diff --git a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx index 1f70eb9e00a..5ecd68c6f35 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx @@ -39,6 +39,7 @@ const BottomSheet = forwardRef( isInteractable = true, shouldNavigateBack = true, isFullscreen = false, + styleAnimatedView, ...props }, ref, @@ -107,6 +108,7 @@ const BottomSheet = forwardRef( onOpen={onOpenCB} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} + styleAnimatedView={styleAnimatedView} > {children} 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 61e3cfe9c78..ec9da12f327 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, + styleAnimatedView, ...props }, ref, @@ -239,7 +240,7 @@ const BottomSheetDialog = forwardRef< > {isInteractable && ( 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 da2ba4a6f35..6de3b48a839 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 { ViewProps, ViewStyle } from 'react-native'; /** * BottomSheetDialog component props. @@ -27,6 +27,10 @@ export interface BottomSheetDialogProps extends ViewProps { * Optional callback that gets triggered when sheet is opened. */ onOpen?: (hasPendingAction?: boolean) => void; + /** + * Optional styles for the animated view. + */ + styleAnimatedView?: ViewStyle; } export interface BottomSheetDialogRef { diff --git a/app/components/Views/confirmations/Confirm/Confirm.styles.ts b/app/components/Views/confirmations/Confirm/Confirm.styles.ts index 334347964a1..808f0563712 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.styles.ts +++ b/app/components/Views/confirmations/Confirm/Confirm.styles.ts @@ -1,21 +1,17 @@ import { StyleSheet } from 'react-native'; - -import Device from '../../../../util/device'; import { Theme } from '../../../../util/theme/models'; const styleSheet = (params: { theme: Theme }) => { const { theme } = params; return StyleSheet.create({ - container: { + bottomSheetDialogAnimatedView: { backgroundColor: theme.colors.background.alternative, + display: 'flex', + paddingTop: 24, + }, + scrollView: { paddingHorizontal: 16, - paddingVertical: 24, - minHeight: '70%', - borderTopLeftRadius: 20, - borderTopRightRadius: 20, - paddingBottom: Device.isIphoneX() ? 20 : 0, - justifyContent: 'space-between', }, }); }; diff --git a/app/components/Views/confirmations/Confirm/Confirm.tsx b/app/components/Views/confirmations/Confirm/Confirm.tsx index 0436db56b91..47c3de1dffd 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { View } from 'react-native'; +import { ScrollView } from 'react-native'; +import BottomSheet from '../../../../component-library/components/BottomSheets/BottomSheet'; import { useStyles } from '../../../../component-library/hooks'; -import BottomModal from '../components/UI/BottomModal'; import AccountNetworkInfo from '../components/Confirm/AccountNetworkInfo'; import Footer from '../components/Confirm/Footer'; import Info from '../components/Confirm/Info'; @@ -22,18 +22,20 @@ const Confirm = () => { } return ( - - - - + <BottomSheet + isInteractable={false} + styleAnimatedView={styles.bottomSheetDialogAnimatedView} + testID={approvalRequest?.type} + > + <Title /> + <ScrollView style={styles.scrollView}> {/* TODO: component SignatureBlockaidBanner to be removed once we implement alert system in mobile */} <SignatureBlockaidBanner /> <AccountNetworkInfo /> <Info /> - </View> + </ScrollView> <Footer /> - </View> - </BottomModal> + </BottomSheet> ); }; 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 147a0d34603..31a0bed61a8 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts +++ b/app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts @@ -1,26 +1,11 @@ import { StyleSheet } from 'react-native'; -import { Theme } from '../../../../../../util/theme/models'; - -const styleSheet = (params: { theme: Theme }) => { - const { theme } = params; - - return StyleSheet.create({ - footerButton: { - flex: 1, - }, - divider: { - height: 1, - backgroundColor: theme.colors.border.muted, - }, - buttonsContainer: { - flexDirection: 'row', - paddingVertical: 16, - }, - buttonDivider: { - width: 8, +const styleSheet = () => StyleSheet.create({ + base: { + paddingHorizontal: 16, + paddingBottom: 8, + paddingTop: 16, }, }); -}; export default styleSheet; diff --git a/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx b/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx index fdb41467912..d41a4eafd2c 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx +++ b/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import { 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 { useStyles } from '../../../../../../component-library/hooks'; import { ResultType } from '../../../constants/signatures'; import { useConfirmActions } from '../../../hooks/useConfirmActions'; @@ -20,29 +20,30 @@ const Footer = () => { const { styles } = useStyles(styleSheet, {}); + 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, + label: strings('confirm.confirm'), + size: ButtonSize.Lg, + onPress: onConfirm, + testID: ConfirmationFooterSelectorIDs.CONFIRM_BUTTON, + }, + ]; + return ( - <View style={styles.buttonsContainer}> - <Button - onPress={onReject} - label={strings('confirm.reject')} - style={styles.footerButton} - size={ButtonSize.Lg} - testID={ConfirmationFooterSelectorIDs.CANCEL_BUTTON} - variant={ButtonVariants.Secondary} - width={ButtonWidthTypes.Full} - /> - <View style={styles.buttonDivider} /> - <Button - onPress={onConfirm} - label={strings('confirm.confirm')} - style={styles.footerButton} - size={ButtonSize.Lg} - testID={ConfirmationFooterSelectorIDs.CONFIRM_BUTTON} - variant={ButtonVariants.Primary} - width={ButtonWidthTypes.Full} - isDanger={securityAlertResponse?.result_type === ResultType.Malicious} - /> - </View> + <BottomSheetFooter + buttonsAlignment={ButtonsAlignment.Horizontal} + buttonPropsArray={buttons} + style={styles.base} + /> ); }; From f1defbfff3816856588aaf91b8567852801fba7e Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 30 Jan 2025 05:52:01 +0300 Subject: [PATCH 03/24] refactor: replace BlockaidBanner style prop uses - affects only old confirmations - fix marginBottom on TransactionReview --- .../Views/confirmations/SendFlow/Confirm/index.js | 11 ++++++----- .../Views/confirmations/SendFlow/Confirm/styles.ts | 2 +- .../components/ApproveTransactionReview/index.js | 13 +++++++------ .../components/ApproveTransactionReview/styles.ts | 2 +- .../components/SignatureRequest/index.js | 13 +++++++------ .../components/TransactionReview/index.js | 9 ++++----- 6 files changed, 26 insertions(+), 24 deletions(-) diff --git a/app/components/Views/confirmations/SendFlow/Confirm/index.js b/app/components/Views/confirmations/SendFlow/Confirm/index.js index 79d968adc0d..f58f7894881 100644 --- a/app/components/Views/confirmations/SendFlow/Confirm/index.js +++ b/app/components/Views/confirmations/SendFlow/Confirm/index.js @@ -1418,11 +1418,12 @@ class Confirm extends PureComponent { /> <ScrollView style={baseStyles.flexGrow} ref={this.setScrollViewRef}> {this.state.transactionMeta?.id && ( - <TransactionBlockaidBanner - transactionId={this.state.transactionMeta.id} - style={styles.blockaidBanner} - onContactUsClicked={this.onContactUsClicked} - /> + <View style={styles.blockaidBannerContainer}> + <TransactionBlockaidBanner + transactionId={this.state.transactionMeta.id} + onContactUsClicked={this.onContactUsClicked} + /> + </View> )} {!selectedAsset.tokenId ? ( <View style={styles.amountWrapper}> diff --git a/app/components/Views/confirmations/SendFlow/Confirm/styles.ts b/app/components/Views/confirmations/SendFlow/Confirm/styles.ts index f494eb6403f..f9e036c0b37 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/index.js b/app/components/Views/confirmations/components/ApproveTransactionReview/index.js index 5a40cf13db9..0d1837a5996 100644 --- a/app/components/Views/confirmations/components/ApproveTransactionReview/index.js +++ b/app/components/Views/confirmations/components/ApproveTransactionReview/index.js @@ -914,11 +914,12 @@ class ApproveTransactionReview extends PureComponent { style={styles.accountApprovalWrapper} onStartShouldSetResponder={() => true} > - <TransactionBlockaidBanner - transactionId={transactionId} - style={styles.blockaidWarning} - onContactUsClicked={this.onContactUsClicked} - /> + <View style={styles.blockaidBannerContainer}> + <TransactionBlockaidBanner + transactionId={transactionId} + onContactUsClicked={this.onContactUsClicked} + /> + </View> <Text variant={TextVariant.HeadingMD} style={styles.title}> {this.getTrustTitle( originIsDeeplink, @@ -1352,7 +1353,7 @@ const mapStateToProps = (state) => { shouldUseSmartTransaction: selectShouldUseSmartTransaction(state), securityAlertResponse: selectCurrentTransactionSecurityAlertResponse(state), }; -} +}; const mapDispatchToProps = (dispatch) => ({ setTransactionObject: (transaction) => diff --git a/app/components/Views/confirmations/components/ApproveTransactionReview/styles.ts b/app/components/Views/confirmations/components/ApproveTransactionReview/styles.ts index 09187dd8ced..4b0aeb23d23 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/SignatureRequest/index.js b/app/components/Views/confirmations/components/SignatureRequest/index.js index 9ba8a8eaf0c..46303529c21 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/index.js b/app/components/Views/confirmations/components/TransactionReview/index.js index 0793102fb6e..67d0aba7e7d 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, }, }); @@ -587,10 +587,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> @@ -724,7 +723,7 @@ const mapStateToProps = (state) => { securityAlertResponse: selectCurrentTransactionSecurityAlertResponse(state), transactionMetadata: selectCurrentTransactionMetadata(state), }; -} +}; TransactionReview.contextType = ThemeContext; From 44837f714454e5397dcbd1ce329b0f8740ce5f01 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 30 Jan 2025 19:22:23 +0300 Subject: [PATCH 04/24] test: update snapshots following BottomSheet updates --- .../BottomSheetDialog/BottomSheetDialog.tsx | 2 +- .../BottomSheetFooter.test.tsx.snap | 1 - .../BottomSheetHeader.test.tsx.snap | 1 - .../__snapshots__/HeaderBase.test.tsx.snap | 1 - .../__snapshots__/ConfirmAddAsset.test.tsx.snap | 1 - .../__snapshots__/index.test.tsx.snap | 2 -- .../NetworkVerificationInfo.test.tsx.snap | 2 -- .../__snapshots__/NetworkSwitcher.test.tsx.snap | 2 -- .../Quotes/__snapshots__/Quotes.test.tsx.snap | 3 --- .../__snapshots__/GasImpactModal.test.tsx.snap | 2 -- .../__snapshots__/MaxInputModal.test.tsx.snap | 1 - ...ountPermissionsConfirmRevokeAll.test.tsx.snap | 1 - .../__snapshots__/index.test.tsx.snap | 1 - .../RpcSelectionModal.test.tsx.snap | 1 - .../Approval/__snapshots__/index.test.tsx.snap | 2 +- .../Approve/__snapshots__/index.test.tsx.snap | 9 +++++++++ .../__snapshots__/ApprovalResult.test.tsx.snap | 2 -- .../TemplateConfirmation.test.tsx.snap | 1 - .../__snapshots__/index.test.tsx.snap | 9 +++++++++ .../__snapshots__/index.test.tsx.snap | 2 +- .../TypedSign/__snapshots__/index.test.tsx.snap | 16 ++++++++++++++++ 21 files changed, 37 insertions(+), 25 deletions(-) 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 ec9da12f327..5102a001252 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx @@ -240,7 +240,7 @@ const BottomSheetDialog = forwardRef< > <Animated.View onLayout={updateSheetHeight} - style={[combinedSheetStyle, styleAnimatedView]} + style={styleAnimatedView ? [combinedSheetStyle, styleAnimatedView] : combinedSheetStyle} > {isInteractable && ( <View style={styles.notchWrapper}> diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap b/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap index 57b01074ef4..0d256ca404e 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap @@ -4,7 +4,6 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap b/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap index 03389274972..1a8e06c33de 100644 --- a/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap +++ b/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap @@ -4,7 +4,6 @@ exports[`BottomSheetHeader should render snapshot correctly 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } diff --git a/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap b/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap index 898e43f05c4..c82cf466355 100644 --- a/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap +++ b/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap @@ -4,7 +4,6 @@ exports[`HeaderBase should render snapshot correctly 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", } } diff --git a/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap b/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap index 9beded17255..2d18520ddf1 100644 --- a/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap +++ b/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap @@ -290,7 +290,6 @@ exports[`ConfirmAddAsset render matches previous snapshot 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 16, "paddingVertical": 4, diff --git a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap index 14432055966..8464872155c 100644 --- a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap @@ -146,7 +146,6 @@ exports[`NetworkDetails renders correctly 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } @@ -494,7 +493,6 @@ exports[`NetworkDetails renders correctly 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap index c3e90cdf813..c98c927b932 100644 --- a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap +++ b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap @@ -7,7 +7,6 @@ exports[`NetworkVerificationInfo renders correctly 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } @@ -455,7 +454,6 @@ exports[`NetworkVerificationInfo renders correctly 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap index 641dacbef52..71a90e0693b 100644 --- a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap +++ b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap @@ -954,7 +954,6 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } @@ -1306,7 +1305,6 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap index 1fc726e4293..e2b597c31ed 100644 --- a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap +++ b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap @@ -3283,7 +3283,6 @@ exports[`Quotes renders correctly after animation with quotes 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } @@ -4050,7 +4049,6 @@ exports[`Quotes renders correctly after animation with quotes 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "column", "paddingHorizontal": 8, "paddingVertical": 4, @@ -4618,7 +4616,6 @@ exports[`Quotes renders correctly after animation with quotes and expanded 2`] = <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } diff --git a/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap b/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap index 7524889bc42..0f70ef3c253 100644 --- a/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap +++ b/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap @@ -136,7 +136,6 @@ exports[`GasImpactModal render matches snapshot 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } @@ -242,7 +241,6 @@ exports[`GasImpactModal render matches snapshot 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "paddingBottom": 16, "paddingHorizontal": 8, diff --git a/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap b/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap index 300843b1a21..b4019066233 100644 --- a/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap +++ b/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap @@ -426,7 +426,6 @@ exports[`MaxInputModal render matches snapshot 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } diff --git a/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap b/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap index e5d46f20804..2173104f6ab 100644 --- a/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap +++ b/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap @@ -126,7 +126,6 @@ exports[`AccountPermissionsConfirmRevokeAll renders correctly 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } diff --git a/app/components/Views/DataCollectionModal/__snapshots__/index.test.tsx.snap b/app/components/Views/DataCollectionModal/__snapshots__/index.test.tsx.snap index 367936b0f44..7b3ffe72625 100644 --- a/app/components/Views/DataCollectionModal/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/DataCollectionModal/__snapshots__/index.test.tsx.snap @@ -168,7 +168,6 @@ exports[`DataCollectionModal should render expected snapshot 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap b/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap index cd6340df225..febdee69a76 100644 --- a/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap +++ b/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap @@ -118,7 +118,6 @@ exports[`RpcSelectionModal should render correctly when visible 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } 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 d74d9b1a64a..90ee8367306 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`] = ` <View style={ { - "marginBottom": -8, + "marginBottom": 8, "marginHorizontal": 16, } } diff --git a/app/components/Views/confirmations/ApproveView/Approve/__snapshots__/index.test.tsx.snap b/app/components/Views/confirmations/ApproveView/Approve/__snapshots__/index.test.tsx.snap index e676b76a254..4a7e4ba9481 100644 --- a/app/components/Views/confirmations/ApproveView/Approve/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/confirmations/ApproveView/Approve/__snapshots__/index.test.tsx.snap @@ -590,6 +590,15 @@ exports[`Approve should render transaction approval 1`] = ` } } > + <View + style={ + { + "marginBottom": 10, + "marginHorizontal": 10, + "marginTop": 20, + } + } + /> <Text accessibilityRole="text" style={ diff --git a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/__snapshots__/ApprovalResult.test.tsx.snap b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/__snapshots__/ApprovalResult.test.tsx.snap index 21327bc8332..a91afb3442f 100644 --- a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/__snapshots__/ApprovalResult.test.tsx.snap +++ b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/__snapshots__/ApprovalResult.test.tsx.snap @@ -158,7 +158,6 @@ exports[`ApprovalResult renders approval result with error type 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, @@ -367,7 +366,6 @@ exports[`ApprovalResult renders approval result with success type 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap index 34859d9ad12..d6dc4cabc3a 100644 --- a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap +++ b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap @@ -42,7 +42,6 @@ exports[`TemplateConfirmation renders content and actions 1`] = ` <View style={ { - "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/Views/confirmations/components/ApproveTransactionReview/__snapshots__/index.test.tsx.snap b/app/components/Views/confirmations/components/ApproveTransactionReview/__snapshots__/index.test.tsx.snap index 27efee87ff6..bf8db4b508d 100644 --- a/app/components/Views/confirmations/components/ApproveTransactionReview/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/confirmations/components/ApproveTransactionReview/__snapshots__/index.test.tsx.snap @@ -408,6 +408,15 @@ exports[`ApproveTransactionModal render matches snapshot 1`] = ` } } > + <View + style={ + { + "marginBottom": 10, + "marginHorizontal": 10, + "marginTop": 20, + } + } + /> <Text accessibilityRole="text" style={ 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 db03a154396..621575792ee 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/TypedSign/__snapshots__/index.test.tsx.snap b/app/components/Views/confirmations/components/TypedSign/__snapshots__/index.test.tsx.snap index 62ce87f7c0d..64ad0efbdb4 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={ { From 3605a39585733874236d7622b3ac88eaada38d56 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 30 Jan 2025 21:14:52 +0300 Subject: [PATCH 05/24] test:fix: redesign Confirm mock SafeAreaProvider --- .../confirmations/Confirm/Confirm.test.tsx | 62 +++++++++++++++---- 1 file changed, 51 insertions(+), 11 deletions(-) diff --git a/app/components/Views/confirmations/Confirm/Confirm.test.tsx b/app/components/Views/confirmations/Confirm/Confirm.test.tsx index 531d5c84e76..9dc98f4d58b 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.test.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.test.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; import renderWithProvider from '../../../../util/test/renderWithProvider'; import { @@ -8,6 +9,30 @@ import { } from '../../../../util/test/confirm-data-helpers'; import Confirm from './index'; +const mockNavigate = jest.fn(); +const mockGoBack = jest.fn(); + +jest.mock('@react-navigation/native', () => ({ + ...jest.requireActual('@react-navigation/native'), + useNavigation: () => ({ + navigate: mockNavigate, + goBack: mockGoBack, + }), +})); + +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 { + 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: { @@ -33,10 +58,20 @@ jest.mock('react-native-gzip', () => ({ })); describe('Confirm', () => { + beforeEach(() => { + mockNavigate.mockClear(); + mockGoBack.mockClear(); + }); + it('should render correct information for personal sign', async () => { - const { getAllByRole, getByText } = renderWithProvider(<Confirm />, { - state: personalSignatureConfirmationState, - }); + const { getAllByRole, getByText } = renderWithProvider( + <SafeAreaProvider> + <Confirm /> + </SafeAreaProvider>, + { + state: personalSignatureConfirmationState, + }, + ); expect(getByText('Signature request')).toBeDefined(); expect( getByText('Review request details before you confirm.'), @@ -49,8 +84,10 @@ describe('Confirm', () => { }); it('should render correct information for typed sign v1', async () => { - const { getAllByRole, getAllByText, getByText, queryByText } = - renderWithProvider(<Confirm />, { + const { getAllByRole, getAllByText, getByText, queryByText } = renderWithProvider( + <SafeAreaProvider> + <Confirm /> + </SafeAreaProvider>, { state: typedSignV1ConfirmationState, }); expect(getByText('Signature request')).toBeDefined(); @@ -63,12 +100,15 @@ describe('Confirm', () => { }); it('should render blockaid banner if confirmation has blockaid error response', async () => { - const { getByText } = renderWithProvider(<Confirm />, { - state: { - ...typedSignV1ConfirmationState, - signatureRequest: { securityAlertResponse }, - }, - }); + const { getByText } = renderWithProvider( + <SafeAreaProvider> + <Confirm /> + </SafeAreaProvider>, { + state: { + ...typedSignV1ConfirmationState, + signatureRequest: { securityAlertResponse }, + }, + }); expect(getByText('Signature request')).toBeDefined(); expect(getByText('This is a deceptive request')).toBeDefined(); }); From f9d3150dd7d8aae961231e1ea458f3d38639081a Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 30 Jan 2025 21:40:59 +0300 Subject: [PATCH 06/24] Revert "refactor: rm background color form bottom sheet footer and header" This reverts commit 04a974b13911c02a14142197b995ac6adde0f23b. --- .../BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts | 3 ++- .../components/HeaderBase/HeaderBase.styles.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts index 85d22004cb2..6754be11ffe 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts @@ -22,7 +22,7 @@ const styleSheet = (params: { theme: Theme; vars: BottomSheetFooterStyleSheetVars; }) => { - const { vars } = params; + const { vars, theme } = params; const { style, buttonsAlignment } = vars; const buttonStyle: ViewStyle = buttonsAlignment === ButtonsAlignment.Horizontal @@ -32,6 +32,7 @@ const styleSheet = (params: { return StyleSheet.create({ base: Object.assign( { + backgroundColor: theme.colors.background.default, flexDirection: buttonsAlignment === ButtonsAlignment.Horizontal ? 'row' : 'column', paddingVertical: 4, diff --git a/app/component-library/components/HeaderBase/HeaderBase.styles.ts b/app/component-library/components/HeaderBase/HeaderBase.styles.ts index a50be1456d4..fb481958a19 100644 --- a/app/component-library/components/HeaderBase/HeaderBase.styles.ts +++ b/app/component-library/components/HeaderBase/HeaderBase.styles.ts @@ -19,7 +19,7 @@ const styleSheet = (params: { theme: Theme; vars: HeaderBaseStyleSheetVars; }) => { - const { vars } = params; + const { vars, theme } = params; const { style, startAccessorySize, endAccessorySize } = vars; let accessoryWidth; if (startAccessorySize && endAccessorySize) { @@ -29,6 +29,7 @@ const styleSheet = (params: { return StyleSheet.create({ base: Object.assign( { + backgroundColor: theme.colors.background.default, flexDirection: 'row', } as ViewStyle, style, From 60757f07e04cbe888bec19d46680b3da8bd8a356 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 30 Jan 2025 21:58:21 +0300 Subject: [PATCH 07/24] refactor: BottomSheet replace styleAnimatedView -> isBackgroundAlternative --- .../BottomSheets/BottomSheet/BottomSheet.tsx | 4 ++-- .../BottomSheetDialog/BottomSheetDialog.styles.ts | 9 +++++++-- .../BottomSheetDialog/BottomSheetDialog.tsx | 5 +++-- .../BottomSheetDialog/BottomSheetDialog.types.ts | 11 ++++++----- .../BottomSheetFooter/BottomSheetFooter.styles.ts | 4 ++-- .../BottomSheetFooter/BottomSheetFooter.tsx | 3 ++- .../BottomSheetFooter/BottomSheetFooter.types.ts | 7 ++++++- .../Views/confirmations/Confirm/Confirm.styles.ts | 12 +----------- .../Views/confirmations/Confirm/Confirm.tsx | 6 +++--- .../components/Confirm/Footer/Footer.tsx | 1 + .../components/Confirm/Title/Title.styles.ts | 2 +- 11 files changed, 34 insertions(+), 30 deletions(-) diff --git a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx index 5ecd68c6f35..01b8ce92763 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx @@ -36,10 +36,10 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>( children, onClose, onOpen, + isBackgroundAlternative = false, isInteractable = true, shouldNavigateBack = true, isFullscreen = false, - styleAnimatedView, ...props }, ref, @@ -108,7 +108,7 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>( onOpen={onOpenCB} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} - styleAnimatedView={styleAnimatedView} + isBackgroundAlternative={isBackgroundAlternative} > {children} </BottomSheetDialog> 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 6d949b7dc4b..5f1156d67e9 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 @@ -21,7 +21,12 @@ const styleSheet = (params: { }) => { const { vars, theme } = params; const { colors, shadows } = theme; - const { maxSheetHeight, screenBottomPadding, isFullscreen } = vars; + const { + isBackgroundAlternative, + isFullscreen, + maxSheetHeight, + screenBottomPadding, + } = vars; return StyleSheet.create({ base: Object.assign({ @@ -31,7 +36,7 @@ const styleSheet = (params: { right: 0, } as ViewStyle) as ViewStyle, sheet: { - backgroundColor: colors.background.default, + backgroundColor: isBackgroundAlternative ? colors.background.alternative : colors.background.default, borderTopLeftRadius: 8, borderTopRightRadius: 8, maxHeight: maxSheetHeight, 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 5102a001252..cb7f82f63a0 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx @@ -55,11 +55,11 @@ const BottomSheetDialog = forwardRef< ( { children, + isBackgroundAlternative = false, isFullscreen = false, isInteractable = true, onClose, onOpen, - styleAnimatedView, ...props }, ref, @@ -70,6 +70,7 @@ const BottomSheetDialog = forwardRef< const { height: screenHeight } = useWindowDimensions(); const maxSheetHeight = screenHeight - screenTopPadding; const { styles } = useStyles(styleSheet, { + isBackgroundAlternative, maxSheetHeight, screenBottomPadding, isFullscreen, @@ -240,7 +241,7 @@ const BottomSheetDialog = forwardRef< > <Animated.View onLayout={updateSheetHeight} - style={styleAnimatedView ? [combinedSheetStyle, styleAnimatedView] : combinedSheetStyle} + style={combinedSheetStyle} > {isInteractable && ( <View style={styles.notchWrapper}> 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 6de3b48a839..600fc18cbbf 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, ViewStyle } from 'react-native'; +import { ViewProps } from 'react-native'; /** * BottomSheetDialog component props. @@ -9,6 +9,10 @@ export interface BottomSheetDialogProps extends ViewProps { * Optional content to wrap to display. */ children?: React.ReactNode; + /** + * Optional styles for the animated view. + */ + isBackgroundAlternative?: boolean; /** * Optional prop to toggle full screen state of BottomSheetDialog. * @default false @@ -27,10 +31,6 @@ export interface BottomSheetDialogProps extends ViewProps { * Optional callback that gets triggered when sheet is opened. */ onOpen?: (hasPendingAction?: boolean) => void; - /** - * Optional styles for the animated view. - */ - styleAnimatedView?: ViewStyle; } export interface BottomSheetDialogRef { @@ -44,5 +44,6 @@ export interface BottomSheetDialogRef { export interface BottomSheetDialogStyleSheetVars { maxSheetHeight: number; screenBottomPadding: number; + isBackgroundAlternative: boolean; isFullscreen: boolean; } diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts index 6754be11ffe..7e7a011e387 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts @@ -23,7 +23,7 @@ const styleSheet = (params: { vars: BottomSheetFooterStyleSheetVars; }) => { const { vars, theme } = params; - const { style, buttonsAlignment } = vars; + const { style, isBackgroundAlternative, buttonsAlignment } = vars; const buttonStyle: ViewStyle = buttonsAlignment === ButtonsAlignment.Horizontal ? { flex: 1 } @@ -32,7 +32,7 @@ const styleSheet = (params: { return StyleSheet.create({ base: Object.assign( { - backgroundColor: theme.colors.background.default, + backgroundColor: isBackgroundAlternative ? theme.colors.background.alternative : theme.colors.background.default, flexDirection: buttonsAlignment === ButtonsAlignment.Horizontal ? 'row' : 'column', paddingVertical: 4, diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.tsx b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.tsx index 6848ae54800..bb86de68752 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.tsx +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.tsx @@ -22,8 +22,9 @@ const BottomSheetFooter: React.FC<BottomSheetFooterProps> = ({ style, buttonsAlignment = DEFAULT_BOTTOMSHEETFOOTER_BUTTONSALIGNMENT, buttonPropsArray, + isBackgroundAlternative = false, }) => { - const { styles } = useStyles(styleSheet, { style, buttonsAlignment }); + const { styles } = useStyles(styleSheet, { style, isBackgroundAlternative, buttonsAlignment }); return ( <View style={styles.base} testID={TESTID_BOTTOMSHEETFOOTER}> diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.types.ts b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.types.ts index 71191b31f7e..39e7a80d8c3 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.types.ts +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.types.ts @@ -25,6 +25,11 @@ export interface BottomSheetFooterProps extends ViewProps { * Array of buttons that will be displayed in the footer */ buttonPropsArray: ButtonProps[]; + /** + * Optional prop to control the background color of the footer. + * @default false + */ + isBackgroundAlternative?: boolean; } /** @@ -32,5 +37,5 @@ export interface BottomSheetFooterProps extends ViewProps { */ export type BottomSheetFooterStyleSheetVars = Pick< BottomSheetFooterProps, - 'style' | 'buttonsAlignment' + 'style' | 'buttonsAlignment' | 'isBackgroundAlternative' >; diff --git a/app/components/Views/confirmations/Confirm/Confirm.styles.ts b/app/components/Views/confirmations/Confirm/Confirm.styles.ts index 808f0563712..6f360826b8a 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.styles.ts +++ b/app/components/Views/confirmations/Confirm/Confirm.styles.ts @@ -1,19 +1,9 @@ import { StyleSheet } from 'react-native'; -import { Theme } from '../../../../util/theme/models'; -const styleSheet = (params: { theme: Theme }) => { - const { theme } = params; - - return StyleSheet.create({ - bottomSheetDialogAnimatedView: { - backgroundColor: theme.colors.background.alternative, - display: 'flex', - paddingTop: 24, - }, +const styleSheet = () => StyleSheet.create({ scrollView: { paddingHorizontal: 16, }, }); -}; export default styleSheet; diff --git a/app/components/Views/confirmations/Confirm/Confirm.tsx b/app/components/Views/confirmations/Confirm/Confirm.tsx index 47c3de1dffd..55b0d2dbafc 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.tsx @@ -22,9 +22,9 @@ const Confirm = () => { } return ( - <BottomSheet - isInteractable={false} - styleAnimatedView={styles.bottomSheetDialogAnimatedView} + <BottomSheet + isInteractable={false} + isBackgroundAlternative testID={approvalRequest?.type} > <Title /> diff --git a/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx b/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx index d41a4eafd2c..ee7e045d775 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx +++ b/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx @@ -42,6 +42,7 @@ const Footer = () => { <BottomSheetFooter buttonsAlignment={ButtonsAlignment.Horizontal} buttonPropsArray={buttons} + isBackgroundAlternative style={styles.base} /> ); 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 c2760dbbaf3..c3acb68b721 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, From 50594e4b0b522fd8e6a84f5578157bf03d32cec0 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 30 Jan 2025 21:58:42 +0300 Subject: [PATCH 08/24] test:fix: restore BottomSheet header and footer background --- .../__snapshots__/BottomSheetFooter.test.tsx.snap | 1 + .../__snapshots__/BottomSheetHeader.test.tsx.snap | 1 + .../HeaderBase/__snapshots__/HeaderBase.test.tsx.snap | 1 + .../__snapshots__/ConfirmAddAsset.test.tsx.snap | 1 + .../UI/NetworkModal/__snapshots__/index.test.tsx.snap | 2 ++ .../__snapshots__/NetworkVerificationInfo.test.tsx.snap | 2 ++ .../__snapshots__/NetworkSwitcher.test.tsx.snap | 2 ++ .../UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap | 3 +++ .../GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap | 2 ++ .../MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap | 1 + .../AccountPermissionsConfirmRevokeAll.test.tsx.snap | 1 + .../DataCollectionModal/__snapshots__/index.test.tsx.snap | 1 + .../__snapshots__/RpcSelectionModal.test.tsx.snap | 1 + .../Templates/__snapshots__/ApprovalResult.test.tsx.snap | 2 ++ .../__snapshots__/TemplateConfirmation.test.tsx.snap | 1 + 15 files changed, 22 insertions(+) diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap b/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap index 0d256ca404e..57b01074ef4 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap @@ -4,6 +4,7 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap b/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap index 1a8e06c33de..03389274972 100644 --- a/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap +++ b/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap @@ -4,6 +4,7 @@ exports[`BottomSheetHeader should render snapshot correctly 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } diff --git a/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap b/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap index c82cf466355..898e43f05c4 100644 --- a/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap +++ b/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap @@ -4,6 +4,7 @@ exports[`HeaderBase should render snapshot correctly 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", } } diff --git a/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap b/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap index 2d18520ddf1..9beded17255 100644 --- a/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap +++ b/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap @@ -290,6 +290,7 @@ exports[`ConfirmAddAsset render matches previous snapshot 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 16, "paddingVertical": 4, diff --git a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap index 8464872155c..14432055966 100644 --- a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap @@ -146,6 +146,7 @@ exports[`NetworkDetails renders correctly 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } @@ -493,6 +494,7 @@ exports[`NetworkDetails renders correctly 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap index c98c927b932..c3e90cdf813 100644 --- a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap +++ b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap @@ -7,6 +7,7 @@ exports[`NetworkVerificationInfo renders correctly 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } @@ -454,6 +455,7 @@ exports[`NetworkVerificationInfo renders correctly 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap index 71a90e0693b..641dacbef52 100644 --- a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap +++ b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap @@ -954,6 +954,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } @@ -1305,6 +1306,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap index e2b597c31ed..1fc726e4293 100644 --- a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap +++ b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap @@ -3283,6 +3283,7 @@ exports[`Quotes renders correctly after animation with quotes 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } @@ -4049,6 +4050,7 @@ exports[`Quotes renders correctly after animation with quotes 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "column", "paddingHorizontal": 8, "paddingVertical": 4, @@ -4616,6 +4618,7 @@ exports[`Quotes renders correctly after animation with quotes and expanded 2`] = <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } diff --git a/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap b/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap index 0f70ef3c253..7524889bc42 100644 --- a/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap +++ b/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap @@ -136,6 +136,7 @@ exports[`GasImpactModal render matches snapshot 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } @@ -241,6 +242,7 @@ exports[`GasImpactModal render matches snapshot 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "paddingBottom": 16, "paddingHorizontal": 8, diff --git a/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap b/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap index b4019066233..300843b1a21 100644 --- a/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap +++ b/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap @@ -426,6 +426,7 @@ exports[`MaxInputModal render matches snapshot 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } diff --git a/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap b/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap index 2173104f6ab..e5d46f20804 100644 --- a/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap +++ b/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap @@ -126,6 +126,7 @@ exports[`AccountPermissionsConfirmRevokeAll renders correctly 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } diff --git a/app/components/Views/DataCollectionModal/__snapshots__/index.test.tsx.snap b/app/components/Views/DataCollectionModal/__snapshots__/index.test.tsx.snap index 7b3ffe72625..367936b0f44 100644 --- a/app/components/Views/DataCollectionModal/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/DataCollectionModal/__snapshots__/index.test.tsx.snap @@ -168,6 +168,7 @@ exports[`DataCollectionModal should render expected snapshot 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap b/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap index febdee69a76..cd6340df225 100644 --- a/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap +++ b/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap @@ -118,6 +118,7 @@ exports[`RpcSelectionModal should render correctly when visible 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "padding": 16, } diff --git a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/__snapshots__/ApprovalResult.test.tsx.snap b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/__snapshots__/ApprovalResult.test.tsx.snap index a91afb3442f..21327bc8332 100644 --- a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/__snapshots__/ApprovalResult.test.tsx.snap +++ b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/__snapshots__/ApprovalResult.test.tsx.snap @@ -158,6 +158,7 @@ exports[`ApprovalResult renders approval result with error type 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, @@ -366,6 +367,7 @@ exports[`ApprovalResult renders approval result with success type 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap index d6dc4cabc3a..34859d9ad12 100644 --- a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap +++ b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap @@ -42,6 +42,7 @@ exports[`TemplateConfirmation renders content and actions 1`] = ` <View style={ { + "backgroundColor": "#ffffff", "flexDirection": "row", "paddingHorizontal": 8, "paddingVertical": 4, From 02bbf2514ced370bbb6a758ed259e1aa2c730f62 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Sun, 9 Feb 2025 01:25:55 +0200 Subject: [PATCH 09/24] fix: merge conflicts --- .../confirmations/Confirm/Confirm.test.tsx | 24 ++++++++++++------- .../Views/confirmations/Confirm/Confirm.tsx | 2 -- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/app/components/Views/confirmations/Confirm/Confirm.test.tsx b/app/components/Views/confirmations/Confirm/Confirm.test.tsx index b8636205d13..c0a03748d41 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.test.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.test.tsx @@ -14,23 +14,27 @@ import * as ConfirmationRedesignEnabled from '../hooks/useConfirmationRedesignEn import Confirm from './index'; +const mockNavigate = jest.fn(); +const mockAddListener = jest.fn(); +const mockDispatch = jest.fn(); +const mockGoBack = jest.fn(); + jest.mock('@react-navigation/native', () => ({ ...jest.requireActual('@react-navigation/native'), useNavigation: () => ({ - navigate: jest.fn(), - addListener: jest.fn(), - dispatch: jest.fn(), - goBack: jest.fn(), + navigate: mockNavigate, + addListener: mockAddListener, + dispatch: mockDispatch, + goBack: mockGoBack, }), })); -jest.doMock('react-native-safe-area-context', () => { - const actual = jest.requireActual('react-native-safe-area-context'); +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 { - ...actual, + ...jest.requireActual('react-native-safe-area-context'), SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children), SafeAreaConsumer: jest .fn() @@ -65,7 +69,11 @@ jest.mock('react-native-gzip', () => ({ })); describe('Confirm', () => { - it.only('renders flat confirmation', async () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('renders flat confirmation', async () => { const { getByTestId } = renderWithProvider(<Confirm />, { state: stakingDepositConfirmationState, }); diff --git a/app/components/Views/confirmations/Confirm/Confirm.tsx b/app/components/Views/confirmations/Confirm/Confirm.tsx index e4f26341e8d..5d505a4334c 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.tsx @@ -5,7 +5,6 @@ import { TransactionType } from '@metamask/transaction-controller'; import BottomSheet from '../../../../component-library/components/BottomSheets/BottomSheet'; import { useStyles } from '../../../../component-library/hooks'; -import AccountNetworkInfo from '../components/Confirm/AccountNetworkInfo'; import { Footer } from '../components/Confirm/Footer'; import Info from '../components/Confirm/Info'; import { QRHardwareContextProvider } from '../context/QRHardwareContext/QRHardwareContext'; @@ -31,7 +30,6 @@ const ConfirmWrapped = ({ <ScrollView style={styles.scrollView}> {/* TODO: component SignatureBlockaidBanner to be removed once we implement alert system in mobile */} <SignatureBlockaidBanner /> - <AccountNetworkInfo /> <Info /> </ScrollView> <Footer /> From 58ec7990079b61b2740d62a926e049ff969737f4 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Sun, 9 Feb 2025 01:29:31 +0200 Subject: [PATCH 10/24] test: rm async and update phrases Confirm.test --- .../Views/confirmations/Confirm/Confirm.test.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/components/Views/confirmations/Confirm/Confirm.test.tsx b/app/components/Views/confirmations/Confirm/Confirm.test.tsx index c0a03748d41..54423e14b36 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.test.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.test.tsx @@ -73,14 +73,14 @@ describe('Confirm', () => { jest.clearAllMocks(); }); - it('renders flat confirmation', async () => { + it('renders a flat confirmation for specified type(s): staking deposit', () => { const { getByTestId } = renderWithProvider(<Confirm />, { state: stakingDepositConfirmationState, }); expect(getByTestId('flat-confirmation-container')).toBeDefined(); }); - it('renders modal confirmation', async () => { + it('renders a modal confirmation', () => { const { getByTestId } = renderWithProvider( <SafeAreaProvider> <Confirm /> @@ -92,7 +92,7 @@ describe('Confirm', () => { expect(getByTestId('modal-confirmation-container')).toBeDefined(); }); - it('renders correct information for personal sign', async () => { + it('renders correct information for personal sign', () => { const { getAllByRole, getByText } = renderWithProvider( <SafeAreaProvider> <Confirm /> @@ -112,7 +112,7 @@ describe('Confirm', () => { expect(getAllByRole('button')).toHaveLength(2); }); - it('should render correct information for typed sign v1', async () => { + it('renders correct information for typed sign v1', () => { const { getAllByRole, getAllByText, getByText, queryByText } = renderWithProvider( <SafeAreaProvider> @@ -131,7 +131,7 @@ describe('Confirm', () => { expect(queryByText('This is a deceptive request')).toBeNull(); }); - it('renders blockaid banner if confirmation has blockaid error responsee', async () => { + it('renders a blockaid banner if the confirmation has blockaid error response', () => { const { getByText } = renderWithProvider( <SafeAreaProvider> <Confirm /> @@ -147,7 +147,7 @@ describe('Confirm', () => { 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 }); From a7ea0fe7646447e59a152b81ab81601897379980 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Sun, 9 Feb 2025 01:30:38 +0200 Subject: [PATCH 11/24] test: rm unused getAddressAccountType mock Confirm.test --- .../Views/confirmations/Confirm/Confirm.test.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/app/components/Views/confirmations/Confirm/Confirm.test.tsx b/app/components/Views/confirmations/Confirm/Confirm.test.tsx index 54423e14b36..2f5392e141a 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.test.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.test.tsx @@ -1,13 +1,12 @@ import React from 'react'; import { SafeAreaProvider } from 'react-native-safe-area-context'; -import { View } from 'react-native'; import renderWithProvider from '../../../../util/test/renderWithProvider'; import { personalSignatureConfirmationState, securityAlertResponse, - typedSignV1ConfirmationState, stakingDepositConfirmationState, + typedSignV1ConfirmationState, } from '../../../../util/test/confirm-data-helpers'; // eslint-disable-next-line import/no-namespace import * as ConfirmationRedesignEnabled from '../hooks/useConfirmationRedesignEnabled'; @@ -59,11 +58,6 @@ jest.mock('../../../../core/Engine', () => ({ }, })); -jest.mock('../../../../util/address', () => ({ - ...jest.requireActual('../../../../util/address'), - getAddressAccountType: (str: string) => str, -})); - jest.mock('react-native-gzip', () => ({ deflate: (str: string) => str, })); From 52761af158bc96d3b06a8951c122ed7a0689883d Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Sun, 9 Feb 2025 01:32:00 +0200 Subject: [PATCH 12/24] test: rm unnecessary beforeEach clearAllMocks --- app/components/Views/confirmations/Confirm/Confirm.test.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/components/Views/confirmations/Confirm/Confirm.test.tsx b/app/components/Views/confirmations/Confirm/Confirm.test.tsx index 2f5392e141a..e1b2f0463fb 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.test.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.test.tsx @@ -63,10 +63,6 @@ jest.mock('react-native-gzip', () => ({ })); describe('Confirm', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - it('renders a flat confirmation for specified type(s): staking deposit', () => { const { getByTestId } = renderWithProvider(<Confirm />, { state: stakingDepositConfirmationState, From 40d16ad27c9facb5fcee3290cdee103682f54784 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Sun, 9 Feb 2025 01:38:12 +0200 Subject: [PATCH 13/24] test: Confirm.test add more mocks to remove console.errors --- .../confirmations/Confirm/Confirm.test.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/app/components/Views/confirmations/Confirm/Confirm.test.tsx b/app/components/Views/confirmations/Confirm/Confirm.test.tsx index e1b2f0463fb..e28b64af8d3 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.test.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.test.tsx @@ -13,21 +13,25 @@ import * as ConfirmationRedesignEnabled from '../hooks/useConfirmationRedesignEn import Confirm from './index'; -const mockNavigate = jest.fn(); -const mockAddListener = jest.fn(); -const mockDispatch = jest.fn(); -const mockGoBack = jest.fn(); - jest.mock('@react-navigation/native', () => ({ ...jest.requireActual('@react-navigation/native'), useNavigation: () => ({ - navigate: mockNavigate, - addListener: mockAddListener, - dispatch: mockDispatch, - goBack: mockGoBack, + 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 }; @@ -55,6 +59,7 @@ jest.mock('../../../../core/Engine', () => ({ }, controllerMessenger: { subscribe: jest.fn(), + unsubscribe: jest.fn(), }, })); From 07e7f1fd520d282e853aa0ced86ef33f29b771d7 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Sun, 9 Feb 2025 01:49:28 +0200 Subject: [PATCH 14/24] test: Confirm.test rm missing act warning --- app/components/Views/confirmations/Confirm/Confirm.test.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/components/Views/confirmations/Confirm/Confirm.test.tsx b/app/components/Views/confirmations/Confirm/Confirm.test.tsx index e28b64af8d3..c682cf25b2d 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.test.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.test.tsx @@ -1,5 +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 { @@ -126,7 +127,7 @@ describe('Confirm', () => { expect(queryByText('This is a deceptive request')).toBeNull(); }); - it('renders a blockaid banner if the confirmation has blockaid error response', () => { + it('renders a blockaid banner if the confirmation has blockaid error response', async () => { const { getByText } = renderWithProvider( <SafeAreaProvider> <Confirm /> @@ -138,6 +139,9 @@ describe('Confirm', () => { }, }, ); + + await act(async () => {}); + expect(getByText('Signature request')).toBeDefined(); expect(getByText('This is a deceptive request')).toBeDefined(); }); From 8cd072e54dbfbb9d8a7ee2960a7149baa11fa537 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Wed, 12 Feb 2025 15:27:41 +0200 Subject: [PATCH 15/24] refactor: revert isBackgroundAlternative -> stylesDialogSheet Confirm BottomSheet --- .../BottomSheets/BottomSheet/BottomSheet.tsx | 4 ++-- .../BottomSheetDialog/BottomSheetDialog.styles.ts | 10 ++++++---- .../BottomSheetDialog/BottomSheetDialog.tsx | 4 ++-- .../BottomSheetDialog/BottomSheetDialog.types.ts | 12 ++++++------ .../BottomSheetFooter/BottomSheetFooter.styles.ts | 4 ++-- .../BottomSheetFooter/BottomSheetFooter.tsx | 3 +-- .../BottomSheetFooter/BottomSheetFooter.types.ts | 7 +------ .../Views/confirmations/Confirm/Confirm.styles.ts | 3 +++ .../Views/confirmations/Confirm/Confirm.tsx | 2 +- .../components/Confirm/Footer/Footer.styles.ts | 8 +++++++- .../components/Confirm/Footer/Footer.tsx | 1 - 11 files changed, 31 insertions(+), 27 deletions(-) diff --git a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx index 01b8ce92763..eb5011ab03c 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx @@ -36,7 +36,7 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>( children, onClose, onOpen, - isBackgroundAlternative = false, + stylesDialogSheet, isInteractable = true, shouldNavigateBack = true, isFullscreen = false, @@ -108,7 +108,7 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>( onOpen={onOpenCB} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} - isBackgroundAlternative={isBackgroundAlternative} + stylesDialogSheet={stylesDialogSheet} > {children} </BottomSheetDialog> 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 5f1156d67e9..94d479e634f 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 @@ -22,10 +22,10 @@ const styleSheet = (params: { const { vars, theme } = params; const { colors, shadows } = theme; const { - isBackgroundAlternative, isFullscreen, maxSheetHeight, screenBottomPadding, + stylesDialogSheet, } = vars; return StyleSheet.create({ @@ -35,8 +35,8 @@ const styleSheet = (params: { left: 0, right: 0, } as ViewStyle) as ViewStyle, - sheet: { - backgroundColor: isBackgroundAlternative ? colors.background.alternative : colors.background.default, + sheet: Object.assign({ + backgroundColor: colors.background.default, borderTopLeftRadius: 8, borderTopRightRadius: 8, maxHeight: maxSheetHeight, @@ -46,7 +46,9 @@ const styleSheet = (params: { borderColor: colors.border.muted, ...(isFullscreen && { height: maxSheetHeight }), ...shadows.size.lg, - }, + }, + stylesDialogSheet, + ) 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 cb7f82f63a0..0b6f90a1802 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx @@ -55,11 +55,11 @@ const BottomSheetDialog = forwardRef< ( { children, - isBackgroundAlternative = false, isFullscreen = false, isInteractable = true, onClose, onOpen, + stylesDialogSheet = {}, ...props }, ref, @@ -70,9 +70,9 @@ const BottomSheetDialog = forwardRef< const { height: screenHeight } = useWindowDimensions(); const maxSheetHeight = screenHeight - screenTopPadding; const { styles } = useStyles(styleSheet, { - isBackgroundAlternative, maxSheetHeight, screenBottomPadding, + stylesDialogSheet, 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 600fc18cbbf..8d33c17f3f9 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. @@ -9,10 +9,6 @@ export interface BottomSheetDialogProps extends ViewProps { * Optional content to wrap to display. */ children?: React.ReactNode; - /** - * Optional styles for the animated view. - */ - isBackgroundAlternative?: boolean; /** * Optional prop to toggle full screen state of BottomSheetDialog. * @default false @@ -31,6 +27,10 @@ export interface BottomSheetDialogProps extends ViewProps { * Optional callback that gets triggered when sheet is opened. */ onOpen?: (hasPendingAction?: boolean) => void; + /** + * Optional sheet styles + */ + stylesDialogSheet?: StyleProp<ViewStyle>; } export interface BottomSheetDialogRef { @@ -44,6 +44,6 @@ export interface BottomSheetDialogRef { export interface BottomSheetDialogStyleSheetVars { maxSheetHeight: number; screenBottomPadding: number; - isBackgroundAlternative: boolean; + stylesDialogSheet: StyleProp<ViewStyle>; isFullscreen: boolean; } diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts index 7e7a011e387..6754be11ffe 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles.ts @@ -23,7 +23,7 @@ const styleSheet = (params: { vars: BottomSheetFooterStyleSheetVars; }) => { const { vars, theme } = params; - const { style, isBackgroundAlternative, buttonsAlignment } = vars; + const { style, buttonsAlignment } = vars; const buttonStyle: ViewStyle = buttonsAlignment === ButtonsAlignment.Horizontal ? { flex: 1 } @@ -32,7 +32,7 @@ const styleSheet = (params: { return StyleSheet.create({ base: Object.assign( { - backgroundColor: isBackgroundAlternative ? theme.colors.background.alternative : theme.colors.background.default, + backgroundColor: theme.colors.background.default, flexDirection: buttonsAlignment === ButtonsAlignment.Horizontal ? 'row' : 'column', paddingVertical: 4, diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.tsx b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.tsx index bb86de68752..6848ae54800 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.tsx +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.tsx @@ -22,9 +22,8 @@ const BottomSheetFooter: React.FC<BottomSheetFooterProps> = ({ style, buttonsAlignment = DEFAULT_BOTTOMSHEETFOOTER_BUTTONSALIGNMENT, buttonPropsArray, - isBackgroundAlternative = false, }) => { - const { styles } = useStyles(styleSheet, { style, isBackgroundAlternative, buttonsAlignment }); + const { styles } = useStyles(styleSheet, { style, buttonsAlignment }); return ( <View style={styles.base} testID={TESTID_BOTTOMSHEETFOOTER}> diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.types.ts b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.types.ts index 39e7a80d8c3..71191b31f7e 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.types.ts +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.types.ts @@ -25,11 +25,6 @@ export interface BottomSheetFooterProps extends ViewProps { * Array of buttons that will be displayed in the footer */ buttonPropsArray: ButtonProps[]; - /** - * Optional prop to control the background color of the footer. - * @default false - */ - isBackgroundAlternative?: boolean; } /** @@ -37,5 +32,5 @@ export interface BottomSheetFooterProps extends ViewProps { */ export type BottomSheetFooterStyleSheetVars = Pick< BottomSheetFooterProps, - 'style' | 'buttonsAlignment' | 'isBackgroundAlternative' + 'style' | 'buttonsAlignment' >; diff --git a/app/components/Views/confirmations/Confirm/Confirm.styles.ts b/app/components/Views/confirmations/Confirm/Confirm.styles.ts index d056c4361b5..d16340b2e4a 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.styles.ts +++ b/app/components/Views/confirmations/Confirm/Confirm.styles.ts @@ -12,6 +12,9 @@ const styleSheet = (params: { } = params; return StyleSheet.create({ + bottomSheetDialogSheet: { + backgroundColor: theme.colors.background.alternative, + }, flatContainer: { position: 'absolute', top: 0, diff --git a/app/components/Views/confirmations/Confirm/Confirm.tsx b/app/components/Views/confirmations/Confirm/Confirm.tsx index 77156100b3c..8257d648d6f 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.tsx @@ -64,7 +64,7 @@ const Confirm = () => { return ( <BottomSheet isInteractable={false} - isBackgroundAlternative + stylesDialogSheet={styles.bottomSheetDialogSheet} testID="modal-confirmation-container" > <View style={styles.modalContainer} testID={approvalRequest?.type}> 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 31a0bed61a8..0b0e4458247 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts +++ b/app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts @@ -1,11 +1,17 @@ +import { Theme } from '@metamask/design-tokens'; import { StyleSheet } from 'react-native'; -const styleSheet = () => StyleSheet.create({ +const styleSheet = (params: { theme: Theme }) => { + const { theme: { colors }} = params; + + return StyleSheet.create({ base: { + background: colors.background.alternative, paddingHorizontal: 16, paddingBottom: 8, paddingTop: 16, }, }); +}; export default styleSheet; diff --git a/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx b/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx index 746c8fdc5d0..b281529a69e 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx +++ b/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx @@ -48,7 +48,6 @@ export const Footer = () => { <BottomSheetFooter buttonsAlignment={ButtonsAlignment.Horizontal} buttonPropsArray={buttons} - isBackgroundAlternative style={styles.base} /> ); From 2605bcac0e62d52ed12e7a6941fc748ef08eb7db Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Wed, 12 Feb 2025 15:28:07 +0200 Subject: [PATCH 16/24] test:fix: bypass lint empty function --- app/components/Views/confirmations/Confirm/Confirm.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/Views/confirmations/Confirm/Confirm.test.tsx b/app/components/Views/confirmations/Confirm/Confirm.test.tsx index c682cf25b2d..61270a80b19 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.test.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.test.tsx @@ -21,7 +21,7 @@ jest.mock('@react-navigation/native', () => ({ dispatch: jest.fn(), goBack: jest.fn(), navigate: jest.fn(), - removeListener: jest.fn(), + removeListener: jest.fn(), }), })); @@ -36,7 +36,7 @@ jest.mock('react-native/Libraries/Linking/Linking', () => ({ 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), @@ -140,7 +140,7 @@ describe('Confirm', () => { }, ); - await act(async () => {}); + await act(async () => undefined); expect(getByText('Signature request')).toBeDefined(); expect(getByText('This is a deceptive request')).toBeDefined(); From 42a4559d40bd2b5e36514d827470a100cac87dc2 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Thu, 13 Feb 2025 18:57:32 +0100 Subject: [PATCH 17/24] fix: Confirm merge conflicts padding and height --- .../Views/confirmations/Confirm/Confirm.styles.ts | 12 +----------- .../Views/confirmations/Confirm/Confirm.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/app/components/Views/confirmations/Confirm/Confirm.styles.ts b/app/components/Views/confirmations/Confirm/Confirm.styles.ts index d16340b2e4a..200ae609cdd 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.styles.ts +++ b/app/components/Views/confirmations/Confirm/Confirm.styles.ts @@ -1,5 +1,4 @@ import { StyleSheet } from 'react-native'; -import Device from '../../../../util/device'; import { Theme } from '../../../../util/theme/models'; const styleSheet = (params: { @@ -26,18 +25,9 @@ const styleSheet = (params: { justifyContent: 'space-between', paddingHorizontal: 16, }, - modalContainer: { - backgroundColor: theme.colors.background.alternative, - paddingHorizontal: 16, - paddingVertical: 24, - borderTopLeftRadius: 20, - borderTopRightRadius: 20, - paddingBottom: Device.isIphoneX() ? 20 : 0, - maxHeight: '90%', - }, scrollView: { paddingHorizontal: 16, - height: isFlatConfirmation ? '100%' : '75%', + height: isFlatConfirmation ? '100%' : undefined, }, }); }; diff --git a/app/components/Views/confirmations/Confirm/Confirm.tsx b/app/components/Views/confirmations/Confirm/Confirm.tsx index 8257d648d6f..90090903b57 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.tsx @@ -21,12 +21,14 @@ const FLAT_TRANSACTION_CONFIRMATIONS: TransactionType[] = [ const ConfirmWrapped = ({ styles, + testID, }: { styles: StyleSheet.NamedStyles<Record<string, unknown>>; + testID?: string; }) => ( <QRHardwareContextProvider> <Title /> - <ScrollView style={styles.scrollView}> + <ScrollView style={styles.scrollView} testID={testID}> {/* TODO: component SignatureBlockaidBanner to be removed once we implement alert system in mobile */} <SignatureBlockaidBanner /> <Info /> @@ -67,9 +69,7 @@ const Confirm = () => { stylesDialogSheet={styles.bottomSheetDialogSheet} testID="modal-confirmation-container" > - <View style={styles.modalContainer} testID={approvalRequest?.type}> - <ConfirmWrapped styles={styles} /> - </View> + <ConfirmWrapped styles={styles} testID={approvalRequest?.type} /> </BottomSheet> ); }; From e76e66a2febc91628c2bb441a890b07f768c78ac Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Fri, 14 Feb 2025 11:24:40 +0100 Subject: [PATCH 18/24] fix: ConfirmFooter backgroundColor --- .../confirmations/components/Confirm/Footer/Footer.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0b0e4458247..d12e7b0bd30 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts +++ b/app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts @@ -6,7 +6,7 @@ const styleSheet = (params: { theme: Theme }) => { return StyleSheet.create({ base: { - background: colors.background.alternative, + backgroundColor: colors.background.alternative, paddingHorizontal: 16, paddingBottom: 8, paddingTop: 16, From b7e45e8c3dc60e2614c2577bc71830651dcb024e Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Mon, 17 Feb 2025 15:41:18 +0100 Subject: [PATCH 19/24] fix: confirm Footer import --- .../confirmations/components/Confirm/Footer/Footer.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5790532acd2..9b89bac5d3e 100644 --- a/app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx +++ b/app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx @@ -6,7 +6,7 @@ import renderWithProvider from '../../../../../../util/test/renderWithProvider'; import { personalSignatureConfirmationState } from '../../../../../../util/test/confirm-data-helpers'; // eslint-disable-next-line import/no-namespace import * as QRHardwareHook from '../../../context/QRHardwareContext/QRHardwareContext'; -import Footer from './index'; +import { Footer } from './index'; const mockConfirmSpy = jest.fn(); const mockRejectSpy = jest.fn(); From e05ec52dd69a8c371d18cf129f421acfa01b59e0 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 18 Feb 2025 19:14:11 +0100 Subject: [PATCH 20/24] fix: merge conflicts rm Confirm scrollView styles --- .../Views/confirmations/Confirm/Confirm.styles.ts | 10 +--------- app/components/Views/confirmations/Confirm/Confirm.tsx | 2 +- .../context/ScrollContext/ScrollContext.styles.ts | 2 +- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/app/components/Views/confirmations/Confirm/Confirm.styles.ts b/app/components/Views/confirmations/Confirm/Confirm.styles.ts index 200ae609cdd..43993c2e254 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.styles.ts +++ b/app/components/Views/confirmations/Confirm/Confirm.styles.ts @@ -2,13 +2,9 @@ import { StyleSheet } from 'react-native'; import { Theme } from '../../../../util/theme/models'; const styleSheet = (params: { - vars: { isFlatConfirmation: boolean }; theme: Theme; }) => { - const { - theme, - vars: { isFlatConfirmation }, - } = params; + const { theme } = params; return StyleSheet.create({ bottomSheetDialogSheet: { @@ -25,10 +21,6 @@ const styleSheet = (params: { justifyContent: 'space-between', paddingHorizontal: 16, }, - scrollView: { - paddingHorizontal: 16, - height: isFlatConfirmation ? '100%' : undefined, - }, }); }; diff --git a/app/components/Views/confirmations/Confirm/Confirm.tsx b/app/components/Views/confirmations/Confirm/Confirm.tsx index a66cb549915..2505bd4aa22 100644 --- a/app/components/Views/confirmations/Confirm/Confirm.tsx +++ b/app/components/Views/confirmations/Confirm/Confirm.tsx @@ -33,7 +33,7 @@ export const Confirm = () => { const { isFlatConfirmation } = useFlatConfirmation(); const { isRedesignedEnabled } = useConfirmationRedesignEnabled(); - const { styles } = useStyles(styleSheet, { isFlatConfirmation }); + const { styles } = useStyles(styleSheet, {}); if (!isRedesignedEnabled) { return null; diff --git a/app/components/Views/confirmations/context/ScrollContext/ScrollContext.styles.ts b/app/components/Views/confirmations/context/ScrollContext/ScrollContext.styles.ts index c84985779b7..2f61dbf2583 100644 --- a/app/components/Views/confirmations/context/ScrollContext/ScrollContext.styles.ts +++ b/app/components/Views/confirmations/context/ScrollContext/ScrollContext.styles.ts @@ -10,7 +10,7 @@ const styleSheet = (params: { theme: Theme }) => { padding: 4, }, scrollable: { - minHeight: '75%', + paddingHorizontal: 16, }, scrollButton: { backgroundColor: theme.colors.primary.default, From 52fb72ea4710e14c650616ca35a74d74afcbd132 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 18 Feb 2025 22:48:26 +0100 Subject: [PATCH 21/24] fix: confirm scroll centering --- .../context/ScrollContext/ScrollContext.styles.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/components/Views/confirmations/context/ScrollContext/ScrollContext.styles.ts b/app/components/Views/confirmations/context/ScrollContext/ScrollContext.styles.ts index 2f61dbf2583..8c377653c91 100644 --- a/app/components/Views/confirmations/context/ScrollContext/ScrollContext.styles.ts +++ b/app/components/Views/confirmations/context/ScrollContext/ScrollContext.styles.ts @@ -2,6 +2,8 @@ import { StyleSheet } from 'react-native'; import { Theme } from '../../../../../util/theme/models'; +const BUTTON_WIDTH = 40; + const styleSheet = (params: { theme: Theme }) => { const { theme } = params; @@ -17,6 +19,7 @@ const styleSheet = (params: { theme: Theme }) => { borderRadius: 20, bottom: '16%', left: '50%', + transform: [{ translateX: -BUTTON_WIDTH / 2 }], padding: 20, position: 'absolute', zIndex: 1, From 7634cb597df325daf20fd38c654a7000c86b4454 Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 18 Feb 2025 22:49:06 +0100 Subject: [PATCH 22/24] fix: confirm scroll icon color --- .../confirmations/context/ScrollContext/ScrollContext.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/components/Views/confirmations/context/ScrollContext/ScrollContext.tsx b/app/components/Views/confirmations/context/ScrollContext/ScrollContext.tsx index 24120ff4555..729ad6fe183 100644 --- a/app/components/Views/confirmations/context/ScrollContext/ScrollContext.tsx +++ b/app/components/Views/confirmations/context/ScrollContext/ScrollContext.tsx @@ -18,7 +18,7 @@ import { import ButtonIcon, { ButtonIconSizes, } from '../../../../../component-library/components/Buttons/ButtonIcon'; -import { IconName } from '../../../../../component-library/components/Icons/Icon'; +import { IconColor, IconName } from '../../../../../component-library/components/Icons/Icon'; import { useStyles } from '../../../../hooks/useStyles'; import styleSheet from './ScrollContext.styles'; @@ -80,6 +80,7 @@ export const ScrollContextProvider: React.FC<{ size={ButtonIconSizes.Lg} style={styles.scrollButton} iconName={IconName.Arrow2Down} + iconColor={IconColor.Inverse} onPress={scrollToBottom} testID="scroll-to-bottom-button" /> From 257462d618045ebe15d5ec4c0068708c3e064f8c Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 18 Feb 2025 22:49:27 +0100 Subject: [PATCH 23/24] fix: confirm scroll performance and log warnings --- .../Views/confirmations/context/ScrollContext/ScrollContext.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/Views/confirmations/context/ScrollContext/ScrollContext.tsx b/app/components/Views/confirmations/context/ScrollContext/ScrollContext.tsx index 729ad6fe183..996a6a4216b 100644 --- a/app/components/Views/confirmations/context/ScrollContext/ScrollContext.tsx +++ b/app/components/Views/confirmations/context/ScrollContext/ScrollContext.tsx @@ -90,6 +90,7 @@ export const ScrollContextProvider: React.FC<{ style={styles.scrollable} onContentSizeChange={checkScrollable} onScroll={handleScroll} + scrollEventThrottle={16} > <TouchableWithoutFeedback> <View ref={scrolledSectionRef} style={styles.scrollableSection}> From 29d0159a294e256a8fcb24f937edf5ebc79b9e8c Mon Sep 17 00:00:00 2001 From: digiwand <20778143+digiwand@users.noreply.github.com> Date: Tue, 18 Feb 2025 23:33:15 +0100 Subject: [PATCH 24/24] fix: snapshots after removal of View + margin --- .../Approve/__snapshots__/index.test.tsx.snap | 9 --------- .../__snapshots__/index.test.tsx.snap | 9 --------- 2 files changed, 18 deletions(-) diff --git a/app/components/Views/confirmations/ApproveView/Approve/__snapshots__/index.test.tsx.snap b/app/components/Views/confirmations/ApproveView/Approve/__snapshots__/index.test.tsx.snap index 4a7e4ba9481..e676b76a254 100644 --- a/app/components/Views/confirmations/ApproveView/Approve/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/confirmations/ApproveView/Approve/__snapshots__/index.test.tsx.snap @@ -590,15 +590,6 @@ exports[`Approve should render transaction approval 1`] = ` } } > - <View - style={ - { - "marginBottom": 10, - "marginHorizontal": 10, - "marginTop": 20, - } - } - /> <Text accessibilityRole="text" style={ diff --git a/app/components/Views/confirmations/components/ApproveTransactionReview/__snapshots__/index.test.tsx.snap b/app/components/Views/confirmations/components/ApproveTransactionReview/__snapshots__/index.test.tsx.snap index bf8db4b508d..27efee87ff6 100644 --- a/app/components/Views/confirmations/components/ApproveTransactionReview/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/confirmations/components/ApproveTransactionReview/__snapshots__/index.test.tsx.snap @@ -408,15 +408,6 @@ exports[`ApproveTransactionModal render matches snapshot 1`] = ` } } > - <View - style={ - { - "marginBottom": 10, - "marginHorizontal": 10, - "marginTop": 20, - } - } - /> <Text accessibilityRole="text" style={