feat: logicsig (#11)

* feat: add logicsig
---------
Co-authored-by: Negar Abbasi <[email protected]>

Author: neilcampbell

src/App.routes.tsx

@@ -2,10 +2,9 @@ import { Outlet } from 'react-router-dom'
 import { LayoutPage } from './features/layout/pages/layout-page'
 import { Urls } from './routes/urls'
 import { evalTemplates } from './routes/templated-route'
-import { TransactionPage } from './features/transactions/pages/transaction-page'
+import { TransactionPage, transactionPageTitle } from './features/transactions/pages/transaction-page'
 import { ExplorePage } from './features/explore/pages/explore-page'
 import { GroupPage } from './features/transactions/pages/group-page'
-import { transactionPageConstants } from './features/theme/constant'
 import { ErrorPage } from './features/common/pages/error-page'
 
 export const routes = evalTemplates([
@@ -37,7 +36,7 @@ export const routes = evalTemplates([
           {
             template: Urls.Explore.Transaction.ById,
             element: <TransactionPage />,
-            errorElement: <ErrorPage title={transactionPageConstants.title} />,
+            errorElement: <ErrorPage title={transactionPageTitle} />,
           },
           {
             template: Urls.Explore.Group.ById,

src/features/blocks/data.ts

@@ -1,10 +1,10 @@
 import { atom, useAtom, useAtomValue } from 'jotai'
-import * as algokit from '@algorandfoundation/algokit-utils'
 import { atomEffect } from 'jotai-effect'
 import { transactionsAtom } from '@/features/transactions/data'
 import { AlgorandSubscriber } from '@algorandfoundation/algokit-subscriber'
 // import { BlockMetadata } from '@algorandfoundation/algokit-subscriber/types/subscription'
 import { Buffer } from 'buffer'
+import { algod } from '../common/data'
 
 type BlockMetadata = {
   round: number
@@ -14,12 +14,6 @@ type BlockMetadata = {
 // TODO: NC - Remove once https://github.com/algorandfoundation/algokit-subscriber-ts/pull/49 is merged
 window.Buffer = Buffer
 
-// TODO: Move this elsewhere and make it configurable once we start using it more
-const algod = algokit.getAlgoClient({
-  server: 'https://testnet-api.algonode.cloud/',
-  port: 443,
-})
-
 const syncedRoundAtom = atom<number | undefined>(undefined)
 
 // TODO: Size should be capped at some limit, so memory usage doesn't grow indefinitely
@@ -30,9 +24,6 @@ const latestBlockAtom = atom((get) => {
 })
 
 const subscribeToBlocksEffect = atomEffect((get, set) => {
-  algokit.Config.configure({
-    logger: algokit.Config.getLogger(true),
-  })
   const subscriber = new AlgorandSubscriber(
     {
       filters: [

src/features/common/data.ts

@@ -0,0 +1,15 @@
+import { Config, getAlgoClient, getAlgoIndexerClient } from '@algorandfoundation/algokit-utils'
+
+Config.configure({
+  logger: Config.getLogger(true),
+})
+
+export const indexer = getAlgoIndexerClient({
+  server: 'https://mainnet-idx.algonode.cloud/',
+  port: 443,
+})
+
+export const algod = getAlgoClient({
+  server: 'https://mainnet-api.algonode.cloud/',
+  port: 443,
+})

src/features/theme/components/theme-toggle.test.tsx

@@ -1,15 +1,14 @@
 import { describe, it, expect } from 'vitest'
 import { render, waitFor } from '@/tests/testing-library'
-import { ThemeToggle } from '@/features/theme/components/theme-toggle'
+import { ThemeToggle, themeTogglelabel } from '@/features/theme/components/theme-toggle'
 import { executeComponentTest } from '@/tests/test-component'
-import { themeConstants } from '../constant'
 
 describe('when the theme is toggled to dark', () => {
   it('the theme is set to dark', async () => {
     return executeComponentTest(
       () => render(<ThemeToggle />),
       async (component, user) => {
-        user.click(await component.findByRole('button', { name: themeConstants.toggleButtonName }))
+        user.click(await component.findByRole('button', { name: themeTogglelabel }))
         user.click(await component.findByText('Dark'))
 
         await waitFor(() => expect(document.documentElement.classList.contains('dark')).toBe(true))

src/features/theme/components/theme-toggle.tsx

@@ -3,15 +3,16 @@ import { Moon, Sun } from 'lucide-react'
 import { Button } from '@/features/common/components/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/features/common/components/dropdown-menu'
 import { useTheme } from '../hooks/use-theme'
-import { themeConstants } from '../constant'
+
+export const themeTogglelabel = 'Toggle theme'
 
 export function ThemeToggle() {
   const { setTheme } = useTheme()
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="default" size="icon" aria-label={themeConstants.toggleButtonName}>
+        <Button variant="default" size="icon" aria-label={themeTogglelabel}>
           <Sun className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>

src/features/theme/constant.ts

@@ -0,0 +1,61 @@
+import { LogicsigModel } from '../models'
+import { Card, CardContent } from '@/features/common/components/card'
+import { cn } from '@/features/common/utils'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@radix-ui/react-tabs'
+import { useLogicsigTeal } from '../data'
+import { RenderLoadable } from '@/features/common/components/render-loadable'
+
+type LogicsigProps = {
+  signature: LogicsigModel
+}
+
+const base64LogicsigTabId = 'base64'
+const tealLogicsigTabId = 'teal'
+export const logicsigLabel = 'View Logic Signature Details'
+export const base64LogicsigTabLabel = 'Base64'
+export const tealLogicsigTabLabel = 'Teal'
+
+export function Logicsig({ signature }: LogicsigProps) {
+  const [tealLoadable, fetchTeal] = useLogicsigTeal(signature.logic)
+
+  return (
+    <>
+      <h1 className={cn('text-2xl text-primary font-bold')}>Logic Signature</h1>
+      <Tabs
+        defaultValue={base64LogicsigTabId}
+        onValueChange={(activeTab) => {
+          if (activeTab === tealLogicsigTabId) {
+            fetchTeal()
+          }
+        }}
+      >
+        <TabsList aria-label={logicsigLabel}>
+          <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value={base64LogicsigTabId}>
+            {base64LogicsigTabLabel}
+          </TabsTrigger>
+          <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value={tealLogicsigTabId}>
+            {tealLogicsigTabLabel}
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value={base64LogicsigTabId} className={cn('border-solid border-2 border-border p-4')}>
+          <Card className={cn('p-4')}>
+            <CardContent className={cn('text-sm space-y-4')}>
+              <div className={cn('space-y-2')}>
+                <pre>{signature.logic}</pre>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value={tealLogicsigTabId} className={cn('border-solid border-2 border-border p-4')}>
+          <Card>
+            <CardContent className={cn('text-sm space-y-4')}>
+              <div className={cn('h-96 grid')}>
+                <RenderLoadable loadable={tealLoadable}>{(teal) => <pre className={cn('overflow-scroll p-4')}>{teal}</pre>}</RenderLoadable>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </>
+  )
+}

src/features/transactions/components/logicsig.tsx

@@ -3,29 +3,32 @@ import { Card, CardContent } from '@/features/common/components/card'
 import { cn } from '@/features/common/utils'
 import { useMemo } from 'react'
 import { DescriptionList } from '@/features/common/components/description-list'
-import { transactionPageConstants } from '@/features/theme/constant'
 
-export type MultisigProps = {
-  multisig: MultisigModel
+type MultisigProps = {
+  signature: MultisigModel
 }
 
-export function Multisig({ multisig: multisig }: MultisigProps) {
+export const multisigVersionLabel = 'Version'
+export const multisigThresholdLabel = 'Threshold'
+export const multisigSubsignersLabel = 'Subsigners'
+
+export function Multisig({ signature }: MultisigProps) {
   const multisigItems = useMemo(
     () => [
       {
-        dt: transactionPageConstants.labels.multisig.version,
-        dd: multisig.version,
+        dt: multisigVersionLabel,
+        dd: signature.version,
       },
       {
-        dt: transactionPageConstants.labels.multisig.threshold,
-        dd: multisig.threshold,
+        dt: multisigThresholdLabel,
+        dd: signature.threshold,
       },
       {
-        dt: transactionPageConstants.labels.multisig.subsigners,
-        dd: multisig.subsigners.map((address, index) => <div key={index}>{address}</div>),
+        dt: multisigSubsignersLabel,
+        dd: signature.subsigners.map((address, index) => <div key={index}>{address}</div>),
       },
     ],
-    [multisig.subsigners, multisig.version, multisig.threshold]
+    [signature.subsigners, signature.version, signature.threshold]
   )
 
   return (

src/features/transactions/components/multisig.tsx

@@ -1,25 +1,31 @@
 import { Card, CardContent } from '@/features/common/components/card'
 import { cn } from '@/features/common/utils'
 import { DisplayAlgo } from '@/features/common/components/display-algo'
-import { Button } from '@/features/common/components/button'
 import { TransactionInfo } from './transaction-info'
 import { TransactionNote } from './transaction-note'
 import { TransactionJson } from './transaction-json'
 import { useMemo } from 'react'
-import { PaymentTransactionModel } from '../models'
+import { PaymentTransactionModel, SignatureType } from '../models'
 import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { DescriptionList } from '@/features/common/components/description-list'
 import { TransactionViewVisual } from './transaction-view-visual'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/features/common/components/tabs'
 import { TransactionViewTable } from './transaction-view-table'
 import { Multisig } from './multisig'
+import { Logicsig } from './logicsig'
 
-export type Props = {
+type PaymentTransactionProps = {
   transaction: PaymentTransactionModel
   rawTransaction: TransactionResult
 }
 
-export function PaymentTransaction({ transaction, rawTransaction }: Props) {
+const visualTransactionDetailsTabId = 'visual'
+const tableTransactionDetailsTabId = 'table'
+export const transactionDetailsLabel = 'View Transaction Details'
+export const visualTransactionDetailsTabLabel = 'Visual'
+export const tableTransactionDetailsTabLabel = 'Table'
+
+export function PaymentTransaction({ transaction, rawTransaction }: PaymentTransactionProps) {
   const paymentTransactionItems = useMemo(
     () => [
       {
@@ -54,29 +60,35 @@ export function PaymentTransaction({ transaction, rawTransaction }: Props) {
           <div className={cn('space-y-2')}>
             <div className={cn('flex items-center justify-between')}>
               <h1 className={cn('text-2xl text-primary font-bold')}>Payment</h1>
-              <Button>Replay</Button>
             </div>
             <DescriptionList items={paymentTransactionItems} />
           </div>
-          <Tabs defaultValue="visual">
-            <TabsList aria-label="View Transaction">
-              <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value="visual">
-                Visual
+          <Tabs defaultValue={visualTransactionDetailsTabId}>
+            <TabsList aria-label={transactionDetailsLabel}>
+              <TabsTrigger
+                className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')}
+                value={visualTransactionDetailsTabId}
+              >
+                {visualTransactionDetailsTabLabel}
               </TabsTrigger>
-              <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value="table">
-                Table
+              <TabsTrigger
+                className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')}
+                value={tableTransactionDetailsTabId}
+              >
+                {tableTransactionDetailsTabLabel}
               </TabsTrigger>
             </TabsList>
-            <TabsContent value="visual" className={cn('border-solid border-2 border-border p-4')}>
+            <TabsContent value={visualTransactionDetailsTabId} className={cn('border-solid border-2 border-border p-4')}>
               <TransactionViewVisual transaction={transaction} />
             </TabsContent>
-            <TabsContent value="table" className={cn('border-solid border-2 border-border p-4')}>
+            <TabsContent value={tableTransactionDetailsTabId} className={cn('border-solid border-2 border-border p-4')}>
               <TransactionViewTable transaction={transaction} />
             </TabsContent>
           </Tabs>
           <TransactionNote transaction={transaction} />
           <TransactionJson transaction={rawTransaction} />
-          {transaction.multisig && <Multisig multisig={transaction.multisig} />}
+          {transaction.signature?.type === SignatureType.Multi && <Multisig signature={transaction.signature} />}
+          {transaction.signature?.type === SignatureType.Logic && <Logicsig signature={transaction.signature} />}
         </CardContent>
       </Card>
     </div>

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

@@ -6,30 +6,36 @@ import { useMemo } from 'react'
 import { PaymentTransactionModel } from '../models'
 import { DescriptionList } from '@/features/common/components/description-list'
 import { isDefined } from '@/utils/is-defined'
-import { transactionPageConstants } from '@/features/theme/constant'
 
-export type Props = {
+type Props = {
   transaction: PaymentTransactionModel
 }
 
+export const transactionIdLabel = 'Transaction ID'
+export const transactionTypeLabel = 'Type'
+export const transactionTimestampLabel = 'Timestamp'
+export const transactionBlockLabel = 'Block'
+export const transactionGroupLabel = 'Group'
+export const transactionFeeLabel = 'Fee'
+
 export function TransactionInfo({ transaction }: Props) {
   const transactionInfoItems = useMemo(
     () =>
       [
         {
-          dt: transactionPageConstants.labels.transactionId,
+          dt: transactionIdLabel,
           dd: transaction.id,
         },
         {
-          dt: transactionPageConstants.labels.type,
+          dt: transactionTypeLabel,
           dd: transaction.type,
         },
         {
-          dt: transactionPageConstants.labels.timestamp,
+          dt: transactionTimestampLabel,
           dd: dateFormatter.asLongDateTime(new Date(transaction.roundTime)),
         },
         {
-          dt: transactionPageConstants.labels.block,
+          dt: transactionBlockLabel,
           dd: (
             <a href="#" className={cn('text-primary underline')}>
               {transaction.confirmedRound}
@@ -38,7 +44,7 @@ export function TransactionInfo({ transaction }: Props) {
         },
         transaction.group
           ? {
-              dt: transactionPageConstants.labels.group,
+              dt: transactionGroupLabel,
               dd: (
                 <a href="#" className={cn('text-primary underline')}>
                   {transaction.group}
@@ -47,7 +53,7 @@ export function TransactionInfo({ transaction }: Props) {
             }
           : undefined,
         {
-          dt: transactionPageConstants.labels.fee,
+          dt: transactionFeeLabel,
           dd: transaction.fee ? <DisplayAlgo amount={transaction.fee} /> : 'N/A',
         },
       ].filter(isDefined),