feat: landing page (#83)

Author: PatrickDinh

src/App.routes.tsx

@@ -12,6 +12,7 @@ import { AccountPage, accountPageTitle } from './features/accounts/pages/account
 import { AssetPage, assetPageTitle } from './features/assets/pages/asset-page'
 import { ApplicationPage, applicationPageTitle } from './features/applications/pages/application-page'
 import { SettingsPage } from './features/settings/pages/settings-page'
+import { TxPage } from './features/transactions/pages/tx-page'
 
 export const routes = evalTemplates([
   {
@@ -25,67 +26,53 @@ export const routes = evalTemplates([
     children: [
       {
         template: Urls.Index,
-        element: (
-          <div>
-            <h1 className="font-bold">Home</h1>
-          </div>
-        ),
+        element: <ExplorePage />,
+        errorElement: <ErrorPage title={explorePageTitle} />,
       },
       {
-        template: Urls.Explore,
-        errorElement: <ErrorPage />,
+        template: Urls.Transaction.ById,
+        errorElement: <ErrorPage title={transactionPageTitle} />,
         children: [
           {
-            template: Urls.Explore,
-            element: <ExplorePage />,
-            errorElement: <ErrorPage title={explorePageTitle} />,
+            template: Urls.Transaction.ById,
+            element: <TransactionPage />,
           },
           {
-            template: Urls.Explore.Transaction.ById,
-            errorElement: <ErrorPage title={transactionPageTitle} />,
-            children: [
-              {
-                template: Urls.Explore.Transaction.ById,
-                element: <TransactionPage />,
-              },
-              {
-                template: Urls.Explore.Transaction.ById.Inner.ById,
-                element: <InnerTransactionPage />,
-              },
-            ],
-          },
-          {
-            template: Urls.Explore.Block.ByRound,
-            children: [
-              {
-                template: Urls.Explore.Block.ByRound,
-                errorElement: <ErrorPage title={blockPageTitle} />,
-                element: <BlockPage />,
-              },
-              {
-                template: Urls.Explore.Block.ByRound.Group.ById,
-                errorElement: <ErrorPage title={groupPageTitle} />,
-                element: <GroupPage />,
-              },
-            ],
-          },
-          {
-            template: Urls.Explore.Account.ByAddress,
-            element: <AccountPage />,
-            errorElement: <ErrorPage title={accountPageTitle} />,
+            template: Urls.Transaction.ById.Inner.ById,
+            element: <InnerTransactionPage />,
           },
+        ],
+      },
+      {
+        template: Urls.Block.ByRound,
+        children: [
           {
-            template: Urls.Explore.Asset.ById,
-            element: <AssetPage />,
-            errorElement: <ErrorPage title={assetPageTitle} />,
+            template: Urls.Block.ByRound,
+            errorElement: <ErrorPage title={blockPageTitle} />,
+            element: <BlockPage />,
           },
           {
-            template: Urls.Explore.Application.ById,
-            errorElement: <ErrorPage title={applicationPageTitle} />,
-            element: <ApplicationPage />,
+            template: Urls.Block.ByRound.Group.ById,
+            errorElement: <ErrorPage title={groupPageTitle} />,
+            element: <GroupPage />,
           },
         ],
       },
+      {
+        template: Urls.Account.ByAddress,
+        element: <AccountPage />,
+        errorElement: <ErrorPage title={accountPageTitle} />,
+      },
+      {
+        template: Urls.Asset.ById,
+        element: <AssetPage />,
+        errorElement: <ErrorPage title={assetPageTitle} />,
+      },
+      {
+        template: Urls.Application.ById,
+        errorElement: <ErrorPage title={applicationPageTitle} />,
+        element: <ApplicationPage />,
+      },
       {
         template: Urls.AppStudio,
         element: <div>App Studio</div>,
@@ -94,6 +81,10 @@ export const routes = evalTemplates([
         template: Urls.Settings,
         element: <SettingsPage />,
       },
+      {
+        template: Urls.Tx,
+        element: <TxPage />,
+      },
     ],
   },
 ])

src/features/accounts/components/account-link.tsx

@@ -24,7 +24,7 @@ export const AccountLink = fixedForwardRef(
       <>
         <TemplatedNavLink
           className={cn(!children && 'text-primary underline', className)}
-          urlTemplate={Urls.Explore.Account.ByAddress}
+          urlTemplate={Urls.Account.ByAddress}
           urlParams={{ address }}
           ref={ref}
           {...rest}

src/features/applications/components/application-link.tsx

@@ -13,7 +13,7 @@ export function ApplicationLink({ applicationId, className, children }: Props) {
   return (
     <TemplatedNavLink
       className={cn(!children && 'text-primary underline', className)}
-      urlTemplate={Urls.Explore.Application.ById}
+      urlTemplate={Urls.Application.ById}
       urlParams={{ applicationId: applicationId.toString() }}
     >
       {children ? children : applicationId}

src/features/assets/components/asset-link.tsx

@@ -42,7 +42,7 @@ function Link(props: AssetIdLinkProps | AssetIdAndNameLinkProps) {
     <>
       <TemplatedNavLink
         className={cn(!props.children && 'text-primary underline', props.className)}
-        urlTemplate={Urls.Explore.Asset.ById}
+        urlTemplate={Urls.Asset.ById}
         urlParams={{ assetId: props.assetId.toString() }}
       >
         {props.children ? props.children : props.assetId}

src/features/blocks/components/block-link.tsx

@@ -12,7 +12,7 @@ export function BlockLink({ round, className, children }: Props) {
   return (
     <TemplatedNavLink
       className={cn(!children && 'text-primary underline', className)}
-      urlTemplate={Urls.Explore.Block.ByRound}
+      urlTemplate={Urls.Block.ByRound}
       urlParams={{ round: round.toString() }}
     >
       {children ? children : round}

src/features/common/data/algo-client.ts

@@ -1,5 +1,5 @@
 import { Config, getAlgoClient, getAlgoIndexerClient, getAlgoKmdClient } from '@algorandfoundation/algokit-utils'
-import { NetworkConfig, localnetConfig, networkConfigAtom } from '../../settings/data/network'
+import { NetworkConfig, localnetConfig, networkConfigAtom } from '@/features/settings/data'
 import { settingsStore } from '@/features/settings/data'
 import algosdk from 'algosdk'
 

src/features/deep-link/hooks/use-deep-link.tsx

@@ -16,9 +16,9 @@ export function useDeepLink() {
       if (options) {
         await setSelectedNetwork(options.networkId)
         if (options.transactionId) {
-          navigate(Urls.Explore.Transaction.ById.build({ transactionId: options.transactionId }))
+          navigate(Urls.Transaction.ById.build({ transactionId: options.transactionId }))
         } else {
-          navigate(Urls.Explore.build({}))
+          navigate(Urls.Index.build({}))
         }
       }
     },

src/features/explore/pages/explorer-page.test.tsx renamed to src/features/explore/pages/explore-page.test.tsx

@@ -2,7 +2,7 @@ import { executeComponentTest } from '@/tests/test-component'
 import { getAllByRole, getByRole, queryAllByRole, render, waitFor } from '@/tests/testing-library'
 import { Atom, createStore } from 'jotai'
 import { describe, expect, it } from 'vitest'
-import { ExplorePage } from './explore-page'
+import { ExplorePage } from './explore-page.tsx'
 import { latestBlocksTitle } from '@/features/blocks/components/latest-blocks'
 import { latestTransactionsTitle } from '@/features/transactions/components/latest-transactions'
 import { blockResultsAtom, syncedRoundAtom } from '@/features/blocks/data'
@@ -25,7 +25,7 @@ describe('explore-page', () => {
       return executeComponentTest(
         () => render(<ExplorePage />, undefined, myStore),
         async (component) => {
-          waitFor(() => {
+          await waitFor(() => {
             const latestBlocks = getByRole(component.container, 'heading', { name: latestBlocksTitle })
             expect(latestBlocks).toBeDefined()
             const container = latestBlocks.parentElement!
@@ -82,7 +82,7 @@ describe('explore-page', () => {
       return executeComponentTest(
         () => render(<ExplorePage />, undefined, myStore),
         async (component) => {
-          waitFor(() => {
+          await waitFor(() => {
             const latestTransactions = getByRole(component.container, 'heading', { name: latestTransactionsTitle })
             expect(latestTransactions).toBeDefined()
             const container = latestTransactions.parentElement!

src/features/groups/components/group-link.tsx

@@ -17,7 +17,7 @@ export function GroupLink({ round, groupId, short = false, className, children }
   return (
     <TemplatedNavLink
       className={cn(!children && 'text-primary underline', className)}
-      urlTemplate={Urls.Explore.Block.ByRound.Group.ById}
+      urlTemplate={Urls.Block.ByRound.Group.ById}
       urlParams={{ round: round.toString(), groupId: encodeURIComponent(groupId) }}
     >
       {children ? children : short ? <abbr title={groupId}>{ellipseId(groupId)}</abbr> : groupId}

src/features/layout/components/left-side-bar-menu.tsx

@@ -2,15 +2,15 @@ import { TemplatedNavLink } from '../../routing/components/templated-nav-link/te
 import { Urls } from '../../../routes/urls'
 import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from '@/features/common/components/navigation-menu'
 import { cn } from '@/features/common/utils'
-import SvgWallet from '@/features/common/components/icons/wallet'
 import SvgCodeBlock from '@/features/common/components/icons/code-block'
 import SvgHome from '@/features/common/components/icons/home'
 import { Button } from '@/features/common/components/button'
 import SvgChevronLeft from '@/features/common/components/icons/chevron-left'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import SvgChevronRight from '@/features/common/components/icons/chevron-right'
 import SvgCog from '@/features/common/components/icons/cog'
 import { useLayout } from '@/features/settings/data'
+import { useLocation } from 'react-router-dom'
 
 type Props = {
   className?: string
@@ -19,7 +19,6 @@ type Props = {
 export function LeftSideBarMenu({ className }: Props) {
   const menuItems = [
     { urlTemplate: Urls.Index, icon: <SvgHome />, text: 'Home' },
-    { urlTemplate: Urls.Explore, icon: <SvgWallet />, text: 'Explore' },
     { urlTemplate: Urls.AppStudio, icon: <SvgCodeBlock />, text: 'App Studio' },
     { urlTemplate: Urls.Settings, icon: <SvgCog />, text: 'Settings' },
   ]
@@ -30,6 +29,21 @@ export function LeftSideBarMenu({ className }: Props) {
     [setLayout]
   )
 
+  // The little hack to make the index (root) menu item active when transaction, block, account, asset, application are viewed
+  // This needs to be done because React router doesn't match the root URL with any sub-path
+  // The doc: https://reactrouter.com/en/main/components/nav-link#end
+  const location = useLocation()
+  const isIndexActive = useMemo(() => {
+    const forceMatchWithIndex = [
+      Urls.Transaction.build({}),
+      Urls.Block.build({}),
+      Urls.Account.build({}),
+      Urls.Asset.build({}),
+      Urls.Application.build({}),
+    ]
+    return forceMatchWithIndex.some((path) => location.pathname.startsWith(path))
+  }, [location.pathname])
+
   return (
     <NavigationMenu
       className={cn('bg-card transition-all duration-300 min-h-screen', className, layout.isLeftSideBarExpanded ? 'w-52' : 'w-10')}
@@ -45,7 +59,10 @@ export function LeftSideBarMenu({ className }: Props) {
             <NavigationMenuLink asChild>
               <TemplatedNavLink
                 urlTemplate={menuItem.urlTemplate}
-                className={cn('[&.active]:text-primary flex items-center p-2 gap-2 min-h-10 pl-3 whitespace-nowrap')}
+                className={cn(
+                  '[&.active]:text-primary flex items-center p-2 gap-2 min-h-10 pl-3 whitespace-nowrap',
+                  menuItem.urlTemplate === Urls.Index && isIndexActive ? 'active' : ''
+                )}
               >
                 <div className={cn('text-primary')}>{menuItem.icon}</div>
                 <div className={cn(layout.isLeftSideBarExpanded ? 'visible delay-100' : 'invisible delay-100')}>{menuItem.text}</div>