feat: search using an id or address (#32)

* feat: search using an id or address

Author: neilcampbell

package-lock.json

@@ -26,6 +26,7 @@
     "@algorandfoundation/algokit-utils": "^6.0.0-beta.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-select": "^2.0.0",
@@ -36,6 +37,7 @@
     "@tauri-apps/api": "^1.5.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "cmdk": "^1.0.0",
     "date-fns": "^3.5.0",
     "decimal.js": "^10.4.3",
     "isutf8": "^4.0.0",
@@ -143,4 +145,4 @@
       "semantic-release-export-data"
     ]
   }
-}
+}

package.json

@@ -8,6 +8,9 @@ import { GroupPage } from './features/transactions/pages/group-page'
 import { ErrorPage } from './features/common/pages/error-page'
 import { BlockPage, blockPageTitle } from './features/blocks/pages/block-page'
 import { InnerTransactionPage } from './features/transactions/pages/inner-transaction-page'
+import { AccountPage, accountPageTitle } from './features/accounts/pages/account-page'
+import { AssetPage, assetPageTitle } from './features/assets/pages/asset-page'
+import { ApplicationPage, applicationPageTitle } from './features/applications/pages/application-page'
 
 export const routes = evalTemplates([
   {
@@ -59,6 +62,21 @@ export const routes = evalTemplates([
             element: <BlockPage />,
             errorElement: <ErrorPage title={blockPageTitle} />,
           },
+          {
+            template: Urls.Explore.Account.ById,
+            element: <AccountPage />,
+            errorElement: <ErrorPage title={accountPageTitle} />,
+          },
+          {
+            template: Urls.Explore.Asset.ById,
+            element: <AssetPage />,
+            errorElement: <ErrorPage title={assetPageTitle} />,
+          },
+          {
+            template: Urls.Explore.Application.ById,
+            element: <ApplicationPage />,
+            errorElement: <ErrorPage title={applicationPageTitle} />,
+          },
         ],
       },
       {

src/App.routes.tsx

@@ -0,0 +1,20 @@
+import { invariant } from '@/utils/invariant'
+import { UrlParams } from '../../../routes/urls'
+import { useRequiredParam } from '../../common/hooks/use-required-param'
+import { cn } from '@/features/common/utils'
+import { isAddress } from '@/utils/is-address'
+
+export const accountPageTitle = 'Account'
+export const accountInvalidAddressMessage = 'Address is invalid'
+
+export function AccountPage() {
+  const { address } = useRequiredParam(UrlParams.Address)
+  invariant(isAddress(address), accountInvalidAddressMessage)
+
+  return (
+    <div>
+      <h1 className={cn('text-2xl text-primary font-bold')}>{accountPageTitle}</h1>
+      {address}
+    </div>
+  )
+}

src/features/accounts/pages/account-page.tsx

@@ -0,0 +1,64 @@
+import { indexer } from '@/features/common/data'
+import { JotaiStore } from '@/features/common/data/types'
+import { atom, useAtomValue, useStore } from 'jotai'
+import { atomEffect } from 'jotai-effect'
+import { ApplicationLookupResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { asApplication } from '../mappers'
+import { useMemo } from 'react'
+import { loadable } from 'jotai/utils'
+import { ApplicationId } from './types'
+import { applicationResultsAtom } from './core'
+
+const fetchApplicationResultAtomBuilder = (applicationId: ApplicationId) => {
+  return atom(async (_get) => {
+    return await indexer
+      .lookupApplications(applicationId)
+      .includeAll(true)
+      .do()
+      .then((result) => {
+        return (result as ApplicationLookupResult).application
+      })
+  })
+}
+
+export const getApplicationAtomBuilder = (store: JotaiStore, applicationId: ApplicationId) => {
+  const fetchApplicationResultAtom = fetchApplicationResultAtomBuilder(applicationId)
+
+  const syncEffect = atomEffect((get, set) => {
+    ;(async () => {
+      try {
+        const applicationResult = await get(fetchApplicationResultAtom)
+        set(applicationResultsAtom, (prev) => {
+          return prev.set(applicationResult.id, applicationResult)
+        })
+      } catch (e) {
+        // Ignore any errors as there is nothing to sync
+      }
+    })()
+  })
+
+  return atom(async (get) => {
+    const applicationResults = store.get(applicationResultsAtom)
+    const cachedApplicationResult = applicationResults.get(applicationId)
+    if (cachedApplicationResult) {
+      return asApplication(cachedApplicationResult)
+    }
+
+    get(syncEffect)
+
+    const applicationResult = await get(fetchApplicationResultAtom)
+    return asApplication(applicationResult)
+  })
+}
+
+const useApplicationAtom = (applicationId: ApplicationId) => {
+  const store = useStore()
+
+  return useMemo(() => {
+    return getApplicationAtomBuilder(store, applicationId)
+  }, [store, applicationId])
+}
+
+export const useLoadableApplication = (applicationId: ApplicationId) => {
+  return useAtomValue(loadable(useApplicationAtom(applicationId)))
+}

src/features/applications/data/application.ts

@@ -0,0 +1,5 @@
+import { ApplicationResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { atom } from 'jotai'
+import { ApplicationId } from './types'
+
+export const applicationResultsAtom = atom<Map<ApplicationId, ApplicationResult>>(new Map())

src/features/applications/data/core.ts

@@ -0,0 +1 @@
+export * from './application'

src/features/applications/data/index.ts

@@ -0,0 +1 @@
+export type ApplicationId = number

src/features/applications/data/types.ts

@@ -0,0 +1,8 @@
+import { Application } from '../models'
+import { ApplicationResult } from '@algorandfoundation/algokit-utils/types/indexer'
+
+export const asApplication = (application: ApplicationResult): Application => {
+  return {
+    id: application.id,
+  }
+}

src/features/applications/mappers/index.ts

@@ -0,0 +1,3 @@
+export type Application = {
+  id: number
+}