Make the last selected wallet get selected by default

packages/yoroi-extension/app/api/localStorage/index.js

@@ -37,6 +37,7 @@ const storageKeys = {
   CATALYST_ROUND_INFO: networkForLocalStorage + '-CATALYST_ROUND_INFO',
   // ========== CONNECTOR   ========== //
   ERGO_CONNECTOR_WHITELIST: 'connector_whitelist',
+  SELECTED_WALLET: 'SELECTED_WALLET',
 };
 
 export type SetCustomUserThemeRequest = {|
@@ -119,6 +120,19 @@ export default class LocalStorageApi {
 
   unsetUserTheme: void => Promise<void> = () => removeLocalItem(storageKeys.THEME);
 
+  // ========== Select Wallet ========== //
+
+  getSelectedWalletId: void => number | null = () => {
+    const id = localStorage.getItem(storageKeys.SELECTED_WALLET);
+    if (!id) return null
+    if (isNaN(Number(id))) throw new Error(`Invalid wallet Id: ${id}`);
+    return Number(id)
+  }
+
+  setSelectedWalletId: number => void = (id) => {
+    localStorage.setItem(storageKeys.SELECTED_WALLET, id.toString())
+  }
+
   // ========== Custom User Theme ========== //
 
   getCustomUserTheme: void => Promise<?string> = () => getLocalItem(storageKeys.CUSTOM_THEME);

packages/yoroi-extension/app/components/common/TextField.js

@@ -76,6 +76,7 @@ function TextField({
         theme.name === 'classic' ? { shrink: true, ...InputLabelProps } : { ...InputLabelProps }
       }
       InputProps={{
+        disableUnderline: revamp,
         ...(theme.name === 'classic' ? { notched: false } : {}),
         endAdornment:
           type === 'password' ? (
@@ -112,7 +113,6 @@ function TextField({
               {Boolean(error) === true ? <ErrorIcon /> : done === true ? <DoneIcon /> : null}
             </InputAdornment>
           ),
-          disableUnderline: revamp,
           placeholder: placeholder != null ? placeholder : '',
       }}
       {...props}

packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js

@@ -73,9 +73,8 @@ const messages = defineMessages({
 
 type Props = {|
   +currentTheme: Theme,
-  +selectTheme: ({| theme: string |}) => PossiblyAsync<void>,
+  +onSubmit: (theme: string) => PossiblyAsync<void>,
   +onExternalLinkClick: MouseEvent => void,
-  +switchToFirstWallet: void => void,
 |};
 
 const NEW_THEME = THEMES.YOROI_REVAMP
@@ -89,7 +88,7 @@ export default class ThemeSettingsBlock extends Component<Props> {
   render(): Node {
     const {
       currentTheme,
-      selectTheme,
+      onSubmit,
       onExternalLinkClick,
     } = this.props;
     const { intl } = this.context;
@@ -121,7 +120,7 @@ export default class ThemeSettingsBlock extends Component<Props> {
             value={currentTheme === NEW_THEME ? NEW_THEME : OLD_THEME}
             onChange={(e) => {
               const theme = e.target.value === NEW_THEME ? NEW_THEME : THEMES.YOROI_MODERN
-              selectTheme({ theme })
+              onSubmit(theme)
             }}
             sx={{
               display: 'flex',
@@ -177,7 +176,7 @@ export default class ThemeSettingsBlock extends Component<Props> {
                   row
                   value={currentTheme}
                   onChange={(e) => {
-                    selectTheme({ theme: e.target.value })
+                    onSubmit(e.target.value)
                   }}
                 >
                   <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', marginRight: '24px' }}>

packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js

@@ -471,7 +471,7 @@ export default class TransactionRevamp extends Component<Props, State> {
           </ExplorableHashContainer>
         </CopyableAddress>
         {this.generateAddressButton(request.address.address)}
-        <Typography variant="body2" color="var(--yoroi-palette-gray-900)">
+        <Typography component='span' variant="body2" color="var(--yoroi-palette-gray-900)">
           {renderAmount(request.address.value.getDefaultEntry())}
         </Typography>
         {request.address.value.nonDefaultEntries().map(entry => (

packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js

@@ -12,6 +12,7 @@ import AboutYoroiSettingsBlock from '../../../components/settings/categories/gen
 import UnitOfAccountSettings from '../../../components/settings/categories/general-setting/UnitOfAccountSettings';
 import LocalizableError from '../../../i18n/LocalizableError';
 import type { LanguageType } from '../../../i18n/translations';
+import { THEMES } from '../../../styles/utils';
 import type { Theme } from '../../../styles/utils';
 import { PublicDeriver } from '../../../api/ada/lib/storage/models/PublicDeriver';
 import { ReactComponent as AdaCurrency }  from '../../../assets/images/currencies/ADA.inline.svg';
@@ -64,22 +65,6 @@ export default class GeneralSettingsPage extends Component<InjectedOrGenerated<G
     intl: intlShape.isRequired,
   };
 
-  switchWallet: (PublicDeriver<>) => void = publicDeriver => {
-    this.generated.actions.router.goToRoute.trigger({
-      route: this.generated.stores.app.currentRoute,
-      publicDeriver,
-    });
-  };
-
-  handleSwitchToFirstWallet: void => void = () => {
-    const selectedWallet = this.generated.stores.wallets.selected;
-    if (selectedWallet == null) {
-      const wallets = this.generated.stores.wallets.publicDerivers;
-      const firstWallet = wallets[0];
-      this.switchWallet(firstWallet);
-    }
-  };
-
   onSelectUnitOfAccount: string => Promise<void> = async (value) => {
     const unitOfAccount = (value === 'ADA')
       ? unitOfAccountDisabledValue
@@ -143,8 +128,21 @@ export default class GeneralSettingsPage extends Component<InjectedOrGenerated<G
         />
         <ThemeSettingsBlock
           currentTheme={currentTheme}
-          switchToFirstWallet={this.handleSwitchToFirstWallet}
-          selectTheme={this.generated.actions.profile.updateTheme.trigger}
+          onSubmit={(theme: string) => {
+            if (theme === THEMES.YOROI_REVAMP) {
+              const { wallets } = this.generated.stores;
+              const publicDeriver = wallets.selected;
+              const publicDerivers = wallets.publicDerivers;
+
+              if (publicDeriver == null && publicDerivers.length !== 0) {
+                const lastSelectedWallet = wallets.getLastSelectedWallet();
+                this.generated.actions.wallets.setActiveWallet.trigger({
+                  wallet: lastSelectedWallet ?? publicDerivers[0],
+                });
+              }
+            }
+            this.generated.actions.profile.updateTheme.trigger({ theme })
+          }}
           onExternalLinkClick={handleExternalLinkClick}
         />
         <AboutYoroiSettingsBlock
@@ -182,6 +180,13 @@ export default class GeneralSettingsPage extends Component<InjectedOrGenerated<G
           |}) => void,
         |},
       |},
+      wallets: {|
+        setActiveWallet: {|
+          trigger: (params: {|
+            wallet: PublicDeriver<>,
+          |}) => void,
+        |},
+      |},
     |},
     stores: {|
       app: {| currentRoute: string |},
@@ -206,6 +211,7 @@ export default class GeneralSettingsPage extends Component<InjectedOrGenerated<G
       wallets: {|
         selected: null | PublicDeriver<>,
         publicDerivers: Array<PublicDeriver<>>,
+        getLastSelectedWallet: void => ?PublicDeriver<>,
       |},
       coinPriceStore: {|
         getCurrentPrice: (
@@ -248,6 +254,7 @@ export default class GeneralSettingsPage extends Component<InjectedOrGenerated<G
         wallets: {
           selected: stores.wallets.selected,
           publicDerivers: stores.wallets.publicDerivers,
+          getLastSelectedWallet: stores.wallets.getLastSelectedWallet,
         },
         coinPriceStore: {
           getCurrentPrice: stores.coinPriceStore.getCurrentPrice,
@@ -258,6 +265,9 @@ export default class GeneralSettingsPage extends Component<InjectedOrGenerated<G
         },
       },
       actions: {
+        wallets: {
+          setActiveWallet: { trigger: actions.wallets.setActiveWallet.trigger },
+        },
         profile: {
           updateLocale: { trigger: actions.profile.updateLocale.trigger },
           updateTheme: { trigger: actions.profile.updateTheme.trigger },

packages/yoroi-extension/app/containers/wallet/MyWalletsPage.js

@@ -42,16 +42,16 @@ import { genLookupOrFail, getTokenName } from '../../stores/stateless/tokenHelpe
 import { getReceiveAddress } from '../../stores/stateless/addressStores';
 import BuySellDialog from '../../components/buySell/BuySellDialog';
 import type { WalletInfo } from '../../components/buySell/BuySellDialog';
-import { addressToDisplayString } from '../../api/ada/lib/storage/bridge/utils'
-import { networks } from '../../api/ada/lib/storage/database/prepackaged/networks'
-import NavBarRevamp from '../../components/topbar/NavBarRevamp'
-import { withLayout } from '../../styles/context/layout'
-import type { LayoutComponentMap } from '../../styles/context/layout'
-import { Box } from '@mui/system'
+import { addressToDisplayString } from '../../api/ada/lib/storage/bridge/utils';
+import { networks } from '../../api/ada/lib/storage/database/prepackaged/networks';
+import NavBarRevamp from '../../components/topbar/NavBarRevamp';
+import { withLayout } from '../../styles/context/layout';
+import type { LayoutComponentMap } from '../../styles/context/layout';
+import { Box } from '@mui/system';
 
 export type GeneratedData = typeof MyWalletsPage.prototype.generated;
 
-type Props = InjectedOrGenerated<GeneratedData>
+type Props = InjectedOrGenerated<GeneratedData>;
 
 type InjectedProps = {| +renderLayoutComponent: LayoutComponentMap => Node |};
 type AllProps = {| ...Props, ...InjectedProps |};
@@ -76,7 +76,14 @@ class MyWalletsPage extends Component<AllProps> {
   }
 
   componentDidMount () {
-    this.generated.actions.wallets.unselectWallet.trigger();
+    const isRevamp = this.generated.stores.profile.isRevampTheme;
+    if (isRevamp) {
+      this.generated.actions.router.goToRoute.trigger({
+        route: ROUTES.WALLETS.ROOT,
+      });
+    } else {
+      this.generated.actions.wallets.unselectWallet.trigger();
+    }
   }
 
   handleWalletNavItemClick: PublicDeriver<> => void = (
@@ -105,13 +112,10 @@ class MyWalletsPage extends Component<AllProps> {
     const { uiDialogs } = stores;
 
     const sidebarContainer = <SidebarContainer {...this.generated.SidebarContainerProps} />
-
     const wallets = this.generated.stores.wallets.publicDerivers;
-
     const navbarTitle = (
       <NavBarTitle title={intl.formatMessage(globalMessages.sidebarWallets)} />
     );
-
     const navbarElementClassic = (
       <NavBar
         title={navbarTitle}
@@ -417,11 +421,16 @@ class MyWalletsPage extends Component<AllProps> {
       |},
       wallets: {|
         unselectWallet: {| trigger: (params: void) => void |},
-        setActiveWallet: {| trigger: (params: {| wallet: PublicDeriver<> |}) => void |},
+        setActiveWallet: {| trigger: (params: {|
+          wallet: PublicDeriver<>,
+        |}) => void |},
       |},
     |},
     stores: {|
-      profile: {| shouldHideBalance: boolean |},
+      profile: {|
+          shouldHideBalance: boolean,
+          isRevampTheme: boolean,
+      |},
       uiDialogs: {|
         isOpen: any => boolean
       |},
@@ -462,6 +471,7 @@ class MyWalletsPage extends Component<AllProps> {
       stores: {
         profile: {
           shouldHideBalance: stores.profile.shouldHideBalance,
+          isRevampTheme: stores.profile.isRevampTheme,
         },
         uiDialogs: {
           isOpen: stores.uiDialogs.isOpen,

packages/yoroi-extension/app/containers/wallet/MyWalletsPage.stories.js

@@ -98,6 +98,7 @@ const genBaseProps: {|
     stores: {
       profile: {
         shouldHideBalance: false,
+        isRevampTheme: false,
       },
       wallets: {
         publicDerivers: request.publicDerivers,