From 658a6fd2ebfcc5cd5c919d8ebd2825926386bd86 Mon Sep 17 00:00:00 2001
From: Bruno Menezes <brunodmenezes@gmail.com>
Date: Wed, 27 Nov 2024 16:19:35 +1300
Subject: [PATCH] feat: Add rollup-v2 support for EtherPortal deposit form.

---
 apps/web/src/components/sendTransaction.tsx   |  66 +-
 packages/ui/src/ApplicationAutocomplete.tsx   | 103 +++
 packages/ui/src/EtherDepositForm.tsx          | 215 -----
 .../EtherDepositForm/EtherDepositSection.tsx  | 120 +++
 packages/ui/src/EtherDepositForm/index.tsx    | 154 ++++
 packages/ui/src/EtherDepositForm/types.ts     |  20 +
 .../src/EtherDepositForm/useDepositEther.tsx  |  60 ++
 packages/ui/src/RollupVersionSegment.tsx      |  83 ++
 packages/ui/src/commons/interfaces.ts         |   9 +
 packages/ui/src/index.tsx                     |   1 +
 packages/ui/test/EtherDepositForm.test.tsx    | 803 ++++++++++--------
 .../ui/test/RollupVersionSegment.test.tsx     |  42 +
 .../hooks/useUndeployedApplication.test.ts    |   4 +-
 13 files changed, 1093 insertions(+), 587 deletions(-)
 create mode 100644 packages/ui/src/ApplicationAutocomplete.tsx
 delete mode 100644 packages/ui/src/EtherDepositForm.tsx
 create mode 100644 packages/ui/src/EtherDepositForm/EtherDepositSection.tsx
 create mode 100644 packages/ui/src/EtherDepositForm/index.tsx
 create mode 100644 packages/ui/src/EtherDepositForm/types.ts
 create mode 100644 packages/ui/src/EtherDepositForm/useDepositEther.tsx
 create mode 100644 packages/ui/src/RollupVersionSegment.tsx
 create mode 100644 packages/ui/src/commons/interfaces.ts
 create mode 100644 packages/ui/test/RollupVersionSegment.test.tsx

diff --git a/apps/web/src/components/sendTransaction.tsx b/apps/web/src/components/sendTransaction.tsx
index 6248a3b10..e12c7e091 100644
--- a/apps/web/src/components/sendTransaction.tsx
+++ b/apps/web/src/components/sendTransaction.tsx
@@ -8,11 +8,13 @@ import {
     GenericInputForm,
     GenericInputFormSpecification,
     TransactionFormSuccessData,
+    type RollupVersion as RollupVersionUI,
 } from "@cartesi/rollups-explorer-ui";
 import { Select } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { notifications } from "@mantine/notifications";
 import { FC, useCallback, useState } from "react";
+import { RollupVersion } from "../graphql/explorer/types";
 import { useSearchApplications } from "../hooks/useSearchApplications";
 import { useSearchMultiTokens } from "../hooks/useSearchMultiTokens";
 import { useSearchTokens } from "../hooks/useSearchTokens";
@@ -36,28 +38,42 @@ interface DepositProps {
 
 const DEBOUNCE_TIME = 400 as const;
 
+type ApplicationSearchableParams = {
+    address: string;
+    rollupVersion?: RollupVersion;
+};
+
 const SendTransaction: FC<DepositProps> = ({
     initialDepositType = "ether",
 }) => {
     const [depositType, setDepositType] =
         useState<DepositType>(initialDepositType);
+    const [applicationSearchableParams, setApplicationSearchableParams] =
+        useState<ApplicationSearchableParams>({ address: "" });
+
+    // TODO: Replace this by the above one in every form.
     const [applicationId, setApplicationId] = useState<string>("");
     const [multiTokenId, setMultiTokenId] = useState<string>("");
     const [tokenId, setTokenId] = useState<string>("");
-    const [debouncedApplicationId] = useDebouncedValue(
-        applicationId,
+
+    const [debouncedApplicationSearchableParams] = useDebouncedValue(
+        applicationSearchableParams,
         DEBOUNCE_TIME,
     );
+
     const [debouncedTokenId] = useDebouncedValue(tokenId, DEBOUNCE_TIME);
     const [debouncedMultiTokenId] = useDebouncedValue(
         multiTokenId,
         DEBOUNCE_TIME,
     );
+
     const chainId = getConfiguredChainId();
     const { applications, fetching } = useSearchApplications({
-        address: debouncedApplicationId,
+        address: debouncedApplicationSearchableParams.address,
+        rollupVersion: debouncedApplicationSearchableParams.rollupVersion,
         chainId,
     });
+
     const { tokens } = useSearchTokens({
         address: debouncedTokenId,
         chainId,
@@ -97,6 +113,24 @@ const SendTransaction: FC<DepositProps> = ({
         [],
     );
 
+    const applicationAddressList = applications.map((a) => a.address);
+
+    const updateApplicationSearchParams = useCallback(
+        (address: string, rollupVersion?: RollupVersionUI) =>
+            setApplicationSearchableParams({
+                address,
+                rollupVersion: rollupVersion as RollupVersion,
+            }),
+        [],
+    );
+
+    // TODO: Fixup and remove after upgrading last form
+    const setOldApplicationCB = useCallback((address: string) => {
+        setApplicationSearchableParams({
+            address,
+        });
+    }, []);
+
     return (
         <>
             <Select
@@ -140,42 +174,42 @@ const SendTransaction: FC<DepositProps> = ({
                 <EtherDepositForm
                     applications={applications}
                     isLoadingApplications={fetching}
-                    onSearchApplications={setApplicationId}
+                    onSearchApplications={updateApplicationSearchParams}
                     onSuccess={onSuccess}
                 />
             ) : depositType === "erc20" ? (
                 <ERC20DepositForm
                     tokens={tokens}
-                    applications={applications}
+                    applications={applicationAddressList}
                     isLoadingApplications={fetching}
-                    onSearchApplications={setApplicationId}
+                    onSearchApplications={setOldApplicationCB}
                     onSearchTokens={setTokenId}
                     onSuccess={onSuccess}
                 />
             ) : depositType === "erc721" ? (
                 <ERC721DepositForm
-                    applications={applications}
+                    applications={applicationAddressList}
                     isLoadingApplications={fetching}
-                    onSearchApplications={setApplicationId}
+                    onSearchApplications={setOldApplicationCB}
                     onSuccess={onSuccess}
                 />
             ) : depositType === "input" ? (
                 <GenericInputForm
-                    applications={applications}
+                    applications={applicationAddressList}
                     specifications={
                         specifications as GenericInputFormSpecification[]
                     }
                     isLoadingApplications={fetching}
-                    onSearchApplications={setApplicationId}
+                    onSearchApplications={setOldApplicationCB}
                     onSuccess={onSuccess}
                 />
             ) : depositType === "erc1155" ? (
                 <ERC1155DepositForm
                     mode="single"
                     tokens={multiTokens}
-                    applications={applications}
+                    applications={applicationAddressList}
                     isLoadingApplications={fetching}
-                    onSearchApplications={setApplicationId}
+                    onSearchApplications={setOldApplicationCB}
                     onSearchTokens={setMultiTokenId}
                     onSuccess={onSuccess}
                 />
@@ -183,17 +217,17 @@ const SendTransaction: FC<DepositProps> = ({
                 <ERC1155DepositForm
                     mode="batch"
                     tokens={multiTokens}
-                    applications={applications}
+                    applications={applicationAddressList}
                     isLoadingApplications={fetching}
-                    onSearchApplications={setApplicationId}
+                    onSearchApplications={setOldApplicationCB}
                     onSearchTokens={setMultiTokenId}
                     onSuccess={onSuccess}
                 />
             ) : depositType === "relay" ? (
                 <AddressRelayForm
-                    applications={applications}
+                    applications={applicationAddressList}
                     isLoadingApplications={fetching}
-                    onSearchApplications={setApplicationId}
+                    onSearchApplications={setOldApplicationCB}
                     onSuccess={onSuccess}
                 />
             ) : null}
diff --git a/packages/ui/src/ApplicationAutocomplete.tsx b/packages/ui/src/ApplicationAutocomplete.tsx
new file mode 100644
index 000000000..a1c005525
--- /dev/null
+++ b/packages/ui/src/ApplicationAutocomplete.tsx
@@ -0,0 +1,103 @@
+import {
+    AutocompleteProps,
+    Combobox,
+    InputBase,
+    Stack,
+    Text,
+    useCombobox,
+} from "@mantine/core";
+import { useUncontrolled } from "@mantine/hooks";
+import { FC } from "react";
+import { Application } from "./commons/interfaces";
+
+export interface ApplicationAutocompleteProps extends AutocompleteProps {
+    onApplicationSelected: (app: Application) => void;
+    applications: Application[];
+}
+
+const ApplicationAutocomplete: FC<ApplicationAutocompleteProps> = (props) => {
+    const {
+        applications,
+        onApplicationSelected,
+        value,
+        defaultValue,
+        onChange,
+        ...rest
+    } = props;
+    const combobox = useCombobox();
+    const [_value, setValue] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: "",
+        onChange,
+    });
+
+    const options = applications.map((app) => (
+        <Combobox.Option
+            value={app.address}
+            onClick={() => {
+                onApplicationSelected(app);
+            }}
+            key={`${app.address}-${app.rollupVersion}`}
+        >
+            <Stack
+                gap={0}
+                style={{
+                    borderInlineStart:
+                        ".3px solid var(--mantine-primary-color-filled)",
+                }}
+                px="xs"
+            >
+                <Text size="sm">{app.address}</Text>
+                <Text size="xs" c="dimmed">
+                    Rollup {app.rollupVersion}
+                </Text>
+            </Stack>
+        </Combobox.Option>
+    ));
+
+    return (
+        <Combobox
+            onOptionSubmit={(optVal) => {
+                setValue(optVal);
+                combobox.closeDropdown();
+            }}
+            store={combobox}
+        >
+            <Combobox.Target>
+                <InputBase
+                    {...rest}
+                    value={_value}
+                    onBlur={(evt) => {
+                        combobox.closeDropdown();
+                        rest.onBlur?.(evt);
+                    }}
+                    onFocus={(evt) => {
+                        combobox.openDropdown();
+                        rest.onFocus?.(evt);
+                    }}
+                    onChange={(evt) => {
+                        setValue(evt.currentTarget.value);
+                        combobox.openDropdown();
+                        combobox.updateSelectedOptionIndex();
+                    }}
+                />
+            </Combobox.Target>
+
+            <Combobox.Dropdown
+                mah="calc(13.75rem * var(--mantine-scale))"
+                style={{ overflow: "scroll" }}
+            >
+                <Combobox.Options>
+                    {options.length === 0 ? (
+                        <Combobox.Empty>No Applications found!</Combobox.Empty>
+                    ) : (
+                        options
+                    )}
+                </Combobox.Options>
+            </Combobox.Dropdown>
+        </Combobox>
+    );
+};
+
+export default ApplicationAutocomplete;
diff --git a/packages/ui/src/EtherDepositForm.tsx b/packages/ui/src/EtherDepositForm.tsx
deleted file mode 100644
index b1f3eb339..000000000
--- a/packages/ui/src/EtherDepositForm.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import {
-    useSimulateEtherPortalDepositEther,
-    useWriteEtherPortalDepositEther,
-} from "@cartesi/rollups-wagmi";
-import {
-    Alert,
-    Autocomplete,
-    Button,
-    Collapse,
-    Group,
-    Loader,
-    Stack,
-    Text,
-    Textarea,
-    TextInput,
-} from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { useDisclosure } from "@mantine/hooks";
-import { FC, useEffect } from "react";
-import {
-    TbAlertCircle,
-    TbCheck,
-    TbChevronDown,
-    TbChevronUp,
-} from "react-icons/tb";
-import {
-    BaseError,
-    getAddress,
-    Hex,
-    isAddress,
-    isHex,
-    parseUnits,
-    zeroAddress,
-} from "viem";
-import { useAccount, useWaitForTransactionReceipt } from "wagmi";
-import { TransactionProgress } from "./TransactionProgress";
-import useUndeployedApplication from "./hooks/useUndeployedApplication";
-import { TransactionFormSuccessData } from "./DepositFormTypes";
-
-export interface EtherDepositFormProps {
-    applications: string[];
-    isLoadingApplications: boolean;
-    onSearchApplications: (applicationId: string) => void;
-    onSuccess: (receipt: TransactionFormSuccessData) => void;
-}
-
-export const EtherDepositForm: FC<EtherDepositFormProps> = (props) => {
-    const {
-        applications,
-        isLoadingApplications,
-        onSearchApplications,
-        onSuccess,
-    } = props;
-    const [advanced, { toggle: toggleAdvanced }] = useDisclosure(false);
-    const { chain } = useAccount();
-    const form = useForm({
-        validateInputOnBlur: true,
-        initialValues: {
-            application: "",
-            amount: "",
-            execLayerData: "0x",
-        },
-        validate: {
-            application: (value) =>
-                value !== "" && isAddress(value) ? null : "Invalid application",
-            amount: (value) =>
-                value !== "" && Number(value) > 0 ? null : "Invalid amount",
-            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",
-        }),
-    });
-    const { address, amount, execLayerData } = form.getTransformedValues();
-    const prepare = useSimulateEtherPortalDepositEther({
-        args: [address, execLayerData],
-        value: amount,
-        query: {
-            enabled: form.isValid(),
-        },
-    });
-    const execute = useWriteEtherPortalDepositEther();
-    const wait = useWaitForTransactionReceipt({
-        hash: execute.data,
-    });
-    const canSubmit =
-        form.isValid() && !prepare.isLoading && prepare.error === null;
-    const loading = execute.isPending || wait.isLoading;
-    const isUndeployedApp = useUndeployedApplication(address, applications);
-
-    useEffect(() => {
-        if (wait.isSuccess) {
-            onSuccess({ receipt: wait.data, type: "ETHER" });
-            form.reset();
-            execute.reset();
-            onSearchApplications("");
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [wait, onSearchApplications, onSuccess]);
-
-    return (
-        <form data-testid="ether-deposit-form">
-            <Stack>
-                <Autocomplete
-                    label="Application"
-                    description="The application smart contract address"
-                    placeholder="0x"
-                    data={applications}
-                    withAsterisk
-                    rightSection={
-                        (prepare.isLoading || isLoadingApplications) && (
-                            <Loader size="xs" />
-                        )
-                    }
-                    {...form.getInputProps("application")}
-                    error={
-                        form.errors?.application ||
-                        (prepare.error as BaseError)?.shortMessage
-                    }
-                    onChange={(nextValue) => {
-                        form.setFieldValue("application", nextValue);
-                        onSearchApplications(nextValue);
-                    }}
-                />
-
-                {!form.errors.application && isUndeployedApp && (
-                    <Alert
-                        variant="light"
-                        color="yellow"
-                        icon={<TbAlertCircle />}
-                    >
-                        This is a deposit to an undeployed application.
-                    </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")}
-                />
-
-                <Collapse in={advanced}>
-                    <Textarea
-                        label="Extra data"
-                        description="Extra execution layer data handled by the application"
-                        {...form.getInputProps("execLayerData")}
-                    />
-                </Collapse>
-
-                <Collapse
-                    in={
-                        execute.isPending ||
-                        wait.isLoading ||
-                        execute.isSuccess ||
-                        execute.isError
-                    }
-                >
-                    <TransactionProgress
-                        prepare={prepare}
-                        execute={execute}
-                        wait={wait}
-                        confirmationMessage="Ether deposited successfully!"
-                        defaultErrorMessage={execute.error?.message}
-                    />
-                </Collapse>
-
-                <Group justify="right">
-                    <Button
-                        leftSection={
-                            advanced ? <TbChevronUp /> : <TbChevronDown />
-                        }
-                        size="xs"
-                        visibleFrom="sm"
-                        variant="transparent"
-                        onClick={toggleAdvanced}
-                    >
-                        Advanced
-                    </Button>
-
-                    <Button
-                        variant="filled"
-                        disabled={!canSubmit}
-                        leftSection={<TbCheck />}
-                        loading={loading}
-                        onClick={() =>
-                            execute.writeContract(prepare.data!.request)
-                        }
-                    >
-                        Deposit
-                    </Button>
-                </Group>
-            </Stack>
-        </form>
-    );
-};
diff --git a/packages/ui/src/EtherDepositForm/EtherDepositSection.tsx b/packages/ui/src/EtherDepositForm/EtherDepositSection.tsx
new file mode 100644
index 000000000..e55384d3a
--- /dev/null
+++ b/packages/ui/src/EtherDepositForm/EtherDepositSection.tsx
@@ -0,0 +1,120 @@
+import {
+    Button,
+    Collapse,
+    Group,
+    Stack,
+    Text,
+    TextInput,
+    Textarea,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { FC, useEffect } from "react";
+import { TbCheck, TbChevronDown, TbChevronUp } from "react-icons/tb";
+import { TransactionFormSuccessData } from "../DepositFormTypes";
+import { TransactionProgress } from "../TransactionProgress";
+import { RollupVersion } from "../commons/interfaces";
+import { EtherDepositFormReturn } from "./types";
+import useEtherDeposit from "./useDepositEther";
+
+interface EtherDepositSectionProps {
+    form: EtherDepositFormReturn;
+    appVersion: RollupVersion;
+    onSuccess: (d: TransactionFormSuccessData) => void;
+}
+
+const EtherDepositSection: FC<EtherDepositSectionProps> = ({
+    form,
+    appVersion,
+    onSuccess,
+}) => {
+    const [advanced, { toggle: toggleAdvanced }] = useDisclosure(false);
+    const { address, amount, execLayerData } = form.getTransformedValues();
+
+    const { prepare, execute, wait } = useEtherDeposit({
+        appVersion,
+        contractParams: {
+            args: [address, execLayerData],
+            value: amount,
+        },
+        isQueryEnabled: form.isValid(),
+    });
+
+    const canSubmit =
+        form.isValid() && !prepare.isLoading && prepare.error === null;
+    const loading = execute.isPending || wait.isLoading;
+
+    useEffect(() => {
+        if (wait.isSuccess) {
+            onSuccess({ receipt: wait.data, type: "ETHER" });
+            execute.reset();
+        }
+    }, [wait, onSuccess, execute]);
+
+    return (
+        <Stack>
+            <TextInput
+                type="number"
+                step="1"
+                min={0}
+                label="Amount"
+                description="Amount of ether to deposit"
+                placeholder="0"
+                data-testid="eth-amount-input"
+                rightSectionWidth={60}
+                rightSection={<Text>ETH</Text>}
+                withAsterisk
+                {...form.getInputProps("amount")}
+            />
+
+            <Collapse in={advanced}>
+                <Textarea
+                    label="Extra data"
+                    data-testid="eth-extra-data-input"
+                    description="Extra execution layer data handled by the application"
+                    {...form.getInputProps("execLayerData")}
+                />
+            </Collapse>
+
+            <Collapse
+                in={
+                    execute.isPending ||
+                    wait.isLoading ||
+                    execute.isSuccess ||
+                    execute.isError
+                }
+            >
+                <TransactionProgress
+                    prepare={prepare}
+                    execute={execute}
+                    wait={wait}
+                    confirmationMessage="Ether deposited successfully!"
+                    defaultErrorMessage={execute.error?.message}
+                />
+            </Collapse>
+
+            <Group justify="right">
+                <Button
+                    leftSection={advanced ? <TbChevronUp /> : <TbChevronDown />}
+                    size="xs"
+                    visibleFrom="sm"
+                    variant="transparent"
+                    onClick={toggleAdvanced}
+                >
+                    Advanced
+                </Button>
+
+                <Button
+                    variant="filled"
+                    disabled={!canSubmit}
+                    leftSection={<TbCheck />}
+                    loading={loading}
+                    onClick={() => execute.writeContract(prepare.data!.request)}
+                >
+                    Deposit
+                </Button>
+            </Group>
+        </Stack>
+    );
+};
+
+export default EtherDepositSection;
diff --git a/packages/ui/src/EtherDepositForm/index.tsx b/packages/ui/src/EtherDepositForm/index.tsx
new file mode 100644
index 000000000..d6ccc64b5
--- /dev/null
+++ b/packages/ui/src/EtherDepositForm/index.tsx
@@ -0,0 +1,154 @@
+import { Alert, Collapse, Loader, Stack } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { isNotNil } from "ramda";
+import { FC, useState } from "react";
+import { TbAlertCircle } from "react-icons/tb";
+import {
+    Hex,
+    getAddress,
+    isAddress,
+    isHex,
+    parseUnits,
+    zeroAddress,
+} from "viem";
+import { useAccount } from "wagmi";
+import ApplicationAutocomplete from "../ApplicationAutocomplete";
+import { TransactionFormSuccessData } from "../DepositFormTypes";
+import RollupVersionSegment from "../RollupVersionSegment";
+import { Application, RollupVersion } from "../commons/interfaces";
+import useUndeployedApplication from "../hooks/useUndeployedApplication";
+import EtherDepositSection from "./EtherDepositSection";
+import { FormValues, TransformValues } from "./types";
+
+export interface EtherDepositFormProps {
+    applications: Application[];
+    isLoadingApplications: boolean;
+    onSearchApplications: (
+        appAddress: string,
+        rollupVersion?: RollupVersion,
+    ) => void;
+    onSuccess: (receipt: TransactionFormSuccessData) => void;
+}
+
+export const EtherDepositForm: FC<EtherDepositFormProps> = (props) => {
+    const {
+        applications,
+        isLoadingApplications,
+        onSearchApplications,
+        onSuccess,
+    } = props;
+
+    const [userSelectedAppVersion, setUserSelectedAppVersion] = useState<
+        RollupVersion | undefined
+    >();
+
+    const { chain } = useAccount();
+
+    const form = useForm<FormValues, TransformValues>({
+        validateInputOnBlur: true,
+        initialValues: {
+            application: "",
+            amount: "",
+            execLayerData: "0x",
+        },
+        validate: {
+            application: (value) => {
+                return value !== "" && isAddress(value)
+                    ? null
+                    : "Invalid application address";
+            },
+            amount: (value) =>
+                value !== "" && Number(value) > 0 ? null : "Invalid amount",
+            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",
+        }),
+    });
+
+    const { address } = form.getTransformedValues();
+    const appAddressList = applications.map((app) => app.address);
+    const isUndeployedApp = useUndeployedApplication(address, appAddressList);
+
+    const hasFoundOneApp = applications.length === 1;
+    const app = hasFoundOneApp ? applications[0] : undefined;
+    const appVersion = app?.rollupVersion || userSelectedAppVersion;
+
+    const onDepositSuccess = (data: TransactionFormSuccessData) => {
+        onSuccess(data);
+        form.reset();
+        setUserSelectedAppVersion(undefined);
+        onSearchApplications("");
+    };
+
+    return (
+        <form data-testid="ether-deposit-form">
+            <Stack>
+                <ApplicationAutocomplete
+                    label="Application"
+                    description="The application smart contract address"
+                    data-testid="application-input"
+                    placeholder="0x"
+                    applications={applications}
+                    withAsterisk
+                    rightSection={isLoadingApplications && <Loader size="xs" />}
+                    {...form.getInputProps("application")}
+                    error={form.errors?.application}
+                    onChange={(nextValue) => {
+                        form.setFieldValue("application", nextValue);
+                        onSearchApplications(nextValue);
+                    }}
+                    onApplicationSelected={(app) => {
+                        form.setFieldValue("application", app.address);
+                        onSearchApplications(app.address, app.rollupVersion);
+                    }}
+                />
+
+                {!form.errors.application && isUndeployedApp && (
+                    <>
+                        <Alert
+                            variant="light"
+                            color="yellow"
+                            icon={<TbAlertCircle />}
+                        >
+                            This is a deposit to an undeployed application.
+                        </Alert>
+
+                        <RollupVersionSegment
+                            label="Cartesi Rollups version"
+                            description="Set the rollup version to call the correct contracts."
+                            onChange={setUserSelectedAppVersion}
+                            value={userSelectedAppVersion ?? ""}
+                            onUnmount={() => {
+                                setUserSelectedAppVersion(undefined);
+                            }}
+                        />
+                    </>
+                )}
+
+                <Collapse in={isNotNil(appVersion) && !isLoadingApplications}>
+                    {appVersion && (
+                        <EtherDepositSection
+                            appVersion={appVersion}
+                            form={form}
+                            onSuccess={onDepositSuccess}
+                        />
+                    )}
+                </Collapse>
+            </Stack>
+        </form>
+    );
+};
diff --git a/packages/ui/src/EtherDepositForm/types.ts b/packages/ui/src/EtherDepositForm/types.ts
new file mode 100644
index 000000000..3570c9870
--- /dev/null
+++ b/packages/ui/src/EtherDepositForm/types.ts
@@ -0,0 +1,20 @@
+import { UseFormReturnType } from "@mantine/form";
+import { Hex } from "viem";
+
+export interface FormValues {
+    application: string;
+    amount: string;
+    execLayerData: string;
+}
+
+export interface TransformedValues {
+    address: Hex;
+    amount: bigint | undefined;
+    execLayerData: Hex;
+}
+
+export type TransformValues = (v: FormValues) => TransformedValues;
+export type EtherDepositFormReturn = UseFormReturnType<
+    FormValues,
+    TransformValues
+>;
diff --git a/packages/ui/src/EtherDepositForm/useDepositEther.tsx b/packages/ui/src/EtherDepositForm/useDepositEther.tsx
new file mode 100644
index 000000000..0eaf70576
--- /dev/null
+++ b/packages/ui/src/EtherDepositForm/useDepositEther.tsx
@@ -0,0 +1,60 @@
+import {
+    etherPortalAbi,
+    etherPortalAddress,
+    v2EtherPortalAbi,
+    v2EtherPortalAddress,
+} from "@cartesi/rollups-wagmi";
+import { useMemo } from "react";
+import { Hex } from "viem";
+import {
+    useSimulateContract,
+    useWaitForTransactionReceipt,
+    useWriteContract,
+} from "wagmi";
+import { RollupVersion } from "../commons/interfaces";
+
+interface UseEtherDepositProps {
+    contractParams: {
+        args: [appAddress: Hex, execLayerData: Hex];
+        value: bigint | undefined;
+    };
+    appVersion: RollupVersion;
+    isQueryEnabled: boolean;
+}
+
+export const useEtherDeposit = ({
+    appVersion,
+    contractParams,
+    isQueryEnabled,
+}: UseEtherDepositProps) => {
+    const baseConfig = useMemo(() => {
+        return {
+            abi: appVersion === "v2" ? v2EtherPortalAbi : etherPortalAbi,
+            address:
+                appVersion === "v2" ? v2EtherPortalAddress : etherPortalAddress,
+        };
+    }, [appVersion]);
+
+    const prepare = useSimulateContract({
+        ...baseConfig,
+        ...contractParams,
+        functionName: "depositEther",
+        query: {
+            enabled: isQueryEnabled,
+        },
+    });
+
+    const execute = useWriteContract();
+
+    const wait = useWaitForTransactionReceipt({
+        hash: execute.data,
+    });
+
+    return {
+        prepare,
+        execute,
+        wait,
+    };
+};
+
+export default useEtherDeposit;
diff --git a/packages/ui/src/RollupVersionSegment.tsx b/packages/ui/src/RollupVersionSegment.tsx
new file mode 100644
index 000000000..9c328babe
--- /dev/null
+++ b/packages/ui/src/RollupVersionSegment.tsx
@@ -0,0 +1,83 @@
+import {
+    MantineSpacing,
+    SegmentedControl,
+    SegmentedControlProps,
+    Stack,
+    Text,
+} from "@mantine/core";
+import { useUncontrolled } from "@mantine/hooks";
+import { FC, useEffect } from "react";
+import { RollupVersion } from "./commons/interfaces";
+
+export interface RollupVersionSegmentProps
+    extends Omit<SegmentedControlProps, "onChange" | "data"> {
+    gap?: MantineSpacing;
+    label: string;
+    description?: string;
+    onChange: (v: RollupVersion) => void;
+    onUnmount?: () => void;
+}
+
+const RollupVersionSegment: FC<RollupVersionSegmentProps> = (props) => {
+    const {
+        value,
+        defaultValue,
+        onChange,
+        onUnmount,
+        gap,
+        label,
+        description,
+        ...rest
+    } = props;
+
+    const [_value, setValue] = useUncontrolled({
+        value: value as RollupVersion,
+        defaultValue: defaultValue as RollupVersion,
+        finalValue: undefined,
+        onChange,
+    });
+
+    useEffect(() => {
+        return () => {
+            onUnmount?.();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <Stack gap={gap ?? 5}>
+            <Stack gap="0">
+                <Text
+                    id="app-version-label"
+                    component="label"
+                    aria-required="true"
+                    fz="sm"
+                >
+                    {label}
+                </Text>
+
+                {description && (
+                    <Text size="xs" c="dimmed">
+                        {description}
+                    </Text>
+                )}
+            </Stack>
+            <SegmentedControl
+                size="sm"
+                {...rest}
+                aria-labelledby="app-version-label"
+                aria-label="Choose the Rollup version"
+                data={[
+                    { value: "v1", label: "Rollup v1" },
+                    { value: "v2", label: "Rollup v2" },
+                ]}
+                value={_value}
+                onChange={(value) => {
+                    setValue(value as RollupVersion);
+                }}
+            />
+        </Stack>
+    );
+};
+
+export default RollupVersionSegment;
diff --git a/packages/ui/src/commons/interfaces.ts b/packages/ui/src/commons/interfaces.ts
new file mode 100644
index 000000000..aba2f95c8
--- /dev/null
+++ b/packages/ui/src/commons/interfaces.ts
@@ -0,0 +1,9 @@
+import { Hex } from "viem";
+
+export type RollupVersion = "v1" | "v2";
+
+export interface Application {
+    id: string;
+    address: string | Hex;
+    rollupVersion: RollupVersion;
+}
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index aef8bb66d..9868dafb9 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -15,6 +15,7 @@ export {
 export { Summary } from "./Summary";
 export { SummaryCard } from "./SummaryCard";
 export { TransactionProgress } from "./TransactionProgress";
+export { type RollupVersion } from "./commons/interfaces";
 export { default as useWatchQueryOnBlockChange } from "./hooks/useWatchQueryOnBlockChange";
 export {
     GenericInputForm,
diff --git a/packages/ui/test/EtherDepositForm.test.tsx b/packages/ui/test/EtherDepositForm.test.tsx
index 31eacfad8..d1e8dd7ea 100644
--- a/packages/ui/test/EtherDepositForm.test.tsx
+++ b/packages/ui/test/EtherDepositForm.test.tsx
@@ -1,17 +1,66 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { afterAll, describe, it } from "vitest";
+import {
+    etherPortalAbi,
+    etherPortalAddress,
+    v2EtherPortalAbi,
+    v2EtherPortalAddress,
+} from "@cartesi/rollups-wagmi";
+import {
+    fireEvent,
+    getByText,
+    render,
+    screen,
+    waitFor,
+} from "@testing-library/react";
+import { omit } from "ramda";
+import { beforeEach, describe, it } from "vitest";
+import {
+    useSimulateContract,
+    useWaitForTransactionReceipt,
+    useWriteContract,
+} from "wagmi";
 import { EtherDepositForm } from "../src/EtherDepositForm";
+import { Application } from "../src/commons/interfaces";
 import withMantineTheme from "./utils/WithMantineTheme";
-import { getAddress } from "viem";
 
 const Component = withMantineTheme(EtherDepositForm);
 
-const applications = [
-    "0x60a7048c3136293071605a4eaffef49923e981cc",
-    "0x70ac08179605af2d9e75782b8decdd3c22aa4d0c",
-    "0x71ab24ee3ddb97dc01a161edf64c8d51102b0cd3",
+const applications: Application[] = [
+    {
+        address: "0x60a7048c3136293071605a4eaffef49923e981cc",
+        id: "11155111-0x60a7048c3136293071605a4eaffef49923e981cc-v1",
+        rollupVersion: "v1",
+    },
+    {
+        address: "0x70ac08179605af2d9e75782b8decdd3c22aa4d0c",
+        id: "11155111-0x70ac08179605af2d9e75782b8decdd3c22aa4d0c-v1",
+        rollupVersion: "v1",
+    },
+    {
+        address: "0x71ab24ee3ddb97dc01a161edf64c8d51102b0cd3",
+        id: "11155111-0x71ab24ee3ddb97dc01a161edf64c8d51102b0cd3-v1",
+        rollupVersion: "v1",
+    },
 ];
 
+const selectApp = (app: Application) => {
+    const appInput = screen.getByTestId("application-input");
+
+    return fireEvent.change(appInput, {
+        target: {
+            value: app.address.toLowerCase(),
+        },
+    });
+};
+
+const setRequiredValueToOpenForm = async (app: Application) => {
+    selectApp(app);
+    await waitFor(() => expect(screen.getByText("Advanced")).toBeVisible());
+
+    fireEvent.click(screen.getByText("Advanced"));
+
+    await waitFor(() => expect(screen.getByText("Extra data")).toBeVisible());
+};
+
 const defaultProps = {
     applications,
     isLoadingApplications: false,
@@ -19,25 +68,14 @@ 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(),
-        }),
-    };
-});
-
 vi.mock("wagmi", async () => {
+    const actual = await vi.importActual("wagmi");
+
     return {
-        useWaitForTransactionReceipt: () => ({}),
+        ...actual,
+        useSimulateContract: vi.fn(),
+        useWriteContract: vi.fn(),
+        useWaitForTransactionReceipt: vi.fn(),
         useAccount: () => ({
             chain: {
                 nativeCurrency: {
@@ -64,30 +102,225 @@ vi.mock("@mantine/form", async () => {
     };
 });
 
+const useSimulateContractMock = vi.mocked(useSimulateContract, {
+    partial: true,
+});
+
+const useWriteContractMock = vi.mocked(useWriteContract, { partial: true });
+const useWaitForTransactionReceiptMock = vi.mocked(
+    useWaitForTransactionReceipt,
+    { partial: true },
+);
+
+/**
+ * Object to support testing callback calls like onSuccces, onSearchApplication etc.
+ * That wait object is to avoid infinite loop by making a computed prop change when deposit reset is called.
+ */
+const depositWaitStatus = {
+    _status: "success",
+    get props(): {
+        status?: "success";
+        isSuccess?: true;
+    } {
+        return this._status === "success"
+            ? { status: "success", isSuccess: true }
+            : {};
+    },
+    reset() {
+        this._status = "idle";
+    },
+};
+
 describe("Rollups EtherDepositForm", () => {
-    afterAll(() => {
-        vi.restoreAllMocks();
+    beforeEach(() => {
+        useSimulateContractMock.mockReturnValue({
+            data: undefined,
+            status: "success",
+            isLoading: false,
+            isFetching: false,
+            isSuccess: true,
+        });
+
+        useWriteContractMock.mockReturnValue({
+            data: undefined,
+            status: "idle",
+            writeContract: vi.fn(),
+            reset: vi.fn(),
+        });
+
+        useWaitForTransactionReceiptMock.mockReturnValue({
+            data: undefined,
+            isLoading: false,
+            isSuccess: false,
+        });
     });
 
-    describe("Extra data textarea", () => {
-        it("should display correct label", () => {
-            render(<Component {...defaultProps} />);
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it("should display only the application field initially", () => {
+        render(<Component {...defaultProps} />);
+
+        expect(screen.getByText("Application")).toBeInTheDocument();
+        expect(
+            screen.getByText("The application smart contract address"),
+        ).toBeInTheDocument();
+    });
+
+    it("should display the other fields and deposit button after an application is chosen", () => {
+        render(
+            <Component {...defaultProps} applications={[applications[0]]} />,
+        );
+
+        expect(screen.getByText("Application")).toBeInTheDocument();
+        expect(screen.getByText("Amount")).toBeInTheDocument();
+        expect(screen.getByText("Advanced")).toBeInTheDocument();
+        expect(screen.getByText("Deposit")).toBeInTheDocument();
+    });
+
+    it("should display warning message for undeployed app application", async () => {
+        render(<Component {...defaultProps} applications={[]} />);
+
+        const appInput = screen.getByTestId("application-input");
 
-            expect(screen.getByText("Extra data")).toBeInTheDocument();
+        fireEvent.change(appInput, {
+            target: {
+                value: "0x60a7048c3136293071605a4eaffef49923e981fe",
+            },
         });
 
-        it("should display correct description", () => {
-            render(<Component {...defaultProps} />);
+        await waitFor(() =>
+            expect(
+                screen.getByText(
+                    "This is a deposit to an undeployed application.",
+                ),
+            ).toBeVisible(),
+        );
+    });
+
+    it("should ask user to choose rollup version when application is considered undeployed", async () => {
+        render(<Component {...defaultProps} applications={[]} />);
+
+        const appInput = screen.getByTestId("application-input");
+
+        fireEvent.change(appInput, {
+            target: {
+                value: "0x60a7048c3136293071605a4eaffef49923e981fe",
+            },
+        });
+
+        await waitFor(() =>
+            expect(
+                screen.getByText(
+                    "This is a deposit to an undeployed application.",
+                ),
+            ).toBeVisible(),
+        );
+
+        expect(screen.getByText("Cartesi Rollups version")).toBeVisible();
+        expect(
+            screen.getByText(
+                "Set the rollup version to call the correct contracts.",
+            ),
+        ).toBeVisible();
+
+        const segmentControlOptions = screen.getByRole("radiogroup");
+
+        expect(getByText(segmentControlOptions, "Rollup v1")).toBeVisible();
+        expect(getByText(segmentControlOptions, "Rollup v2")).toBeVisible();
+    });
+
+    it("should display the rest of the form after user manually choose the Rollup version", async () => {
+        render(<Component {...defaultProps} applications={[]} />);
+
+        const appInput = screen.getByTestId("application-input");
+
+        fireEvent.change(appInput, {
+            target: {
+                value: "0x60a7048c3136293071605a4eaffef49923e981fe",
+            },
+        });
+
+        await waitFor(() =>
+            expect(screen.getByText("Cartesi Rollups version")).toBeVisible(),
+        );
+
+        const segmentControlOptions = screen.getByRole("radiogroup");
+
+        expect(screen.queryByText("Deposit")).not.toBeInTheDocument();
+
+        fireEvent.click(getByText(segmentControlOptions, "Rollup v1"));
+
+        await waitFor(() =>
+            expect(screen.getByTestId("eth-amount-input")).toBeVisible(),
+        );
+
+        expect(screen.getByText("Advanced")).toBeVisible();
+        expect(screen.getByText("Deposit")).toBeVisible();
+    });
+
+    it("should setup correct contract configs when rollup version is chosen for undeployed application", async () => {
+        render(<Component {...defaultProps} applications={[]} />);
+
+        const appInput = screen.getByTestId("application-input");
+
+        fireEvent.change(appInput, {
+            target: {
+                value: "0x60a7048c3136293071605a4eaffef49923e981fe",
+            },
+        });
+
+        await waitFor(() =>
+            expect(screen.getByText("Cartesi Rollups version")).toBeVisible(),
+        );
+
+        const segmentControlOptions = screen.getByRole("radiogroup");
+        fireEvent.click(getByText(segmentControlOptions, "Rollup v1"));
+
+        const paramsForV1 = useSimulateContractMock.mock.lastCall?.[0] ?? {};
+
+        expect(paramsForV1).toHaveProperty("abi", etherPortalAbi);
+        expect(paramsForV1).toHaveProperty("address", etherPortalAddress);
+
+        fireEvent.click(getByText(segmentControlOptions, "Rollup v2"));
+
+        const paramsForV2 = useSimulateContractMock.mock.lastCall?.[0] ?? {};
+
+        expect(paramsForV2).toHaveProperty("abi", v2EtherPortalAbi);
+        expect(paramsForV2).toHaveProperty("address", v2EtherPortalAddress);
+    });
+
+    describe("Extra data textarea", () => {
+        it("should display correct label and description", async () => {
+            render(
+                <Component
+                    {...defaultProps}
+                    applications={[applications[0]]}
+                />,
+            );
+
+            await setRequiredValueToOpenForm(applications[0]);
+
+            expect(screen.getByText("Extra data")).toBeVisible();
 
             expect(
                 screen.getByText(
                     "Extra execution layer data handled by the application",
                 ),
-            ).toBeInTheDocument();
+            ).toBeVisible();
         });
 
-        it("should display error when value is not hex", () => {
-            const { container } = render(<Component {...defaultProps} />);
+        it("should display error when value is not hex", async () => {
+            const { container } = render(
+                <Component
+                    {...defaultProps}
+                    applications={[applications[0]]}
+                />,
+            );
+
+            await setRequiredValueToOpenForm(applications[0]);
+
             const textarea = container.querySelector(
                 "textarea",
             ) as HTMLTextAreaElement;
@@ -104,8 +337,16 @@ describe("Rollups EtherDepositForm", () => {
             expect(screen.getByText("Invalid hex string")).toBeInTheDocument();
         });
 
-        it("should not display error when value is hex", () => {
-            const { container } = render(<Component {...defaultProps} />);
+        it("should not display error when value is hex", async () => {
+            const { container } = render(
+                <Component
+                    {...defaultProps}
+                    applications={[applications[0]]}
+                />,
+            );
+
+            await setRequiredValueToOpenForm(applications[0]);
+
             const textarea = container.querySelector(
                 "textarea",
             ) as HTMLTextAreaElement;
@@ -125,234 +366,148 @@ 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}
+                    applications={[applications[0]]}
+                />,
+            );
+
+            await setRequiredValueToOpenForm(applications[0]);
 
-            const { container } = render(<Component {...defaultProps} />);
             const execLayerDataInput = container.querySelector(
                 "textarea",
             ) as HTMLTextAreaElement;
 
             const hexValue = "0x123123";
+
             fireEvent.change(execLayerDataInput, {
                 target: {
                     value: hexValue,
                 },
             });
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: ["0x0000000000000000000000000000000000000000", hexValue],
-                query: {
-                    enabled: false,
-                },
-                value: undefined,
-            });
+            const simulateParams =
+                useSimulateContractMock.mock.lastCall?.[0] ?? {};
+
+            expect(simulateParams).toHaveProperty("args", [
+                "0x60a7048c3136293071605a4eaffef49923e981cc",
+                hexValue,
+            ]);
+
+            expect(simulateParams).toHaveProperty("query", { enabled: false });
+            expect(simulateParams).toHaveProperty("value", undefined);
         });
     });
 
     describe("Send button", () => {
-        it("should be disabled when extra data is not hex", () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const textarea = container.querySelector(
-                "textarea",
-            ) as HTMLTextAreaElement;
-            const buttons = container.querySelectorAll("button");
-            const submitButton = buttons[1] as HTMLButtonElement;
+        it("should be disabled when extra data is not hex", async () => {
+            render(
+                <Component
+                    {...defaultProps}
+                    applications={[applications[0]]}
+                />,
+            );
+
+            await setRequiredValueToOpenForm(applications[0]);
+
+            const textarea = screen.getByTestId("eth-extra-data-input");
+            const submitButton = screen.getByText("Deposit").closest("button");
 
             fireEvent.change(textarea, {
                 target: {
                     value: "",
                 },
             });
+
             fireEvent.blur(textarea);
 
-            expect(submitButton.hasAttribute("disabled")).toBe(true);
+            expect(submitButton?.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,
-                },
-            });
 
-            fireEvent.change(amountInput, {
-                target: {
-                    value: "1",
+            useSimulateContractMock.mockReturnValue({
+                data: {
+                    request: {},
                 },
+                isLoading: false,
+                error: null,
             });
 
-            fireEvent.blur(amountInput);
-            expect(submitButton.hasAttribute("disabled")).toBe(false);
-
-            fireEvent.click(submitButton);
-            expect(mockedWrite).toHaveBeenCalled();
-        });
-
-        it("should invoke onSearchApplications function after successful deposit", async () => {
-            const wagmi = await import("wagmi");
-            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
-                ...wagmi.useWaitForTransactionReceipt,
-                error: null,
-                status: "success",
-                isSuccess: true,
+            useWriteContractMock.mockReturnValue({
+                reset: vi.fn(),
+                writeContract: mockedWrite,
             });
 
-            const onSearchApplicationsMock = vi.fn();
             render(
                 <Component
                     {...defaultProps}
-                    onSearchApplications={onSearchApplicationsMock}
+                    applications={[selectedApplication]}
                 />,
             );
 
-            expect(onSearchApplicationsMock).toHaveBeenCalledWith("");
-        });
+            await setRequiredValueToOpenForm(selectedApplication);
 
-        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);
-
-            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 [application] = applications;
+            const appInput = screen.getByTestId("application-input");
+            const amountInput = screen.getByTestId("eth-amount-input");
+            const submitButton = screen.getByText("Deposit");
 
-            fireEvent.change(applicationsInput, {
+            fireEvent.change(appInput, {
                 target: {
-                    value: "",
+                    value: selectedApplication.address.toLowerCase(),
                 },
             });
 
             fireEvent.change(amountInput, {
                 target: {
-                    value: "0.1",
+                    value: "1",
                 },
             });
 
-            fireEvent.change(textarea, {
-                target: {
-                    value: "0x",
-                },
-            });
+            fireEvent.blur(amountInput);
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: ["0x0000000000000000000000000000000000000000", "0x"],
-                query: {
-                    enabled: false,
-                },
-                value: 100000000000000000n,
-            });
+            expect(submitButton.hasAttribute("disabled")).toBe(false);
 
-            fireEvent.change(applicationsInput, {
-                target: {
-                    value: application,
-                },
-            });
+            fireEvent.click(submitButton);
 
-            fireEvent.change(amountInput, {
-                target: {
-                    value: "",
-                },
-            });
+            expect(mockedWrite).toHaveBeenCalled();
+        });
 
-            fireEvent.change(textarea, {
-                target: {
-                    value: "0x",
-                },
-            });
+        it('should enable "useSimulateContract" only when the form is valid', async () => {
+            const selectedApp = applications[0];
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: [getAddress(application), "0x"],
-                query: {
-                    enabled: false,
-                },
-                value: undefined,
-            });
+            render(
+                <Component {...defaultProps} applications={[selectedApp]} />,
+            );
 
-            fireEvent.change(applicationsInput, {
-                target: {
-                    value: application,
-                },
-            });
+            await setRequiredValueToOpenForm(selectedApp);
 
-            fireEvent.change(amountInput, {
+            const appInput = screen.getByTestId("application-input");
+            const amountInput = screen.getByTestId("eth-amount-input");
+            const textarea = screen.getByTestId("eth-extra-data-input");
+
+            let params = useSimulateContractMock.mock.lastCall?.[0] ?? {};
+
+            expect(params).toHaveProperty("query", { enabled: false });
+
+            fireEvent.change(appInput, {
                 target: {
-                    value: "0.1",
+                    value: selectedApp.address.toLowerCase(),
                 },
             });
 
-            fireEvent.change(textarea, {
+            fireEvent.change(amountInput, {
                 target: {
                     value: "",
                 },
             });
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: ["0x60a7048c3136293071605a4eaffef49923e981cc", "0x"],
-                query: {
-                    enabled: false,
-                },
-                value: 100000000000000000n,
-            });
+            params = useSimulateContractMock.mock.lastCall?.[0] ?? {};
 
-            fireEvent.change(applicationsInput, {
-                target: {
-                    value: application,
-                },
-            });
+            expect(params).toHaveProperty("query", { enabled: false });
 
             fireEvent.change(amountInput, {
                 target: {
@@ -360,179 +515,146 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            fireEvent.change(textarea, {
-                target: {
-                    value: "0x123",
-                },
-            });
+            params = useSimulateContractMock.mock.lastCall?.[0] ?? {};
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: ["0x60a7048c3136293071605a4eaffef49923e981cc", "0x123"],
-                query: {
-                    enabled: true,
-                },
-                value: 100000000000000000n,
-            });
-        });
+            expect(params).toHaveProperty("query", { enabled: true });
 
-        it("should invoke onSuccess callback after successful deposit", async () => {
-            const wagmi = await import("wagmi");
-            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
-                ...wagmi.useWaitForTransactionReceipt,
-                error: null,
-                isSuccess: true,
+            fireEvent.change(textarea, {
+                target: { value: "invalid-hex-value" },
             });
 
-            const onSuccessMock = vi.fn();
-            render(<Component {...defaultProps} onSuccess={onSuccessMock} />);
+            params = useSimulateContractMock.mock.lastCall?.[0] ?? {};
 
-            expect(onSuccessMock).toHaveBeenCalled();
-        });
-    });
+            expect(params).toHaveProperty("query", { enabled: false });
 
-    describe("ApplicationAutocomplete", () => {
-        it("should display correct label for applications input", () => {
-            render(<Component {...defaultProps} />);
-
-            expect(screen.getByText("Application")).toBeInTheDocument();
-        });
-
-        it("should display correct description for applications input", () => {
-            render(<Component {...defaultProps} />);
-
-            expect(
-                screen.getByText("The application smart contract address"),
-            ).toBeInTheDocument();
-        });
+            fireEvent.change(textarea, { target: { value: "0x" } });
 
-        it("should display correct placeholder", () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const input = container.querySelector("input");
+            params = useSimulateContractMock.mock.lastCall?.[0] ?? {};
 
-            expect(input?.getAttribute("placeholder")).toBe("0x");
+            expect(params).toHaveProperty("query", { enabled: true });
+            expect(params).toHaveProperty("args", [
+                selectedApp.address.toLowerCase(),
+                "0x",
+            ]);
+            expect(params).toHaveProperty("value", 100000000000000000n);
         });
 
-        it("should display alert for unemployed application", async () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const input = container.querySelector("input") as HTMLInputElement;
+        it("should invoke onSearchApplications and OnSuccess function after successful deposit", async () => {
+            const app = applications[0];
+            const onSearchApplicationsMock = vi.fn();
+            const onSuccessMock = vi.fn();
 
-            fireEvent.change(input, {
-                target: {
-                    value: "0x60a7048c3136293071605a4eaffef49923e981fe",
+            useWriteContractMock.mockReturnValue({
+                status: "success",
+                data: "0x0001",
+                reset: () => {
+                    depositWaitStatus.reset();
                 },
             });
 
-            await waitFor(
-                () =>
-                    expect(
-                        screen.getByText(
-                            "This is a deposit to an undeployed application.",
-                        ),
-                    ).toBeInTheDocument(),
-                {
-                    timeout: 1100,
-                },
+            useWaitForTransactionReceiptMock.mockImplementation((params) => {
+                return params?.hash === "0x0001"
+                    ? {
+                          ...depositWaitStatus.props,
+                          fetchStatus: "idle",
+                          data: { transactionHash: "0x01" },
+                      }
+                    : {
+                          fetchStatus: "idle",
+                      };
+            });
+
+            render(
+                <Component
+                    {...defaultProps}
+                    onSearchApplications={onSearchApplicationsMock}
+                    onSuccess={onSuccessMock}
+                    applications={[app]}
+                />,
             );
-        });
 
-        it("should display error when application is invalid", () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const input = container.querySelector("input") as HTMLInputElement;
+            await setRequiredValueToOpenForm(app);
 
-            fireEvent.change(input, {
-                target: {
-                    value: "0x60a7048c3136293071605a4eaffef49923e981ccffffffff",
-                },
+            expect(onSearchApplicationsMock).toHaveBeenCalledWith("");
+            expect(onSuccessMock).toHaveBeenCalledWith({
+                receipt: { transactionHash: "0x01" },
+                type: "ETHER",
             });
+        });
+    });
 
-            fireEvent.blur(input);
+    describe("ApplicationAutocomplete", () => {
+        it("should display correct placeholder", () => {
+            render(<Component {...defaultProps} />);
+            const input = screen.getByTestId("application-input");
 
-            expect(input.getAttribute("aria-invalid")).toBe("true");
-            expect(screen.getByText("Invalid application")).toBeInTheDocument();
+            expect(input.getAttribute("placeholder")).toBe("0x");
         });
 
-        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;
+        it("should display error when application is invalid", () => {
+            render(<Component {...defaultProps} />);
+            const input = screen.getByTestId("application-input");
 
-            const [application] = applications;
             fireEvent.change(input, {
                 target: {
-                    value: application,
+                    value: "0x60a7048c",
                 },
             });
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: [getAddress(application), "0x"],
-                query: {
-                    enabled: false,
-                },
-                value: undefined,
-            });
-        });
-    });
-
-    describe("Alerts", () => {
-        it("should display alert for successful transaction", async () => {
-            const wagmi = await import("wagmi");
-            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
-                ...wagmi.useWaitForTransactionReceipt,
-                error: null,
-                status: "success",
-                isSuccess: true,
-            });
+            fireEvent.blur(input);
 
-            render(<Component {...defaultProps} />);
+            expect(input.getAttribute("aria-invalid")).toBe("true");
             expect(
-                screen.getByText("Ether deposited successfully!"),
+                screen.getByText("Invalid application address"),
             ).toBeInTheDocument();
         });
+    });
 
-        it("should display alert for failed transaction", async () => {
-            const wagmi = await import("wagmi");
+    describe("Alerts", () => {
+        it("should display feedback for failed transaction", async () => {
             const message = "User declined the transaction";
-            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
-                ...wagmi.useWaitForTransactionReceipt,
+
+            useWaitForTransactionReceiptMock.mockReturnValue({
+                data: undefined,
                 error: {
                     message,
+                    shortMessage: "",
+                    code: 10,
+                    details: message,
+                    name: "UnknownRpcError",
+                    version: "10",
+                    walk() {
+                        return new Error(message);
+                    },
                 },
                 status: "error",
             });
 
-            render(<Component {...defaultProps} />);
+            render(
+                <Component
+                    {...defaultProps}
+                    applications={[applications[0]]}
+                />,
+            );
+
+            await setRequiredValueToOpenForm(applications[0]);
+
             expect(screen.getByText(message)).toBeInTheDocument();
         });
     });
 
     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,
-                data: {
-                    request: {},
-                },
-                loading: false,
-                error: null,
-            });
-            rollupsWagmi.useSimulateEtherPortalDepositEther = vi
-                .fn()
-                .mockImplementation(mockedHook);
+            const { container } = render(
+                <Component
+                    {...defaultProps}
+                    applications={[applications[0]]}
+                />,
+            );
+            await setRequiredValueToOpenForm(applications[0]);
 
-            const { container } = render(<Component {...defaultProps} />);
-            const amountInput = container.querySelector(
-                '[type="number"]',
-            ) as HTMLInputElement;
+            const appInput = screen.getByTestId("application-input");
+            const amountInput = screen.getByTestId("eth-amount-input");
 
             fireEvent.change(amountInput, {
                 target: {
@@ -540,42 +662,15 @@ describe("Rollups EtherDepositForm", () => {
                 },
             });
 
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: ["0x0000000000000000000000000000000000000000", "0x"],
+            const params = useSimulateContractMock.mock.lastCall?.[0] ?? {};
+
+            expect(omit(["abi", "address", "functionName"], params)).toEqual({
+                args: [applications[0].address.toLowerCase(), "0x"],
                 value: 100000000000n,
                 query: {
-                    enabled: false,
+                    enabled: true,
                 },
             });
         });
     });
-
-    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);
-
-            const wagmi = await import("wagmi");
-            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
-                ...wagmi.useWaitForTransactionReceipt,
-                error: null,
-                isSuccess: true,
-            });
-
-            render(<Component {...defaultProps} />);
-            expect(resetMock).toHaveBeenCalled();
-        });
-    });
 });
diff --git a/packages/ui/test/RollupVersionSegment.test.tsx b/packages/ui/test/RollupVersionSegment.test.tsx
new file mode 100644
index 000000000..2229af431
--- /dev/null
+++ b/packages/ui/test/RollupVersionSegment.test.tsx
@@ -0,0 +1,42 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, it } from "vitest";
+import RollupVersionSegment from "../src/RollupVersionSegment";
+import withMantineTheme from "./utils/WithMantineTheme";
+
+const Component = withMantineTheme(RollupVersionSegment);
+
+describe("Rollup Version component", () => {
+    it("should display the available version options", () => {
+        const onChange = vi.fn();
+        render(
+            <Component
+                label="Choose your rollup version"
+                onChange={onChange}
+                data-testid="rollup-version-segment"
+                value=""
+            />,
+        );
+
+        expect(screen.getByText("Rollup v1")).toBeVisible();
+        expect(screen.getByText("Rollup v2")).toBeVisible();
+    });
+
+    it("should dispatch selected version i.e. v1 or v2", () => {
+        const onChange = vi.fn();
+        render(
+            <Component
+                label="Choose your rollup version"
+                onChange={onChange}
+                value=""
+            />,
+        );
+
+        fireEvent.click(screen.getByText("Rollup v1"));
+
+        expect(onChange).toHaveBeenCalledWith("v1");
+
+        fireEvent.click(screen.getByText("Rollup v2"));
+
+        expect(onChange).toHaveBeenCalledWith("v2");
+    });
+});
diff --git a/packages/ui/test/hooks/useUndeployedApplication.test.ts b/packages/ui/test/hooks/useUndeployedApplication.test.ts
index 1e2b8a87c..7ea6d78de 100644
--- a/packages/ui/test/hooks/useUndeployedApplication.test.ts
+++ b/packages/ui/test/hooks/useUndeployedApplication.test.ts
@@ -1,7 +1,7 @@
-import { describe, it } from "vitest";
 import { renderHook, waitFor } from "@testing-library/react";
-import useUndeployedApplication from "../../src/hooks/useUndeployedApplication";
 import { zeroAddress } from "viem";
+import { describe, it } from "vitest";
+import useUndeployedApplication from "../../src/hooks/useUndeployedApplication";
 
 const applications = ["0x60a7048c3136293071605a4eaffef49923e981cc"];
 const delay = 1000;