Add wallet group naming (#5696)

* add wallet group naming

* rm logs

* code review changes

* rm async

src/analytics/event.ts

@@ -124,6 +124,8 @@ export const event = {
   txRequestShownSheet: 'request.sheet.show',
   txRequestReject: 'request.rejected',
   txRequestApprove: 'request.approved',
+
+  addNewWalletGroupName: 'add_new_wallet_group.name',
 } as const;
 
 /**
@@ -468,4 +470,8 @@ export type EventProperties = {
     requestType: 'transaction' | 'signature';
     isHardwareWallet: boolean;
   };
+
+  [event.addNewWalletGroupName]: {
+    name: string;
+  };
 };

src/components/expanded-state/NewWalletGroupState.tsx

@@ -0,0 +1,39 @@
+import * as lang from '@/languages';
+import React, { useCallback, useState } from 'react';
+import ProfileModal from './profile/ProfileModal';
+import { analyticsV2 as analytics } from '@/analytics';
+import { useNavigation } from '@/navigation';
+
+type NewWalletGroupStateProps = {
+  onCloseModal: ({ name }: { name: string }) => void;
+  numWalletGroups: number;
+};
+
+export default function NewWalletGroupState({ onCloseModal, numWalletGroups }: NewWalletGroupStateProps) {
+  const { goBack } = useNavigation();
+
+  const [value, setValue] = useState('');
+
+  const handleSubmit = useCallback(() => {
+    analytics.track(analytics.event.addNewWalletGroupName, {
+      name: value.trim(),
+    });
+    onCloseModal({
+      name: value,
+    });
+    goBack();
+  }, [goBack, onCloseModal, value]);
+
+  return (
+    <ProfileModal
+      handleCancel={goBack}
+      handleSubmit={handleSubmit}
+      inputValue={value}
+      onChange={setValue}
+      placeholder={lang.t(lang.l.wallet.action.create_wallet_group_placeholder, {
+        numWalletGroups,
+      })}
+      submitButtonText={lang.t(lang.l.wallet.action.create_wallet_group)}
+    />
+  );
+}

src/components/expanded-state/index.js

@@ -5,3 +5,4 @@ export { default as SwapDetailsState } from './SwapDetailsState';
 export { default as SwapSettingsState } from './swap-settings/SwapSettingsState';
 export { default as UniqueTokenExpandedState } from './UniqueTokenExpandedState';
 export { default as WalletProfileState } from './WalletProfileState';
+export { default as NewWalletGroupState } from './NewWalletGroupState';

src/components/expanded-state/profile/ProfileModal.tsx

@@ -57,12 +57,12 @@ const Container = styled(ProfileModalContainer).attrs({
 });
 
 type ProfileModalProps = {
-  address: string;
-  imageAvatar: string;
-  emojiAvatar: string;
-  accentColor: string;
-  toggleSubmitButtonIcon: boolean;
-  toggleAvatar: boolean;
+  address?: string;
+  imageAvatar?: string;
+  emojiAvatar?: string;
+  accentColor?: string;
+  toggleSubmitButtonIcon?: boolean;
+  toggleAvatar?: boolean;
   handleSubmit: () => void;
   onChange: (value: string) => void;
   inputValue: string;

src/languages/en_US.json

@@ -2268,6 +2268,8 @@
         "delete_confirm": "Are you sure you want to delete this wallet?",
         "edit": "Edit Wallet",
         "hide": "Hide",
+        "create_wallet_group": "Create Group",
+        "create_wallet_group_placeholder": "Wallet Group %{numWalletGroups}",
         "import_wallet": "Add Wallet",
         "input": "Transaction Input",
         "notifications": {

src/model/wallet.ts

@@ -796,10 +796,8 @@ export const createWallet = async ({
 
     // if imported and we have only one account, we name the wallet too.
     let walletName = DEFAULT_WALLET_NAME;
-    if (isImported && name) {
-      if (addresses.length > 1) {
-        walletName = name;
-      }
+    if (name) {
+      walletName = name;
     }
 
     let primary = false;

src/resources/favorites.ts

@@ -138,8 +138,6 @@ export async function toggleFavorite(address: string) {
   }
   const metadata = await fetchMetadata(updatedFavorites);
 
-  console.log(metadata);
-
   queryClient.setQueryData(favoritesQueryKey, metadata);
 }
 

src/screens/ModalScreen.js

@@ -2,7 +2,7 @@ import { useRoute } from '@react-navigation/native';
 import React, { createElement } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import TouchableBackdrop from '../components/TouchableBackdrop';
-import { ContactProfileState, SupportedCountriesExpandedState, WalletProfileState } from '../components/expanded-state';
+import { ContactProfileState, WalletProfileState, NewWalletGroupState } from '../components/expanded-state';
 import { Centered } from '../components/layout';
 import { useNavigation } from '@/navigation';
 import styled from '@/styled-thing';
@@ -11,6 +11,7 @@ import { padding, position } from '@/styles';
 const ModalTypes = {
   contact_profile: ContactProfileState,
   wallet_profile: WalletProfileState,
+  new_wallet_group: NewWalletGroupState,
 };
 
 const Container = styled(Centered).attrs({ direction: 'column' })(({ insets }) => ({

src/screens/SettingsSheet/components/Backups/WalletsAndBackup.tsx

@@ -39,6 +39,7 @@ import { useCloudBackups } from '@/components/backup/CloudBackupProvider';
 import { GoogleDriveUserData, getGoogleAccountUserData, isCloudBackupAvailable, login } from '@/handlers/cloudBackup';
 import { WrappedAlert as Alert } from '@/helpers/alert';
 import { Linking } from 'react-native';
+import { noop } from 'lodash';
 
 type WalletPillProps = {
   account: RainbowAccount;
@@ -214,25 +215,32 @@ export const WalletsAndBackup = () => {
   }, [backups, navigate]);
 
   const onCreateNewSecretPhrase = useCallback(async () => {
-    try {
-      await createWallet({
-        color: null,
-        name: '',
-        clearCallbackOnStartCreation: true,
-      });
-
-      await dispatch(walletsLoadState(profilesEnabled));
-
-      // @ts-expect-error - no params
-      await initializeWallet();
-    } catch (err) {
-      logger.error(new RainbowError('Failed to create new secret phrase'), {
-        extra: {
-          error: err,
-        },
-      });
-    }
-  }, [dispatch, initializeWallet, profilesEnabled]);
+    navigate(Routes.MODAL_SCREEN, {
+      type: 'new_wallet_group',
+      numWalletGroups: walletTypeCount.phrase + 1,
+      onCloseModal: async ({ name }: { name: string }) => {
+        const nameValue = name.trim() !== '' ? name.trim() : '';
+        try {
+          await createWallet({
+            color: null,
+            name: nameValue,
+            clearCallbackOnStartCreation: true,
+          });
+
+          await dispatch(walletsLoadState(profilesEnabled));
+
+          // @ts-expect-error - no params
+          await initializeWallet();
+        } catch (err) {
+          logger.error(new RainbowError('Failed to create new secret phrase'), {
+            extra: {
+              error: err,
+            },
+          });
+        }
+      },
+    });
+  }, [dispatch, initializeWallet, navigate, profilesEnabled, walletTypeCount.phrase]);
 
   const onPressLearnMoreAboutCloudBackups = useCallback(() => {
     navigate(Routes.LEARN_WEB_VIEW_SCREEN, {

src/screens/SettingsSheet/useVisibleWallets.ts

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import * as i18n from '@/languages';
 
 import WalletTypes, { EthereumWalletType } from '@/helpers/walletTypes';
-import { RainbowAccount, RainbowWallet } from '@/model/wallet';
+import { DEFAULT_WALLET_NAME, RainbowAccount, RainbowWallet } from '@/model/wallet';
 import walletBackupTypes from '@/helpers/walletBackupTypes';
 
 type WalletByKey = {
@@ -48,6 +48,8 @@ export const getTitleForWalletType = (type: EthereumWalletType, walletTypeCount:
   }
 };
 
+const isWalletGroupNamed = (wallet: RainbowWallet) => wallet.name && wallet.name.trim() !== '' && wallet.name !== DEFAULT_WALLET_NAME;
+
 export const useVisibleWallets = ({ wallets, walletTypeCount }: UseVisibleWalletProps): UseVisibleWalletReturnType => {
   const [lastBackupDate, setLastBackupDate] = useState<number | undefined>(undefined);
 
@@ -83,7 +85,7 @@ export const useVisibleWallets = ({ wallets, walletTypeCount }: UseVisibleWallet
 
         return {
           ...wallet,
-          name: getTitleForWalletType(wallet.type, walletTypeCount),
+          name: isWalletGroupNamed(wallet) ? wallet.name : getTitleForWalletType(wallet.type, walletTypeCount),
           isBackedUp: wallet.backedUp,
           accounts: visibleAccounts,
           key,