chore(optional_sender): cleanup to remove repeated tests and optional fields that got required

Author: p2arthur

src/features/transaction-wizard/transaction-wizard-page.test.tsx

@@ -289,19 +289,11 @@ describe('transaction-wizard-page', () => {
               target: { value: walletAccount.addr },
             })
 
-            const receiverInput = await component.findByLabelText(/Receiver/)
-            fireEvent.input(receiverInput, {
-              target: { value: walletAccount.addr },
-            })
-
             const closeToInput = await component.findByLabelText(/Close remainder to/)
             fireEvent.input(closeToInput, {
               target: { value: testAccount2.addr },
             })
 
-            const amountInput = await component.findByLabelText(/Amount to pay/)
-            fireEvent.input(amountInput, { target: { value: '0' } })
-
             const addButton = await waitFor(() => {
               const addButton = component.getByRole('button', { name: 'Add' })
               expect(addButton).not.toBeDisabled()
@@ -347,66 +339,6 @@ describe('transaction-wizard-page', () => {
           }
         )
       })
-
-      it('can simulate a close account transaction without defining a sender address', async () => {
-        const testAccount2 = await localnet.context.generateAccount({ initialFunds: algo(0) })
-
-        await executeComponentTest(
-          () => {
-            return render(<TransactionWizardPage />)
-          },
-          async (component, user) => {
-            const addTransactionButton = await waitFor(() => {
-              const addTransactionButton = component.getByRole('button', { name: addTransactionLabel })
-              expect(addTransactionButton).not.toBeDisabled()
-              return addTransactionButton!
-            })
-            await user.click(addTransactionButton)
-
-            await selectOption(component.baseElement, user, transactionTypeLabel, 'Account Close (pay)')
-
-            const receiverInput = await component.findByLabelText(/Receiver/)
-            fireEvent.input(receiverInput, {
-              target: { value: walletAccount.addr },
-            })
-
-            const closeToInput = await component.findByLabelText(/Close remainder to/)
-            fireEvent.input(closeToInput, {
-              target: { value: testAccount2.addr },
-            })
-
-            const amountInput = await component.findByLabelText(/Amount to pay/)
-            fireEvent.input(amountInput, { target: { value: '0' } })
-
-            const addButton = await waitFor(() => {
-              const addButton = component.getByRole('button', { name: 'Add' })
-              expect(addButton).not.toBeDisabled()
-              return addButton!
-            })
-            await user.click(addButton)
-
-            await waitFor(() => {
-              const table = component.getByLabelText('transaction-group-table')
-              expect(table).toBeInTheDocument()
-              expect(component.queryByText('No transactions.')).not.toBeInTheDocument()
-            })
-
-            const simulateButton = await waitFor(() => {
-              const simulateButton = component.getByRole('button', { name: 'Simulate' })
-              expect(simulateButton).not.toBeDisabled()
-              return simulateButton!
-            })
-
-            await user.click(simulateButton)
-            await waitFor(
-              () => {
-                expect(component.queryByText(/error/i)).not.toBeInTheDocument()
-              },
-              { timeout: 5_000 }
-            )
-          }
-        )
-      })
     })
 
     describe('and an application create transaction is being sent', () => {
@@ -555,76 +487,6 @@ describe('transaction-wizard-page', () => {
           }
         )
       })
-
-      it('succeeds when sending an op-up transaction', async () => {
-        await executeComponentTest(
-          () => {
-            return render(<TransactionWizardPage />)
-          },
-          async (component, user) => {
-            const addTransactionButton = await waitFor(() => {
-              const addTransactionButton = component.getByRole('button', { name: addTransactionLabel })
-              expect(addTransactionButton).not.toBeDisabled()
-              return addTransactionButton!
-            })
-            await user.click(addTransactionButton)
-
-            await selectOption(component.baseElement, user, transactionTypeLabel, 'Application Create (appl)')
-
-            const senderInput = await component.findByLabelText(/Sender/)
-            fireEvent.input(senderInput, {
-              target: { value: walletAccount.addr },
-            })
-
-            const approvalProgramInput = await component.findByLabelText(/Approval program/)
-            fireEvent.input(approvalProgramInput, {
-              target: { value: 'CoEBQw==' },
-            })
-
-            const clearStateProgramInput = await component.findByLabelText(/Clear state program/)
-            fireEvent.input(clearStateProgramInput, {
-              target: { value: 'CoEBQw==' },
-            })
-
-            await selectOption(component.baseElement, user, /On complete/, 'Delete')
-
-            const addButton = await waitFor(() => {
-              const addButton = component.getByRole('button', { name: 'Add' })
-              expect(addButton).not.toBeDisabled()
-              return addButton!
-            })
-            await user.click(addButton)
-
-            const sendButton = await waitFor(() => {
-              const sendButton = component.getByRole('button', { name: sendButtonLabel })
-              expect(sendButton).not.toBeDisabled()
-              return sendButton!
-            })
-            await user.click(sendButton)
-
-            const resultsDiv = await waitFor(
-              () => {
-                expect(component.queryByText('Required')).not.toBeInTheDocument()
-                return component.getByText(groupSendResultsLabel).parentElement!
-              },
-              { timeout: 10_000 }
-            )
-
-            const transactionId = await waitFor(
-              () => {
-                const transactionLink = within(resultsDiv)
-                  .getAllByRole('link')
-                  .find((a) => a.getAttribute('href')?.startsWith('/localnet/transaction'))!
-                return transactionLink.getAttribute('href')!.split('/').pop()!
-              },
-              { timeout: 10_000 }
-            )
-
-            const result = await localnet.context.waitForIndexerTransaction(transactionId)
-            expect(result.transaction.sender).toBe(walletAccount.addr.toString())
-          }
-        )
-      })
     })
 
     describe('and an application update transaction is being sent', () => {

src/features/transaction-wizard/utils/transform-search-params-transactions.ts

@@ -132,6 +132,7 @@ const transformAssetOptInTransaction = async (params: BaseSearchParamTransaction
     id: BigInt(params.assetid),
     decimals: params.decimals ? Number(params.decimals) : undefined,
     unitName: params.unitname,
+    clawback: params.clawback,
   },
   fee: params.fee ? { setAutomatically: false, value: microAlgo(Number(params.fee)).algo } : { setAutomatically: true },
   validRounds: {
@@ -151,6 +152,7 @@ const transformAssetOptOutTransaction = async (params: BaseSearchParamTransactio
     id: BigInt(params.assetid),
     decimals: params.decimals ? Number(params.decimals) : undefined,
     unitName: params.unitname,
+    clawback: params.clawback,
   },
   closeRemainderTo: {
     value: params.closeto,

src/features/transaction-wizard/utils/use-transaction-search-params-builder.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { transformSearchParamsTransactions } from './transform-search-params-transactions'
@@ -7,29 +7,21 @@ import type { BaseSearchParamTransaction, BuildTransactionResult } from '../mode
 const transformSearchParams = (searchParams: URLSearchParams) => {
   const entries = Array.from(searchParams.entries())
 
-  const grouped = entries.reduce<BaseSearchParamTransaction[]>((acc, [key, value]) => {
+  const groupedParams = entries.reduce<BaseSearchParamTransaction[]>((acc, [key, value]) => {
     const match = key.match(/^([^[]+)\[(\d+)\]$/)
     if (!match) return acc
     const [, paramName, index] = match
     const idx = parseInt(index, 10)
-    acc[idx] ??= { type: '' } // ensure slot exists; keep your original default
+    acc[idx] ??= { type: '' }
     acc[idx][paramName] = value
     return acc
   }, [])
 
-  return grouped.filter((entry) => Object.keys(entry).length > 0)
+  return groupedParams.filter((entry) => Object.keys(entry).length > 0)
 }
 
 export function useTransactionSearchParamsBuilder() {
   const [searchParams] = useSearchParams()
-
-  // memoize the parsed params so effect only runs when params actually change
-  const transformedParams = useMemo(
-    () => transformSearchParams(searchParams),
-    // URLSearchParams is mutable; tie memoization to its string form
-    [searchParams]
-  )
-
   const [transactions, setTransactions] = useState<BuildTransactionResult[]>([])
   const [loading, setLoading] = useState(false)
 
@@ -38,6 +30,7 @@ export function useTransactionSearchParamsBuilder() {
     const loadTransactions = async () => {
       setLoading(true)
       try {
+        const transformedParams = transformSearchParams(searchParams)
         const { transactions, errors = [] } = await transformSearchParamsTransactions(transformedParams)
         if (!mounted) return
         setTransactions(transactions)
@@ -53,7 +46,7 @@ export function useTransactionSearchParamsBuilder() {
     return () => {
       mounted = false
     }
-  }, [transformedParams])
+  }, [searchParams])
 
   return { transactions, loading }
 }