From 9940baafef97ea5c7f859f7e800dac8ecacf8445 Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Mon, 13 May 2024 11:19:39 +0300
Subject: [PATCH] add info on supported bridge

---
 .../src/components/modules/bridge/index.tsx   | 438 ++++++++++--------
 1 file changed, 232 insertions(+), 206 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
index 31e29cfdaa..21ddeeb4bf 100644
--- a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
@@ -144,59 +144,35 @@ export default function Dashboard() {
   };
 
   return (
-    <div className="h-full flex flex-col space-y-4 justify-center items-center">
-      <Card className="max-w-[600px] p-0">
-        <CardHeader>
-          <CardTitle>Bridge</CardTitle>
-          <CardDescription>
-            You are currently bridging from {isL1ToL2 ? "L1" : "L2"} to{" "}
-            {isL1ToL2 ? "L2" : "L1"}.
-          </CardDescription>
-        </CardHeader>
-        <Separator />
-        <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 */}
+    <>
+      {!isL1ToL2 && (
+        <Alert variant={"destructive"} className="flex items-center space-x-2">
+          <Terminal className="h-4 w-4" />
+          <AlertDescription>
+            Sorry! 😔 L2 to L1 bridge is not supported yet.
+          </AlertDescription>
+        </Alert>
+      )}
+      <div className="h-full flex flex-col space-y-4 justify-center items-center">
+        <Card className="max-w-[600px] p-0">
+          <CardHeader>
+            <CardTitle>Bridge</CardTitle>
+            <CardDescription>
+              You are currently bridging from {isL1ToL2 ? "L1" : "L2"} to{" "}
+              {isL1ToL2 ? "L2" : "L1"}.
+            </CardDescription>
+          </CardHeader>
+          <Separator />
+          <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="token"
+                      name="fromChain"
                       render={({ field }) => (
                         <FormItem>
                           <Select
@@ -204,20 +180,19 @@ export default function Dashboard() {
                             onValueChange={field.onChange}
                           >
                             <FormControl>
-                              <SelectTrigger className="h-8 dark:bg-[#292929]">
+                              <SelectTrigger className="h-8 bg-muted">
                                 <SelectValue
-                                  placeholder={field.value || "Select Token"}
+                                  placeholder={field.value || "Select Chain"}
                                 />
                               </SelectTrigger>
                             </FormControl>
-                            <SelectContent side="top">
-                              {tokens.map((token) => (
+                            <SelectContent>
+                              {fromChains.map((chain) => (
                                 <SelectItem
-                                  key={token.value}
-                                  value={token.value}
-                                  disabled={!token.isEnabled}
+                                  key={chain.value}
+                                  value={chain.value}
                                 >
-                                  {token.value}
+                                  {chain.name}
                                 </SelectItem>
                               ))}
                             </SelectContent>
@@ -226,172 +201,223 @@ export default function Dashboard() {
                         </FormItem>
                       )}
                     />
+                  </div>
 
-                    <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 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>
+                        )}
+                      />
+
+                      <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>
-                  <Separator />
-                  <div className="flex items-center justify-between flex-wrap p-2">
-                    {/* Amount Input */}
+                </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="amount"
+                      name="toChain"
                       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>
+                          <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 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);
-                            }}
+                  <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"
                           >
-                            {percentage.name}
-                          </Button>
-                        ))}
+                            <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>
+                      )}
+                    />
+                  </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>
-              </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 */}
-                  <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>
-                    )}
-                  />
-                </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 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>
                   </div>
                 </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>
+                <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={!isL1ToL2}
+                    >
+                      Initiate Bridge Transaction
+                    </Button>
+                  ) : (
+                    <ConnectWalletButton
+                      className="text-sm font-bold leading-none w-full"
+                      variant="default"
+                    />
+                  )}
                 </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"}
-                  >
-                    Initiate Bridge Transaction
-                  </Button>
-                ) : (
-                  <ConnectWalletButton
-                    className="text-sm font-bold leading-none w-full"
-                    variant="default"
-                  />
-                )}
-              </div>
-            </form>
-          </Form>
-        </CardContent>
-      </Card>
-    </div>
+              </form>
+            </Form>
+          </CardContent>
+        </Card>
+      </div>
+    </>
   );
 }