Added submenu to borrow, liquidity, wallet pages

package.json

@@ -182,7 +182,7 @@
     "prop-types": "^15.8.1",
     "storybook": "^8.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "~5.1.6",
+    "typescript": "~5.3.3",
     "unplugin-fonts": "^1.1.1",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^5.0.1",

src/components/Layout/Header/MobileNavBar/MobileNavBarContent.tsx

@@ -10,13 +10,16 @@ import { SNavBarItemHidden } from "./MobileNavBar.styled"
 import { MobileNavBarItem } from "./MobileNavBarItem"
 import { MoreButton } from "./MoreButton"
 import { SNoFunBadge } from "components/Layout/Header/menu/HeaderMenu.styled"
+import { useState } from "react"
 
 export const MobileNavBarContent = () => {
   const { t } = useTranslation()
   const { featureFlags } = useRpcProvider()
   const search = useSearch()
   const isMediumMedia = useMedia(theme.viewport.gte.sm)
 
+  const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null)
+
   const [visibleTabs, hiddenTabs] = MENU_ITEMS.filter(
     (item) => item.enabled && !(item.asyncEnabled && !featureFlags[item.key]),
   ).reduce(
@@ -53,7 +56,18 @@ export const MobileNavBarContent = () => {
         .sort((a, b) => a.mobOrder - b.mobOrder)
         .map((item, index) => {
           if (item.subItems?.length) {
-            return <HeaderSubMenu key={index} item={item} />
+            return (
+              <HeaderSubMenu
+                isOpen={activeSubMenu === item.key}
+                onOpenChange={() =>
+                  setActiveSubMenu((prev) =>
+                    prev === item.key ? null : item.key,
+                  )
+                }
+                key={index}
+                item={item}
+              />
+            )
           }
           if (item.external) {
             return (

src/components/Layout/Header/menu/HeaderMenu.tsx

@@ -22,13 +22,26 @@ export const HeaderMenu = () => {
   const { items, hiddenItems, moreButtonKey, observe } =
     useVisibleHeaderMenuItems()
 
+  const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null)
+
   return (
     <Root delayDuration={0} open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
       <div sx={{ flex: "row" }}>
         <SList ref={observe}>
           {items.map((item, i) => {
             if (item.subItems?.length) {
-              return <HeaderSubMenu key={i} item={item} />
+              return (
+                <HeaderSubMenu
+                  key={i}
+                  item={item}
+                  isOpen={activeSubMenu === item.key}
+                  onOpenChange={() =>
+                    setActiveSubMenu((prev) =>
+                      prev === item.key ? null : item.key,
+                    )
+                  }
+                />
+              )
             }
 
             if (item.external) {

src/components/Layout/Header/menu/HeaderSubMenu.tsx

@@ -8,11 +8,11 @@ import {
 import IconChevron from "assets/icons/ChevronDown.svg?react"
 import IconArrow from "assets/icons/IconArrow.svg?react"
 import { Text } from "components/Typography/Text/Text"
-import React, { useState } from "react"
+import React, { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { useMedia } from "react-use"
 import { theme } from "theme"
-import { TabItemWithSubItems, resetSearchParams } from "utils/navigation"
+import { LINKS, TabItemWithSubItems, resetSearchParams } from "utils/navigation"
 import {
   SArrow,
   SItem,
@@ -21,33 +21,59 @@ import {
   SSubMenuItem,
 } from "./HeaderMenu.styled"
 import { MobileNavBarItem } from "components/Layout/Header/MobileNavBar/MobileNavBarItem"
+import { useAccountAssets } from "api/deposits"
 
-type Props = { item: TabItemWithSubItems }
+type HeaderSubMenuProps = {
+  isOpen: boolean
+  onOpenChange: () => void
+  item: TabItemWithSubItems
+}
 
-export const HeaderSubMenu = ({ item }: Props) => {
+export const HeaderSubMenu: React.FC<HeaderSubMenuProps> = ({
+  item,
+  isOpen,
+  onOpenChange,
+}) => {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
   const navigate = useNavigate()
 
   const isTablet = useMedia(theme.viewport.gte.sm)
 
   const match = useMatchRoute()
 
-  const { key, subItems } = item
+  const balances = useAccountAssets()
+
+  const isPoolBalances = !!balances.data?.isAnyPoolPositions
+
+  const { href, key, subItems } = item
   const isActive = subItems.some(({ href }) => match({ to: href }))
-  const filteredItems = subItems.filter((subItem) => subItem.enabled)
+
+  const filteredItems = useMemo(() => {
+    return subItems.filter((subItem) => {
+      if (subItem.key === "liquidity.myLiquidity") {
+        return isPoolBalances
+      }
+
+      return subItem.enabled
+    })
+  }, [isPoolBalances, subItems])
 
   return (
-    <Root delayDuration={0} open={open} onOpenChange={setOpen}>
+    <Root delayDuration={0} open={isOpen} onOpenChange={onOpenChange}>
       <Trigger
         css={{ all: "unset", height: "100%", cursor: "pointer" }}
         onClick={(e) => {
           e.preventDefault()
           e.stopPropagation()
-          setOpen((prev) => !prev)
+          onOpenChange()
 
           const firstLink = filteredItems?.[0]
-          isTablet && firstLink && navigate({ to: firstLink.href })
+
+          if (href === LINKS.borrow) {
+            navigate({ to: href })
+          } else {
+            navigate({ to: firstLink?.href ?? href })
+          }
         }}
         onPointerDown={(e) => {
           e.preventDefault()
@@ -60,16 +86,16 @@ export const HeaderSubMenu = ({ item }: Props) => {
             <IconChevron />
           </SItem>
         ) : (
-          <MobileNavBarItem item={item} isActive={open || isActive} />
+          <MobileNavBarItem item={item} isActive={isOpen || isActive} />
         )}
       </Trigger>
       <HeaderSubMenuContents
         items={filteredItems.map((subItem) => ({
           ...subItem,
-          title: t(`header.${key}.${subItem.key}.title`),
-          subtitle: t(`header.${key}.${subItem.key}.subtitle`),
+          title: t(`header.${subItem.key}.title`),
+          subtitle: t(`header.${subItem.key}.subtitle`),
         }))}
-        onItemClick={() => setOpen(false)}
+        onItemClick={onOpenChange}
       />
     </Root>
   )
@@ -110,7 +136,14 @@ export const HeaderSubMenuContents: React.FC<HeaderSubMenuContentsProps> = ({
               onClick={onItemClick}
             >
               <SSubMenuItem>
-                <Icon sx={{ color: "brightBlue300", width: 24, height: 24 }} />
+                <Icon
+                  sx={{
+                    flexShrink: 0,
+                    color: "brightBlue300",
+                    width: 24,
+                    height: 24,
+                  }}
+                />
                 <div>
                   <Text fs={15} lh={15}>
                     {title}

src/components/Layout/Page/Page.tsx

@@ -79,6 +79,7 @@ const useSubheaderComponent = () => {
 
   if (
     matchRoute({ to: LINKS.borrow }) ||
+    matchRoute({ to: LINKS.borrowDashboard }) ||
     matchRoute({ to: LINKS.borrowMarkets })
   ) {
     return <LendingNavigation />
@@ -93,7 +94,7 @@ const useSubheaderComponent = () => {
     ) : (
       <BackSubHeader
         label={t("lending.navigation.dashboard.back")}
-        to={LINKS.borrow}
+        to={LINKS.borrowDashboard}
       />
     )
   }

src/i18n/locales/en/translations.json

@@ -121,6 +121,24 @@
   "header.trade.dca.subtitle": "Spread your Omnipool trades over time",
   "header.trade.yieldDca.title": "Yield DCA",
   "header.trade.yieldDca.subtitle": "Diversify your yield from staked DOT",
+  "header.borrow.dashboard.title": "My Dashboard",
+  "header.borrow.dashboard.subtitle": "",
+  "header.borrow.markets.title": "Markets",
+  "header.borrow.markets.subtitle": "",
+  "header.liquidity.myLiquidity.title": "My Liquidity",
+  "header.liquidity.myLiquidity.subtitle": "",
+  "header.liquidity.allPools.title": "All Pools",
+  "header.liquidity.allPools.subtitle": "",
+  "header.liquidity.omnipoolAndStablepool.title": "Omnipool & Stablepool",
+  "header.liquidity.omnipoolAndStablepool.subtitle": "",
+  "header.liquidity.isolated.title": "Isolated pools",
+  "header.liquidity.isolated.subtitle": "",
+  "header.wallet.yourAssets.title": "Your Assets",
+  "header.wallet.yourAssets.subtitle": "",
+  "header.wallet.transactions.title": "Transactions",
+  "header.wallet.transactions.subtitle": "",
+  "header.wallet.vesting.title": "Vesting",
+  "header.wallet.vesting.subtitle": "",
   "header.liquidity": "Liquidity",
   "header.wallet": "Wallet",
   "header.more": "More",
@@ -161,10 +179,6 @@
   "value.token": "{{ value, bignumber(type: 'token') }}",
   "value.tokenWithSymbol": "{{ value, bignumber(type: 'token') }} {{symbol}}",
   "value.tokenWithHub": "{{ value, bignumber(type: 'token') }} {{ symbol }} + {{ hub, bignumber(type: 'token') }} {{hubSymbol}}",
-  "liquidity.navigation.myLiquidity": "My Liquidity",
-  "liquidity.navigation.allPools": "All Pools",
-  "liquidity.navigation.omnipoolAndStablepool": "Omnipool & Stablepool",
-  "liquidity.navigation.isolated": "Isolated pools",
   "liquidity.search.placeholder": "Search by pool name, token name or symbol",
   "liquidity.reserves": "Currency reserves",
   "liquidity.stablepool": "Stablepool",
@@ -481,9 +495,6 @@
   "wallet.header.assets": "Assets",
   "wallet.header.liquidity": "Liquidity",
   "wallet.header.farming": "Farming",
-  "wallet.header.yourAssets": "Your Assets",
-  "wallet.header.transactions": "Transactions",
-  "wallet.header.vesting": "Vesting",
   "wallet.header.switchAccount": "Switch account",
   "wallet.header.copyAddress.hover": "Copy to clipboard",
   "wallet.header.copyAddress.click": "Copied!",
@@ -1044,9 +1055,7 @@
   "lending.apyType.switch.title": "Select APY type to switch",
   "lending.apyType.switch.charts": "See charts",
   "lending.collateralUsage": "Collateral usage",
-  "lending.navigation.dashboard": "My Dashboard",
   "lending.navigation.dashboard.back": "Back to dashboard",
-  "lending.navigation.markets": "Markets",
   "lending.navigation.markets.back": "Back to markets",
   "lending.countdown.ongoing.title": "Borrowing is coming soon",
   "lending.countdown.expired.title": "Borrowing is coming soon",

src/routes.tsx

@@ -118,6 +118,10 @@ const LendingPage = lazy(async () => ({
   default: (await import("sections/lending/LendingPage")).LendingPage,
 }))
 
+const LendingPageIndex = lazy(async () => ({
+  default: (await import("sections/lending/LendingPage")).LendingPageIndex,
+}))
+
 const LendingDashboardPage = lazy(async () => ({
   default: (await import("sections/lending/LendingDashboardPage"))
     .LendingDashboardPage,
@@ -423,6 +427,14 @@ export const routes: Route[] = [
     children: [
       {
         path: "/",
+        element: (
+          <Suspense fallback={<LendingDashboardSkeleton />}>
+            <LendingPageIndex />
+          </Suspense>
+        ),
+      },
+      {
+        path: LINKS.borrowDashboard.split("/").pop(),
         element: (
           <Suspense fallback={<LendingDashboardSkeleton />}>
             <LendingDashboardPage />

src/sections/lending/LendingPage.tsx

@@ -1,8 +1,24 @@
-import { Outlet } from "@tanstack/react-location"
+import { Navigate, Outlet } from "@tanstack/react-location"
 import { useRpcProvider } from "providers/rpcProvider"
+import { useAppDataContext } from "sections/lending/hooks/app-data-provider/useAppDataProvider"
 import { LendingPageProviders } from "sections/lending/providers/LendingPageProviders"
 import { LendingDashboardSkeleton } from "sections/lending/skeleton/LendingDashboardSkeleton"
 import { useMarketChangeSubscription } from "sections/lending/utils/marketsAndNetworksConfig"
+import { LINKS } from "utils/navigation"
+
+export const LendingPageIndex = () => {
+  const { user, loading } = useAppDataContext()
+
+  if (loading) {
+    return <LendingDashboardSkeleton />
+  }
+
+  if (user.netWorthUSD === "0") {
+    return <Navigate to={LINKS.borrowMarkets} />
+  }
+
+  return <Navigate to={LINKS.borrowDashboard} />
+}
 
 export const LendingPage = () => {
   useMarketChangeSubscription()

src/sections/lending/components/primitives/Link.tsx

@@ -35,7 +35,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
 )
 
 export const ROUTES = {
-  dashboard: "/borrow",
+  dashboard: "/borrow/dashboard",
   markets: "/borrow/markets",
   faucet: "/borrow/faucet",
   migrationTool: "/borrow/v3-migration",

src/sections/lending/components/transactions/Warnings/IsolationModeWarning.tsx

@@ -1,5 +1,4 @@
 import { Alert } from "components/Alert"
-import { Link } from "sections/lending/components/primitives/Link"
 import { Text } from "components/Typography/Text/Text"
 
 interface IsolationModeWarningProps {

src/sections/lending/ui/navigation/Navigation.tsx

@@ -14,12 +14,12 @@ export const Navigation = () => {
       <SubNavigationTabLink
         to={ROUTES.dashboard}
         icon={<UserIcon width={14} height={14} />}
-        label={t("lending.navigation.dashboard")}
+        label={t("header.borrow.dashboard.title")}
       />
       <SubNavigationTabLink
         to={ROUTES.markets}
         icon={<AssetsIcon width={15} height={15} />}
-        label={t("lending.navigation.markets")}
+        label={t("header.borrow.markets.title")}
       />
     </SubNavigation>
   )

src/sections/pools/navigation/MyLiquidityTabLink.tsx

@@ -22,7 +22,7 @@ export const MyLiquidity = () => {
         icon={
           <UserIcon style={{ width: 14, height: 14, alignSelf: "center" }} />
         }
-        label={t("liquidity.navigation.myLiquidity")}
+        label={t("header.liquidity.myLiquidity.title")}
       />
       <SSeparator
         orientation="vertical"

src/sections/pools/navigation/Navigation.tsx

@@ -17,10 +17,10 @@ const MyLiquidityTabLink = lazy(async () => ({
 }))
 
 const routeMap = new Map([
-  [LINKS.allPools, t("liquidity.navigation.allPools")],
-  [LINKS.myLiquidity, t("liquidity.navigation.myLiquidity")],
-  [LINKS.omnipool, t("liquidity.navigation.omnipoolAndStablepool")],
-  [LINKS.isolated, t("liquidity.navigation.isolated")],
+  [LINKS.allPools, t("header.liquidity.allPools.title")],
+  [LINKS.myLiquidity, t("header.liquidity.myLiquidity.title")],
+  [LINKS.omnipool, t("header.liquidity.omnipoolAndStablepool.title")],
+  [LINKS.isolated, t("header.liquidity.isolated.title")],
 ])
 
 export const Navigation = () => {
@@ -33,17 +33,17 @@ export const Navigation = () => {
       </Suspense>
       <SubNavigationTabLink
         to={LINKS.allPools}
-        label={t("liquidity.navigation.allPools")}
+        label={t("header.liquidity.allPools.title")}
         icon={<AllPools width={16} height={16} />}
       />
       <SubNavigationTabLink
         to={LINKS.omnipool}
-        label={t("liquidity.navigation.omnipoolAndStablepool")}
+        label={t("header.liquidity.omnipoolAndStablepool.title")}
         icon={<OmniStablepools width={18} height={18} />}
       />
       <SubNavigationTabLink
         to={LINKS.isolated}
-        label={t("liquidity.navigation.isolated")}
+        label={t("header.liquidity.isolated.title")}
         icon={<IsolatedPools width={15} height={15} />}
       />
     </SubNavigation>