feat: prettify ui w/ toast and some layout

limitless-labs-group · Jun 27, 2024 · 17d6815 · 17d6815
1 parent 1e782ed
commit 17d6815
Show file tree

Hide file tree

Showing 15 changed files with 745 additions and 179 deletions.
diff --git a/components.json b/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/globals.css",
+    "css": "src/index.css",
     "baseColor": "slate",
     "cssVariables": true,
     "prefix": ""

diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Funding | Limitless Exchange</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -14,9 +14,11 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
     "@tanstack/react-query": "^5.48.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "lucide-react": "^0.397.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/limitless.png b/public/limitless.png
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,7 @@ import { AddFunding } from "@/components/fpmm/add-funding";
 import { MergePositions } from "@/components/fpmm/merge-positions";
 import { RemoveFunding } from "@/components/fpmm/remove-funding";
 import { Button } from "@/components/ui/button";
+import { Toaster } from "@/components/ui/toaster";
 import { useAccount, useConnect, useDisconnect } from "wagmi";
 import { injected } from "wagmi/connectors";
 
@@ -12,14 +13,19 @@ function App() {
 
   return (
     <>
-      <main className="p-5">
-        <Button
-          onClick={() =>
-            !address ? connect({ connector: injected() }) : disconnect()
-          }
-        >
-          {!address ? "Connect" : address}
-        </Button>
+      <main className="p-5 grid pb-96">
+        <div className="flex justify-between mb-10">
+          <img src="logo.svg" alt="Limitless" className="h-10" />
+
+          <Button
+            size="lg"
+            onClick={() =>
+              !address ? connect({ connector: injected() }) : disconnect()
+            }
+          >
+            {!address ? "Connect" : address}
+          </Button>
+        </div>
 
         <div className="mt-5" />
 
@@ -31,6 +37,8 @@ function App() {
           </div>
         )}
       </main>
+
+      <Toaster />
     </>
   );
 }

diff --git a/src/components/fpmm/add-funding.tsx b/src/components/fpmm/add-funding.tsx
@@ -1,6 +1,13 @@
-/* eslint-disable */
+import { Address, erc20Abi, getAddress, getContract, parseUnits } from "viem";
+import { useAccount, usePublicClient, useWriteContract } from "wagmi";
 import { fixedProductMarketMakerAbi } from "@/abis";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { useMutation } from "@tanstack/react-query";
+import { useToast } from "@/components/ui/use-toast";
+import { Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@radix-ui/react-label";
 import {
   Card,
   CardContent,
@@ -9,11 +16,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@radix-ui/react-label";
-import { useAccount, usePublicClient, useWriteContract } from "wagmi";
-import { useForm, SubmitHandler } from "react-hook-form";
-import { Address, erc20Abi, getAddress, getContract, parseUnits } from "viem";
 
 interface AddFundingArgs {
   marketAddr: Address;
@@ -23,57 +25,92 @@ export interface IAddFunding {}
 
 export const AddFunding = ({}: IAddFunding) => {
   const client = usePublicClient();
+  const { toast } = useToast();
   const { address } = useAccount();
-  const { register, handleSubmit } = useForm<AddFundingArgs>();
   const { writeContractAsync } = useWriteContract();
+  const { register, handleSubmit } = useForm<AddFundingArgs>();
+  const { mutateAsync: addFunding, isPending } = useMutation({
+    mutationKey: ["addFunding"],
+    mutationFn: async (data: AddFundingArgs) => {
+      let tx: `0x${string}`;
+      const [marketAddr] = [getAddress(data.marketAddr)];
+      const fpmm = getContract({
+        abi: fixedProductMarketMakerAbi,
+        address: getAddress(data.marketAddr),
+        client: client!,
+      });
+      const collateralTokenAddr = (await fpmm.read.collateralToken()) as string;
+      const erc20 = getContract({
+        abi: erc20Abi,
+        address: getAddress(collateralTokenAddr),
+        client: client!,
+      });
+
+      const collateralDecimals = await erc20.read.decimals();
+      const funding = parseUnits(data.funding, collateralDecimals);
+      const allowance = await erc20.read.allowance([
+        address!,
+        getAddress(data.marketAddr),
+      ]);
+      if (allowance < funding) {
+        toast({
+          title: "Approval Needed",
+          description: "Prompting to integrated web3 wallet for approve spend.",
+        });
+
+        tx = await writeContractAsync({
+          abi: erc20Abi,
+          functionName: "approve",
+          args: [marketAddr, funding],
+          address: getAddress(collateralTokenAddr),
+        });
+        toast({
+          title: "Transaction Submitted",
+          description: "Successfully submitted transaction.",
+        });
 
-  const onSubmit: SubmitHandler<AddFundingArgs> = async (data) => {
-    let tx: `0x${string}`;
-    const [marketAddr] = [getAddress(data.marketAddr)];
-    const fpmm = getContract({
-      abi: fixedProductMarketMakerAbi,
-      address: getAddress(data.marketAddr),
-      client: client!,
-    });
-    const collateralTokenAddr = (await fpmm.read.collateralToken()) as string;
-    const erc20 = getContract({
-      abi: erc20Abi,
-      address: getAddress(collateralTokenAddr),
-      client: client!,
-    });
+        await client!.waitForTransactionReceipt({
+          hash: tx,
+        });
+        toast({
+          title: "Transaction Confirmed",
+          description: "The transaction has been confirmed.",
+        });
+      }
 
-    const collateralDecimals = await erc20.read.decimals();
-    const _funding = parseUnits(data.funding, collateralDecimals);
-    const allowance = await erc20.read.allowance([
-      address!,
-      getAddress(data.marketAddr),
-    ]);
-    if (allowance < _funding) {
+      toast({
+        title: "Add Funding",
+        description: "Submitting add funding transaction.",
+      });
       tx = await writeContractAsync({
-        abi: erc20Abi,
-        functionName: "approve",
-        args: [marketAddr, _funding],
-        address: getAddress(collateralTokenAddr),
+        abi: fixedProductMarketMakerAbi,
+        functionName: "addFunding",
+        args: [funding, []],
+        address: getAddress(data.marketAddr),
       });
       await client!.waitForTransactionReceipt({
         hash: tx,
       });
-    }
-
-    tx = await writeContractAsync({
-      abi: fixedProductMarketMakerAbi,
-      functionName: "addFunding",
-      args: [_funding, []],
-      address: getAddress(data.marketAddr),
-    });
-    await client!.waitForTransactionReceipt({
-      hash: tx,
-    });
-  };
+      toast({
+        title: "Transaction Confirmed",
+        description: "The transaction has been confirmed.",
+      });
+    },
+    onError(error, variables, context) {
+      console.error({ error, variables, context });
+      toast({
+        variant: "destructive",
+        title: "Uh oh! Something went wrong.",
+        description: "There was a problem with your request.",
+      });
+    },
+  });
+  const onSubmit: SubmitHandler<AddFundingArgs> = async (data) =>
+    addFunding(data);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Card className="w-[350px]">
+      <Card className="w-auto">
         <CardHeader>
           <CardTitle>Add Funding</CardTitle>
           <CardDescription>Add funding to a market.</CardDescription>
@@ -100,8 +137,17 @@ export const AddFunding = ({}: IAddFunding) => {
             </div>
           </div>
         </CardContent>
-        <CardFooter className="flex justify-end">
-          <Button type="submit">Execute</Button>
+        <CardFooter className="flex justify-start">
+          <Button size="lg" type="submit" disabled={isPending}>
+            {isPending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Please wait
+              </>
+            ) : (
+              "Execute"
+            )}
+          </Button>
         </CardFooter>
       </Card>
     </form>