diff --git a/packages/ui/src/EtherDepositForm.tsx b/packages/ui/src/EtherDepositForm/index.tsx similarity index 64% rename from packages/ui/src/EtherDepositForm.tsx rename to packages/ui/src/EtherDepositForm/index.tsx index ec279348e..6564dec3e 100644 --- a/packages/ui/src/EtherDepositForm.tsx +++ b/packages/ui/src/EtherDepositForm/index.tsx @@ -7,12 +7,14 @@ import { Autocomplete, Button, Collapse, + Flex, Group, Loader, Stack, Text, - Textarea, TextInput, + Textarea, + UnstyledButton, } from "@mantine/core"; import { useForm } from "@mantine/form"; import { useDisclosure } from "@mantine/hooks"; @@ -25,18 +27,18 @@ import { } from "react-icons/tb"; import { BaseError, - getAddress, Hex, + getAddress, isAddress, isHex, parseUnits, zeroAddress, } from "viem"; import { useAccount, useWaitForTransactionReceipt } from "wagmi"; -import { TransactionProgress } from "./TransactionProgress"; -import useUndeployedApplication from "./hooks/useUndeployedApplication"; -import { TransactionFormSuccessData } from "./DepositFormTypes"; -import { useFormattedBalance } from "./hooks/useFormattedBalance"; +import { TransactionFormSuccessData } from "../DepositFormTypes"; +import { TransactionProgress } from "../TransactionProgress"; +import { useAccountBalance } from "../hooks/useAccountBalance"; +import useUndeployedApplication from "../hooks/useUndeployedApplication"; export interface EtherDepositFormProps { applications: string[]; @@ -54,11 +56,12 @@ export const EtherDepositForm: FC = (props) => { } = props; const [advanced, { toggle: toggleAdvanced }] = useDisclosure(false); const { chain } = useAccount(); - const balance = useFormattedBalance(); + const accountBalance = useAccountBalance(); const form = useForm({ - validateInputOnBlur: true, + validateInputOnChange: true, initialValues: { + accountBalance: accountBalance, application: "", amount: "", execLayerData: "0x", @@ -66,10 +69,14 @@ export const EtherDepositForm: FC = (props) => { validate: { application: (value) => value !== "" && isAddress(value) ? null : "Invalid application", - amount: (value) => { + amount: (value, values) => { if (value !== "" && Number(value) > 0) { - if (Number(value) > Number(balance)) { - return `The amount ${value} exceeds your current balance of ${balance} ETH`; + const val = parseUnits( + value, + values.accountBalance.decimals, + ); + if (val > values.accountBalance.value) { + return `The amount ${value} exceeds your current balance of ${values.accountBalance.formatted} ETH`; } return null; } else { @@ -79,22 +86,25 @@ export const EtherDepositForm: FC = (props) => { execLayerData: (value) => isHex(value) ? null : "Invalid hex string", }, - transformValues: (values) => ({ - address: isAddress(values.application) - ? getAddress(values.application) - : zeroAddress, - amount: - values.amount !== "" - ? parseUnits( - values.amount, - chain?.nativeCurrency.decimals ?? 18, - ) - : undefined, - execLayerData: values.execLayerData - ? (values.execLayerData as Hex) - : "0x", - }), + transformValues: (values) => { + return { + address: isAddress(values.application) + ? getAddress(values.application) + : zeroAddress, + amount: + values.amount !== "" + ? parseUnits( + values.amount, + chain?.nativeCurrency.decimals ?? 18, + ) + : undefined, + execLayerData: values.execLayerData + ? (values.execLayerData as Hex) + : "0x", + }; + }, }); + const { address, amount, execLayerData } = form.getTransformedValues(); const prepare = useSimulateEtherPortalDepositEther({ args: [address, execLayerData], @@ -118,9 +128,19 @@ export const EtherDepositForm: FC = (props) => { form.reset(); execute.reset(); onSearchApplications(""); + accountBalance.refetch(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [wait, onSearchApplications, onSuccess]); + }, [wait, onSearchApplications, onSuccess, accountBalance]); + + useEffect(() => { + form.setValues({ accountBalance: accountBalance }); + + if (form.isDirty("amount")) { + form.validateField("amount"); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [accountBalance]); return (
@@ -128,6 +148,7 @@ export const EtherDepositForm: FC = (props) => { = (props) => { )} - ETH} - withAsterisk - {...form.getInputProps("amount")} - /> + + ETH} + withAsterisk + {...form.getInputProps("amount")} + /> + + + Balance: {accountBalance.formatted} + {accountBalance.value > 0 && ( + { + form.setFieldValue( + "amount", + accountBalance.formatted, + ); + }} + data-testid="max-button" + > + Max + + )} + +