fix : quote logic

byzantine-fault · Nov 21, 2023 · 3d3dd18 · 3d3dd18
1 parent 9ccaf12
commit 3d3dd18
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 55 deletions.
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
@@ -28,6 +28,8 @@ import approveTrasaction from "@/utils/approveTransaction";
 import checkAllowance from "@/utils/checkAllowance";
 import getQuote from "@/utils/getQuote";
 import { fetchBalance } from "wagmi/actions";
+import { formatEther } from "viem";
+import { useWeb3Modal } from "@web3modal/wagmi/react";
 
 const Message = (props: any) => {
   const { message } = props;
@@ -37,11 +39,15 @@ const Message = (props: any) => {
 
   const { address, isConnected } = useAccount();
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [sellToken, setSellToken] = useState(1);
-  const [sellAmount, setSellAmount] = useState(1);
-  const [buyToken, setBuyToken] = useState(2);
-  const [buyAmount, setBuyAmount] = useState(1);
+  const [sellToken, setSellToken] = useState(0);
+  const [sellAmount, setSellAmount] = useState(0);
+  const [buyToken, setBuyToken] = useState(0);
+  const [buyAmount, setBuyAmount] = useState(0);
   const [protocolInfo, setProtocolInfo] = useState<any>();
+  const [gas, setGas] = useState<any>(0);
+  const [btnText, setBtnText] = useState<string>("Approve");
+
+  const { open } = useWeb3Modal();
 
   const toast = useToast();
 
@@ -59,9 +65,10 @@ const Message = (props: any) => {
     }
   }, [text]);
 
-  // useEffect(() => {
-  //   setBuyAmount(0);
-  // }, [sellAmount, sellToken, buyToken]);
+  useEffect(() => {
+    setBuyAmount(0);
+    handleQuote();
+  }, [sellAmount, sellToken, buyToken]);
 
   const { data: balance } = useBalance({
     address: address,
@@ -116,8 +123,6 @@ const Message = (props: any) => {
       "1",
       chain?.id as number
     );
-    console.log(transaction);
-    console.log(transaction.protocols);
     setProtocolInfo(transaction.protocols && transaction.protocols[0][0][0]);
     if (transaction.tx) {
       sendTransaction({
@@ -150,23 +155,21 @@ const Message = (props: any) => {
       //   setIsLoading(false);
       //   return;
       // }
-      const allowance = await checkAllowance(
-        TOKENLIST[sellToken].address,
-        address,
-        chain?.id as number
-      );
-      console.log(allowance);
-      if (allowance?.allowance === "0") {
-        await handleApproval();
-      }
-      handleTransaction();
-      setIsLoading(false);
-      if (isSuccess) {
-        toast({
-          title: "Swapped successfully 🎉",
-          position: "top-right",
-        });
-      }
+
+      handleTransaction().then(() => {
+        setIsLoading(false);
+        if (isSuccess) {
+          toast({
+            title: "Swapped successfully 🎉",
+            position: "top-right",
+          });
+        }
+      });
+    } else {
+      setBtnText("Connect Wallet");
+      open().then(() => {
+        setBtnText("Approve");
+      });
     }
   }
 
@@ -182,12 +185,27 @@ const Message = (props: any) => {
     console.log("quote : ", quote);
     if (quote.toAmount) {
       setBuyAmount(Number(quote.toAmount));
+      setGas(quote.gas);
+      setProtocolInfo(quote.protocols && quote.protocols[0][0][0]);
     } else {
       toast({
         title: quote.description,
         position: "top-right",
       });
     }
+
+    if (!address) return;
+    if (!text) return;
+    const allowance = await checkAllowance(
+      TOKENLIST[sellToken].address,
+      address,
+      chain?.id as number
+    );
+    console.log("allowance : ", allowance);
+    if (allowance?.allowance === "0") {
+      await handleApproval();
+    }
+    setBtnText("Swap");
     setIsLoading(false);
   }
 
@@ -227,15 +245,15 @@ const Message = (props: any) => {
                         <p>{text}</p>
                       ) : (
                         <Card className="max-w-[400px] z-50">
-                          <CardHeader className="flex gap-3">
+                          <CardHeader className="flex gap-3 items-center">
                             <Image
                               alt="nextui logo"
                               height={40}
                               radius="sm"
                               src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
                               width={40}
                             />
-                            <div className="flex flex-col">
+                            <div className="flex flex-col ">
                               {!!protocolInfo ? (
                                 <p className="text-md">{protocolInfo?.name} </p>
                               ) : (
@@ -248,14 +266,15 @@ const Message = (props: any) => {
                             <p> fromToken : {text.fromToken}</p>
                             <p> toToken : {text.toToken}</p>
                             <p> amount : {text.amount}</p>
+                            <p> gas(fee) : {formatEther(gas)}</p>
                           </CardBody>
                           <CardFooter>
                             <Button onClick={handleSwap} fullWidth>
                               {buyAmount ? (
                                 isLoading ? (
                                   <Spinner />
                                 ) : (
-                                  <p>Swap</p>
+                                  <p>{btnText}</p>
                                 )
                               ) : isLoading ? (
                                 <Spinner />

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -147,42 +147,44 @@ const Sidebar = () => {
   return (
     <div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20 border-r">
       <nav className="flex h-full flex-1 flex-col space-y-1 p-2">
-        <a className="flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm mb-1 flex-shrink-0 border border-white/20">
+        <div className="flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm mb-1 flex-shrink-0 border border-white/20">
           <AiOutlinePlus className="h-4 w-4" />
           New chat
-        </a>
+        </div>
         <div className="flex-col flex-1 overflow-y-auto border-b border-white/20">
           <div className="flex flex-col gap-2 pb-2 text-gray-100 text-sm">
-            <a className="flex py-3 px-3 items-center gap-3 relative rounded-md hover:bg-[#2A2B32] cursor-pointer break-all hover:pr-4 group">
+            <div className="flex py-3 px-3 items-center gap-3 relative rounded-md hover:bg-[#2A2B32] cursor-pointer break-all hover:pr-4 group">
               <FiMessageSquare className="h-4 w-4" />
               <div className="flex-1 text-ellipsis max-h-5 overflow-hidden break-all relative">
                 New conversation
                 <div className="absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-purple-950 group-hover:from-[#2A2B32]"></div>
               </div>
-            </a>
+            </div>
           </div>
         </div>
-        <a className="flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm">
+        <div className="flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm">
           <AiOutlineMessage className="h-4 w-4" />
           Clear conversations
-        </a>
+        </div>
         {isConnected &&
           (isSubscribed ? (
-            <a
+            <div
               className="flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm"
               onClick={handleTestNotification}
             >
               <MdOutlineNotificationsActive className="h-4 w-4" />{" "}
-              {isSending ? "sending..." : "Send notification"}
-            </a>
+              {mount && isSending ? "sending..." : "Send notification"}
+            </div>
           ) : (
-            <a
+            <div
               className="flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm"
               onClick={handleSubscribe}
             >
               <MdBookmarkAdd className="h-4 w-4" />{" "}
-              {isSubscribing ? "Subscribing..." : "Subscribe to notifications"}
-            </a>
+              {mount && isSubscribing
+                ? "Subscribing..."
+                : "Subscribe to notifications"}
+            </div>
           ))}
         <div
           className=" flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm"

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -6,20 +6,30 @@ import { Web3Modal } from "@/context/Web3Modal";
 import { ThemeProvider } from "styled-components";
 import { ThorinGlobalStyles, darkTheme } from "@ensdomains/thorin";
 import { ChakraProvider } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
   return (
-    <Web3Modal>
-      <ThemeProvider theme={darkTheme}>
-        <ThorinGlobalStyles />
-        <ChakraProvider>
-          <NextUIProvider>
-            <NextThemesProvider attribute="class" defaultTheme="dark">
-              <Component {...pageProps} />{" "}
-            </NextThemesProvider>
-          </NextUIProvider>
-        </ChakraProvider>
-      </ThemeProvider>
-    </Web3Modal>
+    <>
+      {mounted && (
+        <Web3Modal>
+          <ThemeProvider theme={darkTheme}>
+            <ThorinGlobalStyles />
+            <ChakraProvider>
+              <NextUIProvider>
+                <NextThemesProvider attribute="class" defaultTheme="dark">
+                  <Component {...pageProps} />{" "}
+                </NextThemesProvider>
+              </NextUIProvider>
+            </ChakraProvider>
+          </ThemeProvider>
+        </Web3Modal>
+      )}
+    </>
   );
 }
diff --git a/src/pages/api/1inch/quote.ts b/src/pages/api/1inch/quote.ts
@@ -10,7 +10,7 @@ export default async function handler(
   const chainId = req.query.chainId;
   try {
     const response = await fetch(
-      `https://api.1inch.dev/swap/v5.2/${chainId}/quote?src=${src}&dst=${dst}&amount=${amount}`,
+      `https://api.1inch.dev/swap/v5.2/${chainId}/quote?src=${src}&dst=${dst}&amount=${amount}&includeProtocols=true&includeGas=true      `,
       {
         method: "GET",
         headers: {

diff --git a/src/pages/api/1inch/route.ts b/src/pages/api/1inch/route.ts
@@ -10,7 +10,7 @@ export default async function handler(
   const chainId = req.query.chainId;
   try {
     const response = await fetch(
-      `https://api.1inch.dev/swap/v5.2/${chainId}/quote?src=${src}&dst=${dst}&amount=${amount}&includeProtocols=true`,
+      `https://api.1inch.dev/swap/v5.2/${chainId}/quote?src=${src}&dst=${dst}&amount=${amount}`,
       {
         method: "GET",
         headers: {