feat: adjust dapp explorer layout and menu item (#1632)

apps/browser-extension-wallet/package.json

@@ -90,7 +90,6 @@
     "qrcode": "^1.5.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-hook-form": "7.47.0",
     "react-i18next": "^12.3.1",
     "react-infinite-scroll-hook": "^4.1.1",
     "react-lottie": "^1.2.3",

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import { walletRoutePaths } from '../../routes';
 
 import NftIconDefault from '../../assets/icons/nft-icon.component.svg';
@@ -14,14 +14,20 @@ import StakingIconActive from '../../assets/icons/active-database-icon.component
 import StakingIconDefault from '../../assets/icons/database-icon.component.svg';
 import StakingIconHover from '../../assets/icons/hover-database-icon.component.svg';
 
+import DappExplorerIconDefault from '../../assets/icons/tiles-outlined.component.svg';
+import DappExplorerIconHover from '../../assets/icons/tiles-outlined-gradient.component.svg';
+
 import TransactionsIconDefault from '../../assets/icons/transactions-icon.component.svg';
 import TransactionsIconActive from '../../assets/icons/active-transactions-icon.component.svg';
 import TransactionsIconHover from '../../assets/icons/hover-transactions-icon.component.svg';
 import { MenuItemList } from '@src/utils/constants';
 import styles from './MainFooter.module.scss';
-import { useAnalyticsContext } from '@providers';
+import { useAnalyticsContext, useBackgroundServiceAPIContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import { useWalletStore } from '@stores';
+import { ExperimentName } from '@providers/ExperimentsProvider/types';
+import { usePostHogClientContext } from '@providers/PostHogClientProvider';
+import { BrowserViewSections } from '@lib/scripts/types';
 
 const includesCoin = /coin/i;
 
@@ -31,7 +37,10 @@ export const MainFooter = (): React.ReactElement => {
   const history = useHistory();
   const analytics = useAnalyticsContext();
   const { isSharedWallet } = useWalletStore();
+  const posthog = usePostHogClientContext();
+  const backgroundServices = useBackgroundServiceAPIContext();
 
+  const isDappExplorerEnabled = posthog.isFeatureEnabled(ExperimentName.DAPP_EXPLORER);
   const currentLocation = location?.pathname;
   const isWalletIconActive =
     currentLocation === walletRoutePaths.assets || includesCoin.test(currentLocation) || currentLocation === '/';
@@ -49,6 +58,7 @@ export const MainFooter = (): React.ReactElement => {
   const TransactionsIcon =
     currentHoveredItem === MenuItemList.TRANSACTIONS ? TransactionsIconHover : TransactionsIconDefault;
   const StakingIcon = currentHoveredItem === MenuItemList.STAKING ? StakingIconHover : StakingIconDefault;
+  const DappExplorerIcon = currentHoveredItem === MenuItemList.DAPPS ? DappExplorerIconHover : DappExplorerIconDefault;
 
   const sendAnalytics = (postHogAction?: PostHogAction) => {
     if (postHogAction) {
@@ -69,7 +79,16 @@ export const MainFooter = (): React.ReactElement => {
         break;
       case walletRoutePaths.nfts:
         sendAnalytics(PostHogAction.NFTsClick);
+        break;
+      case walletRoutePaths.dapps:
+      // TODO: LW-11885 send proper dapp explorer event
     }
+
+    if (path === walletRoutePaths.dapps) {
+      backgroundServices.handleOpenBrowser({ section: BrowserViewSections.DAPP_EXPLORER });
+      return;
+    }
+
     history.push(path);
   };
 
@@ -122,6 +141,16 @@ export const MainFooter = (): React.ReactElement => {
             )}
           </button>
         )}
+        {isDappExplorerEnabled && (
+          <button
+            onMouseEnter={() => onMouseEnterItem(MenuItemList.DAPPS)}
+            onMouseLeave={onMouseLeaveItem}
+            data-testid="main-footer-dapp-explorer"
+            onClick={() => handleNavigation(walletRoutePaths.dapps)}
+          >
+            <DappExplorerIcon className={styles.icon} />
+          </button>
+        )}
       </div>
     </div>
   );

apps/browser-extension-wallet/src/lib/scripts/background/services/utilityServices.ts

@@ -93,6 +93,9 @@ const handleOpenBrowser = async (data: OpenBrowserData) => {
     case BrowserViewSections.NAMI_HW_FLOW:
       path = walletRoutePaths.namiMigration.hwFlow;
       break;
+    case BrowserViewSections.DAPP_EXPLORER:
+      path = walletRoutePaths.dapps;
+      break;
   }
   const params = data.urlSearchParams ? `?${data.urlSearchParams}` : '';
   await tabs.create({ url: `app.html#${path}${params}` }).catch((error) => console.error(error));

apps/browser-extension-wallet/src/lib/scripts/types/background-service.ts

@@ -49,7 +49,8 @@ export enum BrowserViewSections {
   NEW_WALLET = 'new_wallet',
   ADD_SHARED_WALLET = 'add_shared_wallet',
   NAMI_MIGRATION = 'nami_migration',
-  NAMI_HW_FLOW = 'nami_hw_flow'
+  NAMI_HW_FLOW = 'nami_hw_flow',
+  DAPP_EXPLORER = 'dapp-explorer'
 }
 
 export interface OpenBrowserData {

apps/browser-extension-wallet/src/routes/wallet-paths.ts

@@ -13,7 +13,7 @@ export const walletRoutePaths = {
   send: '/send/:id',
   settings: '/settings',
   staking: '/staking',
-  dapps: '/dapps',
+  dapps: '/dapp-explorer',
   voting: '/voting',
   signMessage: '/sign-message',
   setup: {

apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss

@@ -71,14 +71,22 @@ $main-gap: 49px;
   grid-template-rows: $row-height 1fr;
   height: 100%;
 
-  &.flexible {
-    margin: 0;
+  @media (max-width: $breakpoint-minimum) {
+    justify-content: start;
+    margin-right: 0;
+    @include scroll-bar-style;
   }
 
-  &.fullWidth {
-    grid-template-areas: 'nav main';
-    @include full_content_grid($col-width-small, $grid-gap-x-small);
+  @media (min-width: $breakpoint-xsmall) {
+    grid-template-columns: $navigation-col-width 1fr;
+    margin: 0 size_unit(4) 0 size_unit(5);
+  }
 
+  @media (min-width: $breakpoint-large) {
+    justify-content: center;
+  }
+
+  &.noAside {
     @media (min-width: $breakpoint-small) {
       @include full_content_grid($col-width-small, $grid-gap-small);
     }
@@ -92,30 +100,20 @@ $main-gap: 49px;
     }
   }
 
-  @media (max-width: $breakpoint-minimum) {
-    justify-content: start;
-    margin-right: 0;
-    @include scroll-bar-style;
-  }
-
-  @media (min-width: $breakpoint-xsmall) {
-    grid-template-columns: $navigation-col-width 1fr;
-    margin: 0 size_unit(4) 0 size_unit(5);
-  }
-
-  @media (min-width: $breakpoint-small) {
-    grid-template-areas: 'nav main side-panel';
-    grid-template-rows: repeat(3, 1fr);
-    @include content_grid($col-width-small, $grid-gap-small);
-  }
+  &.withAside {
+    @media (min-width: $breakpoint-small) {
+      grid-template-areas: 'nav main side-panel';
+      grid-template-rows: repeat(3, 1fr);
+      @include content_grid($col-width-small, $grid-gap-small);
+    }
 
-  @media (min-width: $breakpoint-medium) {
-    @include content_grid($col-width-medium, $grid-gap-medium);
-  }
+    @media (min-width: $breakpoint-medium) {
+      @include content_grid($col-width-medium, $grid-gap-medium);
+    }
 
-  @media (min-width: $breakpoint-large) {
-    justify-content: center;
-    @include content_grid($col-width-large, $grid-gap-large);
+    @media (min-width: $breakpoint-large) {
+      @include content_grid($col-width-large, $grid-gap-large);
+    }
   }
 }
 

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

@@ -19,15 +19,14 @@ import { useOpenReceiveDrawer } from '../TransactionCTAsBox/useOpenReceiveDrawer
 
 interface LayoutProps {
   children: React.ReactNode;
-  isFullWidth?: boolean;
+  noAside?: boolean;
   drawerUIDefaultContent?: DrawerContent;
 }
 
 const toastThrottle = 500;
-const isFlexible = process.env.USE_DESKTOP_LAYOUT === 'true';
 const PIN_EXTENSION_TIMEOUT = 5000;
 
-export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: LayoutProps): React.ReactElement => {
+export const Layout = ({ children, drawerUIDefaultContent, noAside = false }: LayoutProps): React.ReactElement => {
   const { t } = useTranslation();
   const { theme, setTheme } = useTheme();
   const backgroundServices = useBackgroundServiceAPIContext();
@@ -93,7 +92,7 @@ export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: Layout
   return (
     <div
       id="main"
-      className={classnames(styles.layoutGridContainer, isFullWidth && styles.fullWidth, isFlexible && styles.flexible)}
+      className={classnames(styles.layoutGridContainer, !noAside && styles.withAside, noAside && styles.noAside)}
     >
       <LeftSidePanel theme={theme.name} />
       {showPinExtension && (

apps/browser-extension-wallet/src/views/browser-view/components/Layout/SectionLayout.modules.scss

@@ -28,8 +28,10 @@ $aside-width-large: 420px;
     padding-right: 24px;
   }
 
-  @media (min-width: $breakpoint-small) {
-    margin-top: 120px;
+  &.withAside {
+    @media (min-width: $breakpoint-small) {
+      margin-top: 120px;
+    }
   }
 }
 

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

@@ -4,6 +4,7 @@ import { SidePanel } from './SidePanel';
 import { useExternalLinkOpener } from '@providers';
 import { Credit } from '@components/Credit';
 import { COINGECKO_URL } from '@utils/constants';
+import classNames from 'classnames';
 
 export const CONTENT_ID = 'content';
 
@@ -25,7 +26,7 @@ export const SectionLayout = ({
 
   return (
     <>
-      <main id={CONTENT_ID} className={styles.content}>
+      <main id={CONTENT_ID} className={classNames(styles.content, !!sidePanelContent && styles.withAside)}>
         <div>{children}</div>
         {hasCredit && <Credit handleOnClick={handleOnClick} />}
       </main>

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

@@ -15,7 +15,7 @@ export const CONTENT_ID = 'content';
 const intersectionObserverInit: IntersectionObserverInit = { threshold: 1 };
 
 interface SectionLayoutProps {
-  sidePanelContent: React.ReactNode;
+  sidePanelContent?: React.ReactNode;
   isSidePanelFixed?: boolean;
 }
 
@@ -66,7 +66,9 @@ export const SidePanel = ({ sidePanelContent, isSidePanelFixed = true }: Section
     >
       <TransactionCTAsBox />
       <DropdownMenu />
-      {isScreenTooSmallForSidePanel && <SidePanelButton active={isPanelVisible} onClick={toggleSidePanelVisibility} />}
+      {!!sidePanelContent && isScreenTooSmallForSidePanel && (
+        <SidePanelButton active={isPanelVisible} onClick={toggleSidePanelVisibility} />
+      )}
     </div>
   );
 
@@ -92,12 +94,14 @@ export const SidePanel = ({ sidePanelContent, isSidePanelFixed = true }: Section
           {process.env.USE_MULTI_WALLET === 'true' ? (
             <>
               <div className={styles.topNavigationBox}>{topNavigation}</div>
-              {!isScreenTooSmallForSidePanel && <div className={styles.sidePanelContentBox}>{sidePanelContent}</div>}
+              {!!sidePanelContent && !isScreenTooSmallForSidePanel && (
+                <div className={styles.sidePanelContentBox}>{sidePanelContent}</div>
+              )}
             </>
           ) : (
             <>
               {topNavigation}
-              {!isScreenTooSmallForSidePanel && sidePanelContent}
+              {!!sidePanelContent && !isScreenTooSmallForSidePanel && sidePanelContent}
             </>
           )}
         </div>

apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/side-menu-config.ts

@@ -17,6 +17,10 @@ import TransactionsIconActive from '@assets/icons/active-transactions-icon.compo
 import StakingIconDefault from '@assets/icons/database-icon.component.svg';
 import StakingIconHover from '@assets/icons/hover-database-icon.component.svg';
 import StakingIconActive from '@assets/icons/active-database-icon.component.svg';
+
+import DappExplorerIconDefault from '@assets/icons/tiles-outlined.component.svg';
+import DappExplorerIconHover from '@assets/icons/tiles-outlined-gradient.component.svg';
+import DappExplorerIconActive from '@assets/icons/tiles-solid-gradient.component.svg';
 import { SideMenuItemConfig } from '@types';
 
 export const sideMenuConfig: SideMenuItemConfig[] = [
@@ -39,15 +43,6 @@ export const sideMenuConfig: SideMenuItemConfig[] = [
     hoverIcon: NftIconHover,
     activeIcon: NftIconActive
   },
-  {
-    id: MenuItemList.DAPPS,
-    label: 'browserView.sideMenu.links.dappStore',
-    testId: 'item-dapps',
-    path: routes.dapps,
-    regularIcon: NftIconDefault,
-    hoverIcon: NftIconHover,
-    activeIcon: NftIconActive
-  },
   {
     id: MenuItemList.TRANSACTIONS,
     label: 'browserView.sideMenu.links.activity',
@@ -65,5 +60,14 @@ export const sideMenuConfig: SideMenuItemConfig[] = [
     regularIcon: StakingIconDefault,
     hoverIcon: StakingIconHover,
     activeIcon: StakingIconActive
+  },
+  {
+    id: MenuItemList.DAPPS,
+    label: 'browserView.sideMenu.links.dappExplorer',
+    testId: 'item-dapps',
+    path: routes.dapps,
+    regularIcon: DappExplorerIconDefault,
+    hoverIcon: DappExplorerIconHover,
+    activeIcon: DappExplorerIconActive
   }
 ];

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/DAppExplorer.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 export const DAppExplorer: React.FC = () => (
   <>
-    <Layout>
+    <Layout noAside>
       <SectionLayout>
         <DappLayout>
           <SimpleView />