feat: support asset freeze transaction (#33)

* feat: show asset freeze transactions
---------

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

Author: PatrickDinh

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

@@ -1,4 +1,6 @@
 import { cn } from '@/features/common/utils'
+import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
+import { Urls } from '@/routes/urls'
 import { ellipseAddress } from '@/utils/ellipse-address'
 import { PropsWithChildren } from 'react'
 
@@ -10,8 +12,12 @@ type Props = PropsWithChildren<{
 
 export function AccountLink({ address, short, className, children }: Props) {
   return (
-    <a href="#" className={cn(!children && 'text-primary underline', className)}>
+    <TemplatedNavLink
+      className={cn(!children && 'text-primary underline', className)}
+      urlTemplate={Urls.Explore.Account.ById}
+      urlParams={{ address }}
+    >
       {children ? children : short ? ellipseAddress(address) : address}
-    </a>
+    </TemplatedNavLink>
   )
 }

src/features/blocks/components/transactions.tsx

@@ -32,6 +32,7 @@ export const columns: ColumnDef<Transaction>[] = [
         return ellipseAddress(transaction.receiver)
       if (transaction.type === TransactionType.ApplicationCall) return transaction.applicationId
       if (transaction.type === TransactionType.AssetConfig) return transaction.assetId
+      if (transaction.type === TransactionType.AssetFreeze) return transaction.assetId
     },
   },
   {

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

@@ -7,6 +7,7 @@ import { DataTable } from '@/features/common/components/data-table'
 import { transactionSenderLabel } from './transaction-view-table'
 import { DescriptionList } from '@/features/common/components/description-list'
 import { ellipseAddress } from '@/utils/ellipse-address'
+import { AccountLink } from '@/features/accounts/components/account-link'
 
 type Props = {
   transaction: AppCallTransaction | InnerAppCallTransaction
@@ -36,11 +37,7 @@ export function AppCallTransactionInfo({ transaction }: Props) {
     () => [
       {
         dt: transactionSenderLabel,
-        dd: (
-          <a href="#" className={cn('text-primary underline')}>
-            {transaction.sender}
-          </a>
-        ),
+        dd: <AccountLink address={transaction.sender}></AccountLink>,
       },
       {
         dt: applicationIdLabel,

src/features/transactions/components/asset-freeze-transaction-details.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent } from '@/features/common/components/card'
+import { cn } from '@/features/common/utils'
+import { TransactionInfo } from './transaction-info'
+import { TransactionNote } from './transaction-note'
+import { TransactionJson } from './transaction-json'
+import { AssetFreezeTransaction, InnerAssetFreezeTransaction, SignatureType } from '../models'
+import { MultisigDetails } from './multisig-details'
+import { LogicsigDetails } from './logicsig-details'
+import { AssetFreezeTransactionInfo } from './asset-freeze-transaction-info'
+import { TransactionViewTabs } from './transaction-view-tabs'
+
+type AssetFreezeTransactionProps = {
+  transaction: AssetFreezeTransaction | InnerAssetFreezeTransaction
+}
+
+export function AssetFreezeTransactionDetails({ transaction }: AssetFreezeTransactionProps) {
+  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')}>
+          <AssetFreezeTransactionInfo transaction={transaction} />
+          <TransactionViewTabs transaction={transaction} />
+          {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/asset-freeze-transaction-info.tsx

@@ -0,0 +1,52 @@
+import { cn } from '@/features/common/utils'
+import { useMemo } from 'react'
+import { AssetFreezeTransaction, InnerAssetFreezeTransaction } from '../models'
+import { DescriptionList } from '@/features/common/components/description-list'
+import { transactionSenderLabel } from './transaction-view-table'
+import { AccountLink } from '@/features/accounts/components/account-link'
+
+type Props = {
+  transaction: AssetFreezeTransaction | InnerAssetFreezeTransaction
+}
+
+export const assetLabel = 'Asset'
+export const assetFreezeAddressLabel = 'Freeze Address'
+export const assetFreezeStatusLabel = 'Freeze Status'
+
+export function AssetFreezeTransactionInfo({ transaction }: Props) {
+  const items = useMemo(
+    () => [
+      {
+        dt: transactionSenderLabel,
+        dd: <AccountLink address={transaction.sender}></AccountLink>,
+      },
+      {
+        dt: assetLabel,
+        dd: (
+          <a href="#" className={cn('text-primary underline')}>
+            {transaction.assetId}
+            {`${transaction.assetName ? `(${transaction.assetName})` : ''}`}
+          </a>
+        ),
+      },
+      {
+        dt: assetFreezeAddressLabel,
+        dd: <AccountLink address={transaction.address}></AccountLink>,
+      },
+      {
+        dt: assetFreezeStatusLabel,
+        dd: transaction.freezeStatus,
+      },
+    ],
+    [transaction.address, transaction.assetId, transaction.assetName, transaction.freezeStatus, transaction.sender]
+  )
+
+  return (
+    <div className={cn('space-y-2')}>
+      <div className={cn('flex items-center justify-between')}>
+        <h1 className={cn('text-2xl text-primary font-bold')}>Asset Freeze</h1>
+      </div>
+      <DescriptionList items={items} />
+    </div>
+  )
+}

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

@@ -4,6 +4,7 @@ import { AssetTransferTransaction, AssetTransferTransactionSubType, InnerAssetTr
 import { DescriptionList } from '@/features/common/components/description-list'
 import { transactionSenderLabel, transactionReceiverLabel, transactionAmountLabel } from './transaction-view-table'
 import { DisplayAssetAmount } from '@/features/common/components/display-asset-amount'
+import { AccountLink } from '@/features/accounts/components/account-link'
 
 type Props = {
   transaction: AssetTransferTransaction | InnerAssetTransferTransaction
@@ -19,11 +20,7 @@ export function AssetTransferTransactionInfo({ transaction }: Props) {
     () => [
       {
         dt: transactionSenderLabel,
-        dd: (
-          <a href="#" className={cn('text-primary underline')}>
-            {transaction.sender}
-          </a>
-        ),
+        dd: <AccountLink address={transaction.sender}></AccountLink>,
       },
       {
         dt: transactionReceiverLabel,

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

@@ -4,6 +4,7 @@ import { useMemo } from 'react'
 import { InnerPaymentTransaction, PaymentTransaction } from '../models'
 import { transactionAmountLabel, transactionReceiverLabel, transactionSenderLabel } from './transaction-view-table'
 import { DescriptionList } from '@/features/common/components/description-list'
+import { AccountLink } from '@/features/accounts/components/account-link'
 
 type Props = {
   transaction: PaymentTransaction | InnerPaymentTransaction
@@ -17,11 +18,7 @@ export function PaymentTransactionInfo({ transaction }: Props) {
     () => [
       {
         dt: transactionSenderLabel,
-        dd: (
-          <a href="#" className={cn('text-primary underline')}>
-            {transaction.sender}
-          </a>
-        ),
+        dd: <AccountLink address={transaction.sender}></AccountLink>,
       },
       {
         dt: transactionReceiverLabel,

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

@@ -3,6 +3,7 @@ import { AssetTranserTransactionDetails } from './asset-transfer-transaction-det
 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'
 
 type Props = {
   transaction: Transaction | InnerTransaction
@@ -18,6 +19,8 @@ export function TransactionDetails({ transaction }: Props) {
       return <AppCallTransactionDetails transaction={transaction} />
     case TransactionType.AssetConfig:
       return <AssetConfigTransactionDetails transaction={transaction} />
+    case TransactionType.AssetFreeze:
+      return <AssetFreezeTransactionDetails transaction={transaction} />
     default:
       return <></>
   }

src/features/transactions/components/transaction-view-table.tsx

@@ -56,6 +56,7 @@ export const tableColumns: ColumnDef<FlattenedTransaction>[] = [
       if (transaction.type === TransactionType.Payment || transaction.type === TransactionType.AssetTransfer)
         return ellipseAddress(transaction.receiver)
       if (transaction.type === TransactionType.ApplicationCall) return transaction.applicationId
+      if (transaction.type === TransactionType.AssetConfig || transaction.type === TransactionType.AssetFreeze) return transaction.assetId
     },
   },
   {

src/features/transactions/components/transaction-view-visual.tsx

@@ -9,9 +9,11 @@ import { useMemo } from 'react'
 import {
   AppCallTransaction,
   AssetConfigTransaction,
+  AssetFreezeTransaction,
   AssetTransferTransaction,
   InnerAppCallTransaction,
   InnerAssetConfigTransaction,
+  InnerAssetFreezeTransaction,
   InnerAssetTransferTransaction,
   InnerPaymentTransaction,
   InnerTransaction,
@@ -29,6 +31,7 @@ import { transactionAmountLabel, transactionReceiverLabel, transactionSenderLabe
 import { DisplayAssetAmount } from '@/features/common/components/display-asset-amount'
 import { InnerTransactionLink } from './inner-transaction-link'
 import { assetIdLabel } from './asset-config-transaction-info'
+import { assetFreezeAddressLabel, assetFreezeStatusLabel } from './asset-freeze-transaction-info'
 
 const graphConfig = {
   rowHeight: 40,
@@ -180,6 +183,7 @@ const DisplayArrow = fixedForwardRef(
           )}
           {transaction.type === TransactionType.ApplicationCall && <>App Call</>}
           {transaction.type === TransactionType.AssetConfig && <>Asset Config</>}
+          {transaction.type === TransactionType.AssetFreeze && <>Asset Freeze</>}
         </div>
 
         <SvgCircle width={graphConfig.circleDimension} height={graphConfig.circleDimension}></SvgCircle>
@@ -370,6 +374,44 @@ function AssetConfigTransactionToolTipContent({ transaction }: { transaction: As
   )
 }
 
+function AssetFreezeTransactionToolTipContent({ transaction }: { transaction: AssetFreezeTransaction | InnerAssetFreezeTransaction }) {
+  const items = useMemo(
+    () => [
+      {
+        dt: transactionIdLabel,
+        dd: transaction.id,
+      },
+      {
+        dt: transactionTypeLabel,
+        dd: TransactionType.AssetFreeze,
+      },
+      {
+        dt: transactionSenderLabel,
+        dd: transaction.sender,
+      },
+      {
+        dt: assetIdLabel,
+        dd: transaction.assetId,
+      },
+      {
+        dt: assetFreezeAddressLabel,
+        dd: transaction.address,
+      },
+      {
+        dt: assetFreezeStatusLabel,
+        dd: transaction.freezeStatus,
+      },
+    ],
+    [transaction.address, transaction.assetId, transaction.freezeStatus, transaction.id, transaction.sender]
+  )
+
+  return (
+    <div className={cn('p-4')}>
+      <DescriptionList items={items} />
+    </div>
+  )
+}
+
 type TransactionRowProps = {
   transaction: Transaction | InnerTransaction
   hasParent?: boolean
@@ -421,6 +463,7 @@ function TransactionRow({
                 {transaction.type === TransactionType.AssetTransfer && <AssetTransferTransactionToolTipContent transaction={transaction} />}
                 {transaction.type === TransactionType.ApplicationCall && <AppCallTransactionToolTipContent transaction={transaction} />}
                 {transaction.type === TransactionType.AssetConfig && <AssetConfigTransactionToolTipContent transaction={transaction} />}
+                {transaction.type === TransactionType.AssetFreeze && <AssetFreezeTransactionToolTipContent transaction={transaction} />}
               </TooltipContent>
             </Tooltip>
           )
@@ -457,6 +500,10 @@ function calcArrow(transaction: Transaction | InnerTransaction, collaborators: C
       return collaborators.findIndex((a) => transaction.assetId.toString() === a.id)
     }
 
+    if (transaction.type === TransactionType.AssetFreeze) {
+      return collaborators.findIndex((a) => transaction.assetId.toString() === a.id)
+    }
+
     throw new Error('Not supported transaction type')
   }
 
@@ -576,6 +623,12 @@ const getTransactionCollaborators = (transaction: Transaction | InnerTransaction
       id: transaction.assetId.toString(),
     })
   }
+  if (transaction.type === TransactionType.AssetFreeze) {
+    collaborators.push({
+      type: 'Asset',
+      id: transaction.assetId.toString(),
+    })
+  }
   return collaborators
 }