chore: refactor transaction feature

* chore: refactor - transactions feature folder
* chore: refactor - rename transaction components
* chore: refactor - remove Model from TransactionModel

Author: PatrickDinh

src/features/blocks/components/transactions.tsx

@@ -1,17 +1,17 @@
 import { DisplayAlgo } from '@/features/common/components/display-algo'
 import { ellipseAddress } from '@/utils/ellipse-address'
 import { ellipseId } from '@/utils/ellipse-id'
-import { TransactionModel, TransactionType } from '@/features/transactions/models'
+import { Transaction, TransactionType } from '@/features/transactions/models'
 import { ColumnDef } from '@tanstack/react-table'
 import { DataTable } from '@/features/common/components/data-table'
 import { TransactionLink } from '@/features/transactions/components/transaction-link'
 import { DisplayAssetAmount } from '@/features/common/components/display-asset-amount'
 
 type Props = {
-  transactions: TransactionModel[]
+  transactions: Transaction[]
 }
 
-export const columns: ColumnDef<TransactionModel>[] = [
+export const columns: ColumnDef<Transaction>[] = [
   {
     accessorKey: 'id',
     header: 'Transaction ID',
@@ -42,7 +42,7 @@ export const columns: ColumnDef<TransactionModel>[] = [
     header: 'Amount',
     accessorFn: (transaction) => transaction,
     cell: (c) => {
-      const value = c.getValue<TransactionModel>()
+      const value = c.getValue<Transaction>()
       if (value.type === TransactionType.Payment) {
         return <DisplayAlgo amount={value.amount} />
       }

src/features/blocks/data/block.ts

@@ -3,7 +3,7 @@ import { atom, useAtomValue, useStore } from 'jotai'
 import { indexer } from '@/features/common/data'
 import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { atomEffect } from 'jotai-effect'
-import { fetchTransactionsAtomBuilder, fetchTransactionsModelAtomBuilder, transactionsAtom } from '@/features/transactions/data'
+import { fetchTransactionResultsAtomBuilder, fetchTransactionsAtomBuilder, transactionResultsAtom } from '@/features/transactions/data'
 import { asBlock } from '../mappers'
 import { useMemo } from 'react'
 import { loadable } from 'jotai/utils'
@@ -46,7 +46,7 @@ const getBlockAtomBuilder = (store: JotaiStore, round: Round) => {
         const [blockResult, transactionResults] = await get(fetchBlockResultAtom)
 
         if (transactionResults && transactionResults.length > 0) {
-          set(transactionsAtom, (prev) => {
+          set(transactionResultsAtom, (prev) => {
             transactionResults.forEach((t) => {
               prev.set(t.id, t)
             })
@@ -69,15 +69,15 @@ const getBlockAtomBuilder = (store: JotaiStore, round: Round) => {
     const nextRoundAvailable = get(nextRoundAvailableAtomBuilder(store, round))
     if (cachedBlockResult) {
       const transactions = await get(
-        fetchTransactionsModelAtomBuilder(store, fetchTransactionsAtomBuilder(store, cachedBlockResult.transactionIds))
+        fetchTransactionsAtomBuilder(store, fetchTransactionResultsAtomBuilder(store, cachedBlockResult.transactionIds))
       )
       return asBlock(cachedBlockResult, transactions, nextRoundAvailable)
     }
 
     get(syncEffect)
 
     const [blockResult, transactionResults] = await get(fetchBlockResultAtom)
-    const transactions = await get(fetchTransactionsModelAtomBuilder(store, transactionResults))
+    const transactions = await get(fetchTransactionsAtomBuilder(store, transactionResults))
     return asBlock(blockResult, transactions, nextRoundAvailable)
   })
 }

src/features/blocks/data/latest-blocks.ts

@@ -3,7 +3,7 @@ import { atom, useAtom, useAtomValue, useStore } from 'jotai'
 import { useMemo } from 'react'
 import { isDefined } from '@/utils/is-defined'
 import { asBlockSummary } from '../mappers'
-import { transactionsAtom } from '@/features/transactions/data'
+import { transactionResultsAtom } from '@/features/transactions/data'
 import { asTransactionSummary } from '@/features/transactions/mappers/transaction-mappers'
 import { atomEffect } from 'jotai-effect'
 import { AlgorandSubscriber } from '@algorandfoundation/algokit-subscriber'
@@ -22,15 +22,15 @@ const latestBlockSummariesAtomBuilder = (store: JotaiStore) => {
       return []
     }
     const blocks = store.get(blocksAtom)
-    const transactions = store.get(transactionsAtom)
+    const transactionResults = store.get(transactionResultsAtom)
 
     return Array.from({ length: maxBlocksToDisplay }, (_, i) => {
       const round = syncedRound - i
       const block = blocks.get(round)
 
       if (block) {
         const transactionSummaries = block.transactionIds.map((transactionId) => {
-          return asTransactionSummary(transactions.get(transactionId)!)
+          return asTransactionSummary(transactionResults.get(transactionId)!)
         })
 
         return asBlockSummary(block, transactionSummaries)
@@ -105,7 +105,7 @@ const subscribeToBlocksEffect = atomEffect((get, set) => {
       ] as const
     })
 
-    set(transactionsAtom, (prev) => {
+    set(transactionResultsAtom, (prev) => {
       transactions.forEach((value, key) => {
         prev.set(key, value)
       })

src/features/blocks/mappers/index.ts

@@ -1,8 +1,8 @@
-import { TransactionModel, TransactionSummary, TransactionType } from '@/features/transactions/models'
+import { Transaction, TransactionSummary, TransactionType } from '@/features/transactions/models'
 import { Block, BlockSummary, CommonBlockProperties } from '../models'
 import { BlockResult } from '../data/types'
 
-const asCommonBlock = (block: BlockResult, transactions: Pick<TransactionModel, 'type'>[]): CommonBlockProperties => {
+const asCommonBlock = (block: BlockResult, transactions: Pick<Transaction, 'type'>[]): CommonBlockProperties => {
   return {
     round: block.round,
     timestamp: block.timestamp,
@@ -24,7 +24,7 @@ export const asBlockSummary = (block: BlockResult, transactions: TransactionSumm
   return { ...asCommonBlock(block, transactions), transactions }
 }
 
-export const asBlock = (block: BlockResult, transactions: TransactionModel[], nextRoundAvailable: boolean): Block => {
+export const asBlock = (block: BlockResult, transactions: Transaction[], nextRoundAvailable: boolean): Block => {
   return {
     ...asCommonBlock(block, transactions),
     previousRound: block.round > 0 ? block.round - 1 : undefined,

src/features/blocks/models/index.ts

@@ -1,4 +1,4 @@
-import { TransactionModel, TransactionSummary, TransactionType } from '@/features/transactions/models'
+import { Transaction, TransactionSummary, TransactionType } from '@/features/transactions/models'
 
 export type TransactionsSummary = {
   count: number
@@ -14,7 +14,7 @@ export type CommonBlockProperties = {
 export type Block = CommonBlockProperties & {
   previousRound?: number
   nextRound?: number
-  transactions: TransactionModel[]
+  transactions: Transaction[]
 }
 
 export type BlockSummary = CommonBlockProperties & {

src/features/blocks/pages/block-page.test.tsx

@@ -9,7 +9,7 @@ import { blockResultMother } from '@/tests/object-mother/block-result'
 import { createStore } from 'jotai'
 import { blocksAtom } from '../data/core'
 import { nextRoundLabel, previousRoundLabel, roundLabel, timestampLabel, transactionsLabel } from '../components/block-details'
-import { transactionsAtom } from '@/features/transactions/data'
+import { transactionResultsAtom } from '@/features/transactions/data'
 import { transactionResultMother } from '@/tests/object-mother/transaction-result'
 import { assetResultMother } from '@/tests/object-mother/asset-result'
 import { assetsAtom } from '@/features/assets/data/core'
@@ -93,16 +93,16 @@ describe('block-page', () => {
 
     describe('and has transactions', () => {
       const asset = assetResultMother['mainnet-312769']().build()
-      const transaction1 = transactionResultMother.payment().withGroup('W3pIVuWVJlzmMDGvX8St0W/DPxslnpt6vKV8zoFb6rg=').build()
-      const transaction2 = transactionResultMother.transfer(asset).build()
-      const transactions = [transaction1, transaction2]
-      const block = blockResultMother.blockWithTransactions(transactions).withTimestamp('2024-02-29T06:52:01Z').build()
+      const transactionResult1 = transactionResultMother.payment().withGroup('W3pIVuWVJlzmMDGvX8St0W/DPxslnpt6vKV8zoFb6rg=').build()
+      const transactionResult2 = transactionResultMother.transfer(asset).build()
+      const transactionResults = [transactionResult1, transactionResult2]
+      const block = blockResultMother.blockWithTransactions(transactionResults).withTimestamp('2024-02-29T06:52:01Z').build()
 
       it('should be rendered with the correct data', () => {
         vi.mocked(useParams).mockImplementation(() => ({ round: block.round.toString() }))
         const myStore = createStore()
         myStore.set(blocksAtom, new Map([[block.round, block]]))
-        myStore.set(transactionsAtom, new Map(transactions.map((x) => [x.id, x])))
+        myStore.set(transactionResultsAtom, new Map(transactionResults.map((x) => [x.id, x])))
         myStore.set(assetsAtom, new Map([[asset.index, asset]]))
 
         return executeComponentTest(
@@ -129,22 +129,22 @@ describe('block-page', () => {
               rows: [
                 {
                   cells: [
-                    ellipseId(transaction1.id),
-                    ellipseId(transaction1.group),
-                    ellipseAddress(transaction1.sender),
-                    ellipseAddress(transaction1['payment-transaction']!.receiver),
+                    ellipseId(transactionResult1.id),
+                    ellipseId(transactionResult1.group),
+                    ellipseAddress(transactionResult1.sender),
+                    ellipseAddress(transactionResult1['payment-transaction']!.receiver),
                     'Payment',
-                    (transaction1['payment-transaction']!.amount / 1e6).toString(),
+                    (transactionResult1['payment-transaction']!.amount / 1e6).toString(),
                   ],
                 },
                 {
                   cells: [
-                    ellipseId(transaction2.id),
-                    ellipseId(transaction2.group),
-                    ellipseAddress(transaction2.sender),
-                    ellipseAddress(transaction2['asset-transfer-transaction']!.receiver),
+                    ellipseId(transactionResult2.id),
+                    ellipseId(transactionResult2.group),
+                    ellipseAddress(transactionResult2.sender),
+                    ellipseAddress(transactionResult2['asset-transfer-transaction']!.receiver),
                     'Asset Transfer',
-                    `${(transaction2['asset-transfer-transaction']!.amount as number) / 1e6} USDt`,
+                    `${(transactionResult2['asset-transfer-transaction']!.amount as number) / 1e6} USDt`,
                   ],
                 },
               ],

src/features/explore/pages/explorer-page.test.tsx

@@ -8,7 +8,7 @@ import { latestTransactionsTitle } from '@/features/transactions/components/late
 import { blocksAtom, syncedRoundAtom } from '@/features/blocks/data/core'
 import { blockResultMother } from '@/tests/object-mother/block-result'
 import { transactionResultMother } from '@/tests/object-mother/transaction-result'
-import { transactionsAtom } from '@/features/transactions/data'
+import { transactionResultsAtom } from '@/features/transactions/data'
 import { BlockResult, Round } from '@/features/blocks/data/types'
 import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { TransactionId } from '@/features/transactions/data/types'
@@ -50,12 +50,12 @@ describe('explore-page', () => {
   })
 
   describe('when a small number of blocks have been processed', () => {
-    const transaction1 = transactionResultMother.payment().withGroup('W3pIVuWVJlzmMDGvX8St0W/DPxslnpt6vKV8zoFb6rg=').build()
-    const transactions = [transaction1]
-    const block = blockResultMother.blockWithTransactions(transactions).withTimestamp('2024-02-29T06:52:01Z').build()
+    const transactionResult1 = transactionResultMother.payment().withGroup('W3pIVuWVJlzmMDGvX8St0W/DPxslnpt6vKV8zoFb6rg=').build()
+    const transactionResults = [transactionResult1]
+    const block = blockResultMother.blockWithTransactions(transactionResults).withTimestamp('2024-02-29T06:52:01Z').build()
     const myStore = createStore()
     myStore.set(blocksAtom, new Map([[block.round, block]]))
-    myStore.set(transactionsAtom, new Map(transactions.map((x) => [x.id, x])))
+    myStore.set(transactionResultsAtom, new Map(transactionResults.map((x) => [x.id, x])))
     myStore.set(syncedRoundAtom, block.round)
 
     it('the processed blocks are displayed', () => {
@@ -87,11 +87,11 @@ describe('explore-page', () => {
             return latestTransactions.parentElement!
           })
           const transactionCards = getAllByRole(container, 'link')
-          expect(transactionCards.length).toBe(transactions.length)
+          expect(transactionCards.length).toBe(transactionResults.length)
           const transactionCard1 = transactionCards[0]
-          expect(getByRole(transactionCard1, 'heading').textContent).toBe(ellipseId(transaction1.id))
-          expect(transactionCard1.textContent).toContain(`From:${ellipseAddress(transaction1.sender)}`)
-          expect(transactionCard1.textContent).toContain(`To:${ellipseAddress(transaction1.receiver)}`)
+          expect(getByRole(transactionCard1, 'heading').textContent).toBe(ellipseId(transactionResult1.id))
+          expect(transactionCard1.textContent).toContain(`From:${ellipseAddress(transactionResult1.sender)}`)
+          expect(transactionCard1.textContent).toContain(`To:${ellipseAddress(transactionResult1.receiver)}`)
           expect(transactionCards[0].textContent).toContain('Payment')
         }
       )
@@ -122,7 +122,7 @@ describe('explore-page', () => {
 
     it('only the latest 5 blocks are displayed', () => {
       const myStore = createStore()
-      myStore.set(transactionsAtom, data.transactions)
+      myStore.set(transactionResultsAtom, data.transactions)
       myStore.set(blocksAtom, data.blocks)
       myStore.set(syncedRoundAtom, data.syncedRound)
 
@@ -143,7 +143,7 @@ describe('explore-page', () => {
 
     it('the latest 50 transactions are displayed', () => {
       const myStore = createStore()
-      myStore.set(transactionsAtom, data.transactions)
+      myStore.set(transactionResultsAtom, data.transactions)
       myStore.set(blocksAtom, data.blocks)
       myStore.set(syncedRoundAtom, data.syncedRound)
 

src/features/transactions/components/app-call-transaction.tsx renamed to src/features/transactions/components/app-call-transaction-details.tsx

@@ -1,20 +1,20 @@
 import { cn } from '@/features/common/utils'
 import { TransactionInfo } from './transaction-info'
 import { Card, CardContent } from '@/features/common/components/card'
-import { Logicsig } from './logicsig'
-import { Multisig } from './multisig'
+import { LogicsigDetails } from './logicsig-details'
+import { MultisigDetails } from './multisig-details'
 import { TransactionJson } from './transaction-json'
 import { TransactionNote } from './transaction-note'
-import { AppCallTransactionModel, InnerAppCallTransactionModel, SignatureType } from '../models'
+import { AppCallTransaction, InnerAppCallTransaction, SignatureType } from '../models'
 import { TransactionViewTabs } from './transaction-view-tabs'
 import { AppCallTransactionInfo } from './app-call-transaction-info'
 import { AppCallTransactionLogs } from './app-call-transaction-logs'
 
 type Props = {
-  transaction: AppCallTransactionModel | InnerAppCallTransactionModel
+  transaction: AppCallTransaction | InnerAppCallTransaction
 }
 
-export function AppCallTransaction({ transaction }: Props) {
+export function AppCallTransactionDetails({ transaction }: Props) {
   return (
     <div className={cn('space-y-6 pt-7')}>
       <TransactionInfo transaction={transaction} />
@@ -25,8 +25,8 @@ export function AppCallTransaction({ transaction }: Props) {
           {transaction.note && <TransactionNote note={transaction.note} />}
           {transaction.logs.length > 0 && <AppCallTransactionLogs logs={transaction.logs} />}
           <TransactionJson json={transaction.json} />
-          {transaction.signature?.type === SignatureType.Multi && <Multisig signature={transaction.signature} />}
-          {transaction.signature?.type === SignatureType.Logic && <Logicsig signature={transaction.signature} />}
+          {transaction.signature?.type === SignatureType.Multi && <MultisigDetails signature={transaction.signature} />}
+          {transaction.signature?.type === SignatureType.Logic && <LogicsigDetails signature={transaction.signature} />}
         </CardContent>
       </Card>
     </div>

src/features/transactions/components/app-call-transaction-info.tsx

@@ -1,5 +1,5 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/features/common/components/tabs'
-import { AppCallTransactionModel, GlobalStateDelta, InnerAppCallTransactionModel, LocalStateDelta } from '../models'
+import { AppCallTransaction, GlobalStateDelta, InnerAppCallTransaction, LocalStateDelta } from '../models'
 import { cn } from '@/features/common/utils'
 import { useMemo } from 'react'
 import { ColumnDef } from '@tanstack/react-table'
@@ -9,7 +9,7 @@ import { DescriptionList } from '@/features/common/components/description-list'
 import { ellipseAddress } from '@/utils/ellipse-address'
 
 type Props = {
-  transaction: AppCallTransactionModel | InnerAppCallTransactionModel
+  transaction: AppCallTransaction | InnerAppCallTransaction
 }
 
 const applicationArgsTabId = 'application-args'

src/features/transactions/components/asset-config-transaction.tsx renamed to src/features/transactions/components/asset-config-transaction-details.tsx

@@ -3,17 +3,17 @@ import { cn } from '@/features/common/utils'
 import { TransactionInfo } from './transaction-info'
 import { TransactionNote } from './transaction-note'
 import { TransactionJson } from './transaction-json'
-import { SignatureType, AssetConfigTransactionModel, InnerAssetConfigTransactionModel } from '../models'
-import { Multisig } from './multisig'
-import { Logicsig } from './logicsig'
+import { SignatureType, AssetConfigTransaction, InnerAssetConfigTransaction } from '../models'
+import { MultisigDetails } from './multisig-details'
+import { LogicsigDetails } from './logicsig-details'
 import { TransactionViewTabs } from './transaction-view-tabs'
 import { AssetConfigTransactionInfo } from './asset-config-transaction-info'
 
 type Props = {
-  transaction: AssetConfigTransactionModel | InnerAssetConfigTransactionModel
+  transaction: AssetConfigTransaction | InnerAssetConfigTransaction
 }
 
-export function AssetConfigTransaction({ transaction }: Props) {
+export function AssetConfigTransactionDetails({ transaction }: Props) {
   return (
     <div className={cn('space-y-6 pt-7')}>
       <TransactionInfo transaction={transaction} />
@@ -23,8 +23,8 @@ export function AssetConfigTransaction({ transaction }: Props) {
           <TransactionViewTabs transaction={transaction} />
           {transaction.note && <TransactionNote note={transaction.note} />}
           <TransactionJson json={transaction.json} />
-          {transaction.signature?.type === SignatureType.Multi && <Multisig signature={transaction.signature} />}
-          {transaction.signature?.type === SignatureType.Logic && <Logicsig signature={transaction.signature} />}
+          {transaction.signature?.type === SignatureType.Multi && <MultisigDetails signature={transaction.signature} />}
+          {transaction.signature?.type === SignatureType.Logic && <LogicsigDetails signature={transaction.signature} />}
         </CardContent>
       </Card>
     </div>