diff --git a/apps/laboratory/src/components/AddTransactionModal.tsx b/apps/laboratory/src/components/AddTransactionModal.tsx
index cf4fb55555..81a50f7292 100644
--- a/apps/laboratory/src/components/AddTransactionModal.tsx
+++ b/apps/laboratory/src/components/AddTransactionModal.tsx
@@ -3,6 +3,9 @@ import { useState } from 'react'
import {
Box,
Button,
+ FormControl,
+ FormHelperText,
+ FormLabel,
Input,
Modal,
ModalBody,
@@ -10,7 +13,8 @@ import {
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,7 +60,16 @@ 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()
}
@@ -52,6 +77,8 @@ export function AddTransactionModal({ isOpen, onClose, onSubmit }: IAddTransacti
function reset() {
setEth(0)
setTo('')
+ setData('')
+ setMode('simple')
}
return (
@@ -64,21 +91,66 @@ export function AddTransactionModal({ isOpen, onClose, onSubmit }: IAddTransacti
Transactions will be batched and sent together to your wallet for approval
-
+
+
+
+
+
+ Amount ETH
+
+
setEth(event.target.valueAsNumber)}
/>
-
-
-
+ Amount in ETH (e.g., 0.001)
+
+
+
+
+ To Address
+
+
setTo(event.target.value)}
/>
-
+ Recipient Ethereum address
+
+ {mode === 'advanced' && (
+
+
+
+ Data (Optional)
+
+
+ setData(event.target.value)}
+ isInvalid={data !== '' && !isValidHex(data)}
+ />
+
+ Hex-encoded transaction data (must start with 0x). Leave empty for simple
+ transfers.
+
+
+ )}