diff --git a/packages/nextjs/components/index/cta.js b/packages/nextjs/components/index/cta.js index bb082f0..dcd38dd 100644 --- a/packages/nextjs/components/index/cta.js +++ b/packages/nextjs/components/index/cta.js @@ -1,7 +1,7 @@ -import React, { useState, useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { xocolatlABI } from "../xoc-dapp/abis/xocabis"; import { xocPinABI } from "./abis/xocpin"; -import { parseEther, formatEther } from "viem"; +import { parseEther } from "viem"; import { useContractRead, useContractWrite } from "wagmi"; import { useAccount } from "wagmi"; import Familia from "../../public/Familia.png"; @@ -34,7 +34,7 @@ const Cta = () => { args: [account.address], }); - const { data: tokenID} = useContractRead({ + const { data: tokenID } = useContractRead({ address: "0x72fa57b14b83D165EACab4E2bB3B3B9D5B9C5A52", abi: xocPinABI, functionName: "nextTokenId", @@ -45,12 +45,11 @@ const Cta = () => { useEffect(() => { if (tokenID) { - const ID = tokenID.toString() -1; + const ID = tokenID.toString() - 1; setLatestTokenID(ID); } }, [tokenID]); - console.log(tokenID); return ( diff --git a/packages/nextjs/components/index/hero.tsx b/packages/nextjs/components/index/hero.tsx index c7f3432..dab86c5 100644 --- a/packages/nextjs/components/index/hero.tsx +++ b/packages/nextjs/components/index/hero.tsx @@ -9,6 +9,7 @@ import MXNFetch from "./mxnFetch"; import ProtocolNumbers from "./protocolNumbers"; import XOCMinted from "./xocMinted"; import { useConnectModal } from "@rainbow-me/rainbowkit"; +import { useDarkMode } from "usehooks-ts"; import { formatEther, parseEther } from "viem"; import { useAccount } from "wagmi"; import { useBalance, useContractRead, useContractWrite } from "wagmi"; @@ -20,6 +21,7 @@ const Hero = () => { const account = useAccount(); const [expectedAmountIn, setExpectedAmountIn] = useState(0n); const { openConnectModal } = useConnectModal(); + const [correctApproval, setCorrectApproval] = useState(false); const { data: latestPriceData }: { data: bigint | undefined } = useContractRead({ address: ADDR_LIB.polygon.weth.houseOfReserve, // House of Reserve (WETH) @@ -94,7 +96,6 @@ const Hero = () => { write: executeTrade, isError, isLoading: waitingTrade, - isSuccess: succesfulTrade, } = useContractWrite({ address: ADDR_LIB.polygon.uniswapSwapRouter, abi: swapRouterABI, @@ -134,6 +135,15 @@ const Hero = () => { args: [account.address], }); + useEffect(() => { + setCorrectApproval((accountAllowance && accountAllowance >= expectedAmountIn) || false); + + console.log("correctApproval", correctApproval); + console.log("accountAllowance", accountAllowance); + console.log("expectedAmountIn", expectedAmountIn); + }, [accountAllowance, expectedAmountIn]); + + const { isDarkMode } = useDarkMode(); return ( <> @@ -265,33 +275,16 @@ const Hero = () => { className={`btn btn-lg mr-5 ${ accountAllowance && expectedAmountIn ? " bg-base-100" : "" }`} - onClick={ - accountAllowance && accountAllowance >= expectedAmountIn - ? () => executeTrade() - : () => approve() - } + onClick={correctApproval ? () => executeTrade() : () => approve()} > - {accountAllowance && accountAllowance >= expectedAmountIn - ? "Execute Trade" - : "Approve Weth"} + {correctApproval ? "Execute Trade" : "Approve Weth"} - {waitingApproval && Waiting} - {successfulApproval && ( -
-
- Approval sent successfully. -
-
- )} + {waitingApproval || + (!correctApproval && successfulApproval && ( + Waiting + ))} {isError &&

Error executing trade

} {waitingTrade &&

Waiting for trade to execute

} - {succesfulTrade && ( -
-
- Approval sent successfully. -
-
- )} @@ -397,19 +390,39 @@ const Hero = () => {
- + Ethereuem
-
- +
+ Polygon
-
- +
+ Gnosis Chain
-
- +
+ Optimism
-
- +
+ Arbitrum
@@ -418,89 +431,4 @@ const Hero = () => { ); }; -function AmazonLogo() { - return ( - - - - - - - - - - - - - ); -} - -function MicrosoftLogo() { - return ( - - - - - ); -} - -function NetflixLogo() { - return ( - - - - - - ); -} - -function SonyLogo() { - return ( - - - - - - - - - ); -} - -function VerizonLogo() { - return ( - - - - - - - - - ); -} - export default Hero; diff --git a/packages/nextjs/public/GnosisChain.png b/packages/nextjs/public/GnosisChain.png new file mode 100644 index 0000000..b06dfa4 Binary files /dev/null and b/packages/nextjs/public/GnosisChain.png differ diff --git a/packages/nextjs/public/Polygon.png b/packages/nextjs/public/Polygon.png new file mode 100644 index 0000000..9254f78 Binary files /dev/null and b/packages/nextjs/public/Polygon.png differ diff --git a/packages/nextjs/public/PolygonWhite.png b/packages/nextjs/public/PolygonWhite.png new file mode 100644 index 0000000..c5062a1 Binary files /dev/null and b/packages/nextjs/public/PolygonWhite.png differ diff --git a/packages/nextjs/public/arbitrum.png b/packages/nextjs/public/arbitrum.png new file mode 100644 index 0000000..feb6fef Binary files /dev/null and b/packages/nextjs/public/arbitrum.png differ diff --git a/packages/nextjs/public/arbitrumdark.png b/packages/nextjs/public/arbitrumdark.png new file mode 100644 index 0000000..7134064 Binary files /dev/null and b/packages/nextjs/public/arbitrumdark.png differ diff --git a/packages/nextjs/public/arbitrumlight.png b/packages/nextjs/public/arbitrumlight.png new file mode 100644 index 0000000..be1b9a6 Binary files /dev/null and b/packages/nextjs/public/arbitrumlight.png differ diff --git a/packages/nextjs/public/ethereum.png b/packages/nextjs/public/ethereum.png new file mode 100644 index 0000000..402896e Binary files /dev/null and b/packages/nextjs/public/ethereum.png differ diff --git a/packages/nextjs/public/ethereumgray.png b/packages/nextjs/public/ethereumgray.png new file mode 100644 index 0000000..8a39900 Binary files /dev/null and b/packages/nextjs/public/ethereumgray.png differ diff --git a/packages/nextjs/public/ethereumwhite.png b/packages/nextjs/public/ethereumwhite.png new file mode 100644 index 0000000..e7aa629 Binary files /dev/null and b/packages/nextjs/public/ethereumwhite.png differ diff --git a/packages/nextjs/public/gnosisblack.png b/packages/nextjs/public/gnosisblack.png new file mode 100644 index 0000000..d5737be Binary files /dev/null and b/packages/nextjs/public/gnosisblack.png differ diff --git a/packages/nextjs/public/gnosiswhite.png b/packages/nextjs/public/gnosiswhite.png new file mode 100644 index 0000000..73f3531 Binary files /dev/null and b/packages/nextjs/public/gnosiswhite.png differ diff --git a/packages/nextjs/public/optimism.png b/packages/nextjs/public/optimism.png new file mode 100644 index 0000000..cb11099 Binary files /dev/null and b/packages/nextjs/public/optimism.png differ diff --git a/packages/nextjs/public/optimismwhite.png b/packages/nextjs/public/optimismwhite.png new file mode 100644 index 0000000..4854fcd Binary files /dev/null and b/packages/nextjs/public/optimismwhite.png differ