Rekey badge for transactions (#75)

* feat: add rekey badge to transaction page

Author: negar-abbasi

src/features/blocks/data/latest-blocks.ts

@@ -141,21 +141,15 @@ const subscribeToBlocksEffect = atomEffect((get, set) => {
                 })
                 .map((bc) => bc.address)
                 .filter(distinct((x) => x)) ?? []
-            const addressesStaleDueToAppChanges = flattenTransactionResult(t)
+
+            const addressesStaleDueToTransactions = flattenTransactionResult(t)
               .filter((t) => {
-                if (t['tx-type'] !== algosdk.TransactionType.appl) {
-                  return false
-                }
-                const appCallTransaction = t['application-transaction']!
-                const isAppCreate =
-                  appCallTransaction['on-completion'] === ApplicationOnComplete.noop && !appCallTransaction['application-id']
-                const isAppOptIn =
-                  appCallTransaction['on-completion'] === ApplicationOnComplete.optin && appCallTransaction['application-id']
-                return isAppCreate || isAppOptIn
+                const accountIsStaleDueToRekey = t['rekey-to']
+                return accountIsStaleDueToAppChanges(t) || accountIsStaleDueToRekey
               })
               .map((t) => t.sender)
               .filter(distinct((x) => x))
-            const staleAddresses = Array.from(new Set(addressesStaleDueToBalanceChanges.concat(addressesStaleDueToAppChanges)))
+            const staleAddresses = Array.from(new Set(addressesStaleDueToBalanceChanges.concat(addressesStaleDueToTransactions)))
             acc[4].push(...staleAddresses)
 
             // Accumulate stale application ids
@@ -256,3 +250,13 @@ const subscribeToBlocksEffect = atomEffect((get, set) => {
 export const useSubscribeToBlocksEffect = () => {
   useAtom(subscribeToBlocksEffect)
 }
+
+const accountIsStaleDueToAppChanges = (txn: TransactionResult) => {
+  if (txn['tx-type'] !== algosdk.TransactionType.appl) {
+    return false
+  }
+  const appCallTransaction = txn['application-transaction']!
+  const isAppCreate = appCallTransaction['on-completion'] === ApplicationOnComplete.noop && !appCallTransaction['application-id']
+  const isAppOptIn = appCallTransaction['on-completion'] === ApplicationOnComplete.optin && appCallTransaction['application-id']
+  return isAppCreate || isAppOptIn
+}

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

@@ -9,6 +9,7 @@ import { Badge } from '@/features/common/components/badge'
 import { BlockLink } from '@/features/blocks/components/block-link'
 import { GroupLink } from '@/features/groups/components/group-link'
 import { useAtomValue } from 'jotai'
+import { AccountLink } from '@/features/accounts/components/account-link'
 
 type Props = {
   transaction: Transaction | InnerTransaction
@@ -20,6 +21,7 @@ export const transactionTimestampLabel = 'Timestamp'
 export const transactionBlockLabel = 'Block'
 export const transactionGroupLabel = 'Group'
 export const transactionFeeLabel = 'Fee'
+export const transactionRekeyToLabel = 'Rekey To'
 
 export function TransactionInfo({ transaction }: Props) {
   const subType = useAtomValue(transaction.subType)
@@ -37,6 +39,7 @@ export function TransactionInfo({ transaction }: Props) {
             {subType && <Badge variant="outline">{subType}</Badge>}
             {transaction.signature?.type === SignatureType.Multi && <Badge variant="outline">Multisig</Badge>}
             {transaction.signature?.type === SignatureType.Logic && <Badge variant="outline">LogicSig</Badge>}
+            {transaction.rekeyTo && <Badge variant="outline">Rekey</Badge>}
           </>
         ),
       },
@@ -60,13 +63,22 @@ export function TransactionInfo({ transaction }: Props) {
         dt: transactionFeeLabel,
         dd: transaction.fee ? <DisplayAlgo amount={transaction.fee} /> : 'N/A',
       },
+      ...(transaction.rekeyTo
+        ? [
+            {
+              dt: transactionRekeyToLabel,
+              dd: <AccountLink address={transaction.rekeyTo} />,
+            },
+          ]
+        : []),
     ],
     [
       subType,
       transaction.confirmedRound,
       transaction.fee,
       transaction.group,
       transaction.id,
+      transaction.rekeyTo,
       transaction.roundTime,
       transaction.signature?.type,
       transaction.type,

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

@@ -20,6 +20,7 @@ export const mapCommonTransactionProperties = (transactionResult: TransactionRes
     signature: transformSignature(transactionResult.signature),
     note: transactionResult.note,
     json: transactionResult,
+    rekeyTo: transactionResult['rekey-to'],
   }
 }
 

src/features/transactions/models/index.ts

@@ -15,6 +15,7 @@ export type CommonTransactionProperties = {
   note?: string
   signature?: Singlesig | Multisig | Logicsig
   json: object
+  rekeyTo?: Address
 }
 
 export enum TransactionType {

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

@@ -27,6 +27,7 @@ import {
   transactionFeeLabel,
   transactionGroupLabel,
   transactionIdLabel,
+  transactionRekeyToLabel,
   transactionTimestampLabel,
   transactionTypeLabel,
 } from '../components/transaction-info'
@@ -1137,3 +1138,31 @@ describe('transaction-page', () => {
     })
   })
 })
+
+describe('when rendering a rekey transaction', () => {
+  const transaction = transactionResultMother['testnet-24RAYAOGMJ45BL6A7RYQOKZNECCA3VFXQUAM5X64BEDBVFNLPIPQ']().build()
+
+  it('should be rendered with the correct data', () => {
+    vi.mocked(useParams).mockImplementation(() => ({ transactionId: transaction.id }))
+    const myStore = createStore()
+    myStore.set(transactionResultsAtom, new Map([[transaction.id, atom(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: 'PaymentRekey' },
+              { term: transactionRekeyToLabel, description: 'QUANSC2GTZQ7GL5CA42CMOYIX2LHJ2E7QD2ZDZKQJG2WAKGWOYBMNADHSA' },
+            ],
+          })
+        })
+      }
+    )
+  })
+})

src/tests/object-mother/transaction-result.ts

@@ -1354,4 +1354,33 @@ export const transactionResultMother = {
       'tx-type': 'appl',
     } as unknown as TransactionResult)
   },
+  ['testnet-24RAYAOGMJ45BL6A7RYQOKZNECCA3VFXQUAM5X64BEDBVFNLPIPQ']: () => {
+    return new TransactionResultBuilder({
+      'close-rewards': 0,
+      'closing-amount': 0,
+      'confirmed-round': 28236256,
+      fee: 1000,
+      'first-valid': 28236253,
+      'genesis-hash': 'SGO1GKSzyE7IEPItTxCByw9x8FmnrCDexi9/cOUJOiI=',
+      'genesis-id': 'testnet-v1.0',
+      id: '24RAYAOGMJ45BL6A7RYQOKZNECCA3VFXQUAM5X64BEDBVFNLPIPQ',
+      'intra-round-offset': 0,
+      'last-valid': 28237253,
+      note: 'UmVrZXkgdG8gUVVBTlNDMkdUWlE3R0w1Q0E0MkNNT1lJWDJMSEoyRTdRRDJaRFpLUUpHMldBS0dXT1lCTU5BREhTQQ==',
+      'payment-transaction': {
+        amount: 0,
+        'close-amount': 0,
+        receiver: 'WK3LE77YNSRUC3GVNP6FA7PF67GWAOLAGTNKOII4YBFSRQ3DW7C72MD4TM',
+      },
+      'receiver-rewards': 0,
+      'rekey-to': 'QUANSC2GTZQ7GL5CA42CMOYIX2LHJ2E7QD2ZDZKQJG2WAKGWOYBMNADHSA',
+      'round-time': 1678206268,
+      sender: 'WK3LE77YNSRUC3GVNP6FA7PF67GWAOLAGTNKOII4YBFSRQ3DW7C72MD4TM',
+      'sender-rewards': 0,
+      signature: {
+        sig: 'G9NwYqLXA8L92cauKXyHeY/Jp5cBUTWwL+Ri2w5ex18mIsWQBq7gNg1EU07mzfKU6i93EqkcVZLyVmA2HJkmDg==',
+      },
+      'tx-type': TransactionType.pay,
+    } as unknown as TransactionResult)
+  },
 }