Merge pull request #5 from MakerXStudio/base-data-setup

feat: add base data setup with jotai

Author: neilcampbell

.github/workflows/pr.yaml

@@ -18,5 +18,5 @@ jobs:
       node-version: 20.x
       audit-script: npm run audit
       compile-script: npm run check-types
-      test-script: npm run tests
+      test-script: npm run test
       run-build: false

.github/workflows/release.yaml

@@ -33,7 +33,7 @@ jobs:
       node-version: 20.x
       audit-script: npm run audit
       compile-script: npm run check-types
-      test-script: npm run tests
+      test-script: npm run test
 
   build-website:
     name: Build Website

package-lock.json

@@ -14,12 +14,14 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --ext ts,tsx --fix",
     "preview": "vite preview",
-    "tests": "vitest",
+    "test": "vitest",
     "audit": "better-npm-audit audit",
-    "check-types": "tsc --noEmit",
+    "check-types": "tsc --noEmit && npx --yes madge src/App.tsx --circular",
     "tauri": "tauri"
   },
   "dependencies": {
+    "@algorandfoundation/algokit-subscriber": "^1.2.0",
+    "@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-label": "^2.0.2",
@@ -32,14 +34,15 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.5.0",
-    "decimal.js": "^10.4.3",
-    "jotai": "^2.7.0",
+    "jotai": "^2.7.2",
+    "jotai-effect": "^0.6.0",
     "lucide-react": "^0.356.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "tiny-invariant": "^1.3.3",
     "vaul": "^0.9.0"
   },
   "devDependencies": {
@@ -135,4 +138,4 @@
       "semantic-release-export-data"
     ]
   }
-}
+}

package.json

@@ -5,13 +5,16 @@ import { evalTemplates } from './routes/templated-route'
 import { TransactionPage } from './features/transactions/pages/transaction-page'
 import { ExplorePage } from './features/explore/pages/explore-page'
 import { GroupPage } from './features/transactions/pages/group-page'
+import ErrorBoundary from './features/errors/components/error-boundary'
 
 export const routes = evalTemplates([
   {
     template: Urls.Index,
     element: (
       <LayoutPage>
-        <Outlet />
+        <ErrorBoundary>
+          <Outlet />
+        </ErrorBoundary>
       </LayoutPage>
     ),
     children: [

src/App.routes.tsx

@@ -0,0 +1,16 @@
+import { useLatestBlocks } from '../data'
+
+export function LatestBlocks() {
+  const latestBlocks = useLatestBlocks()
+
+  return (
+    <div>
+      <h3>Latest Blocks:</h3>
+      {latestBlocks.map((block, i) => (
+        <p key={i}>
+          {block.round} - {block.parentTransactionCount}
+        </p>
+      ))}
+    </div>
+  )
+}

src/features/blocks/components/latest-blocks.tsx

@@ -0,0 +1,93 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+import * as algokit from '@algorandfoundation/algokit-utils'
+import { atomEffect } from 'jotai-effect'
+import { transactionsAtom } from '@/features/transactions/data'
+import { AlgorandSubscriber } from '@algorandfoundation/algokit-subscriber'
+// import { BlockMetadata } from '@algorandfoundation/algokit-subscriber/types/subscription'
+import { Buffer } from 'buffer'
+
+type BlockMetadata = {
+  round: number
+  parentTransactionCount: number
+}
+
+// TODO: NC - Remove once https://github.com/algorandfoundation/algokit-subscriber-ts/pull/49 is merged
+window.Buffer = Buffer
+
+// TODO: Move this elsewhere and make it configurable once we start using it more
+const algod = algokit.getAlgoClient({
+  server: 'https://testnet-api.algonode.cloud/',
+  port: 443,
+})
+
+const syncedRoundAtom = atom<number | undefined>(undefined)
+
+// TODO: Size should be capped at some limit, so memory usage doesn't grow indefinitely
+const blocksAtom = atom<BlockMetadata[]>([])
+
+const latestBlockAtom = atom((get) => {
+  return get(blocksAtom).slice(0, 5)
+})
+
+const subscribeToBlocksEffect = atomEffect((get, set) => {
+  algokit.Config.configure({
+    logger: algokit.Config.getLogger(true),
+  })
+  const subscriber = new AlgorandSubscriber(
+    {
+      filters: [
+        {
+          name: 'all-transactions',
+          filter: {
+            customFilter: () => true,
+          },
+        },
+      ],
+      maxRoundsToSync: 1, // TODO: NC - Do we want this higher?
+      waitForBlockWhenAtTip: true,
+      syncBehaviour: 'skip-sync-newest',
+      watermarkPersistence: {
+        get: async () => get(syncedRoundAtom) ?? 0,
+        set: async (watermark) => {
+          set(syncedRoundAtom, watermark)
+        },
+      },
+    },
+    algod
+  )
+
+  subscriber.onPoll(async (result) => {
+    // TODO: NC - Add this back in once subscriber supports it
+    // const blocks = result.blockMetadata
+    const blocks = [
+      {
+        round: result.syncedRoundRange[0],
+        parentTransactionCount: result.subscribedTransactions.length,
+      } satisfies BlockMetadata,
+    ]
+
+    if (blocks) {
+      set(blocksAtom, (previous) => {
+        return blocks.concat(previous)
+      })
+    }
+
+    set(transactionsAtom, (previous) => {
+      return result.subscribedTransactions.concat(previous)
+    })
+  })
+
+  subscriber.start()
+
+  return async () => {
+    await subscriber.stop('unmounted')
+  }
+})
+
+export const useSubscribeToBlocksEffect = () => {
+  useAtom(subscribeToBlocksEffect)
+}
+
+export const useLatestBlocks = () => {
+  return useAtomValue(latestBlockAtom)
+}

src/features/blocks/data.ts

@@ -1,15 +1,15 @@
-import { algoFormatter } from '@/utils/format'
 import SvgAlgorand from './icons/algorand'
 import { cn } from '../utils'
+import { AlgoAmount } from '@algorandfoundation/algokit-utils/types/amount'
 
 export type Props = {
-  microAlgo: number
+  amount: AlgoAmount
 }
 
-export function DisplayAlgo({ microAlgo }: Props) {
+export function DisplayAlgo({ amount }: Props) {
   return (
     <div className={cn('flex items-center')}>
-      {algoFormatter.asAlgo(microAlgo)}
+      {amount.algos}
       <SvgAlgorand />
     </div>
   )

src/features/common/components/display-algo.tsx

@@ -0,0 +1,47 @@
+import { Component, ErrorInfo, PropsWithChildren } from 'react'
+
+type ErrorBoundaryProps = PropsWithChildren
+
+function ErrorBoundary(props: ErrorBoundaryProps) {
+  return <ErrorBoundaryImpl {...{ ...props }} />
+}
+
+type ErrorBoundaryImplProps = ErrorBoundaryProps
+type ErrorBoundaryImplState = {
+  errorType: ErrorType
+}
+
+enum ErrorType {
+  None,
+  Other,
+}
+
+class ErrorBoundaryImpl extends Component<ErrorBoundaryImplProps, ErrorBoundaryImplState> {
+  constructor(props: ErrorBoundaryImplProps) {
+    super(props)
+
+    this.state = {
+      errorType: ErrorType.None,
+    }
+  }
+
+  public static getDerivedStateFromError(_e: unknown): ErrorBoundaryImplState {
+    return {
+      errorType: ErrorType.Other,
+    }
+  }
+
+  public async componentDidCatch(_e: unknown, _errorInfo: ErrorInfo) {}
+
+  public componentDidUpdate() {}
+
+  public render() {
+    if (this.state.errorType === ErrorType.None) {
+      return this.props.children
+    }
+
+    return <p>Error</p>
+  }
+}
+
+export default ErrorBoundary

src/features/errors/components/error-boundary.tsx

@@ -1,3 +1,4 @@
+import { LatestBlocks } from '@/features/blocks/components/latest-blocks'
 import { cn } from '@/features/common/utils'
 import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
 import { Urls } from '@/routes/urls'
@@ -14,6 +15,8 @@ export function ExplorePage() {
       <TemplatedNavLink urlTemplate={Urls.Explore.Group.ById} urlParams={{ groupId: 'foo' }}>
         View sample group
       </TemplatedNavLink>
+
+      <LatestBlocks />
     </div>
   )
 }