Add dashboard menu (#2604)

* Add dashboard menu

* Readd components

centrifuge-app/src/components/DebugFlags/config.ts

@@ -49,6 +49,7 @@ export type Key =
   | 'showTokenYields'
   | 'showOracleTx'
   | 'showGmp'
+  | 'showDashboard'
 
 export const flagsConfig = {
   address: {
@@ -134,6 +135,11 @@ export const flagsConfig = {
     default: false,
     type: 'checkbox',
   },
+  showDashboard: {
+    default: true,
+    type: 'checkbox',
+    alwaysShow: true,
+  },
 } satisfies Record<Key, DebugFlagConfig>
 
 export const genericFlagsConfig = flagsConfig as Record<string, DebugFlagConfig>

centrifuge-app/src/components/Menu/DashboardMenu.tsx

@@ -0,0 +1,42 @@
+import { Box, IconDashboard, Stack } from '@centrifuge/fabric'
+import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
+import { MenuLink } from './MenuLink'
+import { PageLink } from './PageLink'
+
+const pages = [
+  { label: 'Account', href: 'account', match: 'dashboard/account' },
+  { label: 'Assets', href: 'assets', match: 'dashboard/assets' },
+  { label: 'Investors', href: 'investors', match: 'dashboard/investors' },
+]
+
+export function DashboardMenu() {
+  const isLarge = useIsAboveBreakpoint('L')
+  return (
+    <>
+      {isLarge ? (
+        <PageLink to="/dashboard" stacked={!isLarge} exact>
+          <IconDashboard size={['iconMedium', 'iconMedium', 'iconSmall']} />
+          Dashboard
+        </PageLink>
+      ) : (
+        pages.map(({ href, label }) => (
+          <Box width="100%">
+            <PageLink to={`/dashboard/${href}`} stacked={!isLarge}>
+              <IconDashboard size={['iconMedium', 'iconMedium', 'iconSmall']} />
+              {label}
+            </PageLink>
+          </Box>
+        ))
+      )}
+      {isLarge && (
+        <Box pl={4}>
+          <Stack as="ul" gap={1}>
+            {pages.map(({ href, label, match }) => (
+              <MenuLink path={href} name={label} matchingPath={match} />
+            ))}
+          </Stack>
+        </Box>
+      )}
+    </>
+  )
+}

centrifuge-app/src/components/Menu/MenuLink.tsx

@@ -0,0 +1,41 @@
+import { Text } from '@centrifuge/fabric'
+import { useLocation } from 'react-router'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
+import { prefetchRoute } from '../Root'
+import { baseButton } from './styles'
+
+const Root = styled(Text)`
+  ${baseButton}
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: ${({ theme }) => theme.radii.input}px;
+  color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)};
+  &:hover {
+    color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textGold)};
+  }
+`
+
+type MenuLinkProps = {
+  path?: string
+  name?: string
+  matchingPath: string
+}
+
+export function MenuLink({ path = 'dashboard', name, matchingPath }: MenuLinkProps) {
+  const location = useLocation()
+  const match = location.pathname.includes(matchingPath)
+  return (
+    <Root
+      forwardedAs={Link}
+      to={`/dashboard/${path}`}
+      variant="body2"
+      isActive={match}
+      onMouseOver={() => prefetchRoute('/dashboard')}
+    >
+      {name}
+    </Root>
+  )
+}

centrifuge-app/src/components/Menu/PageLink.tsx

@@ -23,13 +23,19 @@ const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
 
 type PageLinkProps = LinkProps & {
   stacked?: boolean
+  exact?: boolean
 }
 
-export function PageLink({ stacked = false, to, children }: PageLinkProps) {
+export function PageLink({ stacked = false, to, children, exact = false }: PageLinkProps) {
   const location = useLocation()
   const isMedium = useIsAboveBreakpoint('M')
 
-  const isActive = location.pathname.startsWith(to as string)
+  let isActive = false
+  if (exact) {
+    isActive = location.pathname === to
+  } else {
+    isActive = location.pathname.startsWith(to as string)
+  }
 
   return (
     <Root

centrifuge-app/src/components/Menu/index.tsx

@@ -11,14 +11,15 @@ import {
   Shelf,
   Stack,
 } from '@centrifuge/fabric'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { config } from '../../config'
 import { useAddress } from '../../utils/useAddress'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { usePoolsThatAnyConnectedAddressHasPermissionsFor } from '../../utils/usePermissions'
 import { useTransactionsByAddress } from '../../utils/usePools'
 import { useDebugFlags } from '../DebugFlags'
 import { RouterLinkButton } from '../RouterLinkButton'
+import { DashboardMenu } from './DashboardMenu'
 import { GovernanceMenu } from './GovernanceMenu'
 import { IssuerMenu } from './IssuerMenu'
 import { NavManagementMenu } from './NavManagementMenu'
@@ -51,7 +52,8 @@ export function Menu() {
   const pools = usePoolsThatAnyConnectedAddressHasPermissionsFor() || []
   const isLarge = useIsAboveBreakpoint('L')
   const address = useAddress('substrate')
-  const { showSwaps } = useDebugFlags()
+  const theme = useTheme()
+  const { showSwaps, showDashboard } = useDebugFlags()
   const { data: transactions } = useTransactionsByAddress(address)
 
   return (
@@ -64,6 +66,8 @@ export function Menu() {
       justifyContent={['space-between', 'space-between']}
       backgroundColor="backgroundInverted"
     >
+      {showDashboard && pools.length > 0 && <DashboardMenu />}
+
       <Box width="100%">
         <PageLink to="/pools" stacked={!isLarge}>
           <IconInvestments size={['iconMedium', 'iconMedium', 'iconSmall']} />
@@ -98,7 +102,7 @@ export function Menu() {
         <GovernanceMenu />
       </Box>
 
-      {(pools.length > 0 || config.poolCreationType === 'immediate') && (
+      {(pools.length > 0 || config.poolCreationType === 'immediate') && !showDashboard && (
         <IssuerMenu defaultOpen={isLarge} stacked={!isLarge}>
           {isLarge ? (
             <Stack as="ul" gap={1}>
@@ -133,21 +137,36 @@ export function Menu() {
         </IssuerMenu>
       )}
 
-      {showSwaps && (
-        <PageLink to="/swaps" stacked={!isLarge}>
-          <IconSwitch size={['iconMedium', 'iconMedium', 'iconSmall']} />
-          Swaps
-        </PageLink>
-      )}
-
-      <NavManagementMenu stacked={!isLarge} />
+      {!showDashboard && <NavManagementMenu stacked={!isLarge} />}
 
       {config.network !== 'centrifuge' && (
         <PageLink to="/nfts" stacked={!isLarge}>
           <IconNft size={['iconMedium', 'iconMedium', 'iconSmall']} />
           NFTs
         </PageLink>
       )}
+
+      {showDashboard && pools.length > 0 && (
+        <Box mt={1}>
+          <CreatePool />
+        </Box>
+      )}
+
+      {showSwaps && (
+        <Box>
+          <Box
+            width="100%"
+            borderTopColor={theme.colors.borderSecondary}
+            borderTopWidth={1}
+            borderTopStyle="solid"
+            mb={2}
+          />
+          <PageLink to="/swaps" stacked={!isLarge}>
+            <IconSwitch size={['iconMedium', 'iconMedium', 'iconSmall']} />
+            Swaps
+          </PageLink>
+        </Box>
+      )}
     </Shelf>
   )
 }

centrifuge-app/src/components/Root.tsx

@@ -80,6 +80,7 @@ const NavManagementPage = React.lazy(() => import('../pages/NavManagement'))
 const PoolTransactionsPage = React.lazy(() => import('../pages/PoolTransactions'))
 const ConvertAddressPage = React.lazy(() => import('../pages/ConvertAddress'))
 const PoolsPage = React.lazy(() => import('../pages/Pools'))
+const DashboardPage = React.lazy(() => import('../pages/Dashboard'))
 
 const router = createHashRouter([
   {
@@ -90,6 +91,11 @@ const router = createHashRouter([
         path: '/',
         element: <Navigate to="/pools" replace />,
       },
+      {
+        path: '/dashboard/*',
+        element: <DashboardPage />,
+        handle: { component: DashboardPage },
+      },
       {
         path: '/pools',
         element: <PoolsPage />,

centrifuge-app/src/pages/Dashboard/AccountsPage.tsx

@@ -0,0 +1,3 @@
+export default function AccountsPage() {
+  return <></>
+}

centrifuge-app/src/pages/Dashboard/AssetsPage.tsx

@@ -0,0 +1,3 @@
+export default function AssetsPage() {
+  return <></>
+}

centrifuge-app/src/pages/Dashboard/Dashboard.tsx

@@ -0,0 +1,3 @@
+export default function Dashboard() {
+  return <></>
+}

centrifuge-app/src/pages/Dashboard/InvestorsPage.tsx

@@ -0,0 +1,3 @@
+export default function InvestorsPage() {
+  return <></>
+}

centrifuge-app/src/pages/Dashboard/index.tsx

@@ -0,0 +1,16 @@
+import { Route, Routes } from 'react-router'
+import AccountsPage from './AccountsPage'
+import AssetsPage from './AssetsPage'
+import Dashboard from './Dashboard'
+import InvestorsPage from './InvestorsPage'
+
+export default function DashboardPage() {
+  return (
+    <Routes>
+      <Route path="/" element={<Dashboard />} />
+      <Route path="/accounts" element={<AccountsPage />} />
+      <Route path="/assets" element={<AssetsPage />} />
+      <Route path="/investors" element={<InvestorsPage />} />
+    </Routes>
+  )
+}