From 72d4c1b643d34c194be95d4e11c806d5b7a65c38 Mon Sep 17 00:00:00 2001 From: sahar-fehri Date: Wed, 5 Jun 2024 15:31:03 +0200 Subject: [PATCH] fix: create nft auto detection modal and remove nft polling logic --- app/actions/security/index.ts | 16 +- app/actions/security/state.ts | 1 + app/components/Nav/App/index.js | 5 + .../UI/CollectibleContracts/index.js | 18 +- .../NFTAutoDetectionModal.styles.ts | 29 ++ .../NFTAutoDetectionModal.tsx | 79 ++++ app/components/Views/Wallet/index.tsx | 33 +- app/constants/navigation/Routes.ts | 1 + app/core/Engine.ts | 6 +- app/images/wallet-alpha.png | Bin 0 -> 22880 bytes app/reducers/collectibles/index.js | 9 + app/reducers/security/index.ts | 6 + app/selectors/nftController.ts | 5 + .../@metamask+assets-controllers+26.0.0.patch | 341 +++++++++++++++--- 14 files changed, 481 insertions(+), 68 deletions(-) create mode 100644 app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal.styles.ts create mode 100644 app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal.tsx create mode 100644 app/images/wallet-alpha.png diff --git a/app/actions/security/index.ts b/app/actions/security/index.ts index 1b6ce9ae390..e0e87a0ef55 100644 --- a/app/actions/security/index.ts +++ b/app/actions/security/index.ts @@ -7,6 +7,7 @@ export enum ActionType { USER_SELECTED_AUTOMATIC_SECURITY_CHECKS_OPTION = 'USER_SELECTED_AUTOMATIC_SECURITY_CHECKS_OPTION', SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN = 'SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN', SET_DATA_COLLECTION_FOR_MARKETING = 'SET_DATA_COLLECTION_FOR_MARKETING', + SET_NFT_AUTO_DETECTION_MODAL_OPEN = 'SET_NFT_AUTO_DETECTION_MODAL_OPEN', } export interface AllowLoginWithRememberMeUpdated @@ -29,6 +30,11 @@ export interface SetAutomaticSecurityChecksModalOpen open: boolean; } +export interface SetNftAutoDetectionModalOpen + extends ReduxAction { + open: boolean; +} + export interface SetDataCollectionForMarketing extends ReduxAction { enabled: boolean; @@ -39,7 +45,8 @@ export type Action = | AutomaticSecurityChecks | UserSelectedAutomaticSecurityChecksOptions | SetAutomaticSecurityChecksModalOpen - | SetDataCollectionForMarketing; + | SetDataCollectionForMarketing + | SetNftAutoDetectionModalOpen; export const setAllowLoginWithRememberMe = ( enabled: boolean, @@ -68,6 +75,13 @@ export const setAutomaticSecurityChecksModalOpen = ( open, }); +export const setNftAutoDetectionModalOpen = ( + open: boolean, +): SetNftAutoDetectionModalOpen => ({ + type: ActionType.SET_NFT_AUTO_DETECTION_MODAL_OPEN, + open, +}); + export const setDataCollectionForMarketing = (enabled: boolean) => ({ type: ActionType.SET_DATA_COLLECTION_FOR_MARKETING, enabled, diff --git a/app/actions/security/state.ts b/app/actions/security/state.ts index 8c393555156..4e3cd263588 100644 --- a/app/actions/security/state.ts +++ b/app/actions/security/state.ts @@ -3,6 +3,7 @@ export interface SecuritySettingsState { automaticSecurityChecksEnabled: boolean; hasUserSelectedAutomaticSecurityCheckOption: boolean; isAutomaticSecurityChecksModalOpen: boolean; + isNFTAutoDetectionModalOpened: boolean; // 'null' represents the user not having set his preference over dataCollectionForMarketing yet dataCollectionForMarketing: boolean | null; } diff --git a/app/components/Nav/App/index.js b/app/components/Nav/App/index.js index 966eccf606a..dae0eb764b7 100644 --- a/app/components/Nav/App/index.js +++ b/app/components/Nav/App/index.js @@ -110,6 +110,7 @@ import OnboardingSuccess from '../../Views/OnboardingSuccess'; import DefaultSettings from '../../Views/OnboardingSuccess/DefaultSettings'; import BasicFunctionalityModal from '../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal'; import SmartTransactionsOptInModal from '../../Views/SmartTransactionsOptInModal/SmartTranactionsOptInModal'; +import NFTAutoDetectionModal from '../../../../app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal'; const clearStackNavigatorOptions = { headerShown: false, @@ -689,6 +690,10 @@ const App = ({ userLoggedIn }) => { name={Routes.SHEET.SHOW_NFT_DISPLAY_MEDIA} component={ShowDisplayNftMediaSheet} /> + ); diff --git a/app/components/UI/CollectibleContracts/index.js b/app/components/UI/CollectibleContracts/index.js index dbd3e06842a..7ff00d70dd2 100644 --- a/app/components/UI/CollectibleContracts/index.js +++ b/app/components/UI/CollectibleContracts/index.js @@ -8,6 +8,7 @@ import { Platform, FlatList, RefreshControl, + ActivityIndicator, } from 'react-native'; import { connect } from 'react-redux'; import { fontStyles } from '../../../styles/common'; @@ -19,6 +20,7 @@ import { collectibleContractsSelector, collectiblesSelector, favoritesCollectiblesSelector, + isNftFetchingInProgressSelector, } from '../../../reducers/collectibles'; import { removeFavoriteCollectible } from '../../../actions/collectibles'; import Text from '../../Base/Text'; @@ -86,6 +88,9 @@ const createStyles = (colors) => marginBottom: 8, fontSize: 14, }, + spinner: { + marginBottom: 8, + }, }); /** @@ -99,6 +104,7 @@ const CollectibleContracts = ({ navigation, collectibleContracts, collectibles: allCollectibles, + isNftFetchingInProgress, favoriteCollectibles, removeFavoriteCollectible, useNftDetection, @@ -244,6 +250,10 @@ const CollectibleContracts = ({ const renderFooter = useCallback( () => ( + {isNftFetchingInProgress.isFetchingInProgress ? ( + + ) : null} + {strings('wallet.no_collectibles')} @@ -258,7 +268,7 @@ const CollectibleContracts = ({ ), - [goToAddCollectible, isAddNFTEnabled, styles], + [goToAddCollectible, isAddNFTEnabled, styles, isNftFetchingInProgress], ); const renderCollectibleContract = useCallback( @@ -421,6 +431,11 @@ CollectibleContracts.propTypes = { * the Asset detail view */ navigation: PropTypes.object, + /** + * NftFetching object to indicate if + * we are still fetching nfts in the background. + */ + isNftFetchingInProgress: PropTypes.object, /** * Object of collectibles */ @@ -450,6 +465,7 @@ const mapStateToProps = (state) => ({ useNftDetection: selectUseNftDetection(state), collectibleContracts: collectibleContractsSelector(state), collectibles: collectiblesSelector(state), + isNftFetchingInProgress: isNftFetchingInProgressSelector(state), favoriteCollectibles: favoritesCollectiblesSelector(state), isIpfsGatewayEnabled: selectIsIpfsGatewayEnabled(state), displayNftMedia: selectDisplayNftMedia(state), diff --git a/app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal.styles.ts b/app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal.styles.ts new file mode 100644 index 00000000000..87f6afbc2bc --- /dev/null +++ b/app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal.styles.ts @@ -0,0 +1,29 @@ +import { StyleSheet } from 'react-native'; + +/** + * Style sheet function for NFT auto detection modal component. + * + * @returns StyleSheet object. + */ +const styleSheet = () => + StyleSheet.create({ + container: { + alignItems: 'center', + }, + image: { + width: 219, + height: 219, + }, + description: { + marginLeft: 32, + marginRight: 32, + }, + buttonsContainer: { + paddingTop: 24, + marginLeft: 16, + marginRight: 16, + }, + spacer: { height: 8 }, + }); + +export default styleSheet; diff --git a/app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal.tsx b/app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal.tsx new file mode 100644 index 00000000000..8d8b35794b2 --- /dev/null +++ b/app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal.tsx @@ -0,0 +1,79 @@ +/* eslint-disable no-console */ + +import React, { useRef } from 'react'; +import BottomSheet, { + BottomSheetRef, +} from '../../../component-library/components/BottomSheets/BottomSheet'; +import { strings } from '../../../../locales/i18n'; +import { useStyles } from '../../../component-library/hooks'; +import styleSheet from './NFTAutoDetectionModal.styles'; +import SheetHeader from '../../../component-library/components/Sheet/SheetHeader'; +import Text from '../../../component-library/components/Texts/Text'; +import { View, Image } from 'react-native'; + +import Button, { + ButtonSize, + ButtonVariants, + ButtonWidthTypes, +} from '../../../component-library/components/Buttons/Button'; +import { useNavigation } from '@react-navigation/native'; +import Engine from '../../../core/Engine'; + +const NFTAutoDetectionModal = () => { + const { styles } = useStyles(styleSheet, {}); + const sheetRef = useRef(null); + const walletImage = require('../../../images/wallet-alpha.png'); // eslint-disable-line + const navigation = useNavigation(); + const dismissModal = (): void => { + if (sheetRef?.current) { + sheetRef.current.onCloseBottomSheet(); + } else { + navigation.goBack(); + } + }; + + const enableNftDetectionAndDismissModal = (): void => { + const { PreferencesController } = Engine.context; + PreferencesController.setUseNftDetection(true); + dismissModal(); + }; + + return ( + + + + + + + + {strings('enable_nft-auto-detection.description')} + + • {strings('enable_nft-auto-detection.immediateAccess')} + • {strings('enable_nft-auto-detection.navigate')} + • {strings('enable_nft-auto-detection.dive')} + + +