feat: support state proof transactions (#34)

* feat: support state proof transaction
---------

Co-authored-by: Neil Campbell <[email protected]>

Author: PatrickDinh

src/features/common/components/description-list.tsx

@@ -1,7 +1,7 @@
 import { cn } from '../utils'
 
 type Props = {
-  items: { dt: string; dd: string | number | JSX.Element[] | JSX.Element }[]
+  items: { dt: string; dd: string | number | JSX.Element[] | JSX.Element | undefined }[]
 }
 
 export function DescriptionList({ items }: Props) {

src/features/transactions/components/latest-transactions.tsx

@@ -28,7 +28,10 @@ export function LatestTransactions() {
                       <DescriptionList
                         items={[
                           { dt: 'From:', dd: ellipseAddress(transaction.from) },
-                          { dt: 'To:', dd: typeof transaction.to === 'string' ? ellipseAddress(transaction.to) : transaction.to },
+                          {
+                            dt: 'To:',
+                            dd: transaction.to && typeof transaction.to === 'string' ? ellipseAddress(transaction.to) : transaction.to,
+                          },
                         ]}
                       />
                     </div>

src/features/transactions/components/state-proof-transaction-details.tsx

@@ -0,0 +1,31 @@
+import { Card, CardContent } from '@/features/common/components/card'
+import { SignatureType, StateProofTransaction } from '../models'
+import { TransactionInfo } from './transaction-info'
+import { cn } from '@/features/common/utils'
+import { LogicsigDetails } from './logicsig-details'
+import { MultisigDetails } from './multisig-details'
+import { TransactionJson } from './transaction-json'
+import { TransactionNote } from './transaction-note'
+
+type Props = {
+  transaction: StateProofTransaction
+}
+
+export function StateProofTransactionDetails({ transaction }: Props) {
+  return (
+    <div className={cn('space-y-6 pt-7')}>
+      <TransactionInfo transaction={transaction} />
+      <Card className={cn('p-4')}>
+        <CardContent className={cn('text-sm space-y-4')}>
+          <div className={cn('flex items-center justify-between')}>
+            <h1 className={cn('text-2xl text-primary font-bold')}>State Proof</h1>
+          </div>
+          {transaction.note && <TransactionNote note={transaction.note} />}
+          <TransactionJson json={transaction.json} />
+          {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/transaction-details.tsx

@@ -4,6 +4,7 @@ import { InnerTransaction, Transaction, TransactionType } from '../models'
 import { AppCallTransactionDetails } from './app-call-transaction-details'
 import { AssetConfigTransactionDetails } from './asset-config-transaction-details'
 import { AssetFreezeTransactionDetails } from './asset-freeze-transaction-details'
+import { StateProofTransactionDetails } from './state-proof-transaction-details'
 
 type Props = {
   transaction: Transaction | InnerTransaction
@@ -21,6 +22,8 @@ export function TransactionDetails({ transaction }: Props) {
       return <AssetConfigTransactionDetails transaction={transaction} />
     case TransactionType.AssetFreeze:
       return <AssetFreezeTransactionDetails transaction={transaction} />
+    case TransactionType.StateProof:
+      return <StateProofTransactionDetails transaction={transaction} />
     default:
       return <></>
   }

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

@@ -7,7 +7,7 @@ export type Props = {
 export function TransactionJson({ json }: Props) {
   return (
     <div className={cn('space-y-2')}>
-      <h2 className={cn('text-xl font-bold')}>Transction JSON</h2>
+      <h2 className={cn('text-xl font-bold')}>Transaction JSON</h2>
       <div className={cn('border-solid border-2 border-border h-96 grid')}>
         <pre className={cn('overflow-scroll p-4')}>{json}</pre>
       </div>

src/features/transactions/mappers/state-proof-transaction-mappers.ts

@@ -0,0 +1,11 @@
+import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { StateProofTransaction, TransactionType } from '../models'
+import { mapCommonTransactionProperties } from './transaction-common-properties-mappers'
+
+export const asStateProofTransaction = (transactionResult: TransactionResult): StateProofTransaction => {
+  return {
+    id: transactionResult.id,
+    type: TransactionType.StateProof,
+    ...mapCommonTransactionProperties(transactionResult),
+  }
+}

src/features/transactions/mappers/transaction-mappers.ts

@@ -11,6 +11,7 @@ import { Asset } from '@/features/assets/models'
 import { getAssetIdsForTransaction } from '../utils/get-asset-ids-for-transaction'
 import { asAssetConfigTransaction } from './asset-config-transaction-mappers'
 import { asAssetFreezeTransaction } from './asset-freeze-transaction-mappers'
+import { asStateProofTransaction } from './state-proof-transaction-mappers'
 
 export const asTransaction = async (transactionResult: TransactionResult, assetResolver: (assetId: number) => Promise<Asset> | Asset) => {
   switch (transactionResult['tx-type']) {
@@ -38,6 +39,10 @@ export const asTransaction = async (transactionResult: TransactionResult, assetR
       const asset = await assetResolver(assetId)
       return asAssetFreezeTransaction(transactionResult, asset)
     }
+    case algosdk.TransactionType.stpf: {
+      invariant(transactionResult['state-proof-transaction'], 'state-proof-transaction is not set')
+      return asStateProofTransaction(transactionResult)
+    }
     default:
       // TODO: Once we support all transaction types, we should throw an error instead
       // throw new Error(`${transaction['tx-type']} is not supported`)
@@ -91,6 +96,13 @@ export const asTransactionSummary = (transactionResult: TransactionResult): Tran
         to: transactionResult['asset-freeze-transaction']['asset-id'],
       }
     }
+    case algosdk.TransactionType.stpf: {
+      invariant(transactionResult['state-proof-transaction'], 'state-proof-transaction is not set')
+      return {
+        ...common,
+        type: TransactionType.StateProof,
+      }
+    }
     default:
       // TODO: Once we support all transaction types, we should throw an error instead
       // throw new Error(`${transaction['tx-type']} is not supported`)

src/features/transactions/models/index.ts

@@ -21,6 +21,7 @@ export enum TransactionType {
   ApplicationCall = 'Application Call',
   AssetConfig = 'Asset Config',
   AssetFreeze = 'Asset Freeze',
+  StateProof = 'State Proof',
 }
 
 export enum AssetTransferTransactionSubType {
@@ -71,11 +72,12 @@ export type Transaction =
   | AppCallTransaction
   | AssetConfigTransaction
   | AssetFreezeTransaction
+  | StateProofTransaction
 
 export type TransactionSummary = Pick<CommonTransactionProperties, 'type'> & {
   id: string
   from: Address
-  to: Address | number
+  to?: Address | number
 }
 
 export enum SignatureType {
@@ -207,3 +209,9 @@ export enum AssetFreezeStatus {
   Frozen = 'Frozen',
   Unfrozen = 'Unfrozen',
 }
+
+export type StateProofTransaction = CommonTransactionProperties & {
+  type: TransactionType.StateProof
+  id: string
+  subType?: undefined
+}

src/features/transactions/pages/transaction-page.test.tsx

@@ -1027,4 +1027,38 @@ describe('transaction-page', () => {
       )
     })
   })
+
+  describe('when rendering a state proof transaction', () => {
+    const transaction = transactionResultMother
+      .stateProof()
+      ['withRound-time'](1696316292)
+      ['withConfirmed-round'](32563331)
+      .withFee(0)
+      .build()
+
+    it('should be rendered correctly', () => {
+      vi.mocked(useParams).mockImplementation(() => ({ transactionId: transaction.id }))
+      const myStore = createStore()
+      myStore.set(transactionResultsAtom, new Map([[transaction.id, transaction]]))
+      return executeComponentTest(
+        () => {
+          return render(<TransactionPage />, undefined, myStore)
+        },
+        async (component) => {
+          await waitFor(() => {
+            descriptionListAssertion({
+              container: component.container,
+              items: [
+                { term: transactionIdLabel, description: transaction.id },
+                { term: transactionTypeLabel, description: 'State Proof' },
+                { term: transactionTimestampLabel, description: 'Tue, 03 October 2023 06:58:12' },
+                { term: transactionBlockLabel, description: '32563331' },
+                { term: transactionFeeLabel, description: '0' },
+              ],
+            })
+          })
+        }
+      )
+    })
+  })
 })

src/tests/builders/transaction-result-builder.ts

@@ -7,7 +7,12 @@ import {
   randomDateBetween,
   randomNumberBetween,
 } from '@makerx/ts-dossier'
-import { ApplicationTransactionResult, AssetResult, TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import {
+  ApplicationTransactionResult,
+  AssetResult,
+  StateProofTransactionResult,
+  TransactionResult,
+} from '@algorandfoundation/algokit-utils/types/indexer'
 import algosdk from 'algosdk'
 
 export class TransactionResultBuilder extends DataBuilder<TransactionResult> {
@@ -59,6 +64,13 @@ export class TransactionResultBuilder extends DataBuilder<TransactionResult> {
     } as ApplicationTransactionResult
     return this
   }
+
+  public stateProofTransaction() {
+    this.thing['tx-type'] = algosdk.TransactionType.stpf
+    // HACK: do this because the type StateProofTransactionResult is very big
+    this.thing['state-proof-transaction'] = {} as StateProofTransactionResult
+    return this
+  }
 }
 
 export const transactionResultBuilder = dossierProxy<TransactionResultBuilder, TransactionResult>(TransactionResultBuilder)