From 11bd9ecf0b1d169a3403f16702bb9e39c9b03b28 Mon Sep 17 00:00:00 2001
From: Bruno Menezes <brunodmenezes@gmail.com>
Date: Wed, 8 Jan 2025 14:52:43 +1300
Subject: [PATCH 1/5] feat: Add hook to provide account-balance data. tests
 included.

---
 packages/ui/src/hooks/useAccountBalance.ts    | 42 +++++++++++++
 .../ui/test/hooks/useAccountBalance.test.ts   | 60 +++++++++++++++++++
 2 files changed, 102 insertions(+)
 create mode 100644 packages/ui/src/hooks/useAccountBalance.ts
 create mode 100644 packages/ui/test/hooks/useAccountBalance.test.ts

diff --git a/packages/ui/src/hooks/useAccountBalance.ts b/packages/ui/src/hooks/useAccountBalance.ts
new file mode 100644
index 00000000..e9f525c3
--- /dev/null
+++ b/packages/ui/src/hooks/useAccountBalance.ts
@@ -0,0 +1,42 @@
+import { isNotNil, propOr } from "ramda";
+import { useMemo } from "react";
+import { formatUnits } from "viem";
+import { useAccount, useBalance } from "wagmi";
+
+type DataType =
+    | {
+          decimals: number;
+          formatted: string;
+          symbol: string;
+          value: bigint;
+      }
+    | undefined;
+
+/**
+ * Check the ETH balance of the connected account.
+ * returns the value, decimals, symbol, formatted value and fn to refresh the information.
+ * @returns
+ */
+export const useAccountBalance = () => {
+    const { address } = useAccount();
+    const { data, refetch } = useBalance({
+        address,
+    });
+
+    const result = useMemo(() => {
+        const value = propOr<bigint, DataType, bigint>(0n, "value", data);
+        const decimals = propOr<number, DataType, number>(18, "decimals", data);
+        const symbol = propOr<string, DataType, string>("ETH", "symbol", data);
+        const formatted = isNotNil(data) ? formatUnits(value, decimals) : "0";
+
+        return {
+            value,
+            decimals,
+            symbol,
+            formatted,
+            refetch,
+        };
+    }, [data, refetch]);
+
+    return result;
+};
diff --git a/packages/ui/test/hooks/useAccountBalance.test.ts b/packages/ui/test/hooks/useAccountBalance.test.ts
new file mode 100644
index 00000000..3115f6f8
--- /dev/null
+++ b/packages/ui/test/hooks/useAccountBalance.test.ts
@@ -0,0 +1,60 @@
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, vi } from "vitest";
+import { useAccount, useBalance } from "wagmi";
+import { useAccountBalance } from "../../src/hooks/useAccountBalance";
+
+vi.mock("wagmi");
+
+const useAccountMock = vi.mocked(useAccount, { partial: true });
+const useBalanceMock = vi.mocked(useBalance, { partial: true });
+const balanceRefetchMock = vi.fn();
+
+const ethBalance = 456632268985698099n;
+const ethDecimals = 18;
+const ethSymbol = "ETH";
+
+describe("UseAccountBalance Hook", () => {
+    beforeEach(() => {
+        useAccountMock.mockReturnValue({
+            address: "0xCF6bd2F07c24C50BDDf5Ed3c1858f9aDECB727cE",
+            isConnected: true,
+        });
+        useBalanceMock.mockReturnValue({
+            data: {
+                value: ethBalance,
+                decimals: ethDecimals,
+                symbol: ethSymbol,
+            },
+            refetch: balanceRefetchMock,
+        });
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it("should return information about the connected account", () => {
+        const { result } = renderHook(() => useAccountBalance());
+
+        expect(result.current.symbol).toEqual("ETH");
+        expect(result.current.value).toEqual(ethBalance);
+        expect(result.current.decimals).toEqual(18);
+        expect(result.current.formatted).toEqual("0.456632268985698099");
+        expect(result.current.refetch).toEqual(expect.any(Function));
+    });
+
+    it("should return defaults in case the data is undefined", () => {
+        useBalanceMock.mockReturnValue({
+            data: undefined,
+            refetch: balanceRefetchMock,
+        });
+
+        const { result } = renderHook(() => useAccountBalance());
+
+        expect(result.current.symbol).toEqual("ETH");
+        expect(result.current.value).toEqual(0n);
+        expect(result.current.decimals).toEqual(18);
+        expect(result.current.formatted).toEqual("0");
+        expect(result.current.refetch).toEqual(expect.any(Function));
+    });
+});

From 0fc9c5f5346ef79d2cb29bb0a352ccdf127de154 Mon Sep 17 00:00:00 2001
From: Bruno Menezes <brunodmenezes@gmail.com>
Date: Wed, 8 Jan 2025 14:55:37 +1300
Subject: [PATCH 2/5] feat: Display balance at all times, validation run on
 change. small refactoring on how ether-form is exported.

---
 .../index.tsx}                                | 122 ++++++++++++------
 packages/ui/src/index.tsx                     |   8 +-
 2 files changed, 87 insertions(+), 43 deletions(-)
 rename packages/ui/src/{EtherDepositForm.tsx => EtherDepositForm/index.tsx} (64%)

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 ec279348..6564dec3 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<EtherDepositFormProps> = (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<EtherDepositFormProps> = (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<EtherDepositFormProps> = (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<EtherDepositFormProps> = (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 (
         <form data-testid="ether-deposit-form">
@@ -128,6 +148,7 @@ export const EtherDepositForm: FC<EtherDepositFormProps> = (props) => {
                 <Autocomplete
                     label="Application"
                     description="The application smart contract address"
+                    data-testid="application-input"
                     placeholder="0x"
                     data={applications}
                     withAsterisk
@@ -157,21 +178,44 @@ export const EtherDepositForm: FC<EtherDepositFormProps> = (props) => {
                     </Alert>
                 )}
 
-                <TextInput
-                    type="number"
-                    step="1"
-                    min={0}
-                    label="Amount"
-                    description="Amount of ether to deposit"
-                    placeholder="0"
-                    rightSectionWidth={60}
-                    rightSection={<Text>ETH</Text>}
-                    withAsterisk
-                    {...form.getInputProps("amount")}
-                />
+                <Stack gap="xs">
+                    <TextInput
+                        type="number"
+                        step="1"
+                        min={0}
+                        label="Amount"
+                        description="Amount of ether to deposit"
+                        data-testid="amount-input"
+                        placeholder="0"
+                        rightSectionWidth={60}
+                        rightSection={<Text>ETH</Text>}
+                        withAsterisk
+                        {...form.getInputProps("amount")}
+                    />
+
+                    <Flex c={"dark.2"} gap="3">
+                        <Text fz="xs">Balance: {accountBalance.formatted}</Text>
+                        {accountBalance.value > 0 && (
+                            <UnstyledButton
+                                fz={"xs"}
+                                c={"cyan"}
+                                onClick={() => {
+                                    form.setFieldValue(
+                                        "amount",
+                                        accountBalance.formatted,
+                                    );
+                                }}
+                                data-testid="max-button"
+                            >
+                                Max
+                            </UnstyledButton>
+                        )}
+                    </Flex>
+                </Stack>
 
                 <Collapse in={advanced}>
                     <Textarea
+                        data-testid="eth-extra-data-input"
                         label="Extra data"
                         description="Extra execution layer data handled by the application"
                         {...form.getInputProps("execLayerData")}
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index aef8bb66..29317da6 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -4,6 +4,10 @@ export { ERC1155DepositForm } from "./ERC1155DepositForm";
 export { ERC20DepositForm } from "./ERC20DepositForm";
 export { ERC721DepositForm } from "./ERC721DepositForm";
 export { EtherDepositForm } from "./EtherDepositForm";
+export {
+    GenericInputForm,
+    type GenericInputFormSpecification,
+} from "./GenericInputForm";
 export {
     InputContent,
     InputDetails,
@@ -16,7 +20,3 @@ export { Summary } from "./Summary";
 export { SummaryCard } from "./SummaryCard";
 export { TransactionProgress } from "./TransactionProgress";
 export { default as useWatchQueryOnBlockChange } from "./hooks/useWatchQueryOnBlockChange";
-export {
-    GenericInputForm,
-    type GenericInputFormSpecification,
-} from "./GenericInputForm";

From 2dd5541cb6551ebad9b1c8e3adbbd503a0710f5a Mon Sep 17 00:00:00 2001
From: Bruno Menezes <brunodmenezes@gmail.com>
Date: Wed, 8 Jan 2025 14:56:54 +1300
Subject: [PATCH 3/5] test: refactored the tests, removed blur calls and change
 how mocks are setup.

---
 packages/ui/test/EtherDepositForm.test.tsx | 298 +++++++++------------
 1 file changed, 133 insertions(+), 165 deletions(-)

diff --git a/packages/ui/test/EtherDepositForm.test.tsx b/packages/ui/test/EtherDepositForm.test.tsx
index 5dddcf35..db56036f 100644
--- a/packages/ui/test/EtherDepositForm.test.tsx
+++ b/packages/ui/test/EtherDepositForm.test.tsx
@@ -1,9 +1,24 @@
+import {
+    useSimulateEtherPortalDepositEther,
+    useWriteEtherPortalDepositEther,
+} from "@cartesi/rollups-wagmi";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { afterAll, beforeEach, describe, it } from "vitest";
-import { EtherDepositForm } from "../src/EtherDepositForm";
-import withMantineTheme from "./utils/WithMantineTheme";
 import { getAddress } from "viem";
+import { beforeEach, describe, it } from "vitest";
 import { useAccount, useBalance, useWaitForTransactionReceipt } from "wagmi";
+import { EtherDepositForm } from "../src/EtherDepositForm";
+import withMantineTheme from "./utils/WithMantineTheme";
+
+vi.mock("wagmi");
+vi.mock("viem", async () => {
+    const actual = await vi.importActual("viem");
+    return {
+        ...(actual as any),
+        getAddress: (address: string) => address,
+    };
+});
+
+vi.mock("@cartesi/rollups-wagmi");
 
 const Component = withMantineTheme(EtherDepositForm);
 
@@ -20,49 +35,66 @@ const defaultProps = {
     onSuccess: () => undefined,
 };
 
-vi.mock("@cartesi/rollups-wagmi", async () => {
-    return {
-        useSimulateEtherPortalDepositEther: () => ({
-            data: {
-                request: {},
-            },
-            config: {},
-            reset: vi.fn(),
-        }),
-        useWriteEtherPortalDepositEther: () => ({
-            wait: vi.fn(),
-            reset: vi.fn(),
-        }),
-    };
-});
+const selectApp = (app: string) => {
+    const appInput = screen.getByTestId("application-input");
+
+    return fireEvent.change(appInput, {
+        target: {
+            value: app.toLowerCase(),
+        },
+    });
+};
+
+const setRequiredValues = async (app: string, amount = "0.2") => {
+    selectApp(app);
+
+    fireEvent.change(screen.getByTestId("amount-input"), {
+        target: { value: amount },
+    });
+
+    await waitFor(() => expect(screen.getByText("Advanced")).toBeVisible());
+    fireEvent.click(screen.getByText("Advanced"));
+    await waitFor(() => expect(screen.getByText("Extra data")).toBeVisible());
+};
 
-vi.mock("wagmi");
 const useWaitForTransactionReceiptMock = vi.mocked(
     useWaitForTransactionReceipt,
     { partial: true },
 );
-const useAccountMock = vi.mocked(useAccount, { partial: true });
-const useBalanceMock = vi.mocked(useBalance, { partial: true });
-
-vi.mock("viem", async () => {
-    const actual = await vi.importActual("viem");
-    return {
-        ...(actual as any),
-        getAddress: (address: string) => address,
-    };
-});
 
-vi.mock("@mantine/form", async () => {
-    const actual = await vi.importActual("@mantine/form");
-    return {
-        ...(actual as any),
-        useForm: (actual as any).useForm,
-    };
+const useSimulateDepositEtherMock = vi.mocked(
+    useSimulateEtherPortalDepositEther,
+    { partial: true },
+);
+const useWriteDepositEtherMock = vi.mocked(useWriteEtherPortalDepositEther, {
+    partial: true,
 });
+const useAccountMock = vi.mocked(useAccount, { partial: true });
+const useBalanceMock = vi.mocked(useBalance, { partial: true });
+const balanceRefetchMock = vi.fn();
 
 describe("Rollups EtherDepositForm", () => {
     beforeEach(() => {
-        useWaitForTransactionReceiptMock.mockReturnValue({});
+        useSimulateDepositEtherMock.mockReturnValue({
+            data: undefined,
+            status: "success",
+            isLoading: false,
+            isFetching: false,
+            isSuccess: true,
+        });
+
+        useWriteDepositEtherMock.mockReturnValue({
+            writeContract: vi.fn(),
+            reset: vi.fn(),
+            status: "idle",
+            data: undefined,
+        });
+
+        useWaitForTransactionReceiptMock.mockReturnValue({
+            data: undefined,
+            isLoading: false,
+            isSuccess: false,
+        });
         useAccountMock.mockReturnValue({
             chain: {
                 nativeCurrency: {
@@ -74,14 +106,15 @@ describe("Rollups EtherDepositForm", () => {
         });
         useBalanceMock.mockReturnValue({
             data: {
-                value: 355943959031747438n,
+                value: 456632268985698099n,
                 decimals: 18,
             },
+            refetch: balanceRefetchMock,
         });
     });
 
-    afterAll(() => {
-        vi.restoreAllMocks();
+    afterEach(() => {
+        vi.clearAllMocks();
     });
 
     describe("Extra data textarea", () => {
@@ -113,8 +146,6 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            fireEvent.blur(textarea);
-
             expect(textarea.getAttribute("aria-invalid")).toBe("true");
             expect(screen.getByText("Invalid hex string")).toBeInTheDocument();
         });
@@ -131,8 +162,6 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            fireEvent.blur(textarea);
-
             expect(textarea.getAttribute("aria-invalid")).toBe("false");
             expect(() => screen.getByText("Invalid hex string")).toThrow(
                 "Unable to find an element",
@@ -140,20 +169,10 @@ describe("Rollups EtherDepositForm", () => {
         });
 
         it("should correctly format extra data", async () => {
-            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
-            const mockedHook = vi.fn().mockReturnValue({
-                ...rollupsWagmi.useSimulateEtherPortalDepositEther,
-                loading: false,
-                error: null,
-            });
-            rollupsWagmi.useSimulateEtherPortalDepositEther = vi
-                .fn()
-                .mockImplementation(mockedHook);
-
-            const { container } = render(<Component {...defaultProps} />);
-            const execLayerDataInput = container.querySelector(
-                "textarea",
-            ) as HTMLTextAreaElement;
+            render(<Component {...defaultProps} />);
+            const execLayerDataInput = screen.getByTestId(
+                "eth-extra-data-input",
+            );
 
             const hexValue = "0x123123";
             fireEvent.change(execLayerDataInput, {
@@ -162,7 +181,7 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
+            expect(useSimulateDepositEtherMock).toHaveBeenLastCalledWith({
                 args: ["0x0000000000000000000000000000000000000000", hexValue],
                 query: {
                     enabled: false,
@@ -173,71 +192,60 @@ describe("Rollups EtherDepositForm", () => {
     });
 
     describe("Send button", () => {
-        it("should be disabled when extra data is not hex", () => {
+        it("should be disabled when extra data is not hex", async () => {
+            useSimulateDepositEtherMock.mockReturnValue({
+                status: "success",
+                isLoading: false,
+                error: null,
+                data: {
+                    request: {},
+                },
+            });
+
             const { container } = render(<Component {...defaultProps} />);
-            const textarea = container.querySelector(
-                "textarea",
-            ) as HTMLTextAreaElement;
-            const buttons = container.querySelectorAll("button");
-            const submitButton = buttons[1] as HTMLButtonElement;
+
+            await setRequiredValues(applications[0]);
+
+            const depositButton = screen.getByText("Deposit").closest("button");
+            const textarea = screen.getByTestId("eth-extra-data-input");
+
+            expect(depositButton?.hasAttribute("disabled")).toBe(false);
 
             fireEvent.change(textarea, {
                 target: {
                     value: "",
                 },
             });
-            fireEvent.blur(textarea);
 
-            expect(submitButton.hasAttribute("disabled")).toBe(true);
+            expect(depositButton?.hasAttribute("disabled")).toBe(true);
         });
 
         it("should invoke write function when send button is clicked", async () => {
-            const selectedApplication = applications[1];
             const mockedWrite = vi.fn();
-            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
-            rollupsWagmi.useSimulateEtherPortalDepositEther = vi
-                .fn()
-                .mockReturnValue({
-                    ...rollupsWagmi.useSimulateEtherPortalDepositEther,
-                    data: {
-                        request: {},
-                    },
-                    loading: false,
-                    error: null,
-                });
-            rollupsWagmi.useWriteEtherPortalDepositEther = vi
-                .fn()
-                .mockReturnValue({
-                    ...rollupsWagmi.useWriteEtherPortalDepositEther,
-                    writeContract: mockedWrite,
-                    reset: vi.fn(),
-                });
 
-            const { container } = render(<Component {...defaultProps} />);
-            const buttons = container.querySelectorAll("button");
-            const submitButton = buttons[1] as HTMLButtonElement;
-
-            const inputs = container.querySelectorAll("input");
-            const applicationInput = inputs[0] as HTMLInputElement;
-            const amountInput = inputs[1] as HTMLInputElement;
-            applicationInput.setAttribute("value", selectedApplication);
-
-            fireEvent.change(applicationInput, {
-                target: {
-                    value: selectedApplication,
+            useSimulateDepositEtherMock.mockReturnValue({
+                status: "success",
+                isLoading: false,
+                error: null,
+                data: {
+                    request: {},
                 },
             });
 
-            fireEvent.change(amountInput, {
-                target: {
-                    value: "0.1",
-                },
+            useWriteDepositEtherMock.mockReturnValue({
+                writeContract: mockedWrite,
+                reset: vi.fn(),
             });
 
-            fireEvent.blur(amountInput);
-            expect(submitButton.hasAttribute("disabled")).toBe(false);
+            const selectedApplication = applications[1];
+            render(<Component {...defaultProps} />);
+
+            await setRequiredValues(selectedApplication, "0.1");
+            const submitButton = screen.getByText("Deposit").closest("button");
+
+            expect(submitButton?.hasAttribute("disabled") ?? true).toBe(false);
 
-            fireEvent.click(submitButton);
+            fireEvent.click(submitButton!);
             expect(mockedWrite).toHaveBeenCalled();
         });
 
@@ -261,26 +269,11 @@ describe("Rollups EtherDepositForm", () => {
         });
 
         it('should enable "useSimulateEtherPortalDepositEther" only when the form is valid', async () => {
-            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
-            const mockedHook = vi.fn().mockReturnValue({
-                ...rollupsWagmi.useSimulateEtherPortalDepositEther,
-                loading: false,
-                error: null,
-            });
-            rollupsWagmi.useSimulateEtherPortalDepositEther = vi
-                .fn()
-                .mockImplementation(mockedHook);
+            render(<Component {...defaultProps} />);
 
-            const { container } = render(<Component {...defaultProps} />);
-            const applicationsInput = container.querySelector(
-                "input",
-            ) as HTMLInputElement;
-            const amountInput = container.querySelectorAll(
-                "input",
-            )[1] as HTMLInputElement;
-            const textarea = container.querySelector(
-                "textarea",
-            ) as HTMLTextAreaElement;
+            const applicationsInput = screen.getByTestId("application-input");
+            const amountInput = screen.getByTestId("amount-input");
+            const textarea = screen.getByTestId("eth-extra-data-input");
 
             const [application] = applications;
 
@@ -302,7 +295,7 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
+            expect(useSimulateDepositEtherMock).toHaveBeenLastCalledWith({
                 args: ["0x0000000000000000000000000000000000000000", "0x"],
                 query: {
                     enabled: false,
@@ -328,7 +321,7 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
+            expect(useSimulateDepositEtherMock).toHaveBeenLastCalledWith({
                 args: [getAddress(application), "0x"],
                 query: {
                     enabled: false,
@@ -354,7 +347,7 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
+            expect(useSimulateDepositEtherMock).toHaveBeenLastCalledWith({
                 args: ["0x60a7048c3136293071605a4eaffef49923e981cc", "0x"],
                 query: {
                     enabled: false,
@@ -380,7 +373,7 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
+            expect(useSimulateDepositEtherMock).toHaveBeenLastCalledWith({
                 args: ["0x60a7048c3136293071605a4eaffef49923e981cc", "0x123"],
                 query: {
                     enabled: true,
@@ -458,25 +451,13 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            fireEvent.blur(input);
-
             expect(input.getAttribute("aria-invalid")).toBe("true");
             expect(screen.getByText("Invalid application")).toBeInTheDocument();
         });
 
         it("should correctly format address", async () => {
-            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
-            const mockedHook = vi.fn().mockReturnValue({
-                ...rollupsWagmi.useSimulateEtherPortalDepositEther,
-                loading: false,
-                error: null,
-            });
-            rollupsWagmi.useSimulateEtherPortalDepositEther = vi
-                .fn()
-                .mockImplementation(mockedHook);
-
-            const { container } = render(<Component {...defaultProps} />);
-            const input = container.querySelector("input") as HTMLInputElement;
+            render(<Component {...defaultProps} />);
+            const input = screen.getByTestId("application-input");
 
             const [application] = applications;
             fireEvent.change(input, {
@@ -485,7 +466,7 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
+            expect(useSimulateDepositEtherMock).toHaveBeenLastCalledWith({
                 args: [getAddress(application), "0x"],
                 query: {
                     enabled: false,
@@ -527,31 +508,22 @@ describe("Rollups EtherDepositForm", () => {
 
     describe("Amount input", () => {
         it("should correctly process small decimal numbers", async () => {
-            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
-            const mockedHook = vi.fn().mockReturnValue({
-                ...rollupsWagmi.useSimulateEtherPortalDepositEther,
+            useSimulateDepositEtherMock.mockReturnValue({
+                status: "success",
+                isLoading: false,
+                error: null,
                 data: {
                     request: {},
                 },
-                loading: false,
-                error: null,
             });
-            rollupsWagmi.useSimulateEtherPortalDepositEther = vi
-                .fn()
-                .mockImplementation(mockedHook);
 
-            const { container } = render(<Component {...defaultProps} />);
-            const amountInput = container.querySelector(
-                '[type="number"]',
-            ) as HTMLInputElement;
+            render(<Component {...defaultProps} />);
 
-            fireEvent.change(amountInput, {
-                target: {
-                    value: "0.0000001",
-                },
-            });
+            const amountInput = screen.getByTestId("amount-input");
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
+            fireEvent.change(amountInput, { target: { value: "0.0000001" } });
+
+            expect(useSimulateDepositEtherMock).toHaveBeenLastCalledWith({
                 args: ["0x0000000000000000000000000000000000000000", "0x"],
                 value: 100000000000n,
                 query: {
@@ -582,8 +554,6 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            fireEvent.blur(amountInput);
-
             expect(
                 screen.getByText(
                     `The amount ${value} exceeds your current balance of ${formattedBalanceValue} ETH`,
@@ -597,8 +567,6 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            fireEvent.blur(amountInput);
-
             expect(() =>
                 screen.getByText(
                     `The amount ${value} exceeds your current balance of ${formattedBalanceValue} ETH`,
@@ -607,7 +575,7 @@ describe("Rollups EtherDepositForm", () => {
         });
     });
 
-    describe("Form", () => {
+    describe.skip("Form", () => {
         it("should reset form after successful submission", async () => {
             const mantineForm = await import("@mantine/form");
             const [application] = applications;

From cf0f4ba337f5ac03a5b84d884af21852f5015e7d Mon Sep 17 00:00:00 2001
From: Bruno Menezes <brunodmenezes@gmail.com>
Date: Wed, 8 Jan 2025 15:33:57 +1300
Subject: [PATCH 4/5] test: Add test cases for balance display and max
 functionality. Added a new test helper for transaction success lifecycle.

---
 packages/ui/test/EtherDepositForm.test.tsx | 103 +++++++++++++++++----
 packages/ui/test/utils/helpers.ts          |  25 +++++
 2 files changed, 111 insertions(+), 17 deletions(-)
 create mode 100644 packages/ui/test/utils/helpers.ts

diff --git a/packages/ui/test/EtherDepositForm.test.tsx b/packages/ui/test/EtherDepositForm.test.tsx
index db56036f..85353af4 100644
--- a/packages/ui/test/EtherDepositForm.test.tsx
+++ b/packages/ui/test/EtherDepositForm.test.tsx
@@ -3,11 +3,13 @@ import {
     useWriteEtherPortalDepositEther,
 } from "@cartesi/rollups-wagmi";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act } from "react";
 import { getAddress } from "viem";
 import { beforeEach, describe, it } from "vitest";
 import { useAccount, useBalance, useWaitForTransactionReceipt } from "wagmi";
 import { EtherDepositForm } from "../src/EtherDepositForm";
 import withMantineTheme from "./utils/WithMantineTheme";
+import { factoryWaitStatus } from "./utils/helpers";
 
 vi.mock("wagmi");
 vi.mock("viem", async () => {
@@ -507,6 +509,49 @@ describe("Rollups EtherDepositForm", () => {
     });
 
     describe("Amount input", () => {
+        it("should display the connected account's balance", () => {
+            useSimulateDepositEtherMock.mockReturnValue({
+                status: "success",
+                isLoading: false,
+                error: null,
+                data: {
+                    request: {},
+                },
+            });
+            render(<Component {...defaultProps} />);
+
+            expect(
+                screen.getByText("Balance: 0.456632268985698099"),
+            ).toBeVisible();
+
+            expect(screen.getByText("Max")).toBeVisible();
+        });
+
+        it("should fill the amount input when clicking the max button", () => {
+            render(<Component {...defaultProps} />);
+
+            act(() => fireEvent.click(screen.getByText("Max")));
+
+            expect(
+                screen.getByDisplayValue("0.456632268985698099"),
+            ).toBeVisible();
+        });
+
+        it("should not display the max option when the balance is zero", () => {
+            useBalanceMock.mockReturnValue({
+                data: {
+                    value: 0n,
+                    decimals: 18,
+                },
+                refetch: balanceRefetchMock,
+            });
+
+            render(<Component {...defaultProps} />);
+
+            expect(screen.getByText("Balance: 0")).toBeVisible();
+            expect(screen.queryByText("Max")).not.toBeInTheDocument();
+        });
+
         it("should correctly process small decimal numbers", async () => {
             useSimulateDepositEtherMock.mockReturnValue({
                 status: "success",
@@ -575,22 +620,29 @@ describe("Rollups EtherDepositForm", () => {
         });
     });
 
-    describe.skip("Form", () => {
+    describe("Form", () => {
         it("should reset form after successful submission", async () => {
-            const mantineForm = await import("@mantine/form");
-            const [application] = applications;
-            const resetMock = vi.fn();
-            vi.spyOn(mantineForm, "useForm").mockReturnValue({
-                getTransformedValues: () => ({
-                    address: getAddress(application),
-                    rawInput: "0x",
-                }),
-                isValid: () => true,
-                getInputProps: () => {},
-                errors: {},
-                setFieldValue: () => "",
-                reset: resetMock,
-            } as any);
+            // Emulate success and reset wait-status to avoid infinite loop.
+            const depositWaitStatus = factoryWaitStatus();
+            useWriteDepositEtherMock.mockReturnValue({
+                status: "success",
+                data: "0x0001",
+                reset: () => {
+                    depositWaitStatus.reset();
+                },
+            });
+
+            useWaitForTransactionReceiptMock.mockImplementation((params) => {
+                return params?.hash === "0x0001"
+                    ? {
+                          ...depositWaitStatus.props,
+                          fetchStatus: "idle",
+                          data: { transactionHash: "0x01" },
+                      }
+                    : {
+                          fetchStatus: "idle",
+                      };
+            });
 
             useWaitForTransactionReceiptMock.mockReturnValue({
                 data: {},
@@ -598,8 +650,25 @@ describe("Rollups EtherDepositForm", () => {
                 isSuccess: true,
             });
 
-            render(<Component {...defaultProps} />);
-            expect(resetMock).toHaveBeenCalled();
+            const onSearchMock = vi.fn();
+            const onSuccessMock = vi.fn();
+
+            render(
+                <Component
+                    {...defaultProps}
+                    onSearchApplications={onSearchMock}
+                    onSuccess={onSuccessMock}
+                />,
+            );
+
+            await setRequiredValues(applications[0], "0.2");
+
+            expect(onSearchMock).toHaveBeenCalledWith("");
+            expect(onSuccessMock).toHaveBeenCalledWith({
+                type: "ETHER",
+                receipt: {},
+            });
+            expect(balanceRefetchMock).toHaveBeenCalled();
         });
     });
 });
diff --git a/packages/ui/test/utils/helpers.ts b/packages/ui/test/utils/helpers.ts
new file mode 100644
index 00000000..a5995fe1
--- /dev/null
+++ b/packages/ui/test/utils/helpers.ts
@@ -0,0 +1,25 @@
+/**
+ * Factory of stateful wait-status object. Using prototype pattern to avoid problems with
+ * concurrency between test case that makes use of an instance.
+ *
+ * @description Return a stateful object to support testing callback calls like onSuccces, onSearchApplication etc.
+ * That wait object representation helps to avoid infinite loop by making a computed prop change
+ * when e.g. a deposit reset is called.
+ * @returns
+ */
+export const factoryWaitStatus = () => {
+    return {
+        _status: "success",
+        get props(): {
+            status?: "success";
+            isSuccess?: true;
+        } {
+            return this._status === "success"
+                ? { status: "success", isSuccess: true }
+                : {};
+        },
+        reset() {
+            this._status = "idle";
+        },
+    };
+};

From c9c0c7f444fbe9f12b997f1294c4a4fd31dd9b0f Mon Sep 17 00:00:00 2001
From: Bruno Menezes <brunodmenezes@gmail.com>
Date: Mon, 13 Jan 2025 10:18:34 +1300
Subject: [PATCH 5/5] refactor: Remove unused hook and related test code.

---
 packages/ui/src/hooks/useFormattedBalance.ts  | 15 ------
 .../ui/test/hooks/useFormattedBalance.test.ts | 46 -------------------
 2 files changed, 61 deletions(-)
 delete mode 100644 packages/ui/src/hooks/useFormattedBalance.ts
 delete mode 100644 packages/ui/test/hooks/useFormattedBalance.test.ts

diff --git a/packages/ui/src/hooks/useFormattedBalance.ts b/packages/ui/src/hooks/useFormattedBalance.ts
deleted file mode 100644
index 5671fd0f..00000000
--- a/packages/ui/src/hooks/useFormattedBalance.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useAccount, useBalance } from "wagmi";
-import { formatUnits } from "viem";
-import { useMemo } from "react";
-
-export const useFormattedBalance = () => {
-    const { address } = useAccount();
-    const { data } = useBalance({
-        address,
-    });
-
-    return useMemo(
-        () => (data ? formatUnits(data.value, data.decimals) : "0"),
-        [data],
-    );
-};
diff --git a/packages/ui/test/hooks/useFormattedBalance.test.ts b/packages/ui/test/hooks/useFormattedBalance.test.ts
deleted file mode 100644
index 8bf9561a..00000000
--- a/packages/ui/test/hooks/useFormattedBalance.test.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { afterEach, beforeEach, describe, it, vi } from "vitest";
-import { renderHook } from "@testing-library/react";
-import { useFormattedBalance } from "../../src/hooks/useFormattedBalance";
-import { useBalance, useAccount } from "wagmi";
-
-vi.mock("wagmi");
-const useAccountMock = vi.mocked(useAccount, { partial: true });
-const useBalanceMock = vi.mocked(useBalance, { partial: true });
-
-describe("Hooks/useFormattedBalance", () => {
-    beforeEach(() => {
-        useAccountMock.mockReturnValue({
-            address: "0x8FD78976f8955D13bAA4fC99043208F4EC020D7E",
-            isConnected: true,
-        });
-        useBalanceMock.mockReturnValue({
-            data: {
-                value: 355943959031747438n,
-                decimals: 18,
-            },
-        });
-    });
-
-    afterEach(() => {
-        vi.clearAllMocks();
-    });
-
-    it("should return correct formatted value for balance", () => {
-        useBalanceMock.mockReturnValue({
-            data: {
-                value: 355943959031747438n,
-                decimals: 18,
-            },
-        });
-        const { result } = renderHook(() => useFormattedBalance());
-        expect(result.current).toBe("0.355943959031747438");
-    });
-
-    it("should return correct fallback value for balance", () => {
-        useBalanceMock.mockReturnValue({
-            data: undefined,
-        });
-        const { result } = renderHook(() => useFormattedBalance());
-        expect(result.current).toBe("0");
-    });
-});