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 21ddeeb4bf..91a1e76a12 100644 --- a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx +++ b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx @@ -8,7 +8,6 @@ import { } from "@/src/components/ui/card"; import { Button } from "@/src/components/ui/button"; import { Skeleton } from "@/src/components/ui/skeleton"; -import { cn } from "@/src/lib/utils"; import { ArrowDownUpIcon, Terminal } from "lucide-react"; import { Select, @@ -31,7 +30,6 @@ import { import { Input } from "@/src/components/ui/input"; import { toast } from "@/src/components/ui/use-toast"; import { DrawerDialog } from "../common/drawer-dialog"; -import { Label } from "../../ui/label"; import { L1TOKENS, L2TOKENS, PERCENTAGES } from "@/src/lib/constants"; import { z } from "zod"; import { useFormHook } from "@/src/hooks/useForm"; @@ -40,6 +38,7 @@ import { useWalletStore } from "../../providers/wallet-provider"; import { ToastType, Token } from "@/src/types"; import { Alert, AlertDescription } from "../../ui/alert"; import ConnectWalletButton from "../common/connect-wallet"; +import Copy from "../common/copy"; export default function Dashboard() { const { @@ -60,6 +59,7 @@ export default function Dashboard() { const [fromTokenBalance, setFromTokenBalance] = React.useState(0); const tokens = isL1ToL2 ? L1TOKENS : L2TOKENS; + const receiver = form.watch("receiver"); const swapTokens = () => { switchNetwork(isL1ToL2 ? "L2" : "L1"); @@ -106,14 +106,18 @@ export default function Dashboard() { toast({ title: "Bridge Transaction", description: "Bridge transaction initiated", - variant: ToastType.SUCCESS, + variant: ToastType.INFO, }); const token = data.token; const t = tokens.find((t) => t.value === token); if (t?.isNative) { - await web3Service.sendNative(address, data.amount); + await web3Service.sendNative(data.receiver ?? address, data.amount); } else { - await web3Service.sendERC20(t!.address, data.amount, address); + await web3Service.sendERC20( + t!.address, + data.amount, + data.receiver ?? address + ); } toast({ title: "Bridge Transaction", @@ -125,7 +129,10 @@ export default function Dashboard() { console.error(error); toast({ title: "Bridge Transaction", - description: "Error initiating bridge transaction", + description: + error instanceof Error + ? error.message + : "Error initiating bridge transaction", variant: ToastType.DESTRUCTIVE, }); } @@ -139,7 +146,8 @@ export default function Dashboard() { }); return; } - const amount = (fromTokenBalance * value) / 100; + const roundDown = (num: number) => Math.floor(num * 100) / 100; + const amount = roundDown((fromTokenBalance * value) / 100); form.setValue("amount", amount.toString()); }; @@ -346,33 +354,7 @@ export default function Dashboard() {
{/* Destination Address Input */} - ( -
-
- - -
- - - - Make sure the address is correct before - submitting. - - - -
- )} - /> +
@@ -392,8 +374,10 @@ export default function Dashboard() {
- Refuel gas -
Not supported
+ Receiver Address +
+ {} +
diff --git a/contracts/src/bridge/frontend/src/components/modules/common/drawer-dialog.tsx b/contracts/src/bridge/frontend/src/components/modules/common/drawer-dialog.tsx index 52e08272bf..84d1b6a248 100644 --- a/contracts/src/bridge/frontend/src/components/modules/common/drawer-dialog.tsx +++ b/contracts/src/bridge/frontend/src/components/modules/common/drawer-dialog.tsx @@ -20,12 +20,16 @@ import { } from "../../ui/drawer"; import { useMediaQuery } from "@/src/hooks/useMediaQuery"; import { PlusIcon } from "@radix-ui/react-icons"; +import { Label } from "../../ui/label"; +import { Input } from "../../ui/input"; +import { Alert, AlertDescription } from "../../ui/alert"; +import { Terminal } from "lucide-react"; +import { cn } from "@/src/lib/utils"; +import { useFormHook } from "@/src/hooks/useForm"; -export function DrawerDialog({ - FormComponent, -}: { - FormComponent: React.JSXElementConstructor; -}) { +export function DrawerDialog() { + const { form } = useFormHook(); + const receiver = form.watch("receiver"); const [open, setOpen] = React.useState(false); const isDesktop = useMediaQuery("(min-width: 768px)"); @@ -38,7 +42,7 @@ export function DrawerDialog({ variant="ghost" > - Transfer to a different address + Edit destination address @@ -48,7 +52,7 @@ export function DrawerDialog({ This address will be used to transfer the asset to. - + ); @@ -62,7 +66,7 @@ export function DrawerDialog({ variant="ghost" > - Transfer to a different address + Edit destination address @@ -72,7 +76,12 @@ export function DrawerDialog({ This address will be used to transfer the asset to. - + @@ -82,3 +91,34 @@ export function DrawerDialog({ ); } + +const FormComponent = ({ className, setOpen, form, receiver }: any) => { + const addAddressToMainForm = (e: any) => { + e.preventDefault(); + form.setValue("receiver", e.target.elements.address.value); + setOpen(false); + }; + return ( +
+
+ + +
+ + + + Make sure the address is correct before submitting. + + + +
+ ); +}; diff --git a/contracts/src/bridge/frontend/src/hooks/useCopy.ts b/contracts/src/bridge/frontend/src/hooks/useCopy.ts index 6e4568d764..ab17dfc6dc 100644 --- a/contracts/src/bridge/frontend/src/hooks/useCopy.ts +++ b/contracts/src/bridge/frontend/src/hooks/useCopy.ts @@ -9,7 +9,7 @@ export const useCopy = () => { copyText(text) .catch(() => fallbackCopyTextToClipboard(text)) .then(() => { - showToast(ToastType.DESTRUCTIVE, `${name ? name : "Copied!"}`); + showToast(ToastType.SUCCESS, `${name ? name : "Copied!"}`); setCopied(true); }) .catch(() => { diff --git a/contracts/src/bridge/frontend/src/hooks/useForm.ts b/contracts/src/bridge/frontend/src/hooks/useForm.ts index 2bf296ade9..2492119b7c 100644 --- a/contracts/src/bridge/frontend/src/hooks/useForm.ts +++ b/contracts/src/bridge/frontend/src/hooks/useForm.ts @@ -20,6 +20,7 @@ export const useFormHook = () => { token: z.string().nonempty({ message: "Select a token.", }), + receiver: z.string().optional(), }); const form = useForm>({ @@ -29,6 +30,7 @@ export const useFormHook = () => { fromChain: fromChains[0].value, toChain: toChains[0].value, token: isL1ToL2 ? L1TOKENS[0].value : L2TOKENS[0].value, + receiver: "", }, }); diff --git a/tools/walletextension/frontend/src/hooks/useCopy.ts b/tools/walletextension/frontend/src/hooks/useCopy.ts index e05e843c05..99f547f7c2 100644 --- a/tools/walletextension/frontend/src/hooks/useCopy.ts +++ b/tools/walletextension/frontend/src/hooks/useCopy.ts @@ -9,7 +9,7 @@ export const useCopy = () => { copyText(text) .catch(() => fallbackCopyTextToClipboard(text)) .then(() => { - showToast(ToastType.DESTRUCTIVE, `${name ? name : "Copied!"}`); + showToast(ToastType.SUCCESS, `${name ? name : "Copied!"}`); setCopied(true); }) .catch(() => {