Fix toast type and add receiver field to useForm

ten-protocol · May 16, 2024 · cdf6bc5 · cdf6bc5
1 parent 69e6e2b
commit cdf6bc5
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 47 deletions.
diff --git 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<any>(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() {
 
                   <div className="flex items-center justify-end">
                     {/* Destination Address Input */}
-                    <DrawerDialog
-                      FormComponent={({ className }) => (
-                        <form
-                          className={cn("grid items-start gap-4", className)}
-                        >
-                          <div className="grid gap-2">
-                            <Label htmlFor="address">Address</Label>
-                            <Input
-                              type="address"
-                              id="address"
-                              defaultValue=""
-                            />
-                          </div>
-                          <Alert
-                            variant={"warning"}
-                            className="flex items-center space-x-2"
-                          >
-                            <Terminal className="h-4 w-4" />
-                            <AlertDescription>
-                              Make sure the address is correct before
-                              submitting.
-                            </AlertDescription>
-                          </Alert>
-                          <Button type="submit">Add destination address</Button>
-                        </form>
-                      )}
-                    />
+                    <DrawerDialog />
                   </div>
                   <div className="bg-muted dark:bg-[#15171D]">
                     <div className="flex items-center justify-between p-2">
@@ -392,8 +374,10 @@ export default function Dashboard() {
                   </div>
 
                   <div className="bg-muted dark:bg-[#15171D] rounded-lg border flex items-center justify-between mt-2 p-2 h-14">
-                    <strong>Refuel gas</strong>
-                    <div className="flex items-center">Not supported</div>
+                    <strong className="text-lg">Receiver Address</strong>
+                    <div className="flex items-center">
+                      {<Copy value={receiver ?? address} />}
+                    </div>
                   </div>
                 </div>
                 <div className="flex items-center justify-center mt-4">

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
@@ -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<any>;
-}) {
+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"
           >
             <PlusIcon className="h-3 w-3 mr-1" />
-            <small>Transfer to a different address</small>
+            <small>Edit destination address</small>
           </Button>
         </DialogTrigger>
         <DialogContent className="sm:max-w-[425px]">
@@ -48,7 +52,7 @@ export function DrawerDialog({
               This address will be used to transfer the asset to.
             </DialogDescription>
           </DialogHeader>
-          <FormComponent />
+          <FormComponent setOpen={setOpen} form={form} receiver={receiver} />
         </DialogContent>
       </Dialog>
     );
@@ -62,7 +66,7 @@ export function DrawerDialog({
           variant="ghost"
         >
           <PlusIcon className="h-3 w-3 mr-1" />
-          <small>Transfer to a different address</small>
+          <small>Edit destination address</small>
         </Button>
       </DrawerTrigger>
       <DrawerContent>
@@ -72,7 +76,12 @@ export function DrawerDialog({
             This address will be used to transfer the asset to.
           </DrawerDescription>
         </DrawerHeader>
-        <FormComponent className="px-4" />
+        <FormComponent
+          className="px-4"
+          setOpen={setOpen}
+          form={form}
+          receiver={receiver}
+        />
         <DrawerFooter className="pt-2">
           <DrawerClose asChild>
             <Button variant="outline">Cancel</Button>
@@ -82,3 +91,34 @@ export function DrawerDialog({
     </Drawer>
   );
 }
+
+const FormComponent = ({ className, setOpen, form, receiver }: any) => {
+  const addAddressToMainForm = (e: any) => {
+    e.preventDefault();
+    form.setValue("receiver", e.target.elements.address.value);
+    setOpen(false);
+  };
+  return (
+    <form
+      className={cn("grid items-start gap-4", className)}
+      onSubmit={addAddressToMainForm}
+    >
+      <div className="grid gap-2">
+        <Label htmlFor="address">Address</Label>
+        <Input
+          type="address"
+          id="address"
+          placeholder={receiver || "Enter address"}
+          defaultValue={receiver}
+        />
+      </div>
+      <Alert variant={"warning"} className="flex items-center space-x-2">
+        <Terminal className="h-4 w-4" />
+        <AlertDescription>
+          Make sure the address is correct before submitting.
+        </AlertDescription>
+      </Alert>
+      <Button type="submit">Add destination address</Button>
+    </form>
+  );
+};
diff --git 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
@@ -20,6 +20,7 @@ export const useFormHook = () => {
     token: z.string().nonempty({
       message: "Select a token.",
     }),
+    receiver: z.string().optional(),
   });
 
   const form = useForm<z.infer<typeof FormSchema>>({
@@ -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
@@ -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(() => {