Split activity cards in account information (#92)

Author: negar-abbasi

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

@@ -1,30 +1,16 @@
 import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
 import { cn } from '@/features/common/utils'
 import { useMemo } from 'react'
-import { AccountAssetsHeld } from './account-assets-held'
 import { Account } from '../models'
 import { AccountTransactionHistory } from './account-transaction-history'
 import { AccountLiveTransactions } from './account-live-transactions'
 import {
   accountActivityLabel,
   accountLiveTransactionsTabId,
-  accountCreatedApplicationsTabId,
-  accountCreatedAssetsTabId,
-  accountHeldAssetsTabId,
   accountHistoricalTransactionsTabId,
-  accountOptedApplicationsTabId,
   accountLiveTransactionsTabLabel,
   accountHistoricalTransactionsTabLabel,
-  accountHeldAssetsTabLabel,
-  accountCreatedAssetsTabLabel,
-  accountCreatedApplicationsTabLabel,
-  accountOptedApplicationsTabLabel,
-  accountOptedAssetsTabId,
-  accountOptedAssetsTabLabel,
 } from './labels'
-import { AccountAssetsCreated } from './account-assets-created'
-import { AccountAssetsOpted } from './account-assets-opted'
-import { AccountApplications } from './account-applications'
 
 type Props = {
   account: Account
@@ -43,40 +29,8 @@ export function AccountActivityTabs({ account }: Props) {
         label: accountHistoricalTransactionsTabLabel,
         children: <AccountTransactionHistory address={account.address} />,
       },
-      {
-        id: accountHeldAssetsTabId,
-        label: accountHeldAssetsTabLabel,
-        children: <AccountAssetsHeld assetsHeld={account.assetsHeld} />,
-      },
-      {
-        id: accountCreatedAssetsTabId,
-        label: accountCreatedAssetsTabLabel,
-        children: <AccountAssetsCreated assetsCreated={account.assetsCreated} />,
-      },
-      {
-        id: accountOptedAssetsTabId,
-        label: accountOptedAssetsTabLabel,
-        children: <AccountAssetsOpted assetsOpted={account.assetsOpted} />,
-      },
-      {
-        id: accountCreatedApplicationsTabId,
-        label: accountCreatedApplicationsTabLabel,
-        children: <AccountApplications applications={account.applicationsCreated} />,
-      },
-      {
-        id: accountOptedApplicationsTabId,
-        label: accountOptedApplicationsTabLabel,
-        children: <AccountApplications applications={account.applicationsOpted} />,
-      },
     ],
-    [
-      account.address,
-      account.applicationsCreated,
-      account.applicationsOpted,
-      account.assetsCreated,
-      account.assetsHeld,
-      account.assetsOpted,
-    ]
+    [account.address]
   )
   return (
     <Tabs defaultValue={accountLiveTransactionsTabId}>

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

@@ -0,0 +1,52 @@
+import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
+import { cn } from '@/features/common/utils'
+import { useMemo } from 'react'
+import { Account } from '../models'
+import {
+  accountCreatedApplicationsTabId,
+  accountOptedApplicationsTabId,
+  accountCreatedApplicationsTabLabel,
+  accountOptedApplicationsTabLabel,
+  accountApplicationLabel,
+} from './labels'
+import { AccountApplications } from './account-applications'
+
+type Props = {
+  account: Account
+}
+
+export function AccountApplicationTabs({ account }: Props) {
+  const tabs = useMemo(
+    () => [
+      {
+        id: accountCreatedApplicationsTabId,
+        label: accountCreatedApplicationsTabLabel,
+        children: <AccountApplications applications={account.applicationsCreated} />,
+      },
+      {
+        id: accountOptedApplicationsTabId,
+        label: accountOptedApplicationsTabLabel,
+        children: <AccountApplications applications={account.applicationsOpted} />,
+      },
+    ],
+    [account.applicationsCreated, account.applicationsOpted]
+  )
+  return (
+    <Tabs defaultValue={accountCreatedApplicationsTabId}>
+      <TabsList aria-label={accountApplicationLabel}>
+        {tabs.map((tab) => (
+          <TabsTrigger key={tab.id} className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-36')} value={tab.id}>
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab) => (
+        <OverflowAutoTabsContent key={tab.id} value={tab.id} className={cn('border-solid border-2 border-border')}>
+          <div className="grid">
+            <div className="overflow-auto p-4">{tab.children}</div>
+          </div>
+        </OverflowAutoTabsContent>
+      ))}
+    </Tabs>
+  )
+}

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

@@ -0,0 +1,61 @@
+import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
+import { cn } from '@/features/common/utils'
+import { useMemo } from 'react'
+import { AccountAssetsHeld } from './account-assets-held'
+import { Account } from '../models'
+import {
+  accountCreatedAssetsTabId,
+  accountHeldAssetsTabId,
+  accountHeldAssetsTabLabel,
+  accountCreatedAssetsTabLabel,
+  accountOptedAssetsTabId,
+  accountOptedAssetsTabLabel,
+  accountAssetLabel,
+} from './labels'
+import { AccountAssetsCreated } from './account-assets-created'
+import { AccountAssetsOpted } from './account-assets-opted'
+
+type Props = {
+  account: Account
+}
+
+export function AccountAssetTabs({ account }: Props) {
+  const tabs = useMemo(
+    () => [
+      {
+        id: accountHeldAssetsTabId,
+        label: accountHeldAssetsTabLabel,
+        children: <AccountAssetsHeld assetsHeld={account.assetsHeld} />,
+      },
+      {
+        id: accountCreatedAssetsTabId,
+        label: accountCreatedAssetsTabLabel,
+        children: <AccountAssetsCreated assetsCreated={account.assetsCreated} />,
+      },
+      {
+        id: accountOptedAssetsTabId,
+        label: accountOptedAssetsTabLabel,
+        children: <AccountAssetsOpted assetsOpted={account.assetsOpted} />,
+      },
+    ],
+    [account.assetsCreated, account.assetsHeld, account.assetsOpted]
+  )
+  return (
+    <Tabs defaultValue={accountHeldAssetsTabId}>
+      <TabsList aria-label={accountAssetLabel}>
+        {tabs.map((tab) => (
+          <TabsTrigger key={tab.id} className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-36')} value={tab.id}>
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab) => (
+        <OverflowAutoTabsContent key={tab.id} value={tab.id} className={cn('border-solid border-2 border-border')}>
+          <div className="grid">
+            <div className="overflow-auto p-4">{tab.children}</div>
+          </div>
+        </OverflowAutoTabsContent>
+      ))}
+    </Tabs>
+  )
+}

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

@@ -3,8 +3,10 @@ import { Account } from '../models'
 import { cn } from '@/features/common/utils'
 import { AccountActivityTabs } from './account-activity-tabs'
 import { AccountInfo } from './account-info'
-import { accountActivityLabel, accountJsonLabel } from './labels'
+import { accountActivityLabel, accountApplicationLabel, accountAssetLabel, accountJsonLabel } from './labels'
 import { JsonView } from '@/features/common/components/json-view'
+import { AccountAssetTabs } from './account-asset-tabs'
+import { AccountApplicationTabs } from './account-application-tabs'
 
 type Props = {
   account: Account
@@ -22,6 +24,24 @@ export function AccountDetails({ account }: Props) {
           </div>
         </CardContent>
       </Card>
+
+      <Card className={cn('p-4')}>
+        <CardContent className={cn('text-sm space-y-2')}>
+          <h1 className={cn('text-2xl text-primary font-bold')}>{accountAssetLabel}</h1>
+          <div className={cn('border-solid border-2 border-border grid')}>
+            <AccountAssetTabs account={account} />
+          </div>
+        </CardContent>
+      </Card>
+      <Card className={cn('p-4')}>
+        <CardContent className={cn('text-sm space-y-2')}>
+          <h1 className={cn('text-2xl text-primary font-bold')}>{accountApplicationLabel}</h1>
+          <div className={cn('border-solid border-2 border-border grid')}>
+            <AccountApplicationTabs account={account} />
+          </div>
+        </CardContent>
+      </Card>
+
       <Card className={cn('p-4')}>
         <CardContent aria-label={accountJsonLabel} className={cn('text-sm space-y-2')}>
           <h1 className={cn('text-2xl text-primary font-bold')}>{accountJsonLabel}</h1>

src/features/accounts/components/labels.ts

@@ -1,13 +1,15 @@
 export const accountJsonLabel = 'Account JSON'
 export const accountActivityLabel = 'Activity'
+export const accountAssetLabel = 'Assets'
+export const accountApplicationLabel = 'Applications'
 
 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 accountHeldAssetsTabLabel = 'Held'
+export const accountCreatedAssetsTabLabel = 'Created'
+export const accountOptedAssetsTabLabel = 'Opted'
+export const accountCreatedApplicationsTabLabel = 'Created'
+export const accountOptedApplicationsTabLabel = 'Opted'
 
 export const accountLiveTransactionsTabId = 'live-transactions'
 export const accountHistoricalTransactionsTabId = 'historical-transactions'

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

@@ -20,6 +20,8 @@ import {
   accountAssetsOptedInLabel,
   accountActivityLabel,
   accountRekeyedToLabel,
+  accountAssetLabel,
+  accountApplicationLabel,
 } from '../components/labels'
 import { assetResultsAtom } from '@/features/assets/data'
 import { assetResultMother } from '@/tests/object-mother/asset-result'
@@ -91,7 +93,15 @@ describe('account-page', () => {
             })
             const activityTabList = component.getByRole('tablist', { name: accountActivityLabel })
             expect(activityTabList).toBeTruthy()
-            expect(activityTabList.children.length).toBe(7)
+            expect(activityTabList.children.length).toBe(2)
+
+            const assetTabList = component.getByRole('tablist', { name: accountAssetLabel })
+            expect(assetTabList).toBeTruthy()
+            expect(assetTabList.children.length).toBe(3)
+
+            const applicationTabList = component.getByRole('tablist', { name: accountApplicationLabel })
+            expect(applicationTabList).toBeTruthy()
+            expect(applicationTabList.children.length).toBe(2)
           })
         }
       )
@@ -136,7 +146,15 @@ describe('account-page', () => {
             })
             const activityTabList = component.getByRole('tablist', { name: accountActivityLabel })
             expect(activityTabList).toBeTruthy()
-            expect(activityTabList.children.length).toBe(7)
+            expect(activityTabList.children.length).toBe(2)
+
+            const assetTabList = component.getByRole('tablist', { name: accountAssetLabel })
+            expect(assetTabList).toBeTruthy()
+            expect(assetTabList.children.length).toBe(3)
+
+            const applicationTabList = component.getByRole('tablist', { name: accountApplicationLabel })
+            expect(applicationTabList).toBeTruthy()
+            expect(applicationTabList.children.length).toBe(2)
           })
         }
       )
@@ -173,7 +191,15 @@ describe('account-page', () => {
             })
             const activityTabList = component.getByRole('tablist', { name: accountActivityLabel })
             expect(activityTabList).toBeTruthy()
-            expect(activityTabList.children.length).toBe(7)
+            expect(activityTabList.children.length).toBe(2)
+
+            const assetTabList = component.getByRole('tablist', { name: accountAssetLabel })
+            expect(assetTabList).toBeTruthy()
+            expect(assetTabList.children.length).toBe(3)
+
+            const applicationTabList = component.getByRole('tablist', { name: accountApplicationLabel })
+            expect(applicationTabList).toBeTruthy()
+            expect(applicationTabList.children.length).toBe(2)
           })
         }
       )