feat: design explore usdc conversion page

src/pages/explore-usdc-conversion/ConvertUSDC.tsx

@@ -0,0 +1,132 @@
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
+import { FiCopy } from "react-icons/fi";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
+import ConnectWalletDialog from "@/components/ConnectWalletDialog";
+import { PiPulseBold } from "react-icons/pi";
+
+export default function ConvertUSDC() {
+  return (
+    <section>
+      <h3 className="pl-2 text-2xl text-primary-foreground">Convert USDC</h3>
+
+      <div className="flex justify-between mt-5 gap-4">
+        <article className="w-full sm:max-w-[480px] flex-1 space-y-5">
+          <Card className="shadow-thin">
+            <CardContent className="py-4 text-card-foreground">
+              <ul className="space-y-4">
+                <li className="flex justify-between text-sm">
+                  <span>Native USDC</span>
+                  <span className="flex gap-x-3 items-center">
+                    <Tooltip>
+                      <TooltipTrigger>0x1d17cb...6538d4</TooltipTrigger>
+                      <TooltipContent>
+                        0x3355df6d4c9c3035724fd0e3914de96a5a83aaf4
+                      </TooltipContent>
+                    </Tooltip>
+                    <FiCopy
+                      fontSize={18}
+                      className="cursor-pointer"
+                      onClick={() =>
+                        navigator.clipboard.writeText(
+                          "0x3355df6d4c9c3035724fd0e3914de96a5a83aaf4",
+                        )
+                      }
+                    />
+                  </span>
+                </li>
+
+                <li className="flex justify-between text-sm">
+                  <span>Converter Contract</span>
+                  <span className="flex gap-x-3 items-center">
+                    <Tooltip>
+                      <TooltipTrigger>0xe14096...9c2930</TooltipTrigger>
+                      <TooltipContent>
+                        0xe14096cacb218001eff677f8d1338cbd3c9c2930
+                      </TooltipContent>
+                    </Tooltip>
+                    <FiCopy
+                      fontSize={18}
+                      className="cursor-pointer"
+                      onClick={() =>
+                        navigator.clipboard.writeText(
+                          "0xe14096cacb218001eff677f8d1338cbd3c9c2930",
+                        )
+                      }
+                    />
+                  </span>
+                </li>
+              </ul>
+            </CardContent>
+          </Card>
+
+          <Card className="grid gap-y-4 mt-2 border-0 shadow rounded-3xl bg-card/70 px-5 py-4">
+            <p className="text-sm font-medium text-card-foreground">
+              Convert Amount
+            </p>
+
+            <CardContent className="p-0">
+              <div className="flex">
+                <input
+                  type="text"
+                  placeholder="0.0"
+                  className="text-primary-foreground bg-transparent w-0 flex-grow text-3xl outline-none"
+                />
+              </div>
+            </CardContent>
+
+            <CardFooter className="p-0 mt-4">
+              <section className="flex flex-row justify-between w-full gap-x-2">
+                <Button
+                  variant="outline"
+                  className="transition-all active:bg-primary/[0.2] rounded-3xl text-primary border-border border-primary/[0.5] hover:border-primary hover:bg-primary/[0.04] w-full py-1 h-auto font-normal"
+                >
+                  25%
+                </Button>
+                <Button
+                  variant="outline"
+                  className="transition-all active:bg-primary/[0.2] rounded-3xl text-primary border-border border-primary/[0.5] hover:border-primary hover:bg-primary/[0.04] w-full py-1 h-auto font-normal"
+                >
+                  50%
+                </Button>
+                <Button
+                  variant="outline"
+                  className="transition-all active:bg-primary/[0.2] rounded-3xl text-primary border-border border-primary/[0.5] hover:border-primary hover:bg-primary/[0.04] w-full py-1 h-auto font-normal"
+                >
+                  75%
+                </Button>
+                <Button
+                  variant="outline"
+                  className="transition-all active:bg-primary/[0.2] rounded-3xl text-primary border-border border-primary/[0.5] hover:border-primary hover:bg-primary/[0.04] w-full py-1 h-auto font-normal"
+                >
+                  100%
+                </Button>
+              </section>
+            </CardFooter>
+          </Card>
+
+          <Dialog>
+            <DialogTrigger asChild>
+              <Card className="cursor-pointer transition-all rounded-full shadow active:scale-90 active:bg-primary/[.50]">
+                <CardContent className="flex gap-x-3 justify-center text-primary py-4">
+                  <PiPulseBold fontSize={20} />
+                  Connect Wallet
+                </CardContent>
+              </Card>
+            </DialogTrigger>
+            <ConnectWalletDialog />
+          </Dialog>
+        </article>
+
+        <div className="hidden sm:grid place-items-center relative -top-20 w-[490px] opacity-[0.9] flex-1">
+          <img className="w-[70%]" src="/images/usdc-cluster.png" />
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/explore-usdc-conversion/FAQ.tsx

@@ -0,0 +1,112 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/ui/accordion";
+
+export default function FAQ() {
+  return (
+    <section>
+      <h2 className="text-primary-foreground text-xl mb-5">FAQ</h2>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>What is USDC conversion?</AccordionTrigger>
+          <AccordionContent>
+            USDC conversion help you convert your USDC.e to the new natvie USDC
+            token easily in a 1:1 fixed rate. SyncSwap is leading the USDC
+            conversion process by providing an easy to use converter UI.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="item-2">
+          <AccordionTrigger>What is native USDC?</AccordionTrigger>
+          <AccordionContent>
+            Circle - the issuer of USDC, is launching the native USDC on zkSync.
+            Until now, all USDC on zkSync has been bridged through the zkSync
+            bridge from Ethereum and backed by USDC on Ethereum mainnet. Native
+            USDC is different. It`s backed by Circle with additional benefits.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="item-3">
+          <AccordionTrigger>What is USDC.e?</AccordionTrigger>
+          <AccordionContent>
+            USDC.e is the USDC token bridged with the zkSync bridge from the
+            Ethereum mainnet. It was labeled as USDC simply in the past year,
+            however it is now renamed as USDC.e to support the native USDC
+            launch.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="item-4">
+          <AccordionTrigger>How can I use my native USDC?</AccordionTrigger>
+          <AccordionContent>
+            You can use your USDC as usual, swapping and providing liquidity to
+            earn and unlock more opportunities. There is no significant change.
+            Note some other dApps may only support USDC.e in early days.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="item-5">
+          <AccordionTrigger>
+            When will I receive native USDC after conversion?
+          </AccordionTrigger>
+          <AccordionContent>
+            You will receive the new USDC token in your wallet immediately once
+            the transaction confirmed.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="item-6">
+          <AccordionTrigger>
+            Are there any fee to convert my USDC.e?
+          </AccordionTrigger>
+          <AccordionContent>
+            There is no fee in the USDC conversion process.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="item-7">
+          <AccordionTrigger>
+            Can I convert my native USDC back to USDC.e?
+          </AccordionTrigger>
+          <AccordionContent>
+            The converter is one-way. You can only convert USDC.e to native USDC
+            with the converter. You can access the liquidity on SyncSwap to swap
+            them back to USDC.e.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="item-8">
+          <AccordionTrigger>
+            Who is the initiator of the USDC conversion?
+          </AccordionTrigger>
+          <AccordionContent>
+            The native USDC launch and the USDC.e conversion is initiated
+            officially by zkSync and Circle. SyncSwap is one of the launch
+            partner of the native USDC.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-9">
+          <AccordionTrigger>Is the converter contract safe?</AccordionTrigger>
+          <AccordionContent>
+            The USDC converter contract is deployed and funded by zkSync team.
+            You are interacting with the zkSync official contract directly.
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="item-10">
+          <AccordionTrigger>
+            Why am I seeing Insufficient USDC balance in converter?
+          </AccordionTrigger>
+          <AccordionContent>
+            The converter is funded by the zkSync team and it may run out of
+            native USDC tokens, please come again later. You could still
+            swapping with liquidity pools on SyncSwap.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </section>
+  );
+}

src/pages/explore-usdc-conversion/LearnMoreCard.tsx

@@ -0,0 +1,34 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { MdCurrencyExchange, MdOutlineArrowOutward } from "react-icons/md";
+import { Link } from "react-router-dom";
+
+export default function LearnMoreCard() {
+  return (
+    <Card className="shadow">
+      <CardContent className="p-7 relative">
+        <h2 className="text-primary mb-2 text-lg">zkSync USDC Conversion</h2>
+        <article className="max-w-[60%]">
+          <p className="w-full text-card-foreground text-sm leading-normal">
+            zkSync is launching the native USDC. Convert your USDC.e to native
+            USDC today.
+          </p>
+
+          <br />
+
+          <Link
+            className="w-max flex gap-x-2 item-center text-card-foreground text-sm p-2 hover:bg-primary/[0.04] rounded-md"
+            to="https://twitter.com/zksync/status/1691808445224087555?lang=en"
+          >
+            Learn about more USDC conversion
+            <MdOutlineArrowOutward />
+          </Link>
+        </article>
+
+        <MdCurrencyExchange
+          fontSize={110}
+          className="absolute text-primary opacity-50 right-[30px] bottom-[15px]"
+        />
+      </CardContent>
+    </Card>
+  );
+}

src/pages/explore-usdc-conversion/index.tsx

@@ -1,3 +1,18 @@
+import Footer from "@/components/Footer";
+import LearnMoreCard from "./LearnMoreCard";
+import ConvertUSDC from "./ConvertUSDC";
+import FAQ from "./FAQ";
+
 export default function ExploreUSDCConversion() {
-  return <div>ExploreUSDCConversion</div>;
+  return (
+    <>
+      <main className="relative overflow-auto pt-28 pb-20 min-h-screen max-w-screen-xl mx-auto space-y-14 p-4">
+        <LearnMoreCard />
+        <ConvertUSDC />
+        <FAQ />
+      </main>
+
+      <Footer />
+    </>
+  );
 }