Account application (#59)

* feat: account created applications tab
* feat: account opted application tab

Author: negar-abbasi

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

@@ -24,6 +24,7 @@ import {
 } from './labels'
 import { AccountAssetsCreated } from './account-assets-created'
 import { AccountAssetsOpted } from './account-assets-opted'
+import { AccountApplications } from './account-applications'
 
 type Props = {
   account: Account
@@ -60,15 +61,22 @@ export function AccountActivityTabs({ account }: Props) {
       {
         id: accountCreatedApplicationsTabId,
         label: accountCreatedApplicationsTabLabel,
-        children: '',
+        children: <AccountApplications applications={account.applicationsCreated} />,
       },
       {
         id: accountOptedApplicationsTabId,
         label: accountOptedApplicationsTabLabel,
-        children: '',
+        children: <AccountApplications applications={account.applicationsOpted} />,
       },
     ],
-    [account.address, account.assetsCreated, account.assetsHeld, account.assetsOpted]
+    [
+      account.address,
+      account.applicationsCreated,
+      account.applicationsOpted,
+      account.assetsCreated,
+      account.assetsHeld,
+      account.assetsOpted,
+    ]
   )
   return (
     <Tabs defaultValue={accountLiveTransactionsTabId}>

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

@@ -0,0 +1,21 @@
+import { DataTable } from '@/features/common/components/data-table'
+import { AccountApplicationSummary } from '../models'
+import { ColumnDef } from '@tanstack/react-table'
+import { ApplicationLink } from '@/features/applications/components/application-link'
+import { ApplicationSummary } from '@/features/applications/models'
+
+type Props = {
+  applications: AccountApplicationSummary[]
+}
+
+const applicationsTableColumns: ColumnDef<ApplicationSummary>[] = [
+  {
+    header: 'ID',
+    accessorFn: (item) => item.id,
+    cell: (c) => <ApplicationLink applicationId={c.getValue<number>()} />,
+  },
+]
+
+export function AccountApplications({ applications }: Props) {
+  return <DataTable columns={applicationsTableColumns} data={applications} />
+}

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

@@ -22,6 +22,8 @@ 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 totalApplicationsCreated = account.applicationsCreated.length
+  const totalApplicationsOptedIn = account.applicationsOpted.length
 
   const accountInfoItems = useMemo(() => {
     const items = [
@@ -51,11 +53,11 @@ export function AccountInfo({ account }: { account: Account }) {
       },
       {
         dt: accountApplicationsCreatedLabel,
-        dd: account.totalApplicationsCreated ? account.totalApplicationsCreated : 0,
+        dd: totalApplicationsCreated,
       },
       {
         dt: accountApplicationsOptedInLabel,
-        dd: account.totalApplicationsOptedIn ? account.totalApplicationsOptedIn : 0,
+        dd: totalApplicationsOptedIn,
       },
       ...(account.rekeyedTo
         ? [
@@ -71,12 +73,12 @@ export function AccountInfo({ account }: { account: Account }) {
     account.address,
     account.balance,
     account.minBalance,
-    account.totalApplicationsCreated,
-    account.totalApplicationsOptedIn,
     account.rekeyedTo,
     totalAssetsHeld,
     totalAssetsCreated,
     totalAssetsOptedIn,
+    totalApplicationsCreated,
+    totalApplicationsOptedIn,
   ])
   return (
     <Card aria-label={accountInformationLabel} className={cn('p-4')}>

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

@@ -3,6 +3,7 @@ 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'
+import { applicationResultsAtom } from '@/features/applications/data'
 
 const getAccountResult = (address: Address) =>
   algod
@@ -15,6 +16,7 @@ const getAccountResult = (address: Address) =>
 const syncAssociatedDataAndReturnAccountResultAtom = atom(null, async (get, set, address: Address) => {
   const accountResult = await getAccountResult(address)
   const assetResults = get(assetResultsAtom)
+  const applicationResults = get(applicationResultsAtom)
 
   const assetsToAdd = (accountResult['created-assets'] ?? []).filter((a) => !assetResults.has(a.index))
   if (assetsToAdd.length > 0) {
@@ -28,7 +30,18 @@ const syncAssociatedDataAndReturnAccountResultAtom = atom(null, async (get, set,
       return next
     })
   }
-
+  const applicationsToAdd = (accountResult['created-apps'] ?? []).filter((a) => !applicationResults.has(a.id))
+  if (applicationsToAdd.length > 0) {
+    set(applicationResultsAtom, (prev) => {
+      const next = new Map(prev)
+      applicationsToAdd.forEach((application) => {
+        if (!next.has(application.id)) {
+          next.set(application.id, atom(application))
+        }
+      })
+      return next
+    })
+  }
   return accountResult
 })
 

src/features/accounts/mappers/index.ts

@@ -27,8 +27,8 @@ export const asAccount = async (
     address: accountResult.address,
     balance: microAlgos(accountResult.amount),
     minBalance: microAlgos(accountResult['min-balance']),
-    totalApplicationsCreated: accountResult['total-created-apps'],
-    totalApplicationsOptedIn: accountResult['total-apps-opted-in'],
+    applicationsCreated: (accountResult['created-apps'] ?? []).map((app) => ({ id: app.id })),
+    applicationsOpted: (accountResult['apps-local-state'] ?? []).map((app) => ({ id: app.id })),
     assetsHeld,
     assetsCreated: await asAccountAssetSummaries(accountResult['created-assets'] ?? [], asAccountAssetSummary),
     assetsOpted,

src/features/accounts/models/index.ts

@@ -1,6 +1,7 @@
 import { AlgoAmount } from '@algorandfoundation/algokit-utils/types/amount'
 import { Address } from '../data/types'
 import { AssetSummary } from '@/features/assets/models'
+import { ApplicationId } from '@/features/applications/data/types'
 
 export type AccountAssetSummary = Omit<AssetSummary, 'clawback'>
 
@@ -9,13 +10,16 @@ export type AssetHolding = {
   amount: number | bigint
   isFrozen: boolean
 }
+export type AccountApplicationSummary = {
+  id: ApplicationId
+}
 
 export type Account = {
   address: Address
   balance: AlgoAmount
   minBalance: AlgoAmount
-  totalApplicationsCreated: number
-  totalApplicationsOptedIn: number
+  applicationsCreated: AccountApplicationSummary[]
+  applicationsOpted: AccountApplicationSummary[]
   assetsHeld: AssetHolding[]
   assetsCreated: AccountAssetSummary[]
   assetsOpted: AssetHolding[]

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

@@ -53,7 +53,7 @@ describe('account-page', () => {
     })
   })
 
-  describe('when rendering an account with applications', () => {
+  describe('when rendering an account', () => {
     const accountResult = accountResultMother['mainnet-BIQXAK67KSCKN3EJXT4S3RVXUBFOLZ45IQOBTSOQWOSR4LLULBTD54S5IA']().build()
     const assetResults = new Map([
       [924268058, atom(assetResultMother['mainnet-924268058']().build())],
@@ -95,18 +95,15 @@ describe('account-page', () => {
     })
   })
 
-  describe('when rendering an account with assets', () => {
-    const accountResult = accountResultMother['mainnet-JY2FRXQP7Q6SYH7QE2HF2XWNE644V6KUH3PYC4SYWPUSEATTDJSNUHMHR4']().build()
+  describe('when rendering an account with assets and applications', () => {
+    const accountResult = accountResultMother['mainnet-ORANGESCU7XMR2TFXSFTOHCUHNP6OYEPIKZW3JZANTCDHVQYMGQFYFIDDA']().build()
     const assetResults = new Map([
-      [1205372113, atom(accountResult['created-assets']![0])],
-      [1205372555, atom(accountResult['created-assets']![1])],
-      [1205372814, atom(accountResult['created-assets']![2])],
-      [2254146, atom(assetResultMother['mainnet-2254146']().build())],
-      [2254149, atom(assetResultMother['mainnet-2254149']().build())],
-      [2254150, atom(assetResultMother['mainnet-2254150']().build())],
-      [127745593, atom(assetResultMother['mainnet-127745593']().build())],
-      [127746157, atom(assetResultMother['mainnet-127746157']().build())],
-      [127746786, atom(assetResultMother['mainnet-127746786']().build())],
+      [1336655079, atom(accountResult['created-assets']![0])],
+      [1284444444, atom(assetResultMother['mainnet-1284444444']().build())],
+      [1162292622, atom(assetResultMother['mainnet-1162292622']().build())],
+      [1294765516, atom(assetResultMother['mainnet-1294765516']().build())],
+      [1355858325, atom(assetResultMother['mainnet-1355858325']().build())],
+      [1355898842, atom(assetResultMother['mainnet-1355898842']().build())],
     ])
 
     it('should be rendered with the correct data', () => {
@@ -124,14 +121,14 @@ describe('account-page', () => {
             descriptionListAssertion({
               container: informationCard,
               items: [
-                { term: accountAddressLabel, description: 'JY2FRXQP7Q6SYH7QE2HF2XWNE644V6KUH3PYC4SYWPUSEATTDJSNUHMHR4' },
-                { term: accountBalanceLabel, description: '12016.438084' },
-                { term: accountMinBalanceLabel, description: '1' },
-                { term: accountAssetsHeldLabel, description: '3' },
-                { term: accountAssetsCreatedLabel, description: '3' },
-                { term: accountAssetsOptedInLabel, description: '9' },
-                { term: accountApplicationsCreatedLabel, description: '0' },
-                { term: accountApplicationsOptedInLabel, description: '0' },
+                { term: accountAddressLabel, description: 'ORANGESCU7XMR2TFXSFTOHCUHNP6OYEPIKZW3JZANTCDHVQYMGQFYFIDDA' },
+                { term: accountBalanceLabel, description: '123.714752' },
+                { term: accountMinBalanceLabel, description: '5.281' },
+                { term: accountAssetsHeldLabel, description: '5' },
+                { term: accountAssetsCreatedLabel, description: '1' },
+                { term: accountAssetsOptedInLabel, description: '6' },
+                { term: accountApplicationsCreatedLabel, description: '4' },
+                { term: accountApplicationsOptedInLabel, description: '1' },
               ],
             })
             const activityTabList = component.getByRole('tablist', { name: accountActivityLabel })