Merge pull request #3087 from Emurgo/Ahmed/wallet-nav

Make the last selected wallet get selected by default
Emurgo · Jan 31, 2023 · 96a59bd · 96a59bd
2 parents 7c499d1 + 8cdefac
commit 96a59bd
Show file tree

Hide file tree

Showing 21 changed files with 327 additions and 148 deletions.
diff --git a/packages/yoroi-extension/app/Routes.js b/packages/yoroi-extension/app/Routes.js
@@ -227,7 +227,6 @@ export const Routes = (
           )
         )}
       />
-
       <Route
         path={ROUTES.NFTS.ROOT}
         component={(props) => (
@@ -237,7 +236,6 @@ export const Routes = (
           )
         )}
       />
-
       <Route
         exact
         path={ROUTES.WALLETS.ADD}
@@ -300,6 +298,11 @@ export const Routes = (
         path={ROUTES.SWITCH}
         component={(props) => <WalletSwitch {...props} stores={stores} actions={actions} />}
       />
+      <Route
+        exact
+        path={ROUTES.REVAMP.CATALYST_VOTING}
+        component={(props) => <VotingPage {...props} stores={stores} actions={actions} />}
+      />
       <Redirect to={ROUTES.MY_WALLETS} />
     </Switch>
   </Suspense>
@@ -352,6 +355,11 @@ const WalletsSubpages = (stores, actions) => (
       path={ROUTES.WALLETS.CATALYST_VOTING}
       component={(props) => <VotingPage {...props} stores={stores} actions={actions} />}
     />
+    <Route
+      exact
+      path={ROUTES.REVAMP.TRANSFER}
+      component={(props) => <Transfer {...props} stores={stores} actions={actions} />}
+    />
   </Switch>
 );
 

diff --git a/packages/yoroi-extension/app/api/localStorage/index.js b/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 = {|
@@ -118,6 +119,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);

diff --git a/packages/yoroi-extension/app/components/common/TextField.js b/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}

diff --git a/.../yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js b/.../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' }}>

diff --git a/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js b/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 => (

diff --git a/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js b/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 },

diff --git a/packages/yoroi-extension/app/containers/transfer/Transfer.js b/packages/yoroi-extension/app/containers/transfer/Transfer.js
@@ -23,12 +23,9 @@ import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver/index';
 import { CoinTypes } from '../../config/numbersConfig';
 import HorizontalLine from '../../components/widgets/HorizontalLine';
-import NavBarContainerRevamp from '../NavBarContainerRevamp';
 import { withLayout } from '../../styles/context/layout';
 import type { LayoutComponentMap } from '../../styles/context/layout';
 import type { GeneratedData as NavBarContainerRevampData } from '../NavBarContainerRevamp';
-import SubMenu from '../../components/topbar/SubMenu';
-import { allSubcategoriesRevamp } from '../../stores/stateless/topbarCategories';
 
 export type GeneratedData = typeof Transfer.prototype.generated;
 
@@ -52,52 +49,30 @@ class Transfer extends Component<AllProps> {
 
   render(): Node {
     const sidebarContainer = <SidebarContainer {...this.generated.SidebarContainerProps} />;
-
-    const menu = (
-      <SubMenu
-        options={allSubcategoriesRevamp.map(category => ({
-          className: category.className,
-          label: this.context.intl.formatMessage(category.label),
-          route: category.route,
-        }))}
-        onItemClick={route => this.generated.actions.router.goToRoute.trigger({ route })}
-        isActiveItem={route => this.generated.stores.app.currentRoute.startsWith(route)}
-      />
-    );
-    const navbarClassic = (
+    const navbar = (
       <NavBarContainer
         {...this.generated.NavBarContainerProps}
         title={
           <NavBarTitle title={this.context.intl.formatMessage(globalMessages.sidebarTransfer)} />
         }
       />
     );
-
-    const navbarRevamp = (
-      <NavBarContainerRevamp
-        {...this.generated.NavBarContainerRevampProps}
-        title={
-          <NavBarTitle title={this.context.intl.formatMessage(globalMessages.walletLabel)} />
-        }
-        menu={menu}
-      />
-    );
-
-    const navbar = this.props.renderLayoutComponent({
-      CLASSIC: navbarClassic,
-      REVAMP: navbarRevamp,
-    });
-
-    return (
+    const content = this.getContent();
+    const transferClassic = (
       <TopBarLayout
         banner={<BannerContainer {...this.generated.BannerContainerProps} />}
         navbar={navbar}
         sidebar={sidebarContainer}
         showInContainer
       >
-        {this.getContent()}
+        {content}
       </TopBarLayout>
     );
+
+    return this.props.renderLayoutComponent({
+      CLASSIC: transferClassic,
+      REVAMP: content,
+    })
   }
 
   getContent: void => Node = () => {

diff --git a/packages/yoroi-extension/app/containers/wallet/MyWalletsPage.js b/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,

diff --git a/packages/yoroi-extension/app/containers/wallet/MyWalletsPage.stories.js b/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,

diff --git a/packages/yoroi-extension/app/containers/wallet/NFTsWrapper.js b/packages/yoroi-extension/app/containers/wallet/NFTsWrapper.js
@@ -79,7 +79,6 @@ export default class NFTsWrapper extends Component<Props> {
     BannerContainerProps: InjectedOrGenerated<BannerContainerData>,
     SidebarContainerProps: InjectedOrGenerated<SidebarContainerData>,
     NavBarContainerRevampProps: InjectedOrGenerated<NavBarContainerRevampData>,
-
     stores: {|
       router: {| location: any |},
       tokenInfoStore: {|