fix: hide staking and add shared wallet options when in shared wallet (#1447)

Author: greatertomi

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx

@@ -40,7 +40,7 @@ export const DropdownMenuOverlay: VFC<Props> = ({
   ...props
 }): React.ReactElement => {
   const [currentSection, setCurrentSection] = useState<Sections>(Sections.Main);
-  const { environmentName, setManageAccountsWallet, walletType } = useWalletStore();
+  const { environmentName, setManageAccountsWallet, walletType, isSharedWallet } = useWalletStore();
 
   const openWalletAccounts = (wallet: AnyBip32Wallet<Wallet.WalletMetadata, Wallet.AccountMetadata>) => {
     setManageAccountsWallet(wallet);
@@ -85,7 +85,7 @@ export const DropdownMenuOverlay: VFC<Props> = ({
             {process.env.USE_MULTI_WALLET === 'true' && (
               <AddNewWalletLink isPopup={isPopup} sendAnalyticsEvent={sendAnalyticsEvent} />
             )}
-            {process.env.USE_SHARED_WALLET === 'true' && <AddSharedWalletLink isPopup={isPopup} />}
+            {process.env.USE_SHARED_WALLET === 'true' && !isSharedWallet && <AddSharedWalletLink isPopup={isPopup} />}
             <AddressBookLink />
             <SettingsLink />
             <Separator />

apps/browser-extension-wallet/src/components/MainMenu/MainFooter.tsx

@@ -21,13 +21,16 @@ import { MenuItemList } from '@src/utils/constants';
 import styles from './MainFooter.module.scss';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
+import { useWalletStore } from '@stores';
 
 const includesCoin = /coin/i;
 
+// eslint-disable-next-line complexity
 export const MainFooter = (): React.ReactElement => {
   const location = useLocation<{ pathname: string }>();
   const history = useHistory();
   const analytics = useAnalyticsContext();
+  const { isSharedWallet } = useWalletStore();
 
   const currentLocation = location?.pathname;
   const isWalletIconActive =
@@ -105,18 +108,20 @@ export const MainFooter = (): React.ReactElement => {
             <TransactionsIcon className={styles.icon} />
           )}
         </button>
-        <button
-          onMouseEnter={() => onMouseEnterItem(MenuItemList.STAKING)}
-          onMouseLeave={onMouseLeaveItem}
-          data-testid="main-footer-staking"
-          onClick={() => handleNavigation(walletRoutePaths.earn)}
-        >
-          {currentLocation === walletRoutePaths.earn ? (
-            <StakingIconActive className={styles.icon} />
-          ) : (
-            <StakingIcon className={styles.icon} />
-          )}
-        </button>
+        {!isSharedWallet && (
+          <button
+            onMouseEnter={() => onMouseEnterItem(MenuItemList.STAKING)}
+            onMouseLeave={onMouseLeaveItem}
+            data-testid="main-footer-staking"
+            onClick={() => handleNavigation(walletRoutePaths.earn)}
+          >
+            {currentLocation === walletRoutePaths.earn ? (
+              <StakingIconActive className={styles.icon} />
+            ) : (
+              <StakingIcon className={styles.icon} />
+            )}
+          </button>
+        )}
       </div>
     </div>
   );

apps/browser-extension-wallet/src/routes/ExtensionRoutes.tsx

@@ -12,23 +12,27 @@ import { AddressBook } from '../features/address-book';
 import { Settings } from '../features/settings';
 import { SignMessageDrawer } from '@views/browser/features/sign-message/SignMessageDrawer';
 import { NftDetail, Nfts } from '@src/features/nfts';
+import { useWalletStore } from '@stores';
 
-export const ExtensionRoutes = (): React.ReactElement => (
-  <MainLayout>
-    <Switch>
-      <Route exact path={walletRoutePaths.assets} component={PopupAssets} />
-      <Route exact path={walletRoutePaths.receive} component={ReceiveInfoContainer} />
-      <Route exact path={walletRoutePaths.activity} component={Activity} />
-      <Route exact path={walletRoutePaths.send} component={Send} />
-      <Route exact path={walletRoutePaths.nftDetail} component={NftDetail} />
-      <Route exact path={walletRoutePaths.earn} component={DelegationContainer} />
-      <Route exact path={walletRoutePaths.addressBook} component={AddressBook} />
-      <Route exact path={walletRoutePaths.settings} component={Settings} />
-      <Route exact path={walletRoutePaths.signMessage} component={SignMessageDrawer} />
-      <Route exact path={walletRoutePaths.nfts} component={Nfts} />
-      <Route path="*" render={() => <Redirect to={walletRoutePaths.assets} />} />
-    </Switch>
-    {/* TODO: LW-7575 Remove old staking in post-MVP of multi delegation staking.*/}
-    <StakingWarningModals popupView />
-  </MainLayout>
-);
+export const ExtensionRoutes = (): React.ReactElement => {
+  const { isSharedWallet } = useWalletStore();
+  return (
+    <MainLayout>
+      <Switch>
+        <Route exact path={walletRoutePaths.assets} component={PopupAssets} />
+        <Route exact path={walletRoutePaths.receive} component={ReceiveInfoContainer} />
+        <Route exact path={walletRoutePaths.activity} component={Activity} />
+        <Route exact path={walletRoutePaths.send} component={Send} />
+        <Route exact path={walletRoutePaths.nftDetail} component={NftDetail} />
+        {!isSharedWallet && <Route exact path={walletRoutePaths.earn} component={DelegationContainer} />}
+        <Route exact path={walletRoutePaths.addressBook} component={AddressBook} />
+        <Route exact path={walletRoutePaths.settings} component={Settings} />
+        <Route exact path={walletRoutePaths.signMessage} component={SignMessageDrawer} />
+        <Route exact path={walletRoutePaths.nfts} component={Nfts} />
+        <Route path="*" render={() => <Redirect to={walletRoutePaths.assets} />} />
+      </Switch>
+      {/* TODO: LW-7575 Remove old staking in post-MVP of multi delegation staking.*/}
+      <StakingWarningModals popupView />
+    </MainLayout>
+  );
+};

apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenu.tsx

@@ -7,6 +7,7 @@ import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import { sideMenuConfig } from './side-menu-config';
 import { SideMenuContent } from './SideMenuContent';
 import { walletRoutePaths as routes } from '@routes/wallet-paths';
+import { useWalletStore } from '@stores';
 
 const isPathAvailable = (path: string) => Object.values(routes).includes(path);
 
@@ -17,6 +18,7 @@ export const SideMenu = (): React.ReactElement => {
     listen
   } = useHistory();
   const analytics = useAnalyticsContext();
+  const { isSharedWallet } = useWalletStore();
 
   const [currentHoveredItem, setCurrentHoveredItem] = useState<MenuItemList | undefined>();
 
@@ -60,9 +62,11 @@ export const SideMenu = (): React.ReactElement => {
   // eslint-disable-next-line unicorn/no-useless-undefined
   const onMouseLeaveItem = () => setCurrentHoveredItem(undefined);
 
+  const menuItems = isSharedWallet ? sideMenuConfig.filter((item) => item.id !== MenuItemList.STAKING) : sideMenuConfig;
+
   return (
     <SideMenuContent
-      menuItems={sideMenuConfig}
+      menuItems={menuItems}
       activeItemId={tab}
       hoveredItemId={currentHoveredItem}
       onClick={handleRedirection}

apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx

@@ -103,7 +103,8 @@ export const BrowserViewRoutes = ({ routesMap = defaultRoutes }: { routesMap?: R
     deletingWallet,
     stayOnAllDonePage,
     cardanoWallet,
-    initialHdDiscoveryCompleted
+    initialHdDiscoveryCompleted,
+    isSharedWallet
   } = useWalletStore();
   const [{ chainName }] = useAppSettingsContext();
   const { areExperimentsLoading } = useExperimentsContext();
@@ -112,6 +113,8 @@ export const BrowserViewRoutes = ({ routesMap = defaultRoutes }: { routesMap?: R
 
   const location = useLocation<{ background?: Location<unknown> }>();
 
+  const currentRoutes = isSharedWallet ? routesMap.filter((route) => route.path !== routes.staking) : routesMap;
+
   useEffect(() => {
     const isCreatingWallet = [routes.newWallet.root, routes.sharedWallet.root].some((path) =>
       location.pathname.startsWith(path)
@@ -188,7 +191,7 @@ export const BrowserViewRoutes = ({ routesMap = defaultRoutes }: { routesMap?: R
     return (
       <>
         <Switch location={page || location}>
-          {routesMap.map((route) => (
+          {currentRoutes.map((route) => (
             <Route key={route.path} path={route.path} component={route.component} />
           ))}
           <Route path="*" render={() => <Redirect to={routes.assets} />} />