-
Transfer
+ Payment
{transactionCardItems.map((item, index) => (
diff --git a/src/features/transactions/components/transaction-info.tsx b/src/features/transactions/components/transaction-info.tsx
index b7a3ba8fc..93220ad7b 100644
--- a/src/features/transactions/components/transaction-info.tsx
+++ b/src/features/transactions/components/transaction-info.tsx
@@ -1,12 +1,12 @@
import { Card, CardContent } from '@/features/common/components/card'
import { cn } from '@/features/common/utils'
-import { TransactionModel } from '../models/models'
import { dateFormatter } from '@/utils/format'
import { DisplayAlgo } from '@/features/common/components/display-algo'
import { useMemo } from 'react'
+import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
export type Props = {
- transaction: TransactionModel
+ transaction: TransactionResult
}
export function TransactionInfo({ transaction }: Props) {
@@ -18,18 +18,18 @@ export function TransactionInfo({ transaction }: Props) {
},
{
dt: 'Type',
- dd: transaction.type,
+ dd: transaction['tx-type'],
},
{
dt: 'Timestamp',
// TODO: check timezone
- dd: dateFormatter.asLongDateTime(transaction.roundTime),
+ dd: dateFormatter.asLongDateTime(new Date(transaction['round-time']! * 1000)),
},
{
dt: 'Block',
dd: (
- {transaction.confirmedRound}
+ {transaction['confirmed-round']}
),
},
@@ -46,7 +46,7 @@ export function TransactionInfo({ transaction }: Props) {
dd:
,
},
],
- [transaction.confirmedRound, transaction.fee, transaction.group, transaction.id, transaction.roundTime, transaction.type]
+ [transaction]
)
return (
diff --git a/src/features/transactions/components/transaction-json.tsx b/src/features/transactions/components/transaction-json.tsx
index 65209e778..b092ff344 100644
--- a/src/features/transactions/components/transaction-json.tsx
+++ b/src/features/transactions/components/transaction-json.tsx
@@ -1,8 +1,8 @@
import { cn } from '@/features/common/utils'
-import { TransactionModel } from '../models/models'
+import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
export type Props = {
- transaction: TransactionModel
+ transaction: TransactionResult
}
export function TransactionJson({ transaction }: Props) {
@@ -10,7 +10,7 @@ export function TransactionJson({ transaction }: Props) {
Transction JSON
-
{JSON.stringify(JSON.parse(transaction.json), null, 4)}
+
{JSON.stringify(transaction, null, 4)}
)
diff --git a/src/features/transactions/components/transaction-note.tsx b/src/features/transactions/components/transaction-note.tsx
index 777d0ac3b..b6ca1052f 100644
--- a/src/features/transactions/components/transaction-note.tsx
+++ b/src/features/transactions/components/transaction-note.tsx
@@ -1,12 +1,16 @@
import { cn } from '@/features/common/utils'
+import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@radix-ui/react-tabs'
-import { TransactionModel } from '../models/models'
export type Props = {
- transaction: TransactionModel
+ transaction: TransactionResult
}
export function TransactionNote({ transaction }: Props) {
+ const textNote = transaction.note
+ const base64Note = transaction.note
+ const messagePackNote = transaction.note
+
return (
Note
@@ -23,13 +27,13 @@ export function TransactionNote({ transaction }: Props) {
- {transaction.textNote}
+ {textNote}
- {transaction.base64Note}
+ {base64Note}
- {transaction.messagePackNote}
+ {messagePackNote}
diff --git a/src/features/transactions/components/transaction.tsx b/src/features/transactions/components/transaction.tsx
index c7eea8dfd..303c405b9 100644
--- a/src/features/transactions/components/transaction.tsx
+++ b/src/features/transactions/components/transaction.tsx
@@ -1,16 +1,17 @@
import { cn } from '@/features/common/utils'
-import { PaymentTransactionModel, TransactionType } from '../models/models'
import { PaymentTransaction } from './payment-transaction'
+import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { TransactionType } from 'algosdk'
type Props = {
- transaction: PaymentTransactionModel
+ transaction: TransactionResult
}
export function Transaction({ transaction }: Props) {
return (
Transaction
- {transaction.type === TransactionType.Payment &&
}
+ {transaction['tx-type'] === TransactionType.pay &&
}
)
}
diff --git a/src/features/transactions/data.ts b/src/features/transactions/data.ts
new file mode 100644
index 000000000..816c3da27
--- /dev/null
+++ b/src/features/transactions/data.ts
@@ -0,0 +1,56 @@
+import { atom, useAtomValue, getDefaultStore } from 'jotai'
+import * as algokit from '@algorandfoundation/algokit-utils'
+import { useMemo } from 'react'
+import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { atomEffect } from 'jotai-effect'
+import { loadable } from 'jotai/utils'
+
+// TODO: Move this elsewhere and make it configurable once we start using it more
+const indexer = algokit.getAlgoIndexerClient({
+ server: 'https://testnet-idx.algonode.cloud/',
+ port: 443,
+})
+
+// TODO: Size should be capped at some limit, so memory usage doesn't grow indefinitely
+export const transactionsAtom = atom
([])
+
+const useTransactionAtom = (transactionId: string) => {
+ return useMemo(() => {
+ const syncEffect = atomEffect((get, set) => {
+ ;(async () => {
+ try {
+ const transaction = await get(transactionAtom)
+ set(transactionsAtom, (prev) => {
+ return prev.concat(transaction)
+ })
+ } catch (e) {
+ // Ignore any errors as there is nothing to sync
+ }
+ })()
+ })
+ const store = getDefaultStore()
+ const transactionAtom = atom((get) => {
+ // store.get prevents the atom from being subscribed to changes in transactionsAtom
+ const transactions = store.get(transactionsAtom)
+ const transaction = transactions.find((t) => t.id === transactionId)
+ if (transaction) {
+ return transaction
+ }
+
+ get(syncEffect)
+
+ return algokit.lookupTransactionById(transactionId, indexer).then((result) => {
+ return result.transaction
+ })
+ })
+ return transactionAtom
+ }, [transactionId])
+}
+
+export const useLoadableTransaction = (transactionId: string) => {
+ return useAtomValue(
+ // Unfortunately we can't leverage Suspense here, as react doesn't support async useMemo inside the Suspense component
+ // https://github.com/facebook/react/issues/20877
+ loadable(useTransactionAtom(transactionId))
+ )
+}
diff --git a/src/features/transactions/models/models.ts b/src/features/transactions/models/models.ts
deleted file mode 100644
index 1acad7d09..000000000
--- a/src/features/transactions/models/models.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export type TransactionModel = {
- id: string
- type: TransactionType
- confirmedRound: number
- roundTime: Date
- group: string
- fee: MicroAlgo
- sender: string
-
- base64Note: string
- textNote: string
- messagePackNote: string
-
- json: string
-}
-
-export enum TransactionType {
- Payment = 'Payment',
-}
-
-export type PaymentTransactionModel = TransactionModel & {
- type: TransactionType.Payment
- receiver: string
- amount: MicroAlgo
- closeAmount: MicroAlgo
-}
-
-export type MicroAlgo = number
diff --git a/src/features/transactions/pages/transaction-page.tsx b/src/features/transactions/pages/transaction-page.tsx
index 49f0d9182..2ccdc7ed5 100644
--- a/src/features/transactions/pages/transaction-page.tsx
+++ b/src/features/transactions/pages/transaction-page.tsx
@@ -1,30 +1,26 @@
import { UrlParams } from '../../../routes/urls'
import { useRequiredParam } from '../../common/hooks/use-required-param'
import { Transaction } from '../components/transaction'
-import { PaymentTransactionModel, TransactionType } from '../models/models'
+import { useLoadableTransaction } from '../data'
export function TransactionPage() {
const { transactionId } = useRequiredParam(UrlParams.TransactionId)
- const sampleTransaction = getSampleTransaction(transactionId)
+ const loadableTransaction = useLoadableTransaction(transactionId)
- return
-}
+ if (loadableTransaction.state === 'hasData') {
+ return
+ } else if (loadableTransaction.state === 'loading') {
+ return Loading....
+ }
-const getSampleTransaction = (transactionId: string): PaymentTransactionModel => {
- return {
- id: transactionId,
- type: TransactionType.Payment,
- confirmedRound: 36570178,
- roundTime: new Date(1709189521),
- group: 'a7Qnfai3DEKS8JI5ZPl149O9P7RztrBqRvBwRebx/Ao=',
- fee: 1000,
- sender: 'IVCEEIH2Q32DZNRTS5XFVEFFAQGERNZHHQT6S4UPY7ORJMHIQDSTX7YM4E',
- amount: 2_456_000,
- closeAmount: 0,
- receiver: '3P3CHL4M5JTDJKEL3ARLUZRXY23BWWPX6SZDC2NIBALL3SKE7JBIFOVOAY',
- base64Note: 'base64Note',
- textNote: 'textNote',
- messagePackNote: 'messagePackNote',
- json: `{"close-rewards":0,"closing-amount":0,"confirmed-round":68203,"fee":1000,"first-valid":68200,"genesis-hash":"wGHE2Pwdvd7S12BL5FaOP20EGYesN73ktiC1qzkkit8=","genesis-id":"mainnet-v1.0","id":"LNJH2Q2BYMV7KMMFMEEUCKIW6C3HPBOL4ARZBPPE2OBVVDPNVN6A","intra-round-offset":0,"last-valid":69200,"payment-transaction":{"amount":1000000000,"close-amount":0,"receiver":"3P3CHL4M5JTDJKEL3ARLUZRXY23BWWPX6SZDC2NIBALL3SKE7JBIFOVOAY"},"receiver-rewards":0,"round-time":1560638479,"sender":"IVCEEIH2Q32DZNRTS5XFVEFFAQGERNZHHQT6S4UPY7ORJMHIQDSTX7YM4E","sender-rewards":0,"signature":{"multisig":{"subsignature":[{"public-key":"fDPiywtmtrpA2WOY+Mx9y6etNBCij1VKwZmGWW4PbKk="},{"public-key":"RjQ91+zvYumrPm9UOEMN+GnlHW+0gliRCCV2b6KOlwk=","signature":"OZIfWu/UeOM4TqNTM2zZopJ3qoc6OHsHktVR4HSrWMUSWofIAtPgKf8Uqxcjkmu7E0k0O7spKtvqIEt53qTxAA=="},{"public-key":"hYkIN+Iyt2675q+XuYwoAzwR8B0P17WTUFGYn456E4o=","signature":"kJ9eRUVplsmjPrtprSsZO/n5lG8Ff9YWhWKk3LQgtez9jGJ1EvQmxxh3nOWldYSkaDW+zUTGKHqDcsLleYqkAA=="},{"public-key":"5ChQFEXiHWTeXoJCRymNn8rmEAJAxpaigu4wIgcaODU=","signature":"tjnxB0mpxOlTEbrJpdq888yyvuKRL2WJith8TXpVJO9fN8QnDCDAEsP2yGPiSlfQYQaqzKLe60DSIYll7nZeAg=="},{"public-key":"ETnffVmxyVfJtVgCWFuStLsPJna9G1SHA1yJrfIo6RU="},{"public-key":"k5F6WQJGyeiPHaN7fvmnBXz6YNq4NQ6BguE7yUmRWkI=","signature":"2RlNv5MxP528Zwh5lGSaY/vsCl50qwoxZ1/Blcu+mXLlG0Sr+3J44qRSjhbDrkwsJL5YHFcdv3uy3NSAd5s3AQ=="}],"threshold":4,"version":1}},"tx-type":"pay"}`,
+ if (
+ loadableTransaction.error &&
+ typeof loadableTransaction.error === 'object' &&
+ 'status' in loadableTransaction.error &&
+ loadableTransaction.error.status === 404
+ ) {
+ return Error: Transaction not found
}
+
+ return Error: Transaction failed to load
}