chore: add view models back in

.github/workflows/pr.yaml

@@ -18,5 +18,5 @@ jobs:
       node-version: 20.x
       audit-script: npm run audit
       compile-script: npm run check-types
-      test-script: npm run tests
+      test-script: npm run test
       run-build: false

.github/workflows/release.yaml

@@ -33,7 +33,7 @@ jobs:
       node-version: 20.x
       audit-script: npm run audit
       compile-script: npm run check-types
-      test-script: npm run tests
+      test-script: npm run test
 
   build-website:
     name: Build Website

package.json

@@ -14,9 +14,9 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --ext ts,tsx --fix",
     "preview": "vite preview",
-    "tests": "vitest",
+    "test": "vitest",
     "audit": "better-npm-audit audit",
-    "check-types": "tsc --noEmit",
+    "check-types": "tsc --noEmit && npx --yes madge src/App.tsx --circular",
     "tauri": "tauri"
   },
   "dependencies": {
@@ -34,7 +34,6 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.5.0",
-    "decimal.js": "^10.4.3",
     "jotai": "^2.7.2",
     "jotai-effect": "^0.6.0",
     "lucide-react": "^0.356.0",
@@ -43,6 +42,7 @@
     "react-router-dom": "^6.22.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "tiny-invariant": "^1.3.3",
     "vaul": "^0.9.0"
   },
   "devDependencies": {

src/features/common/components/display-algo.tsx

@@ -1,15 +1,15 @@
-import { algoFormatter } from '@/utils/format'
 import SvgAlgorand from './icons/algorand'
 import { cn } from '../utils'
+import { AlgoAmount } from '@algorandfoundation/algokit-utils/types/amount'
 
 export type Props = {
-  microAlgo: number
+  amount: AlgoAmount
 }
 
-export function DisplayAlgo({ microAlgo }: Props) {
+export function DisplayAlgo({ amount }: Props) {
   return (
     <div className={cn('flex items-center')}>
-      {algoFormatter.asAlgo(microAlgo)}
+      {amount.algos}
       <SvgAlgorand />
     </div>
   )

src/features/transactions/components/payment-transaction.tsx

@@ -6,13 +6,15 @@ import { TransactionInfo } from './transaction-info'
 import { TransactionNote } from './transaction-note'
 import { TransactionJson } from './transaction-json'
 import { useMemo } from 'react'
+import { PaymentTransactionModel } from '../models'
 import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 
 export type Props = {
-  transaction: TransactionResult
+  transaction: PaymentTransactionModel
+  rawTransaction: TransactionResult
 }
 
-export function PaymentTransaction({ transaction }: Props) {
+export function PaymentTransaction({ transaction, rawTransaction }: Props) {
   const transactionCardItems = useMemo(
     () => [
       {
@@ -27,16 +29,16 @@ export function PaymentTransaction({ transaction }: Props) {
         dt: 'Receiver',
         dd: (
           <a href="#" className={cn('text-primary underline')}>
-            {transaction['payment-transaction']!.receiver}
+            {transaction.receiver}
           </a>
         ),
       },
       {
         dt: 'Amount',
-        dd: <DisplayAlgo microAlgo={transaction['payment-transaction']!.amount} />,
+        dd: <DisplayAlgo amount={transaction.amount} />,
       },
     ],
-    [transaction]
+    [transaction.sender, transaction.receiver, transaction.amount]
   )
 
   return (
@@ -57,7 +59,7 @@ export function PaymentTransaction({ transaction }: Props) {
             ))}
           </div>
           <TransactionNote transaction={transaction} />
-          <TransactionJson transaction={transaction} />
+          <TransactionJson transaction={rawTransaction} />
         </CardContent>
       </Card>
     </div>

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

@@ -3,10 +3,10 @@ import { cn } from '@/features/common/utils'
 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'
+import { PaymentTransactionModel } from '../models'
 
 export type Props = {
-  transaction: TransactionResult
+  transaction: PaymentTransactionModel
 }
 
 export function TransactionInfo({ transaction }: Props) {
@@ -18,18 +18,18 @@ export function TransactionInfo({ transaction }: Props) {
       },
       {
         dt: 'Type',
-        dd: transaction['tx-type'],
+        dd: transaction.type,
       },
       {
         dt: 'Timestamp',
         // TODO: check timezone
-        dd: dateFormatter.asLongDateTime(new Date(transaction['round-time']! * 1000)),
+        dd: dateFormatter.asLongDateTime(transaction.roundTime),
       },
       {
         dt: 'Block',
         dd: (
           <a href="#" className={cn('text-primary underline')}>
-            {transaction['confirmed-round']}
+            {transaction.confirmedRound}
           </a>
         ),
       },
@@ -43,10 +43,10 @@ export function TransactionInfo({ transaction }: Props) {
       },
       {
         dt: 'Fee',
-        dd: <DisplayAlgo microAlgo={transaction.fee} />,
+        dd: <DisplayAlgo amount={transaction.fee} />,
       },
     ],
-    [transaction]
+    [transaction.confirmedRound, transaction.fee, transaction.group, transaction.id, transaction.roundTime, transaction.type]
   )
 
   return (

src/features/transactions/components/transaction-note.tsx

@@ -1,16 +1,12 @@
 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 { PaymentTransactionModel } from '../models'
 
 export type Props = {
-  transaction: TransactionResult
+  transaction: PaymentTransactionModel
 }
 
 export function TransactionNote({ transaction }: Props) {
-  const textNote = transaction.note
-  const base64Note = transaction.note
-  const messagePackNote = transaction.note
-
   return (
     <div className={cn('space-y-2')}>
       <h2 className={cn('text-xl font-bold')}>Note</h2>
@@ -27,13 +23,13 @@ export function TransactionNote({ transaction }: Props) {
           </TabsTrigger>
         </TabsList>
         <TabsContent value="text" className={cn('border-solid border-2 border-border h-60 p-4')}>
-          {textNote}
+          {transaction.textNote}
         </TabsContent>
         <TabsContent value="base64" className={cn('border-solid border-2 border-border h-60 p-4')}>
-          {base64Note}
+          {transaction.base64Note}
         </TabsContent>
         <TabsContent value="messagePack" className={cn('border-solid border-2 border-border h-60 p-4')}>
-          {messagePackNote}
+          {transaction.messagePackNote}
         </TabsContent>
       </Tabs>
     </div>

src/features/transactions/components/transaction.tsx

@@ -1,17 +1,41 @@
 import { cn } from '@/features/common/utils'
 import { PaymentTransaction } from './payment-transaction'
 import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
-import { TransactionType } from 'algosdk'
+import { PaymentTransactionModel, TransactionType } from '../models'
+import algosdk from 'algosdk'
+import invariant from 'tiny-invariant'
 
 type Props = {
   transaction: TransactionResult
 }
 
+const asPaymentTransaction = (transaction: TransactionResult): PaymentTransactionModel => {
+  invariant(transaction['confirmed-round'], 'confirmed-round is not set')
+  invariant(transaction['round-time'], 'round-time is not set')
+  invariant(transaction['payment-transaction'], 'payment-transaction is not set')
+
+  // TODO: Handle notes
+  return {
+    id: transaction.id,
+    type: TransactionType.Payment,
+    confirmedRound: transaction['confirmed-round'],
+    roundTime: new Date(transaction['round-time'] * 1000),
+    group: transaction['group'],
+    fee: transaction.fee.microAlgos(),
+    sender: transaction.sender,
+    receiver: transaction['payment-transaction']['receiver'],
+    amount: transaction['payment-transaction']['amount'].microAlgos(),
+    closeAmount: transaction['payment-transaction']['close-amount']?.microAlgos(),
+  } satisfies PaymentTransactionModel
+}
+
 export function Transaction({ transaction }: Props) {
   return (
     <div>
       <h1 className={cn('text-2xl text-primary font-bold')}>Transaction</h1>
-      {transaction['tx-type'] === TransactionType.pay && <PaymentTransaction transaction={transaction} />}
+      {transaction['tx-type'] === algosdk.TransactionType.pay && (
+        <PaymentTransaction transaction={asPaymentTransaction(transaction)} rawTransaction={transaction} />
+      )}
     </div>
   )
 }

src/features/transactions/models/index.ts

@@ -0,0 +1,26 @@
+import { AlgoAmount } from '@algorandfoundation/algokit-utils/types/amount'
+
+export type TransactionModel = {
+  id: string
+  type: TransactionType
+  confirmedRound: number
+  roundTime: Date
+  group?: string
+  fee: AlgoAmount
+  sender: string
+
+  base64Note?: string
+  textNote?: string
+  messagePackNote?: string
+}
+
+export enum TransactionType {
+  Payment = 'Payment',
+}
+
+export type PaymentTransactionModel = TransactionModel & {
+  type: TransactionType.Payment
+  receiver: string
+  amount: AlgoAmount
+  closeAmount?: AlgoAmount
+}

src/utils/format.ts

@@ -1,11 +1,5 @@
-import { MicroAlgo } from '@/features/transactions/models/models'
 import { format as dateFnsFormat } from 'date-fns'
-import Decimal from 'decimal.js'
 
 export const dateFormatter = {
   asLongDateTime: (date: Date) => dateFnsFormat(date, 'EEEE, dd MMMM yyyy HH:mm:ss'),
 }
-
-export const algoFormatter = {
-  asAlgo: (microAlgo: MicroAlgo) => new Decimal(microAlgo).dividedBy(1_000_000).toFixed(),
-}