feat: view account assets (#55)

* feat: display account assets
* chore: adjust how we sync related state so it always runs before setting the atom
* chore: fix lint
* chore: action pr feedback

Author: neilcampbell

package.json

@@ -12,7 +12,7 @@
     "build:4-tsc": "tsc",
     "build:5-vite": "vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "lint:fix": "npm run lint -- --fix",
     "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest watch",
@@ -146,4 +146,4 @@
       "semantic-release-export-data"
     ]
   }
-}
+}

src/features/accounts/components/account-activity-tabs.tsx

@@ -1,7 +1,7 @@
 import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
 import { cn } from '@/features/common/utils'
 import { useMemo } from 'react'
-import { AccountAssetHeld } from './account-assets-held'
+import { AccountAssetsHeld } from './account-assets-held'
 import { Account } from '../models'
 import { AccountTransactionHistory } from './account-transaction-history'
 import {
@@ -18,7 +18,11 @@ import {
   accountCreatedAssetsTabLabel,
   accountCreatedApplicationsTabLabel,
   accountOptedApplicationsTabLabel,
+  accountOptedAssetsTabId,
+  accountOptedAssetsTabLabel,
 } from './labels'
+import { AccountAssetsCreated } from './account-assets-created'
+import { AccountAssetsOpted } from './account-assets-opted'
 
 type Props = {
   account: Account
@@ -40,12 +44,17 @@ export function AccountActivityTabs({ account }: Props) {
       {
         id: accountHeldAssetsTabId,
         label: accountHeldAssetsTabLabel,
-        children: <AccountAssetHeld address={account.address} />,
+        children: <AccountAssetsHeld assetsHeld={account.assetsHeld} />,
       },
       {
         id: accountCreatedAssetsTabId,
         label: accountCreatedAssetsTabLabel,
-        children: '',
+        children: <AccountAssetsCreated assetsCreated={account.assetsCreated} />,
+      },
+      {
+        id: accountOptedAssetsTabId,
+        label: accountOptedAssetsTabLabel,
+        children: <AccountAssetsOpted assetsOpted={account.assetsOpted} />,
       },
       {
         id: accountCreatedApplicationsTabId,
@@ -58,7 +67,7 @@ export function AccountActivityTabs({ account }: Props) {
         children: '',
       },
     ],
-    [account.address]
+    [account.address, account.assetsCreated, account.assetsHeld, account.assetsOpted]
   )
   return (
     <Tabs defaultValue={accountLiveTransactionsTabId}>

src/features/accounts/components/account-asset-holdings-table-columns.tsx

@@ -0,0 +1,24 @@
+import { ColumnDef } from '@tanstack/react-table'
+import { DisplayAssetAmount } from '@/features/common/components/display-asset-amount'
+import { AssetHolding } from '../models'
+import { AssetLink } from '@/features/assets/components/asset-link'
+
+export const accountAssetHoldingsTableColumns: ColumnDef<AssetHolding>[] = [
+  {
+    header: 'ID',
+    accessorFn: (item) => item.asset.id,
+    cell: (c) => <AssetLink assetId={c.getValue<number>()} />,
+  },
+  {
+    header: 'Name',
+    accessorFn: (item) => item.asset.name,
+  },
+  {
+    header: 'Amount',
+    accessorFn: (item) => item,
+    cell: (c) => {
+      const assetHolding = c.getValue<AssetHolding>()
+      return <DisplayAssetAmount amount={assetHolding.amount} asset={assetHolding.asset} isFrozen={assetHolding.isFrozen} />
+    },
+  },
+]

src/features/accounts/components/account-assets-created.tsx

@@ -0,0 +1,28 @@
+import { ColumnDef } from '@tanstack/react-table'
+import { AccountAssetSummary } from '../models'
+import { DataTable } from '@/features/common/components/data-table'
+import { AssetLink } from '@/features/assets/components/asset-link'
+
+type Props = {
+  assetsCreated: AccountAssetSummary[]
+}
+
+const assetsCreatedTableColumns: ColumnDef<AccountAssetSummary>[] = [
+  {
+    header: 'ID',
+    accessorFn: (item) => item.id,
+    cell: (c) => <AssetLink assetId={c.getValue<number>()} />,
+  },
+  {
+    header: 'Name',
+    accessorFn: (item) => item.name,
+  },
+  {
+    header: 'Unit',
+    accessorFn: (item) => item.unitName,
+  },
+]
+
+export function AccountAssetsCreated({ assetsCreated }: Props) {
+  return <DataTable columns={assetsCreatedTableColumns} data={assetsCreated} />
+}

src/features/accounts/components/account-assets-held.tsx

@@ -1,9 +1,11 @@
-import { Address } from '../data/types'
+import { AssetHolding } from '../models'
+import { DataTable } from '@/features/common/components/data-table'
+import { accountAssetHoldingsTableColumns } from './account-asset-holdings-table-columns'
 
 type Props = {
-  address: Address
+  assetsHeld: AssetHolding[]
 }
 
-export function AccountAssetHeld({ address }: Props) {
-  return <>Assets Held for {address}</>
+export function AccountAssetsHeld({ assetsHeld }: Props) {
+  return <DataTable columns={accountAssetHoldingsTableColumns} data={assetsHeld} />
 }

src/features/accounts/components/account-assets-opted.tsx

@@ -0,0 +1,11 @@
+import { AssetHolding } from '../models'
+import { DataTable } from '@/features/common/components/data-table'
+import { accountAssetHoldingsTableColumns } from './account-asset-holdings-table-columns'
+
+type Props = {
+  assetsOpted: AssetHolding[]
+}
+
+export function AccountAssetsOpted({ assetsOpted }: Props) {
+  return <DataTable columns={accountAssetHoldingsTableColumns} data={assetsOpted} />
+}

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

@@ -19,6 +19,10 @@ import {
 } from './labels'
 
 export function AccountInfo({ account }: { account: Account }) {
+  const totalAssetsHeld = account.assetsHeld.length
+  const totalAssetsCreated = account.assetsCreated.length
+  const totalAssetsOptedIn = account.assetsHeld.length + account.assetsOpted.length
+
   const accountInfoItems = useMemo(() => {
     const items = [
       {
@@ -35,15 +39,15 @@ export function AccountInfo({ account }: { account: Account }) {
       },
       {
         dt: accountAssetsHeldLabel,
-        dd: account.totalAssetsHeld,
+        dd: totalAssetsHeld,
       },
       {
         dt: accountAssetsCreatedLabel,
-        dd: account.totalAssetsCreated,
+        dd: totalAssetsCreated,
       },
       {
         dt: accountAssetsOptedInLabel,
-        dd: account.totalAssetsOptedIn,
+        dd: totalAssetsOptedIn,
       },
       {
         dt: accountApplicationsCreatedLabel,
@@ -67,12 +71,12 @@ export function AccountInfo({ account }: { account: Account }) {
     account.address,
     account.balance,
     account.minBalance,
-    account.totalAssetsHeld,
-    account.totalAssetsCreated,
-    account.totalAssetsOptedIn,
     account.totalApplicationsCreated,
     account.totalApplicationsOptedIn,
     account.rekeyedTo,
+    totalAssetsHeld,
+    totalAssetsCreated,
+    totalAssetsOptedIn,
   ])
   return (
     <Card aria-label={accountInformationLabel} className={cn('p-4')}>

src/features/accounts/components/labels.ts

@@ -5,13 +5,15 @@ export const accountLiveTransactionsTabLabel = 'Live Transactions'
 export const accountHistoricalTransactionsTabLabel = 'Historical Transactions'
 export const accountHeldAssetsTabLabel = 'Held Assets'
 export const accountCreatedAssetsTabLabel = 'Created Assets'
+export const accountOptedAssetsTabLabel = 'Opted Assets'
 export const accountCreatedApplicationsTabLabel = 'Created Applications'
 export const accountOptedApplicationsTabLabel = 'Opted Applications'
 
 export const accountLiveTransactionsTabId = 'live-transactions'
 export const accountHistoricalTransactionsTabId = 'historical-transactions'
 export const accountHeldAssetsTabId = 'held-assets'
 export const accountCreatedAssetsTabId = 'created-assets'
+export const accountOptedAssetsTabId = 'opted-assets'
 export const accountCreatedApplicationsTabId = 'created-applications'
 export const accountOptedApplicationsTabId = 'opted-applications'
 

src/features/accounts/data/account-result.ts

@@ -2,15 +2,34 @@ import { atom } from 'jotai'
 import { AccountResult, Address } from './types'
 import { algod } from '@/features/common/data'
 import { atomsInAtom } from '@/features/common/data/atoms-in-atom'
+import { assetResultsAtom } from '@/features/assets/data'
 
-const createAccountResultAtom = (address: Address) =>
-  atom<Promise<AccountResult> | AccountResult>(async (_get) => {
-    return await algod
-      .accountInformation(address)
-      .do()
-      .then((result) => {
-        return result as AccountResult
+const getAccountResult = (address: Address) =>
+  algod
+    .accountInformation(address)
+    .do()
+    .then((result) => {
+      return result as AccountResult
+    })
+
+const syncAssociatedDataAndReturnAccountResultAtom = atom(null, async (get, set, address: Address) => {
+  const accountResult = await getAccountResult(address)
+  const assetResults = get(assetResultsAtom)
+
+  const assetsToAdd = (accountResult['created-assets'] ?? []).filter((a) => !assetResults.has(a.index))
+  if (assetsToAdd.length > 0) {
+    set(assetResultsAtom, (prev) => {
+      const next = new Map(prev)
+      assetsToAdd.forEach((asset) => {
+        if (!next.has(asset.index)) {
+          next.set(asset.index, atom(asset))
+        }
       })
-  })
+      return next
+    })
+  }
+
+  return accountResult
+})
 
-export const [accountResultsAtom, getAccountResultAtom] = atomsInAtom(createAccountResultAtom, (address) => address)
+export const [accountResultsAtom, getAccountResultAtom] = atomsInAtom(syncAssociatedDataAndReturnAccountResultAtom, (address) => address)

src/features/accounts/data/account.ts

@@ -5,11 +5,12 @@ import { JotaiStore } from '@/features/common/data/types'
 import { useMemo } from 'react'
 import { asAccount } from '../mappers'
 import { getAccountResultAtom } from './account-result'
+import { createAssetResolver } from '@/features/assets/data'
 
 const createAccountAtom = (store: JotaiStore, address: Address) => {
   return atom(async (get) => {
     const accountResult = await get(getAccountResultAtom(store, address))
-    return asAccount(accountResult)
+    return asAccount(accountResult, createAssetResolver(store, get))
   })
 }