Merge pull request #13 from La-DAO/feature/button-logic-improve

Added logic to only have one button to approve and execute trade, upd…

packages/nextjs/components/index/data.js

@@ -1,5 +1,5 @@
-import benefitOneImg from "../../public/warrior.png";
 import benefitTwoImg from "../../public/benefit-two.png";
+import benefitOneImg from "../../public/warrior.png";
 import {
   AdjustmentsHorizontalIcon,
   ChartBarSquareIcon,

packages/nextjs/components/index/hero.tsx

@@ -6,6 +6,7 @@ import Container from "./container";
 import MXNFetch from "./mxnFetch";
 import ProtocolNumbers from "./protocolNumbers";
 import XOCMinted from "./xocMinted";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { formatEther, parseEther } from "viem";
 import { useAccount } from "wagmi";
 import { useContractRead, useContractWrite } from "wagmi";
@@ -16,6 +17,8 @@ import { FEE_BIPS, encodePath } from "~~/utils/scaffold-eth";
 const Hero = () => {
   const account = useAccount();
   const [expectedAmountIn, setExpectedAmountIn] = useState<bigint>(0n);
+  const { openConnectModal } = useConnectModal();
+
   const { data: latestPriceData }: { data: bigint | undefined } = useContractRead({
     address: ADDR_LIB.polygon.weth.houseOfReserve, // House of Reserve (WETH)
     abi: houseOfReserveABI,
@@ -27,6 +30,7 @@ const Hero = () => {
     abi: erc20ABI,
     functionName: "allowance",
     args: [account.address, ADDR_LIB.polygon.uniswapSwapRouter],
+    watch: true,
   });
 
   const xocWethPath = encodePath(
@@ -43,7 +47,7 @@ const Hero = () => {
       const scaleValue = parseEther("1") + slippage;
       setExpectedAmountIn((ONE_HUNDRED_XOC * scaleValue) / scaledLatestPrice);
     }
-  }, [latestPriceData]);
+  }, [latestPriceData, ONE_HUNDRED_XOC]);
 
   const { write: approve } = useContractWrite({
     address: ADDR_LIB.polygon.weth.address,
@@ -61,11 +65,15 @@ const Hero = () => {
     ],
   });
 
-  // TO REMOVE
-  console.log("accountAllowance", formatEther(accountAllowance ? accountAllowance : 0n));
-  console.log("expectedAmountIn", formatEther(expectedAmountIn));
-  console.log("Is allowance greater than expectedAmountIn", accountAllowance && accountAllowance >= expectedAmountIn);
-  console.log("If above is true, then you hide the approve button and show the executeTrade button");
+  const handleBuyXocModal = () => {
+    if (account.isDisconnected) {
+      // open rainbow kit connect wallet modal
+      openConnectModal?.();
+    } else {
+      // Show buy Xoc modal
+      (document.getElementById("my_modal_1") as HTMLDialogElement)?.showModal();
+    }
+  };
 
   return (
     <>
@@ -77,7 +85,7 @@ const Hero = () => {
               <br /> to Scaffold-XOC
             </h1>
             <h2 className="text-2xl font-semibold leading-normal text-gray-500 lg:text-2xl xl:text-xl dark:text-inherit">
-              ¡A decentralized app for Mexico's #1 decentralized stablecoin!
+              ¡A decentralized app for Mexico&apos;s #1 decentralized stablecoin!
             </h2>
             <p className="py-5 text-xl leading-normal text-gray-500 lg:text-xl dark:text-inherit">
               Scaffold-XOC is an opensource project and this app interface was built using{" "}
@@ -90,19 +98,19 @@ const Hero = () => {
                 Scaffold-Eth-2.
               </a>{" "}
               This app can be run locally in your machine or easily forked to be customized by yourself. It is connected
-              connected to the $XOC protocol and it allows minting and burning of the stablecoin through the protocol's
-              House of Reserves contracts.
+              connected to the $XOC protocol and it allows minting and burning of the stablecoin through the
+              protocol&apos;s House of Reserves contracts.
             </p>
             <p className="py-5 text-xl leading-normal text-gray-500 lg:text-base  dark:text-inherit">
-              Your experience level doesn't matter! Whether you are a DeFi expert or taking your first steps,
+              Your experience level doesn&apos;t matter! Whether you are a DeFi expert or taking your first steps,
               Scaffold-XOC is here to help you understand and use $XOC in an easy and accessible way. Explore, learn and
               join the decentralized finance revolution with Scaffold-XOC!
             </p>
 
             <div className="flex flex-col items-start space-y-3 sm:space-x-4 sm:space-y-0 sm:items-center sm:flex-row">
               <button
                 className="px-8 py-4 text-lg font-medium text-center text-white bg-indigo-600 rounded-md"
-                onClick={() => (document.getElementById("my_modal_1") as HTMLDialogElement)?.showModal()}
+                onClick={handleBuyXocModal}
               >
                 Compra $XOC
               </button>
@@ -116,12 +124,19 @@ const Hero = () => {
                   </h3>
                   <h3>Token Out: 100 XOC</h3>
                   <div className=" mt-12">
-                    <button className="btn mr-5" onClick={() => approve()}>
-                      Approve Weth
+                    <button
+                      className={`btn mr-5 ${accountAllowance && accountAllowance ? "bg-indigo-600" : ""}`}
+                      onClick={
+                        accountAllowance && accountAllowance >= expectedAmountIn
+                          ? () => executeTrade()
+                          : () => approve()
+                      }
+                    >
+                      {accountAllowance && accountAllowance >= expectedAmountIn ? "Execute Trade" : "Approve Weth"}
                     </button>
-                    <button className="btn btn-primary" onClick={() => executeTrade()}>
+                    {/* <button className="btn btn-primary" onClick={() => executeTrade()}>
                       Execute Trade
-                    </button>
+                    </button> */}
                   </div>
                   {isError && <p className="text-red-500">Error executing trade</p>}
                   <div className="modal-action">

packages/nextjs/components/index/testimonials.js

@@ -31,7 +31,8 @@ const Testimonials = () => {
         <div className="">
           <div className="flex flex-col justify-between w-full h-full bg-base-300 px-14 rounded-2xl py-14 dark:bg-trueGray-800">
             <p className="text-2xl leading-normal text-inherit dark:text-inherit">
-              $XOC <Mark>simplifica</Mark> mis transacciones. Empoderamiento financiero y acceso a DeFi. ¡Gracias por la revolución!
+              $XOC <Mark>simplifica</Mark> mis transacciones. Empoderamiento financiero y acceso a DeFi. ¡Gracias por la
+              revolución!
             </p>
 
             <Avatar image={userThreeImg} name="Gabriel Guzman" title="Co-Founder de Mercado Libre" />

packages/nextjs/pages/_app.tsx

@@ -28,7 +28,9 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <div className="flex flex-col min-h-screen">
-        <Header />
+        <div className="sticky top-0 z-[40]">
+          <Header />
+        </div>
         <main className="relative flex flex-col flex-1">
           <Component {...pageProps} />
         </main>

packages/nextjs/tsconfig.json

@@ -18,6 +18,18 @@
       "~~/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/index/benefits.js", "components/index/container.js", "components/index/data.js", "components/index/sectionTitle.js", "components/index/testimonials.jsx", "components/index/hero.js", "components/index/testimonials.js", "components/index/video.js"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "components/index/benefits.js",
+    "components/index/container.js",
+    "components/index/data.js",
+    "components/index/sectionTitle.js",
+    "components/index/testimonials.jsx",
+    "components/index/hero.js",
+    "components/index/testimonials.js",
+    "components/index/video.js"
+  ],
   "exclude": ["node_modules"]
 }