feat: make batch call transaction parameters configurable in laboratory app (APKT-4175)

apps/laboratory/src/components/AddTransactionModal.tsx

@@ -3,14 +3,18 @@ import { useState } from 'react'
 import {
   Box,
   Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
   Input,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
-  ModalOverlay
+  ModalOverlay,
+  Tooltip
 } from '@chakra-ui/react'
 import { ethers } from 'ethers'
 
@@ -19,12 +23,24 @@ import { useChakraToast } from './Toast'
 type IAddTransactionModalProps = {
   isOpen: boolean
   onClose: () => void
-  onSubmit: (params: { eth: string; to: string }) => void
+  onSubmit: (params: { eth: string; to: string; data?: string }) => void
 }
 export function AddTransactionModal({ isOpen, onClose, onSubmit }: IAddTransactionModalProps) {
   const toast = useChakraToast()
   const [eth, setEth] = useState(0)
   const [to, setTo] = useState('')
+  const [data, setData] = useState('')
+  const [mode, setMode] = useState<'simple' | 'advanced'>('simple')
+
+  function isValidHex(value: string): boolean {
+    // Empty is valid (optional field)
+    if (!value) {
+      return true
+    }
+
+    return /^0x[0-9a-fA-F]*$/u.test(value)
+  }
+
   function onAddTransaction() {
     if (!ethers.isAddress(to)) {
       toast({
@@ -44,14 +60,25 @@ export function AddTransactionModal({ isOpen, onClose, onSubmit }: IAddTransacti
 
       return
     }
-    onSubmit({ eth: eth.toString(), to })
+    if (data && !isValidHex(data)) {
+      toast({
+        title: 'Error',
+        description: 'Invalid hex data format. Must start with 0x',
+        type: 'error'
+      })
+
+      return
+    }
+    onSubmit({ eth: eth.toString(), to, data: data || undefined })
     reset()
     onClose()
   }
 
   function reset() {
     setEth(0)
     setTo('')
+    setData('')
+    setMode('simple')
   }
 
   return (
@@ -64,21 +91,66 @@ export function AddTransactionModal({ isOpen, onClose, onSubmit }: IAddTransacti
           <ModalBody>
             Transactions will be batched and sent together to your wallet for approval
             <Box mt={4}>
-              <label>Amount ETH</label>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setMode(mode === 'simple' ? 'advanced' : 'simple')}
+                mb={4}
+              >
+                {mode === 'simple' ? 'Switch to Advanced Mode' : 'Switch to Simple Mode'}
+              </Button>
+            </Box>
+            <FormControl mt={4}>
+              <FormLabel>
+                <Tooltip label="The amount of ETH to send in the transaction" placement="top">
+                  Amount ETH
+                </Tooltip>
+              </FormLabel>
               <Input
                 placeholder="0.001"
                 type="number"
+                value={eth || ''}
                 onChange={event => setEth(event.target.valueAsNumber)}
               />
-            </Box>
-            <Box mt={4}>
-              <label>To</label>
+              <FormHelperText>Amount in ETH (e.g., 0.001)</FormHelperText>
+            </FormControl>
+            <FormControl mt={4}>
+              <FormLabel>
+                <Tooltip label="The recipient address for this transaction" placement="top">
+                  To Address
+                </Tooltip>
+              </FormLabel>
               <Input
                 placeholder="0x0..."
                 type="text"
+                value={to}
                 onChange={event => setTo(event.target.value)}
               />
-            </Box>
+              <FormHelperText>Recipient Ethereum address</FormHelperText>
+            </FormControl>
+            {mode === 'advanced' && (
+              <FormControl mt={4}>
+                <FormLabel>
+                  <Tooltip
+                    label="Optional transaction data as hex string (e.g., contract call data)"
+                    placement="top"
+                  >
+                    Data (Optional)
+                  </Tooltip>
+                </FormLabel>
+                <Input
+                  placeholder="0x..."
+                  type="text"
+                  value={data}
+                  onChange={event => setData(event.target.value)}
+                  isInvalid={data !== '' && !isValidHex(data)}
+                />
+                <FormHelperText>
+                  Hex-encoded transaction data (must start with 0x). Leave empty for simple
+                  transfers.
+                </FormHelperText>
+              </FormControl>
+            )}
           </ModalBody>
           <ModalFooter>
             <Button variant="ghost" mr={3} onClick={onClose}>

apps/laboratory/src/components/Ethers/EthersSendCallsTest.tsx

@@ -37,9 +37,9 @@ export function EthersSendCallsTest({
   const { chainId } = useAppKitNetwork()
   const { address, isConnected } = useAppKitAccount({ namespace: 'eip155' })
   const { walletProvider } = useAppKitProvider<Eip1193Provider>('eip155')
-  const [transactionsToBatch, setTransactionsToBatch] = useState<{ value: string; to: string }[]>(
-    []
-  )
+  const [transactionsToBatch, setTransactionsToBatch] = useState<
+    { value: string; to: string; data?: string }[]
+  >([])
   const { isMethodSupported } = useEthersActiveCapabilities()
   const { isSupported, currentChainsInfo, supportedChains, supportedChainsName } = useCapabilities({
     capabilities,
@@ -49,13 +49,13 @@ export function EthersSendCallsTest({
   const toast = useChakraToast()
 
   const [isOpen, setIsOpen] = useState(false)
-  function onSubmit(args: { to: string; eth: string }) {
+  function onSubmit(args: { to: string; eth: string; data?: string }) {
     setLastCallsBatchId(null)
     setTransactionsToBatch(prev => [
       ...prev,
       {
         to: args.to as Address,
-        data: '0x' as Hex,
+        data: (args.data || '0x') as Hex,
         value: `0x${parseGwei(args.eth).toString(16)}`
       }
     ])
@@ -176,6 +176,9 @@ export function EthersSendCallsTest({
                         </StatLabel>
                         <StatNumber>{parseInt(tx.value, 16) / 1000000000} ETH</StatNumber>
                         <StatHelpText>to {tx.to}</StatHelpText>
+                        {tx.data && tx.data !== '0x' && (
+                          <StatHelpText>data: {tx.data}</StatHelpText>
+                        )}
                       </Stat>
                     </CardBody>
                   </Card>{' '}

apps/laboratory/src/components/Ethers/EthersTransactionTest.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 
+import { AddIcon } from '@chakra-ui/icons'
 import { Button, Link, Spacer, Stack, Text } from '@chakra-ui/react'
 import { BrowserProvider, JsonRpcSigner, ethers } from 'ethers'
 
@@ -11,6 +12,7 @@ import {
   useAppKitProvider
 } from '@reown/appkit/react'
 
+import { AddTransactionModal } from '@/src/components/AddTransactionModal'
 import { useChakraToast } from '@/src/components/Toast'
 import { vitalikEthAddress } from '@/src/utils/DataUtil'
 
@@ -20,6 +22,12 @@ export function EthersTransactionTest() {
   const { address } = useAppKitAccount({ namespace: 'eip155' })
   const { walletProvider } = useAppKitProvider<Provider>('eip155')
   const [isLoading, setIsLoading] = useState(false)
+  const [customTx, setCustomTx] = useState<{
+    to: string
+    value: bigint
+    data?: string
+  } | null>(null)
+  const [isModalOpen, setIsModalOpen] = useState(false)
 
   async function onSendTransaction() {
     try {
@@ -29,10 +37,13 @@ export function EthersTransactionTest() {
       }
       const provider = new BrowserProvider(walletProvider, chainId)
       const signer = new JsonRpcSigner(provider, address)
-      const tx = await signer.sendTransaction({
+
+      const txParams = customTx || {
         to: vitalikEthAddress,
         value: ethers.parseUnits('0.0001', 'gwei')
-      })
+      }
+
+      const tx = await signer.sendTransaction(txParams)
 
       toast({
         title: 'Success',
@@ -51,30 +62,70 @@ export function EthersTransactionTest() {
     }
   }
 
+  function onConfigureTransaction(params: { eth: string; to: string; data?: string }) {
+    setCustomTx({
+      to: params.to,
+      value: ethers.parseUnits(params.eth, 'gwei'),
+      data: params.data
+    })
+    setIsModalOpen(false)
+  }
+
+  function onCloseModal() {
+    setIsModalOpen(false)
+  }
+
   return chainId !== mainnet.id && address ? (
-    <Stack direction={['column', 'column', 'row']}>
-      <Button
-        data-testid="sign-transaction-button"
-        onClick={onSendTransaction}
-        isDisabled={isLoading}
-      >
-        Send Transaction to Vitalik
-      </Button>
-
-      <Spacer />
-
-      <Link isExternal href="https://sepoliafaucet.com">
-        <Button variant="outline" colorScheme="blue" isDisabled={isLoading}>
-          Sepolia Faucet 1
+    <>
+      <Stack direction={['column', 'column', 'row']}>
+        <Button
+          data-testid="sign-transaction-button"
+          onClick={onSendTransaction}
+          isDisabled={isLoading}
+        >
+          {customTx ? 'Send Custom Transaction' : 'Send Transaction to Vitalik'}
         </Button>
-      </Link>
 
-      <Link isExternal href="https://www.infura.io/faucet/sepolia">
-        <Button variant="outline" colorScheme="orange" isDisabled={isLoading}>
-          Sepolia Faucet 2
+        <Button
+          variant="outline"
+          colorScheme="blue"
+          onClick={() => setIsModalOpen(true)}
+          isDisabled={isLoading}
+        >
+          <AddIcon mr={2} /> Configure Transaction
         </Button>
-      </Link>
-    </Stack>
+
+        {customTx && (
+          <Button
+            variant="outline"
+            colorScheme="red"
+            onClick={() => setCustomTx(null)}
+            isDisabled={isLoading}
+          >
+            Reset to Default
+          </Button>
+        )}
+
+        <Spacer />
+
+        <Link isExternal href="https://sepoliafaucet.com">
+          <Button variant="outline" colorScheme="blue" isDisabled={isLoading}>
+            Sepolia Faucet 1
+          </Button>
+        </Link>
+
+        <Link isExternal href="https://www.infura.io/faucet/sepolia">
+          <Button variant="outline" colorScheme="orange" isDisabled={isLoading}>
+            Sepolia Faucet 2
+          </Button>
+        </Link>
+      </Stack>
+      <AddTransactionModal
+        isOpen={isModalOpen}
+        onSubmit={onConfigureTransaction}
+        onClose={onCloseModal}
+      />
+    </>
   ) : (
     <Text fontSize="md" color="yellow">
       Feature not enabled on Ethereum Mainnet