feat: display transaction note (#14)

* feat: display transaction notes

Author: neilcampbell

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

@@ -85,7 +85,7 @@ export function PaymentTransaction({ transaction, rawTransaction }: PaymentTrans
               <TransactionViewTable transaction={transaction} />
             </TabsContent>
           </Tabs>
-          <TransactionNote transaction={transaction} />
+          {transaction.note && <TransactionNote note={transaction.note} />}
           <TransactionJson transaction={rawTransaction} />
           {transaction.signature?.type === SignatureType.Multi && <Multisig signature={transaction.signature} />}
           {transaction.signature?.type === SignatureType.Logic && <Logicsig signature={transaction.signature} />}

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

@@ -1,36 +1,112 @@
 import { cn } from '@/features/common/utils'
+import { Arc2TransactionNote } from '@algorandfoundation/algokit-utils/types/transaction'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@radix-ui/react-tabs'
-import { PaymentTransactionModel } from '../models'
+import { useMemo } from 'react'
+import { Buffer } from 'buffer'
+import { DescriptionList } from '@/features/common/components/description-list'
 
-export type Props = {
-  transaction: PaymentTransactionModel
+type TransactionNoteProps = {
+  note: string
 }
 
-export function TransactionNote({ transaction }: Props) {
+function parseJson(maybeJson: string) {
+  try {
+    const json = JSON.parse(maybeJson)
+    if (json && typeof json === 'object') {
+      return json
+    }
+  } catch (e) {
+    // ignore
+  }
+}
+
+// Based on the ARC-2 spec https://github.com/algorandfoundation/ARCs/blob/main/ARCs/arc-0002.md#specification
+const arc2Regex = /^([a-zA-Z0-9][a-zA-Z0-9_/@.-]{4,31}):([mjbu]{1})(.*)$/
+function parseArc2(maybeArc2: string) {
+  const result = maybeArc2.match(arc2Regex)
+  if (result && result.length === 4) {
+    return {
+      dAppName: result[1],
+      format: result[2] as 'm' | 'b' | 'u' | 'j',
+      data: result[3],
+    } satisfies Arc2TransactionNote
+  }
+}
+
+const base64NoteTabId = 'base64'
+const textNoteTabId = 'text'
+const jsonNoteTabId = 'json'
+const arc2NoteTabId = 'arc2'
+type TabId = typeof base64NoteTabId | typeof textNoteTabId | typeof jsonNoteTabId | typeof arc2NoteTabId
+export const noteLabel = 'View Note Details'
+export const base64NoteTabLabel = 'Base64'
+export const textNoteTabLabel = 'UTF-8'
+export const jsonNoteTabLabel = 'JSON'
+export const arc2NoteTabLabel = 'ARC-2'
+export const arc2FormatLabels = {
+  m: 'MsgPack',
+  b: 'bytes',
+  u: textNoteTabLabel,
+  j: jsonNoteTabLabel,
+}
+
+export function TransactionNote({ note }: TransactionNoteProps) {
+  const [text, json, arc2, activeTabId] = useMemo(() => {
+    const text = Buffer.from(note, 'base64').toString('utf-8')
+    const maybeJson = parseJson(text)
+    const maybeArc2 = parseArc2(text)
+    const activeTabId = maybeArc2 ? arc2NoteTabId : maybeJson ? jsonNoteTabId : base64NoteTabId
+    return [text, maybeJson, maybeArc2, activeTabId satisfies TabId] as const
+  }, [note])
+
   return (
     <div className={cn('space-y-2')}>
       <h2 className={cn('text-xl font-bold')}>Note</h2>
-      <Tabs defaultValue="text">
-        <TabsList>
-          <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value="text">
-            Text
+      <Tabs defaultValue={activeTabId}>
+        <TabsList aria-label={noteLabel}>
+          <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value={base64NoteTabId}>
+            {base64NoteTabLabel}
           </TabsTrigger>
-          <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value="base64">
-            Base64
-          </TabsTrigger>
-          <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value="messagePack">
-            Message pack
+          <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value={textNoteTabId}>
+            {textNoteTabLabel}
           </TabsTrigger>
+          {json && (
+            <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value={jsonNoteTabId}>
+              {jsonNoteTabLabel}
+            </TabsTrigger>
+          )}
+          {arc2 && (
+            <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value={arc2NoteTabId}>
+              {arc2NoteTabLabel}
+            </TabsTrigger>
+          )}
         </TabsList>
-        <TabsContent value="text" className={cn('border-solid border-2 border-border h-60 p-4')}>
-          {transaction.textNote}
-        </TabsContent>
-        <TabsContent value="base64" className={cn('border-solid border-2 border-border h-60 p-4')}>
-          {transaction.base64Note}
+        <TabsContent value={base64NoteTabId} className={cn('border-solid border-2 border-border h-60 p-4')}>
+          {note}
         </TabsContent>
-        <TabsContent value="messagePack" className={cn('border-solid border-2 border-border h-60 p-4')}>
-          {transaction.messagePackNote}
+        <TabsContent value={textNoteTabId} className={cn('border-solid border-2 border-border h-60 p-4')}>
+          {text}
         </TabsContent>
+        {json && (
+          <TabsContent value={jsonNoteTabId} className={cn('border-solid border-2 border-border h-60 p-4')}>
+            <pre>{JSON.stringify(json, null, 2)}</pre>
+          </TabsContent>
+        )}
+        {arc2 && (
+          <TabsContent value={arc2NoteTabId} className={cn('border-solid border-2 border-border h-60 p-4')}>
+            <DescriptionList
+              items={[
+                { dt: 'DApp Name', dd: arc2.dAppName },
+                { dt: 'Format', dd: arc2FormatLabels[arc2.format] },
+              ]}
+            />
+            {arc2.format === 'j' && parseJson(arc2.data) ? (
+              <pre>{JSON.stringify(parseJson(arc2.data), null, 2)}</pre>
+            ) : (
+              <pre>{arc2.data}</pre>
+            )}
+          </TabsContent>
+        )}
       </Tabs>
     </div>
   )

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

@@ -9,7 +9,6 @@ export const asPaymentTransaction = (transaction: TransactionResult): PaymentTra
   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,
@@ -24,6 +23,7 @@ export const asPaymentTransaction = (transaction: TransactionResult): PaymentTra
       ? algokit.microAlgos(transaction['payment-transaction']['close-amount'])
       : undefined,
     signature: transformSignature(transaction.signature),
+    note: transaction.note,
   } satisfies PaymentTransactionModel
 }
 

src/features/transactions/models/index.ts

@@ -10,11 +10,7 @@ type CommonTransactionProperties = {
   group?: string
   fee: AlgoAmount
   sender: Address
-
-  base64Note?: string
-  textNote?: string
-  messagePackNote?: string
-
+  note?: string
   transactions?: TransactionModel[]
   signature?: SinglesigModel | MultisigModel | LogicsigModel
 }