chore: tweaks as part of checking ACs (#15)

neilcampbell · web-flow · commit e04c340b44ea · 2024-04-12T14:04:42.000+08:00
* chore: change from/to -&gt; sender/receiver
* chore: handle id shortening differently to address shortening
* chore: a few different tweak I noticed
* chore: bage multisig and logicSig transactions
* chore: handle close remainder
diff --git a/package.json b/package.json
@@ -14,10 +14,12 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --ext ts,tsx --fix",
     "preview": "vite preview",
-    "test": "vitest",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "audit": "better-npm-audit audit",
     "check-types": "tsc --noEmit && npx --yes madge src/App.tsx --circular",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "pre-commit": "run-s check-types lint:fix audit test"
   },
   "dependencies": {
     "@algorandfoundation/algokit-subscriber": "^1.2.0",
@@ -138,4 +140,4 @@
       "semantic-release-export-data"
     ]
   }
-}
+}
diff --git a/src/features/common/components/badge.tsx b/src/features/common/components/badge.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/features/common/utils'
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
diff --git a/src/features/explore/pages/explore-page.tsx b/src/features/explore/pages/explore-page.tsx
@@ -1,21 +1,16 @@
 import { LatestBlocks } from '@/features/blocks/components/latest-blocks'
 import { cn } from '@/features/common/utils'
 import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
+import { TransactionIdLink } from '@/features/transactions/components/transaction-id-link'
 import { Urls } from '@/routes/urls'
 
 export function ExplorePage() {
   return (
     <div className={cn('grid')}>
-      <TemplatedNavLink
-        urlTemplate={Urls.Explore.Transaction.ById}
-        urlParams={{ transactionId: 'QOOBRVQMX4HW5QZ2EGLQDQCQTKRF3UP3JKDGKYPCXMI6AVV35KQA' }}
-      >
-        View sample transaction
-      </TemplatedNavLink>
+      <TransactionIdLink transactionId="ILDCD5Z64CYSLEZIHBG5DVME2ITJI2DIVZAPDPEWPCYMTRA5SVGA">View sample transaction</TransactionIdLink>
       <TemplatedNavLink urlTemplate={Urls.Explore.Group.ById} urlParams={{ groupId: 'foo' }}>
         View sample group
       </TemplatedNavLink>
-
       <LatestBlocks />
     </div>
   )
diff --git a/src/features/transactions/components/__snapshots__/transaction-view-visual.FBORGSDC4ULLWHWZUMUFIYQLSDC26HGLTFD7EATQDY37FHCIYBBQ.html b/src/features/transactions/components/__snapshots__/transaction-view-visual.FBORGSDC4ULLWHWZUMUFIYQLSDC26HGLTFD7EATQDY37FHCIYBBQ.html
@@ -70,7 +70,7 @@
           class="inline"
           style="margin-left: 16px;"
         >
-          FBOR...YBBQ
+          FBORGSD...
         </div>
       </div>
     </div>
diff --git a/src/features/transactions/components/__snapshots__/transaction-view-visual.ILDCD5Z64CYSLEZIHBG5DVME2ITJI2DIVZAPDPEWPCYMTRA5SVGA.html b/src/features/transactions/components/__snapshots__/transaction-view-visual.ILDCD5Z64CYSLEZIHBG5DVME2ITJI2DIVZAPDPEWPCYMTRA5SVGA.html
@@ -53,7 +53,7 @@
           class="inline"
           style="margin-left: 16px;"
         >
-          ILDC...SVGA
+          ILDCD5Z...
         </div>
       </div>
     </div>
diff --git a/src/features/transactions/components/payment-transaction.tsx b/src/features/transactions/components/payment-transaction.tsx
@@ -10,7 +10,7 @@ import { TransactionResult } from '@algorandfoundation/algokit-utils/types/index
 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 { TransactionViewTable, transactionAmountLabel, transactionReceiverLabel, transactionSenderLabel } from './transaction-view-table'
 import { Multisig } from './multisig'
 import { Logicsig } from './logicsig'
 
@@ -24,32 +24,50 @@ const tableTransactionDetailsTabId = 'table'
 export const transactionDetailsLabel = 'View Transaction Details'
 export const visualTransactionDetailsTabLabel = 'Visual'
 export const tableTransactionDetailsTabLabel = 'Table'
+export const transactionCloseRemainderToLabel = 'Close Remainder To'
+export const transactionCloseRemainderAmountLabel = 'Close Remainder Amount'
 
 export function PaymentTransaction({ transaction, rawTransaction }: PaymentTransactionProps) {
   const paymentTransactionItems = useMemo(
     () => [
       {
-        dt: 'Sender',
+        dt: transactionSenderLabel,
         dd: (
           <a href="#" className={cn('text-primary underline')}>
             {transaction.sender}
           </a>
         ),
       },
       {
-        dt: 'Receiver',
+        dt: transactionReceiverLabel,
         dd: (
           <a href="#" className={cn('text-primary underline')}>
             {transaction.receiver}
           </a>
         ),
       },
       {
-        dt: 'Amount',
+        dt: transactionAmountLabel,
         dd: <DisplayAlgo amount={transaction.amount} />,
       },
+      ...(transaction.closeRemainder
+        ? [
+            {
+              dt: transactionCloseRemainderToLabel,
+              dd: (
+                <a href="#" className={cn('text-primary underline')}>
+                  {transaction.closeRemainder.to}
+                </a>
+              ),
+            },
+            {
+              dt: transactionCloseRemainderAmountLabel,
+              dd: <DisplayAlgo amount={transaction.closeRemainder.amount} />,
+            },
+          ]
+        : []),
     ],
-    [transaction.sender, transaction.receiver, transaction.amount]
+    [transaction.sender, transaction.receiver, transaction.amount, transaction.closeRemainder]
   )
 
   return (
diff --git a/src/features/transactions/components/transaction-id-link.tsx b/src/features/transactions/components/transaction-id-link.tsx
@@ -0,0 +1,17 @@
+import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
+import { Urls } from '@/routes/urls'
+import { ellipseId } from '@/utils/ellipse-id'
+import { PropsWithChildren } from 'react'
+
+type Props = PropsWithChildren<{
+  transactionId: string
+  short?: boolean
+}>
+
+export function TransactionIdLink({ transactionId, short = false, children }: Props) {
+  return (
+    <TemplatedNavLink urlTemplate={Urls.Explore.Transaction.ById} urlParams={{ transactionId: transactionId }}>
+      {children ? children : short ? ellipseId(transactionId) : transactionId}
+    </TemplatedNavLink>
+  )
+}
diff --git a/src/features/transactions/components/transaction-info.tsx b/src/features/transactions/components/transaction-info.tsx
@@ -3,9 +3,9 @@ import { cn } from '@/features/common/utils'
 import { dateFormatter } from '@/utils/format'
 import { DisplayAlgo } from '@/features/common/components/display-algo'
 import { useMemo } from 'react'
-import { PaymentTransactionModel } from '../models'
+import { PaymentTransactionModel, SignatureType } from '../models'
 import { DescriptionList } from '@/features/common/components/description-list'
-import { isDefined } from '@/utils/is-defined'
+import { Badge } from '@/features/common/components/badge'
 
 type Props = {
   transaction: PaymentTransactionModel
@@ -20,44 +20,67 @@ export const transactionFeeLabel = 'Fee'
 
 export function TransactionInfo({ transaction }: Props) {
   const transactionInfoItems = useMemo(
-    () =>
-      [
-        {
-          dt: transactionIdLabel,
-          dd: transaction.id,
-        },
-        {
-          dt: transactionTypeLabel,
-          dd: transaction.type,
-        },
-        {
-          dt: transactionTimestampLabel,
-          dd: dateFormatter.asLongDateTime(new Date(transaction.roundTime)),
-        },
-        {
-          dt: transactionBlockLabel,
-          dd: (
-            <a href="#" className={cn('text-primary underline')}>
-              {transaction.confirmedRound}
-            </a>
-          ),
-        },
-        transaction.group
-          ? {
+    () => [
+      {
+        dt: transactionIdLabel,
+        dd: transaction.id,
+      },
+      {
+        dt: transactionTypeLabel,
+        dd: (
+          <>
+            {transaction.type}
+            {transaction.signature?.type === SignatureType.Multi && (
+              <Badge className={cn('ml-2')} variant="outline">
+                Multisig
+              </Badge>
+            )}
+            {transaction.signature?.type === SignatureType.Logic && (
+              <Badge className={cn('ml-2')} variant="outline">
+                LogicSig
+              </Badge>
+            )}
+          </>
+        ),
+      },
+      {
+        dt: transactionTimestampLabel,
+        dd: dateFormatter.asLongDateTime(new Date(transaction.roundTime)),
+      },
+      {
+        dt: transactionBlockLabel,
+        dd: (
+          <a href="#" className={cn('text-primary underline')}>
+            {transaction.confirmedRound}
+          </a>
+        ),
+      },
+      ...(transaction.group
+        ? [
+            {
               dt: transactionGroupLabel,
               dd: (
                 <a href="#" className={cn('text-primary underline')}>
                   {transaction.group}
                 </a>
               ),
-            }
-          : undefined,
-        {
-          dt: transactionFeeLabel,
-          dd: transaction.fee ? <DisplayAlgo amount={transaction.fee} /> : 'N/A',
-        },
-      ].filter(isDefined),
-    [transaction.confirmedRound, transaction.fee, transaction.group, transaction.id, transaction.roundTime, transaction.type]
+            },
+          ]
+        : []),
+      {
+        dt: transactionFeeLabel,
+        dd: transaction.fee ? <DisplayAlgo amount={transaction.fee} /> : 'N/A',
+      },
+    ],
+    [
+      transaction.confirmedRound,
+      transaction.fee,
+      transaction.group,
+      transaction.id,
+      transaction.roundTime,
+      transaction.signature?.type,
+      transaction.type,
+    ]
   )
 
   return (
diff --git a/src/features/transactions/components/transaction-view-table.tsx b/src/features/transactions/components/transaction-view-table.tsx
@@ -4,6 +4,7 @@ import { DisplayAlgo } from '@/features/common/components/display-algo'
 import { ellipseAddress } from '@/utils/ellipse-address'
 import { flattenInnerTransactions } from '@/utils/flatten-inner-transactions'
 import { useMemo } from 'react'
+import { ellipseId } from '@/utils/ellipse-id'
 
 const graphConfig = {
   indentationWidth: 20,
@@ -13,6 +14,10 @@ type Props = {
   transaction: TransactionModel
 }
 
+export const transactionSenderLabel = 'Sender'
+export const transactionReceiverLabel = 'Receiver'
+export const transactionAmountLabel = 'Amount'
+
 export function TransactionViewTable({ transaction }: Props) {
   const flattenedTransactions = useMemo(() => flattenInnerTransactions(transaction), [transaction])
 
@@ -21,10 +26,10 @@ export function TransactionViewTable({ transaction }: Props) {
       <thead>
         <tr>
           <th className={cn('border-2')}>Transaction ID</th>
-          <th className={cn('p-2 border-2')}>From</th>
-          <th className={cn('p-2 border-2')}>To</th>
+          <th className={cn('p-2 border-2')}>{transactionSenderLabel}</th>
+          <th className={cn('p-2 border-2')}>{transactionReceiverLabel}</th>
           <th className={cn('p-2 border-2')}>Type</th>
-          <th className={cn('p-2 border-2')}>Amount</th>
+          <th className={cn('p-2 border-2')}>{transactionAmountLabel}</th>
         </tr>
       </thead>
       <tbody>
@@ -36,7 +41,7 @@ export function TransactionViewTable({ transaction }: Props) {
                   marginLeft: `${graphConfig.indentationWidth * nestingLevel}px`,
                 }}
               >
-                {ellipseAddress(transaction.id)}
+                {ellipseId(transaction.id)}
               </div>
             </td>
             <td className={cn('p-2 border-2 text-center')}>{ellipseAddress(transaction.sender)}</td>
diff --git a/src/features/transactions/components/transaction-view-visual.test.tsx b/src/features/transactions/components/transaction-view-visual.test.tsx
@@ -17,9 +17,9 @@ import { TransactionResult } from '@algorandfoundation/algokit-utils/types/index
 //   - Update the snapshot files by running `vitest -u`. Or if the test runner is running, press `u` to update the snapshots.
 describe('transaction-view-visual', () => {
   describe.each([
-    transactionModelMother['mainnet-FBORGSDC4ULLWHWZUMUFIYQLSDC26HGLTFD7EATQDY37FHCIYBBQ'](),
-    transactionModelMother['mainnet-ILDCD5Z64CYSLEZIHBG5DVME2ITJI2DIVZAPDPEWPCYMTRA5SVGA'](),
-  ])('when rendering transaction %d', (transaction: TransactionResult) => {
+    transactionModelMother['mainnet-FBORGSDC4ULLWHWZUMUFIYQLSDC26HGLTFD7EATQDY37FHCIYBBQ']().build(),
+    transactionModelMother['mainnet-ILDCD5Z64CYSLEZIHBG5DVME2ITJI2DIVZAPDPEWPCYMTRA5SVGA']().build(),
+  ])('when rendering transaction $id', (transaction: TransactionResult) => {
     it('should match snapshot', () => {
       const model = asPaymentTransaction(transaction)
 
diff --git a/src/features/transactions/components/transaction-view-visual.tsx b/src/features/transactions/components/transaction-view-visual.tsx
@@ -12,6 +12,8 @@ import { DescriptionList } from '@/features/common/components/description-list'
 import { ellipseAddress } from '@/utils/ellipse-address'
 import { flattenInnerTransactions } from '@/utils/flatten-inner-transactions'
 import { transactionIdLabel, transactionTypeLabel } from './transaction-info'
+import { ellipseId } from '@/utils/ellipse-id'
+import { transactionAmountLabel, transactionReceiverLabel, transactionSenderLabel } from './transaction-view-table'
 
 const graphConfig = {
   rowHeight: 40,
@@ -63,7 +65,7 @@ function TransactionId({ hasParent, id }: { hasParent: boolean; id: string }) {
         marginLeft: hasParent ? `${graphConfig.indentationWidth + 8}px` : `16px`,
       }}
     >
-      {ellipseAddress(id)}
+      {ellipseId(id)}
     </div>
   )
 }
@@ -317,10 +319,6 @@ type Props = {
   transaction: TransactionModel
 }
 
-export const transactionSenderLabel = 'Sender'
-export const transactionReceiverLabel = 'Receiver'
-export const transactionAmountLabel = 'Amount'
-
 export function TransactionViewVisual({ transaction }: Props) {
   const flattenedTransactions = useMemo(() => flattenInnerTransactions(transaction), [transaction])
   const transactionCount = flattenedTransactions.length
diff --git a/src/features/transactions/mappers/transaction-mappers.ts b/src/features/transactions/mappers/transaction-mappers.ts
@@ -19,8 +19,11 @@ export const asPaymentTransaction = (transaction: TransactionResult): PaymentTra
     sender: transaction.sender,
     receiver: transaction['payment-transaction']['receiver'],
     amount: algokit.microAlgos(transaction['payment-transaction']['amount']),
-    closeAmount: transaction['payment-transaction']['close-amount']
-      ? algokit.microAlgos(transaction['payment-transaction']['close-amount'])
+    closeRemainder: transaction['payment-transaction']['close-remainder-to']
+      ? {
+          to: transaction['payment-transaction']['close-remainder-to'],
+          amount: algokit.microAlgos(transaction['payment-transaction']['close-amount'] ?? 0),
+        }
       : undefined,
     signature: transformSignature(transaction.signature),
     note: transaction.note,
diff --git a/src/features/transactions/models/index.ts b/src/features/transactions/models/index.ts
@@ -19,11 +19,16 @@ export enum TransactionType {
   Payment = 'Payment',
 }
 
+export type CloseRemainder = {
+  to: Address
+  amount: AlgoAmount
+}
+
 export type PaymentTransactionModel = CommonTransactionProperties & {
   type: TransactionType.Payment
   receiver: Address
   amount: AlgoAmount
-  closeAmount?: AlgoAmount
+  closeRemainder?: CloseRemainder
 }
 
 export type TransactionModel = PaymentTransactionModel
diff --git a/src/features/transactions/pages/transaction-page.test.tsx b/src/features/transactions/pages/transaction-page.test.tsx
diff --git a/src/tests/builders/transaction-result-builder.ts b/src/tests/builders/transaction-result-builder.ts
diff --git a/src/tests/object-mother/transaction-model.ts b/src/tests/object-mother/transaction-model.ts
diff --git a/src/utils/ellipse-address.ts b/src/utils/ellipse-address.ts
diff --git a/src/utils/ellipse-id.ts b/src/utils/ellipse-id.ts

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority'`
`4`	`4`	`import { cn } from '@/features/common/utils'`
`5`	`5`
`6`	`6`	`const badgeVariants = cva(`
`7`		`- 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',`
	`7`	`+ 'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',`
`8`	`8`	`{`
`9`	`9`	`variants: {`
`10`	`10`	`variant: {`
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@`
`70`	`70`	`class="inline"`
`71`	`71`	`style="margin-left: 16px;"`
`72`	`72`	`>`
`73`		`- FBOR...YBBQ`
	`73`	`+ FBORGSD...`
`74`	`74`	`</div>`
`75`	`75`	`</div>`
`76`	`76`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@`
`53`	`53`	`class="inline"`
`54`	`54`	`style="margin-left: 16px;"`
`55`	`55`	`>`
`56`		`- ILDC...SVGA`
	`56`	`+ ILDCD5Z...`
`57`	`57`	`</div>`
`58`	`58`	`</div>`
`59`	`59`	`</div>`