From 5226f0bb14f1f9e85501dcb0a28b9009d25fb117 Mon Sep 17 00:00:00 2001 From: Paulo Diaz Date: Tue, 5 Mar 2024 13:35:54 -0600 Subject: [PATCH 1/3] Added logic to only have one button to approve and execute trade, updated navbar to sticky --- packages/nextjs/components/index/hero.tsx | 27 ++++++++++++++--------- packages/nextjs/pages/_app.tsx | 4 +++- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/nextjs/components/index/hero.tsx b/packages/nextjs/components/index/hero.tsx index 17ef5a4..22e5553 100644 --- a/packages/nextjs/components/index/hero.tsx +++ b/packages/nextjs/components/index/hero.tsx @@ -27,6 +27,7 @@ const Hero = () => { abi: erc20ABI, functionName: "allowance", args: [account.address, ADDR_LIB.polygon.uniswapSwapRouter], + watch: true, }); const xocWethPath = encodePath( @@ -43,7 +44,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, @@ -60,7 +61,6 @@ const Hero = () => { { path: xocWethPath, recipient: account.address, amountOut: ONE_HUNDRED_XOC, amountInMaximum: expectedAmountIn }, ], }); - // TO REMOVE console.log("accountAllowance", formatEther(accountAllowance ? accountAllowance : 0n)); console.log("expectedAmountIn", formatEther(expectedAmountIn)); @@ -77,7 +77,7 @@ const Hero = () => {
to Scaffold-XOC

- ¡A decentralized app for Mexico's #1 decentralized stablecoin! + ¡A decentralized app for Mexico's #1 decentralized stablecoin!

Scaffold-XOC is an opensource project and this app interface was built using{" "} @@ -90,11 +90,11 @@ const Hero = () => { Scaffold-Eth-2. {" "} 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's House of Reserves contracts.

- Your experience level doesn't matter! Whether you are a DeFi expert or taking your first steps, + Your experience level doesn'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!

@@ -116,12 +116,19 @@ const Hero = () => {

Token Out: 100 XOC

- - + */}
{isError &&

Error executing trade

}
diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx index 86e4fd0..8e3407d 100644 --- a/packages/nextjs/pages/_app.tsx +++ b/packages/nextjs/pages/_app.tsx @@ -28,7 +28,9 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => { return ( <>
-
+
+
+
From 34ff16beadfa22a341a257b559118b85458e881a Mon Sep 17 00:00:00 2001 From: dcota <32775237+DaigaroCota@users.noreply.github.com> Date: Tue, 5 Mar 2024 20:57:56 -0800 Subject: [PATCH 2/3] chore: add modal xoc buy handler or connect wallet --- packages/nextjs/components/index/hero.tsx | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/nextjs/components/index/hero.tsx b/packages/nextjs/components/index/hero.tsx index 22e5553..79327c5 100644 --- a/packages/nextjs/components/index/hero.tsx +++ b/packages/nextjs/components/index/hero.tsx @@ -7,15 +7,19 @@ import MXNFetch from "./mxnFetch"; import ProtocolNumbers from "./protocolNumbers"; import XOCMinted from "./xocMinted"; import { formatEther, parseEther } from "viem"; +import { useConnectModal } from "@rainbow-me/rainbowkit"; import { useAccount } from "wagmi"; import { useContractRead, useContractWrite } from "wagmi"; import { swapRouterABI } from "~~/components/index/abis/uniabis"; import { ADDR_LIB, XOC_ADDRESS } from "~~/utils/constants"; import { FEE_BIPS, encodePath } from "~~/utils/scaffold-eth"; + const Hero = () => { const account = useAccount(); const [expectedAmountIn, setExpectedAmountIn] = useState(0n); + const { openConnectModal } = useConnectModal(); + const { data: latestPriceData }: { data: bigint | undefined } = useContractRead({ address: ADDR_LIB.polygon.weth.houseOfReserve, // House of Reserve (WETH) abi: houseOfReserveABI, @@ -61,11 +65,16 @@ const Hero = () => { { path: xocWethPath, recipient: account.address, amountOut: ONE_HUNDRED_XOC, amountInMaximum: expectedAmountIn }, ], }); - // 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 ( <> @@ -102,7 +111,7 @@ const Hero = () => {
From 9c17ba80ea2b94dbb43cb8b18756caa697f8ae0d Mon Sep 17 00:00:00 2001 From: dcota <32775237+DaigaroCota@users.noreply.github.com> Date: Tue, 5 Mar 2024 21:00:15 -0800 Subject: [PATCH 3/3] chore: run format and linter tasks --- packages/nextjs/components/index/data.js | 2 +- packages/nextjs/components/index/hero.tsx | 5 ++--- packages/nextjs/components/index/testimonials.js | 3 ++- packages/nextjs/tsconfig.json | 14 +++++++++++++- 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/nextjs/components/index/data.js b/packages/nextjs/components/index/data.js index 054ee61..be02385 100644 --- a/packages/nextjs/components/index/data.js +++ b/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, diff --git a/packages/nextjs/components/index/hero.tsx b/packages/nextjs/components/index/hero.tsx index 79327c5..a4a4d76 100644 --- a/packages/nextjs/components/index/hero.tsx +++ b/packages/nextjs/components/index/hero.tsx @@ -6,15 +6,14 @@ import Container from "./container"; import MXNFetch from "./mxnFetch"; import ProtocolNumbers from "./protocolNumbers"; import XOCMinted from "./xocMinted"; -import { formatEther, parseEther } from "viem"; import { useConnectModal } from "@rainbow-me/rainbowkit"; +import { formatEther, parseEther } from "viem"; import { useAccount } from "wagmi"; import { useContractRead, useContractWrite } from "wagmi"; import { swapRouterABI } from "~~/components/index/abis/uniabis"; import { ADDR_LIB, XOC_ADDRESS } from "~~/utils/constants"; import { FEE_BIPS, encodePath } from "~~/utils/scaffold-eth"; - const Hero = () => { const account = useAccount(); const [expectedAmountIn, setExpectedAmountIn] = useState(0n); @@ -67,7 +66,7 @@ const Hero = () => { }); const handleBuyXocModal = () => { - if(account.isDisconnected) { + if (account.isDisconnected) { // open rainbow kit connect wallet modal openConnectModal?.(); } else { diff --git a/packages/nextjs/components/index/testimonials.js b/packages/nextjs/components/index/testimonials.js index ef97cb0..1521acc 100644 --- a/packages/nextjs/components/index/testimonials.js +++ b/packages/nextjs/components/index/testimonials.js @@ -31,7 +31,8 @@ const Testimonials = () => {

- $XOC simplifica mis transacciones. Empoderamiento financiero y acceso a DeFi. ¡Gracias por la revolución! + $XOC simplifica mis transacciones. Empoderamiento financiero y acceso a DeFi. ¡Gracias por la + revolución!

diff --git a/packages/nextjs/tsconfig.json b/packages/nextjs/tsconfig.json index 6056e8f..125f544 100644 --- a/packages/nextjs/tsconfig.json +++ b/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"] }