fix: create nft auto detection modal and remove nft polling logic

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<ActionType.SET_NFT_AUTO_DETECTION_MODAL_OPEN> {
+  open: boolean;
+}
+
 export interface SetDataCollectionForMarketing
   extends ReduxAction<ActionType.SET_DATA_COLLECTION_FOR_MARKETING> {
   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,

app/actions/security/state.ts

@@ -3,6 +3,7 @@ export interface SecuritySettingsState {
   automaticSecurityChecksEnabled: boolean;
   hasUserSelectedAutomaticSecurityCheckOption: boolean;
   isAutomaticSecurityChecksModalOpen: boolean;
+  isNFTAutoDetectionModalViewed: boolean;
   // 'null' represents the user not having set his preference over dataCollectionForMarketing yet
   dataCollectionForMarketing: boolean | null;
 }

app/component-library/components/Toast/Toast.tsx

@@ -187,6 +187,18 @@ const Toast = forwardRef((_, ref: React.ForwardedRef<ToastRef>) => {
           />
         );
       }
+      case ToastVariants.Icon: {
+        const { iconName, iconColor, backgroundColor } = toastOptions;
+        return (
+          <Avatar
+            variant={AvatarVariant.Icon}
+            name={iconName}
+            iconColor={iconColor}
+            backgroundColor={backgroundColor}
+            style={styles.avatar}
+          />
+        );
+      }
     }
   };
 

app/component-library/components/Toast/Toast.types.ts

@@ -12,6 +12,7 @@ export enum ToastVariants {
   Plain = 'Plain',
   Account = 'Account',
   Network = 'Network',
+  Icon = 'Icon',
 }
 
 /**
@@ -65,13 +66,21 @@ interface NetworkToastOption extends BaseToastVariants {
   networkImageSource: ImageSourcePropType;
 }
 
+interface IconToastOption extends BaseToastVariants {
+  variant: ToastVariants.Icon;
+  iconName?: string;
+  iconColor?: string;
+  backgroundColor?: string;
+}
+
 /**
  * Different toast options combined in a union type.
  */
 export type ToastOptions =
   | PlainToastOption
   | AccountToastOption
-  | NetworkToastOption;
+  | NetworkToastOption
+  | IconToastOption;
 
 /**
  * Toast component reference.

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,
@@ -693,6 +694,10 @@ const App = ({ userLoggedIn }) => {
         name={Routes.SHEET.SHOW_NFT_DISPLAY_MEDIA}
         component={ShowDisplayNftMediaSheet}
       />
+      <Stack.Screen
+        name={Routes.MODAL.NFT_AUTO_DETECTION_MODAL}
+        component={NFTAutoDetectionModal}
+      />
     </Stack.Navigator>
   );
 

app/components/UI/CollectibleContracts/constants.ts

@@ -1,3 +1,2 @@
-const RefreshTestId = 'refreshControl';
-
-export default RefreshTestId;
+export const RefreshTestId = 'refreshControl';
+export const SpinnerTestId = 'spinner';

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,
+  isNftFetchingProgressSelector,
 } from '../../../reducers/collectibles';
 import { removeFavoriteCollectible } from '../../../actions/collectibles';
 import Text from '../../Base/Text';
@@ -44,7 +46,7 @@ import {
   NFT_TAB_CONTAINER_ID,
 } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
 import { useMetrics } from '../../../components/hooks/useMetrics';
-import RefreshTestId from './constants';
+import { RefreshTestId, SpinnerTestId } from './constants';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -87,6 +89,9 @@ const createStyles = (colors) =>
       marginBottom: 8,
       fontSize: 14,
     },
+    spinner: {
+      marginBottom: 8,
+    },
   });
 
 /**
@@ -100,6 +105,7 @@ const CollectibleContracts = ({
   navigation,
   collectibleContracts,
   collectibles: allCollectibles,
+  isNftFetchingProgress,
   favoriteCollectibles,
   removeFavoriteCollectible,
   useNftDetection,
@@ -219,6 +225,14 @@ const CollectibleContracts = ({
   const renderFooter = useCallback(
     () => (
       <View style={styles.footer} key={'collectible-contracts-footer'}>
+        {isNftFetchingProgress ? (
+          <ActivityIndicator
+            size="large"
+            style={styles.spinner}
+            testID={SpinnerTestId}
+          />
+        ) : null}
+
         <Text style={styles.emptyText}>
           {strings('wallet.no_collectibles')}
         </Text>
@@ -233,7 +247,7 @@ const CollectibleContracts = ({
         </TouchableOpacity>
       </View>
     ),
-    [goToAddCollectible, isAddNFTEnabled, styles],
+    [goToAddCollectible, isAddNFTEnabled, styles, isNftFetchingProgress],
   );
 
   const renderCollectibleContract = useCallback(
@@ -282,7 +296,7 @@ const CollectibleContracts = ({
         NftDetectionController.detectNfts(),
         NftController.checkAndUpdateAllNftsOwnershipStatus(),
       ];
-      await Promise.all(actions);
+      await Promise.allSettled(actions);
       setRefreshing(false);
     });
   }, [setRefreshing]);
@@ -322,7 +336,7 @@ const CollectibleContracts = ({
           <>
             {isCollectionDetectionBannerVisible && (
               <View style={styles.emptyView}>
-                <CollectibleDetectionModal navigation={navigation} />
+                <CollectibleDetectionModal />
               </View>
             )}
             {renderFavoriteCollectibles()}
@@ -355,7 +369,6 @@ const CollectibleContracts = ({
       renderFooter,
       renderEmpty,
       isCollectionDetectionBannerVisible,
-      navigation,
       styles.emptyView,
     ],
   );
@@ -391,7 +404,11 @@ CollectibleContracts.propTypes = {
    * Array of collectibles objects
    */
   collectibles: PropTypes.array,
-
+  /**
+   * boolean indicating if fetching status is
+   * still in progress
+   */
+  isNftFetchingProgress: PropTypes.bool,
   /**
    * Navigation object required to push
    * the Asset detail view
@@ -426,6 +443,7 @@ const mapStateToProps = (state) => ({
   useNftDetection: selectUseNftDetection(state),
   collectibleContracts: collectibleContractsSelector(state),
   collectibles: collectiblesSelector(state),
+  isNftFetchingProgress: isNftFetchingProgressSelector(state),
   favoriteCollectibles: favoritesCollectiblesSelector(state),
   isIpfsGatewayEnabled: selectIsIpfsGatewayEnabled(state),
   displayNftMedia: selectDisplayNftMedia(state),

app/components/UI/CollectibleContracts/index.test.tsx

@@ -495,4 +495,124 @@ describe('CollectibleContracts', () => {
     expect(spyOnUpdateNftMetadata).toHaveBeenCalledTimes(0);
     expect(spyOnDetectNfts).toHaveBeenCalledTimes(1);
   });
+
+  it('shows spinner if nfts are still being fetched', async () => {
+    const CURRENT_ACCOUNT = '0x1a';
+    const mockState = {
+      collectibles: {
+        favorites: {},
+        isNftFetchingProgress: true,
+      },
+      engine: {
+        backgroundState: {
+          ...initialBackgroundState,
+          NetworkController: {
+            network: '1',
+            providerConfig: {
+              ticker: 'ETH',
+              type: 'mainnet',
+              chainId: '1',
+            },
+          },
+          AccountTrackerController: {
+            accounts: { [CURRENT_ACCOUNT]: { balance: '0' } },
+          },
+          PreferencesController: {
+            useNftDetection: true,
+            displayNftMedia: true,
+            selectedAddress: CURRENT_ACCOUNT,
+            identities: {
+              [CURRENT_ACCOUNT]: {
+                address: CURRENT_ACCOUNT,
+                name: 'Account 1',
+              },
+            },
+          },
+          NftController: {
+            addNft: jest.fn(),
+            updateNftMetadata: jest.fn(),
+            allNfts: {
+              [CURRENT_ACCOUNT]: {
+                '1': [],
+              },
+            },
+            allNftContracts: {
+              [CURRENT_ACCOUNT]: {
+                '1': [],
+              },
+            },
+          },
+          NftDetectionController: {
+            detectNfts: jest.fn(),
+          },
+        },
+      },
+    };
+    const { queryByTestId } = renderWithProvider(<CollectibleContracts />, {
+      state: mockState,
+    });
+
+    const spinner = queryByTestId('spinner');
+    expect(spinner).not.toBeNull();
+  });
+
+  it('Does not show spinner if nfts are not still being fetched', async () => {
+    const CURRENT_ACCOUNT = '0x1a';
+    const mockState = {
+      collectibles: {
+        favorites: {},
+      },
+      engine: {
+        backgroundState: {
+          ...initialBackgroundState,
+          NetworkController: {
+            network: '1',
+            providerConfig: {
+              ticker: 'ETH',
+              type: 'mainnet',
+              chainId: '1',
+            },
+          },
+          AccountTrackerController: {
+            accounts: { [CURRENT_ACCOUNT]: { balance: '0' } },
+          },
+          PreferencesController: {
+            useNftDetection: true,
+            displayNftMedia: true,
+            selectedAddress: CURRENT_ACCOUNT,
+            identities: {
+              [CURRENT_ACCOUNT]: {
+                address: CURRENT_ACCOUNT,
+                name: 'Account 1',
+              },
+            },
+          },
+          NftController: {
+            addNft: jest.fn(),
+            updateNftMetadata: jest.fn(),
+            allNfts: {
+              [CURRENT_ACCOUNT]: {
+                '1': [],
+              },
+            },
+            allNftContracts: {
+              [CURRENT_ACCOUNT]: {
+                '1': [],
+              },
+            },
+          },
+          NftDetectionController: {
+            detectNfts: jest.fn(),
+          },
+        },
+      },
+    };
+
+    const { queryByTestId } = renderWithProvider(<CollectibleContracts />, {
+      state: mockState,
+    });
+
+    const spinner = queryByTestId('spinner');
+    expect(spinner).toBeNull();
+  });
 });