From 5634bd904b6ea311e28a141b979e1f5c4de42dc7 Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Wed, 31 Jul 2024 13:26:41 +0400
Subject: [PATCH] add dashboard sub components

---
 .../modules/bridge/amount-input.tsx           |  31 ++
 .../modules/bridge/chain-select.tsx           |  45 ++
 .../src/components/modules/bridge/index.tsx   | 415 +++++-------------
 .../modules/bridge/percentage-buttons.tsx     |  23 +
 .../modules/bridge/submit-button.tsx          |  29 ++
 .../modules/bridge/switch-network-button.tsx  |  19 +
 .../modules/bridge/token-select.tsx           |  40 ++
 .../modules/bridge/transfer-from-section.tsx  |  50 +++
 .../modules/bridge/transfer-to-section.tsx    |  60 +++
 9 files changed, 410 insertions(+), 302 deletions(-)
 create mode 100644 contracts/src/bridge/frontend/src/components/modules/bridge/amount-input.tsx
 create mode 100644 contracts/src/bridge/frontend/src/components/modules/bridge/chain-select.tsx
 create mode 100644 contracts/src/bridge/frontend/src/components/modules/bridge/percentage-buttons.tsx
 create mode 100644 contracts/src/bridge/frontend/src/components/modules/bridge/submit-button.tsx
 create mode 100644 contracts/src/bridge/frontend/src/components/modules/bridge/switch-network-button.tsx
 create mode 100644 contracts/src/bridge/frontend/src/components/modules/bridge/token-select.tsx
 create mode 100644 contracts/src/bridge/frontend/src/components/modules/bridge/transfer-from-section.tsx
 create mode 100644 contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx

diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/amount-input.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/amount-input.tsx
new file mode 100644
index 0000000000..2ad421adb2
--- /dev/null
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/amount-input.tsx
@@ -0,0 +1,31 @@
+import { FormField, FormItem, FormControl, FormMessage } from "../../ui/form";
+import { Input } from "../../ui/input";
+
+export const AmountInput = ({
+  form,
+  walletConnected,
+}: {
+  form: any;
+  walletConnected: boolean;
+}) => {
+  return (
+    <FormField
+      control={form.control}
+      name="amount"
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <Input
+              type="number"
+              placeholder="0"
+              className="text-2xl font-bold w-full dark:bg-[#292929] overflow-ellipsis"
+              disabled={!walletConnected}
+              {...field}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/chain-select.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/chain-select.tsx
new file mode 100644
index 0000000000..aee2be1637
--- /dev/null
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/chain-select.tsx
@@ -0,0 +1,45 @@
+import { Chain } from "@/src/types";
+import { FormField, FormItem, FormControl, FormMessage } from "../../ui/form";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from "../../ui/select";
+
+export const ChainSelect = ({
+  form,
+  chains,
+  name,
+}: {
+  form: any;
+  chains: Chain[];
+  name: string;
+}) => {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <Select defaultValue={field.value} onValueChange={field.onChange}>
+            <FormControl>
+              <SelectTrigger className="h-8 bg-muted">
+                <SelectValue placeholder={field.value || "Select Chain"} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              {chains.map((chain: any) => (
+                <SelectItem key={chain.value} value={chain.value}>
+                  {chain.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
index 3ecb6caf54..eca0a6bf42 100644
--- a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
@@ -6,37 +6,20 @@ import {
   Card,
   CardDescription,
 } from "@/src/components/ui/card";
-import { Button } from "@/src/components/ui/button";
-import { Skeleton } from "@/src/components/ui/skeleton";
-import { ArrowDownUpIcon, Loader, PlusIcon } from "lucide-react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../ui/select";
 import { Separator } from "../../ui/separator";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/src/components/ui/form";
-import { Input } from "@/src/components/ui/input";
+import { Form } from "@/src/components/ui/form";
 import { toast } from "@/src/components/ui/use-toast";
 import { DrawerDialog } from "../common/drawer-dialog";
-import { L1TOKENS, L2TOKENS, PERCENTAGES } from "@/src/lib/constants";
+import { L1TOKENS, L2TOKENS } from "@/src/lib/constants";
 import { z } from "zod";
 import { useFormHook } from "@/src/hooks/useForm";
 import { useWalletStore } from "../../providers/wallet-provider";
-import { ToastType, Token, WalletNetwork } from "@/src/types";
-import ConnectWalletButton from "../common/connect-wallet";
-import TruncatedAddress from "../common/truncated-address";
+import { ToastType, Token } from "@/src/types";
 import { useContract } from "@/src/hooks/useContract";
+import { TransferFromSection } from "./transfer-from-section";
+import { SubmitButton } from "./submit-button";
+import { SwitchNetworkButton } from "./switch-network-button";
+import { TransferToSection } from "./transfer-to-section";
 
 export default function Dashboard() {
   const {
@@ -57,17 +40,11 @@ export default function Dashboard() {
   const tokens = isL1ToL2 ? L1TOKENS : L2TOKENS;
   const receiver = form.watch("receiver");
 
-  const swapTokens = () => {
-    switchNetwork(
-      isL1ToL2 ? WalletNetwork.L2_TEN_TESTNET : WalletNetwork.L1_SEPOLIA
-    );
-  };
-
   const [open, setOpen] = React.useState(false);
   const watchTokenChange = form.watch("token");
 
   React.useEffect(() => {
-    const tokenBalance = async (value: string, token: Token) => {
+    const tokenBalance = async (token: Token) => {
       setLoading(true);
       try {
         const balance = token.isNative
@@ -84,64 +61,91 @@ export default function Dashboard() {
     if (watchTokenChange) {
       const token = tokens.find((t) => t.value === watchTokenChange);
       if (token) {
-        tokenBalance(watchTokenChange, token);
+        tokenBalance(token);
       }
     }
-  }, [watchTokenChange, address, provider]);
+  }, [watchTokenChange, address, provider, tokens]);
 
-  async function onSubmit(data: z.infer<typeof FormSchema>) {
-    try {
-      setLoading(true);
-      const transactionData = { ...data, receiver: receiver || address };
-      toast({
-        title: "Bridge Transaction",
-        description: "Bridge transaction initiated",
-        variant: ToastType.INFO,
-      });
-      const token = tokens.find((t) => t.value === transactionData.token);
-      if (!token) throw new Error("Invalid token");
+  const onSubmit = React.useCallback(
+    async (data: z.infer<typeof FormSchema>) => {
+      try {
+        setLoading(true);
+        const transactionData = { ...data, receiver: receiver || address };
+        toast({
+          title: "Bridge Transaction",
+          description: "Bridge transaction initiated",
+          variant: ToastType.INFO,
+        });
+        const token = tokens.find((t) => t.value === transactionData.token);
+        if (!token) throw new Error("Invalid token");
 
-      const sendTransaction = token.isNative ? sendNative : sendERC20;
-      const res = await sendTransaction(
-        transactionData.receiver,
-        transactionData.amount,
-        token.address
-      );
+        const sendTransaction = token.isNative ? sendNative : sendERC20;
+        const res = await sendTransaction(
+          transactionData.receiver,
+          transactionData.amount,
+          token.address
+        );
 
-      toast({
-        title: "Bridge Transaction",
-        description: `Bridge transaction completed: ${res.transactionHash}`,
-        variant: ToastType.SUCCESS,
-      });
-      form.reset();
-    } catch (error) {
-      setLoading(false);
-      console.error(error);
-      toast({
-        title: "Bridge Transaction",
-        description: `Error: ${
-          error instanceof Error
-            ? error.message
-            : "initiating bridge transaction"
-        }`,
-        variant: ToastType.DESTRUCTIVE,
-      });
-    } finally {
-      setLoading(false);
-    }
-  }
+        toast({
+          title: "Bridge Transaction",
+          description: `Bridge transaction completed: ${res.transactionHash}`,
+          variant: ToastType.SUCCESS,
+        });
+        form.reset();
+      } catch (error) {
+        console.error(error);
+        toast({
+          title: "Bridge Transaction",
+          description: `Error: ${
+            error instanceof Error
+              ? error.message
+              : "initiating bridge transaction"
+          }`,
+          variant: ToastType.DESTRUCTIVE,
+        });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [address, form, receiver, sendERC20, sendNative, tokens]
+  );
 
-  const setAmount = (value: number) => {
-    if (!form.getValues("token")) {
-      form.setError("token", {
-        type: "manual",
-        message: "Please select a token to get the balance",
-      });
-      return;
-    }
-    const amount = Math.floor(((fromTokenBalance * value) / 100) * 100) / 100;
-    form.setValue("amount", amount.toString());
-  };
+  const setAmount = React.useCallback(
+    (value: number) => {
+      if (!form.getValues("token")) {
+        form.setError("token", {
+          type: "manual",
+          message: "Please select a token to get the balance",
+        });
+        return;
+      }
+      const amount = Math.floor(((fromTokenBalance * value) / 100) * 100) / 100;
+      form.setValue("amount", amount.toString());
+    },
+    [form, fromTokenBalance]
+  );
+
+  const handleSwitchNetwork = React.useCallback(
+    async (event: any) => {
+      event.preventDefault();
+      try {
+        setLoading(true);
+        await switchNetwork();
+      } catch (error) {
+        console.error("Network switch failed", error);
+        toast({
+          title: "Network Switch",
+          description: `Error: ${
+            error instanceof Error ? error.message : "switching network"
+          }`,
+          variant: ToastType.DESTRUCTIVE,
+        });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [switchNetwork]
+  );
 
   return (
     <div className="h-full flex flex-col space-y-4 justify-center items-center">
@@ -157,225 +161,32 @@ export default function Dashboard() {
         <CardContent className="p-4">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
-              <div>
-                <div className="flex items-center justify-between mb-4">
-                  <strong>Transfer from</strong>
-                  {/* From Chain Select */}
-                  <FormField
-                    control={form.control}
-                    name="fromChain"
-                    render={({ field }) => (
-                      <FormItem>
-                        <Select
-                          defaultValue={field.value}
-                          onValueChange={field.onChange}
-                        >
-                          <FormControl>
-                            <SelectTrigger className="h-8 bg-muted">
-                              <SelectValue
-                                placeholder={field.value || "Select Chain"}
-                              />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            {fromChains.map((chain) => (
-                              <SelectItem key={chain.value} value={chain.value}>
-                                {chain.name}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-
-                <div className="bg-muted dark:bg-[#15171D] rounded-lg border">
-                  <div className="flex items-center justify-between p-2">
-                    {/* Token Select */}
-                    <FormField
-                      control={form.control}
-                      name="token"
-                      render={({ field }) => (
-                        <FormItem>
-                          <Select
-                            defaultValue={field.value}
-                            onValueChange={field.onChange}
-                          >
-                            <FormControl>
-                              <SelectTrigger className="h-8 dark:bg-[#292929]">
-                                <SelectValue
-                                  placeholder={field.value || "Select Token"}
-                                />
-                              </SelectTrigger>
-                            </FormControl>
-                            <SelectContent side="top">
-                              {tokens.map((token) => (
-                                <SelectItem
-                                  key={token.value}
-                                  value={token.value}
-                                  disabled={!token.isEnabled}
-                                >
-                                  {token.value}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    {/* Balance */}
-                    <div className="pl-2">
-                      <p className="text-sm text-muted-foreground">Balance:</p>
-                      <strong className="text-lg float-right word-wrap">
-                        {loading ? <Skeleton /> : fromTokenBalance || 0}
-                      </strong>
-                    </div>
-                  </div>
-                  <Separator />
-                  <div className="flex items-center justify-between flex-wrap p-2">
-                    {/* Amount Input */}
-                    <FormField
-                      control={form.control}
-                      name="amount"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              type="number"
-                              placeholder="0"
-                              className="text-2xl font-bold w-full dark:bg-[#292929] overflow-ellipsis"
-                              disabled={!walletConnected}
-                              {...field}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    <div className="flex items-center p-2">
-                      {/* Percentage Buttons */}
-                      <div className="flex items-center space-x-2">
-                        {PERCENTAGES.map((percentage) => (
-                          <Button
-                            type="button"
-                            key={percentage.name}
-                            variant="outline"
-                            size="sm"
-                            className="dark:bg-[#292929]"
-                            onClick={() => setAmount(percentage.value)}
-                          >
-                            {percentage.name}
-                          </Button>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Swap Bridge Tokens */}
-              <div className="flex items-center justify-center">
-                <Button
-                  type="button"
-                  className="mt-4"
-                  variant="outline"
-                  size="sm"
-                  onClick={swapTokens}
-                >
-                  <ArrowDownUpIcon className="h-4 w-4" />
-                </Button>
-              </div>
-
-              {/* Transfer to */}
-              <div>
-                <div className="flex items-center justify-between">
-                  <strong>Transfer to</strong>
-                  {/* To Chain Select */}
-                  <FormField
-                    control={form.control}
-                    name="toChain"
-                    render={({ field }) => (
-                      <FormItem>
-                        <Select
-                          defaultValue={field.value}
-                          onValueChange={field.onChange}
-                        >
-                          <FormControl>
-                            <SelectTrigger className="h-8 bg-muted">
-                              <SelectValue
-                                placeholder={field.value || "Select Chain"}
-                              />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent side="top">
-                            {toChains.map((chain) => (
-                              <SelectItem key={chain.value} value={chain.value}>
-                                {chain.name}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <div className="flex items-center justify-end">
-                  {/* Destination Address Input */}
-                  <Button
-                    variant="ghost"
-                    className="text-sm font-bold leading-none"
-                    onClick={() => setOpen(true)}
-                  >
-                    <PlusIcon className="h-3 w-3 mr-1" />
-                    <small>Edit destination address</small>
-                  </Button>
-                </div>
-                <div className="bg-muted dark:bg-[#15171D]">
-                  <div className="flex items-center justify-between p-2">
-                    <strong className="text-lg">
-                      {form.getValues().token}
-                    </strong>
-                    <div className="flex flex-col items-end">
-                      <p className="text-sm text-muted-foreground">
-                        You will receive:
-                      </p>
-                      <strong className="text-lg float-right">
-                        {loading ? <Skeleton /> : form.watch("amount") || 0}
-                      </strong>
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-muted dark:bg-[#15171D] rounded-lg border flex items-center justify-between mt-2 p-2 h-14">
-                  <strong className="text-lg">Receiver Address</strong>
-                  <div className="flex items-center">
-                    {receiver || address ? (
-                      <TruncatedAddress address={receiver || address} />
-                    ) : null}
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex items-center justify-center mt-4">
-                {walletConnected ? (
-                  <Button
-                    type="submit"
-                    className="text-sm font-bold leading-none w-full"
-                    size="lg"
-                    disabled={loading || fromTokenBalance <= 0}
-                  >
-                    {loading ? <Loader /> : "Initiate Bridge Transaction"}
-                  </Button>
-                ) : (
-                  <ConnectWalletButton
-                    className="text-sm font-bold leading-none w-full"
-                    variant="default"
-                  />
-                )}
-              </div>
+              <TransferFromSection
+                form={form}
+                fromChains={fromChains}
+                tokens={tokens}
+                fromTokenBalance={fromTokenBalance}
+                loading={loading}
+                setAmount={setAmount}
+                walletConnected={walletConnected}
+              />
+              <SwitchNetworkButton
+                handleSwitchNetwork={handleSwitchNetwork}
+                loading={loading}
+              />
+              <TransferToSection
+                form={form}
+                toChains={toChains}
+                loading={loading}
+                receiver={receiver}
+                address={address}
+                setOpen={setOpen}
+              />
+              <SubmitButton
+                walletConnected={walletConnected}
+                loading={loading}
+                fromTokenBalance={fromTokenBalance}
+              />
             </form>
           </Form>
           <DrawerDialog open={open} setOpen={setOpen} />
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/percentage-buttons.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/percentage-buttons.tsx
new file mode 100644
index 0000000000..c340a17fbb
--- /dev/null
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/percentage-buttons.tsx
@@ -0,0 +1,23 @@
+import { PERCENTAGES } from "@/src/lib/constants";
+import { Button } from "../../ui/button";
+
+export const PercentageButtons = ({ setAmount }: any) => {
+  return (
+    <div className="flex items-center p-2">
+      <div className="flex items-center space-x-2">
+        {PERCENTAGES.map((percentage) => (
+          <Button
+            type="button"
+            key={percentage.name}
+            variant="outline"
+            size="sm"
+            className="dark:bg-[#292929]"
+            onClick={() => setAmount(percentage.value)}
+          >
+            {percentage.name}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/submit-button.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/submit-button.tsx
new file mode 100644
index 0000000000..ea20bce387
--- /dev/null
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/submit-button.tsx
@@ -0,0 +1,29 @@
+import { Loader } from "lucide-react";
+import { Button } from "../../ui/button";
+import ConnectWalletButton from "../common/connect-wallet";
+
+export const SubmitButton = ({
+  walletConnected,
+  loading,
+  fromTokenBalance,
+}: any) => {
+  return (
+    <div className="flex items-center justify-center mt-4">
+      {walletConnected ? (
+        <Button
+          type="submit"
+          className="text-sm font-bold leading-none w-full"
+          size="lg"
+          disabled={loading || fromTokenBalance <= 0}
+        >
+          {loading ? <Loader /> : "Initiate Bridge Transaction"}
+        </Button>
+      ) : (
+        <ConnectWalletButton
+          className="text-sm font-bold leading-none w-full"
+          variant="default"
+        />
+      )}
+    </div>
+  );
+};
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/switch-network-button.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/switch-network-button.tsx
new file mode 100644
index 0000000000..1fb3b90096
--- /dev/null
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/switch-network-button.tsx
@@ -0,0 +1,19 @@
+import { ArrowDownUpIcon, Loader } from "lucide-react";
+import { Button } from "../../ui/button";
+
+export const SwitchNetworkButton = ({ handleSwitchNetwork, loading }: any) => {
+  return (
+    <div className="flex items-center justify-center">
+      <Button
+        type="button"
+        className="mt-4"
+        variant="outline"
+        size="sm"
+        onClick={handleSwitchNetwork}
+        disabled={loading}
+      >
+        <ArrowDownUpIcon className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/token-select.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/token-select.tsx
new file mode 100644
index 0000000000..3afed14c60
--- /dev/null
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/token-select.tsx
@@ -0,0 +1,40 @@
+import { FormField, FormItem, FormControl, FormMessage } from "../../ui/form";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from "../../ui/select";
+
+export const TokenSelect = ({ form, tokens }: any) => {
+  return (
+    <FormField
+      control={form.control}
+      name="token"
+      render={({ field }) => (
+        <FormItem>
+          <Select defaultValue={field.value} onValueChange={field.onChange}>
+            <FormControl>
+              <SelectTrigger className="h-8 dark:bg-[#292929]">
+                <SelectValue placeholder={field.value || "Select Token"} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent side="top">
+              {tokens.map((token: any) => (
+                <SelectItem
+                  key={token.value}
+                  value={token.value}
+                  disabled={!token.isEnabled}
+                >
+                  {token.value}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-from-section.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-from-section.tsx
new file mode 100644
index 0000000000..715f4e32c6
--- /dev/null
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-from-section.tsx
@@ -0,0 +1,50 @@
+import { Chain, Token } from "@/src/types";
+import { Separator } from "../../ui/separator";
+import { Skeleton } from "../../ui/skeleton";
+import { AmountInput } from "./amount-input";
+import { ChainSelect } from "./chain-select";
+import { PercentageButtons } from "./percentage-buttons";
+import { TokenSelect } from "./token-select";
+
+export const TransferFromSection = ({
+  form,
+  fromChains,
+  tokens,
+  fromTokenBalance,
+  loading,
+  setAmount,
+  walletConnected,
+}: {
+  form: any;
+  fromChains: Chain[];
+  tokens: Token[];
+  fromTokenBalance: string;
+  loading: boolean;
+  setAmount: (value: number) => void;
+  walletConnected: boolean;
+}) => {
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <strong>Transfer from</strong>
+        <ChainSelect form={form} chains={fromChains} name="fromChain" />
+      </div>
+      <div className="bg-muted dark:bg-[#15171D] rounded-lg border">
+        <div className="flex items-center justify-between p-2">
+          <TokenSelect form={form} tokens={tokens} />
+          <div className="pl-2">
+            <p className="text-sm text-muted-foreground">Balance:</p>
+            <strong className="text-lg float-right word-wrap">
+              {loading ? <Skeleton /> : fromTokenBalance || 0}
+            </strong>
+          </div>
+        </div>
+        <Separator />
+        <div className="flex items-center justify-between flex-wrap p-2">
+          <AmountInput form={form} walletConnected={walletConnected} />
+          <PercentageButtons setAmount={setAmount} />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx
new file mode 100644
index 0000000000..0ae89d3cd5
--- /dev/null
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx
@@ -0,0 +1,60 @@
+import { PlusIcon } from "lucide-react";
+import { Button } from "../../ui/button";
+import { Skeleton } from "../../ui/skeleton";
+import TruncatedAddress from "../common/truncated-address";
+import { ChainSelect } from "./chain-select";
+import { Chain } from "@/src/types";
+
+export const TransferToSection = ({
+  form,
+  toChains,
+  loading,
+  receiver,
+  address,
+  setOpen,
+}: {
+  form: any;
+  toChains: Chain[];
+  loading: boolean;
+  receiver?: string;
+  address: string;
+  setOpen: (open: boolean) => void;
+}) => {
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <strong>Transfer to</strong>
+        <ChainSelect form={form} chains={toChains} name="toChain" />
+      </div>
+      <div className="flex items-center justify-end">
+        <Button
+          variant="ghost"
+          className="text-sm font-bold leading-none"
+          onClick={() => setOpen(true)}
+        >
+          <PlusIcon className="h-3 w-3 mr-1" />
+          <small>Edit destination address</small>
+        </Button>
+      </div>
+      <div className="bg-muted dark:bg-[#15171D]">
+        <div className="flex items-center justify-between p-2">
+          <strong className="text-lg">{form.getValues().token}</strong>
+          <div className="flex flex-col items-end">
+            <p className="text-sm text-muted-foreground">You will receive:</p>
+            <strong className="text-lg float-right">
+              {loading ? <Skeleton /> : form.watch("amount") || 0}
+            </strong>
+          </div>
+        </div>
+      </div>
+      <div className="bg-muted dark:bg-[#15171D] rounded-lg border flex items-center justify-between mt-4 p-2">
+        <span>To:</span>
+        {receiver ? (
+          <TruncatedAddress address={receiver} />
+        ) : address ? (
+          <TruncatedAddress address={address} />
+        ) : null}
+      </div>
+    </div>
+  );
+};