diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index e9b82b6..362f98f 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -47,13 +47,13 @@ export const Footer = () => {
- Clona el codigo + Clone this project
·

- Construido con por + Built with by

{ ·
- Soporte + Technical Support
diff --git a/packages/nextjs/components/index/container.js b/packages/nextjs/components/index/container.tsx similarity index 60% rename from packages/nextjs/components/index/container.js rename to packages/nextjs/components/index/container.tsx index 2e6f0de..a313e57 100644 --- a/packages/nextjs/components/index/container.js +++ b/packages/nextjs/components/index/container.tsx @@ -1,6 +1,11 @@ import React from "react"; -const Container = props => { +type ContainerProps = { + className?: string; + children: React.ReactNode; +}; + +const Container = (props: ContainerProps) => { return (
{props.children}
); diff --git a/packages/nextjs/components/index/cta.js b/packages/nextjs/components/index/cta.js index 1164b8e..bb082f0 100644 --- a/packages/nextjs/components/index/cta.js +++ b/packages/nextjs/components/index/cta.js @@ -1,11 +1,12 @@ -import React, { useState } from "react"; -import Image from "next/image"; +import React, { useState, useEffect } from "react"; import { xocolatlABI } from "../xoc-dapp/abis/xocabis"; import { xocPinABI } from "./abis/xocpin"; -import Container from "./container"; -import { parseEther } from "viem"; -import { useContractWrite } from "wagmi"; +import { parseEther, formatEther } from "viem"; +import { useContractRead, useContractWrite } from "wagmi"; import { useAccount } from "wagmi"; +import Familia from "../../public/Familia.png"; +import Image from "next/image"; + const Cta = () => { const [showCard, setShowCard] = useState(false); @@ -33,13 +34,32 @@ const Cta = () => { args: [account.address], }); + const { data: tokenID} = useContractRead({ + address: "0x72fa57b14b83D165EACab4E2bB3B3B9D5B9C5A52", + abi: xocPinABI, + functionName: "nextTokenId", + watch: true, + }); + + const [latestTokenID, setLatestTokenID] = useState(null); + + useEffect(() => { + if (tokenID) { + const ID = tokenID.toString() -1; + setLatestTokenID(ID); + } + }, [tokenID]); + + + console.log(tokenID); + return ( - +
-

Listo para unirte a la aventura?

+

Ready to join the movement?

- No dejes pasar la oportunidad de aportar! + Don't let your chance pass you by!

@@ -47,7 +67,7 @@ const Cta = () => { onClick={handleButtonClick} className="inline-block py-3 mx-auto text-lg font-medium text-center text-indigo-600 bg-white rounded-md px-7 lg:px-10 lg:py-5" > - Mintea tu NFT de membresía + Mint a membership NFT
@@ -66,10 +86,10 @@ const Cta = () => {
+
+ Familia +
-
- Album -
@@ -79,8 +99,8 @@ const Cta = () => {
NFTs Minted
-
4,200
-
↗︎ 400 (22%)
+
{latestTokenID}
+
So Far
@@ -97,7 +117,7 @@ const Cta = () => {
)} - +
); }; diff --git a/packages/nextjs/components/index/data.js b/packages/nextjs/components/index/data.js index be02385..a642c25 100644 --- a/packages/nextjs/components/index/data.js +++ b/packages/nextjs/components/index/data.js @@ -10,46 +10,46 @@ import { } from "@heroicons/react/24/solid"; const benefitOne = { - title: "El primer peso MXN decentralizado", - desc: "$XOC es la encarnación digital del peso mexicano gracias a los contratos inteligentes. Sin intermediarios, esto significa que está libre de control gubernamental o bancario. Así, los usuarios pueden realizar transacciones de manera rápida y segura, sin importar su ubicación.", + title: "The First Decentralized MXN Peso", + desc: "$XOC is the digital embodiment of the Mexican peso thanks to smart contracts. Without intermediaries, this means it's free from government or banking control. Thus, users can conduct transactions quickly and securely, regardless of their location.", image: benefitOneImg, bullets: [ { - title: "Tu moneda, en código en la red:", - desc: "Es la evolución natural del dinero digital.", + title: "Your currency, encoded on the network:", + desc: "It'S the natural evolution of digital money.", icon: , }, { - title: "Transacciones ágiles y seguras:", - desc: "Con presencia en las redes de Polygon, Gnosis Chain y Optimism, $XOC garantiza rapidez y seguridad en cada transacción.", + title: "Agile and secure transactions:", + desc: "With a presence on Polygon, Gnosis Chain, and Optimism networks, $XOC ensures speed and security in every transaction.", icon: , }, { - title: "Sin intermediarios:", - desc: "Libre de la influencia gubernamental o bancaria, $XOC te ofrece autonomía y libertad financiera.", + title: "No intermediaries:", + desc: "Free from government or banking influence, $XOC offers you autonomy and financial freedom.", icon: , }, ], }; const benefitTwo = { - title: "Desarrollado por La DAO", - desc: "En el corazón de Scaffold-XOC late el espíritu de una comunidad dedicada a forjar un sistema financiero abierto y descentralizado. La DAO representa una organización autónoma descentralizada que lidera el camino en la construcción de soluciones innovadoras en DeFi.", + title: "Developed by La DAO", + desc: "At the heart of Scaffold-XOC lies the spirit of a community dedicated to forging an open and decentralized financial system. La DAO represents a decentralized autonomous organization that leads the way in building innovative DeFi solutions.", image: benefitTwoImg, bullets: [ { - title: "Construyendo con herramientas Web3:", - desc: "Nuestro arsenal está compuesto por las mejores herramientas de Web3, desde OpenZeppelin hasta Scaffold-Eth-2, pasando por DAOHaus y Safe, entre muchas otras. Cada una de estas herramientas es una pieza clave en la construcción de un futuro financiero más inclusivo y accesible.", + title: "Building with Web3 tools:", + desc: "Our arsenal is composed of the best Web3 tools, from OpenZeppelin to Scaffold-Eth-2, passing through DAOHaus and Safe, among many others. Each of these tools is a key piece in building a more inclusive and accessible financial future.", icon: , }, { - title: "Una nueva era de democracia financiera:", - desc: "Cada línea de código, cada reunión, cada decisión está orientada hacia la creación de un sistema financiero más equitativo y transparente. Nos comprometemos a impulsar una revolución financiera que brinde oportunidades para todos, sin importar su origen o situación económica.", + title: "A new era of financial democracy:", + desc: "Every line of code, every meeting, every decision is oriented towards creating a fairer and more transparent financial system. We are committed to driving a financial revolution that provides opportunities for everyone, regardless of their background or economic situation.", icon: , }, { - title: "Encuentra un mentor, o sé el mentor que siempre quisiste tener:", - desc: "En La DAO, valoramos el crecimiento personal y profesional. Estamos aquí para guiar y apoyar a aquellos que desean contribuir y aprender. ¡Únete a nosotros y sé parte de esta emocionante jornada hacia un futuro financiero más brillante y equitativo!", + title: "Find a mentor, or be the mentor you always wanted to have:", + desc: "At La DAO, we value personal and professional growth. We are here to guide and support those who wish to contribute and learn. Join us and be part of this exciting journey towards a brighter and more equitable financial future!", icon: , }, ], diff --git a/packages/nextjs/components/index/faq.js b/packages/nextjs/components/index/faq.tsx similarity index 56% rename from packages/nextjs/components/index/faq.js rename to packages/nextjs/components/index/faq.tsx index 1bbf41d..3f95367 100644 --- a/packages/nextjs/components/index/faq.js +++ b/packages/nextjs/components/index/faq.tsx @@ -1,7 +1,7 @@ import React from "react"; import Container from "./container"; -const FaqItem = ({ question, answer }) => { +const FaqItem = ({ question, answer }: { question: string; answer: string }) => { return (
@@ -31,24 +31,24 @@ const Faq = () => { const faqdata = [ { - question: "Como se respalda el valor de cada $XOC?", + question: "How is the value of each $XOC backed?", answer: - "Cada $XOC está respaldado por un token ERC20 en las redes de Polygon, Gnosis Chain y Optimism. Este respaldo garantiza que cada $XOC pueda ser liquidado por su valor equivalente en deuda en $XOC y saldar la cuenta en el proceso, todo respaldado por la red de validadores.", + "Each $XOC is backed by an ERC20 token on the Polygon, Gnosis Chain, and Optimism networks. This backing ensures that each $XOC can be liquidated for its equivalent value in $XOC-denominated debt and settle the account in the process, all backed by the network of validators.", }, { - question: "Que puedo hacer con $XOC?", + question: "What can I do with $XOC?", answer: - "Puedes utilizar $XOC para pagar deudas, adquirir bienes y servicios, o simplemente mantenerlo como reserva de valor, al igual que cualquier otro peso mexicano. Además, puedes apoyar a la comunidad de La DAO construyendo el próximo sistema financiero abierto y descentralizado.", + "You can use $XOC to pay off debts, acquire goods and services, or simply hold it as a store of value, much like any other Mexican peso. Additionally, you can support the La DAO community by building the next open and decentralized financial system.", }, { - question: "Quien mantiene todo esto? ", + question: "Who maintains all this?", answer: - "Utilizamos un modelo de negocio basado en una DAO, actualmente conocida como 'La DAO'. Esta organización autónoma descentralizada se encarga de gestionar todo el trabajo necesario para construir en DeFi.", + "We utilize a business model based on a DAO, currently known as 'La DAO.' This decentralized autonomous organization is responsible for managing all the work needed to build in DeFi.", }, { - question: "Como me involucro? ", + question: "How can I get involved?", answer: - "Puedes adquirir $XOC en cualquier exchange que lo ofrezca, o participar en la DAO y contribuir a la construcción del futuro de las finanzas descentralizadas. Si tienes habilidades que crees que puedan ser útiles, no dudes en contactarnos.", + "You can acquire $XOC on any exchange that offers it, or participate in the DAO and contribute to building the future of decentralized finance. If you have skills you think may be useful, feel free to reach out to us.", }, ]; diff --git a/packages/nextjs/components/index/hero.tsx b/packages/nextjs/components/index/hero.tsx index 6b94e92..c7f3432 100644 --- a/packages/nextjs/components/index/hero.tsx +++ b/packages/nextjs/components/index/hero.tsx @@ -1,7 +1,9 @@ import React, { useEffect, useState } from "react"; import Image from "next/image"; +import Familia from "../../public/Familia.png"; import heroImg from "../../public/hero-1.png"; import { erc20ABI, houseOfReserveABI } from "../xoc-dapp/abis/xocabis"; +import { xocPinABI } from "./abis/xocpin"; import Container from "./container"; import MXNFetch from "./mxnFetch"; import ProtocolNumbers from "./protocolNumbers"; @@ -9,7 +11,7 @@ import XOCMinted from "./xocMinted"; import { useConnectModal } from "@rainbow-me/rainbowkit"; import { formatEther, parseEther } from "viem"; import { useAccount } from "wagmi"; -import { useContractRead, useContractWrite } from "wagmi"; +import { useBalance, 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"; @@ -33,6 +35,14 @@ const Hero = () => { watch: true, }); + const { data: accountXOCAllowance }: { data: bigint | undefined } = useContractRead({ + address: XOC_ADDRESS, + abi: erc20ABI, + functionName: "allowance", + args: [account.address, "0x72fa57b14b83D165EACab4E2bB3B3B9D5B9C5A52"], + watch: true, + }); + const xocWethPath = encodePath( [XOC_ADDRESS, ADDR_LIB.polygon.usdc.address, ADDR_LIB.polygon.weth.address], [FEE_BIPS.FIVE, FEE_BIPS.FIVE], @@ -50,20 +60,54 @@ const Hero = () => { }, [latestPriceData, ONE_HUNDRED_XOC]); - const { write: approve } = useContractWrite({ + const { data: WETHBalance } = useBalance({ + address: account.address, + token: ADDR_LIB.polygon.weth.address, + watch: true, + }); + + + const { data: XOCBalance } = useBalance({ + address: account.address, + token: XOC_ADDRESS, + watch: true, + }); + + const { + write: approve, + isLoading: waitingApproval, + isSuccess: successfulApproval, + } = useContractWrite({ address: ADDR_LIB.polygon.weth.address, abi: erc20ABI, functionName: "approve", args: [ADDR_LIB.polygon.uniswapSwapRouter, expectedAmountIn], + onSuccess(data) { + console.log("Success", data); + }, + onSettled(data, error) { + console.log("Settled", { data, error }); + }, }); - const { write: executeTrade, isError } = useContractWrite({ + const { + write: executeTrade, + isError, + isLoading: waitingTrade, + isSuccess: succesfulTrade, + } = useContractWrite({ address: ADDR_LIB.polygon.uniswapSwapRouter, abi: swapRouterABI, functionName: "exactOutput", args: [ { path: xocWethPath, recipient: account.address, amountOut: ONE_HUNDRED_XOC, amountInMaximum: expectedAmountIn }, ], + onSuccess(data) { + console.log("Success", data); + }, + onSettled(data, error) { + console.log("Settled", { data, error }); + }, }); const handleBuyXocModal = () => { @@ -76,6 +120,21 @@ const Hero = () => { } }; + const { write: approveXOC } = useContractWrite({ + address: "0xa411c9Aa00E020e4f88Bc19996d29c5B7ADB4ACf", + abi: erc20ABI, + functionName: "approve", + args: ["0x72fa57b14b83D165EACab4E2bB3B3B9D5B9C5A52", parseEther("100")], + }); + + const { write: mintNFT } = useContractWrite({ + address: "0x72fa57b14b83D165EACab4E2bB3B3B9D5B9C5A52", + abi: xocPinABI, + functionName: "mint", + args: [account.address], + }); + + return ( <> @@ -113,9 +172,12 @@ const Hero = () => { className="px-8 py-4 text-lg font-medium text-center text-white bg-indigo-600 rounded-md" onClick={handleBuyXocModal} > - Compra $XOC + Try $XOC +
+
+

BUY $XOC

Buy 100 XOC on Uniswap.

@@ -141,11 +203,129 @@ const Hero = () => {
{isError &&

Error executing trade

}
+
{/* if there is a button in form, it will close the modal */} - +
+
+
+
+

Buy XOC!

+

+ Buy XOC directly from Uniswap through our Frontend. We make it easy for you by approving the + exact amount of WETH that 100$XOC will cost. +

+
+
+
+
Token In
+
+ {expectedAmountIn ? parseFloat(formatEther(expectedAmountIn)).toFixed(5) : "reading"} +
+
Wrapped Ether
+
+
+
Your Balance
+
+ {WETHBalance ? parseFloat(formatEther(WETHBalance.value)).toFixed(5) : "reading"} +
+
Wrapped Ether
+
+
+
+
+
Token Out
+
100
+
$XOC
+
+
+
Your Balance
+
+ {XOCBalance ? parseFloat(formatEther(XOCBalance.value)).toFixed(2) : "reading"} +
+
$XOC
+
+
+
+
+
+ + {waitingApproval && Waiting} + {successfulApproval && ( +
+
+ Approval sent successfully. +
+
+ )} + {isError &&

Error executing trade

} + {waitingTrade &&

Waiting for trade to execute

} + {succesfulTrade && ( +
+
+ Approval sent successfully. +
+
+ )} +
+
+
+
+
+ OR +
+
+
+

Mint NFT!

+
+ Familia +
+

You'll need 100 $XOC to mint this NFT

+ +
+ +
+
+
+
@@ -173,7 +353,7 @@ const Hero = () => {

- Fuente:{" "} + Source:{" "} Uniswap V3{" "} @@ -184,7 +364,7 @@ const Hero = () => {

- Fuente:{" "} + Source:{" "} ChainLink

@@ -193,7 +373,7 @@ const Hero = () => {

- Fuente:{" "} + Source:{" "} { <>

-
Precio de 1 Ether
+
Price of 1 Ether
{latestPriceNumber && new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(latestPriceNumber)}
-
En pesos $MXN
+
In $MXN pesos
diff --git a/packages/nextjs/components/index/protocolNumbers.tsx b/packages/nextjs/components/index/protocolNumbers.tsx index e1b7173..5c8f068 100644 --- a/packages/nextjs/components/index/protocolNumbers.tsx +++ b/packages/nextjs/components/index/protocolNumbers.tsx @@ -32,13 +32,13 @@ const ProtocolNumbers = () => { <>
-
Precio de 1 Ether
+
Price of 1 Ether
{latestPriceNumber ? new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(latestPriceNumber) : "MXN0.00"}
-
En pesos $XOC
+
In $XOC Pesos
diff --git a/packages/nextjs/components/index/testimonials.js b/packages/nextjs/components/index/testimonials.js index 1521acc..c14bcab 100644 --- a/packages/nextjs/components/index/testimonials.js +++ b/packages/nextjs/components/index/testimonials.js @@ -12,30 +12,25 @@ const Testimonials = () => {

- $XOC revolucionó mi desarrollo financiero. Rápido, seguro y empoderador. Gracias por abrir - posibilidades. + $XOC revolutionized my financial development. Fast, secure, and empowering. Thank you for opening possibilities.

-

- Con $XOC, las transacciones son rápidas y seguras. Me siento parte de una comunidad sólida. + With $XOC, transactions are fast and secure. I feel part of a solid community.

- - +

- $XOC simplifica mis transacciones. Empoderamiento financiero y acceso a DeFi. ¡Gracias por la - revolución! + $XOC simplifies my transactions. Financial empowerment and access to DeFi. Thanks for the revolution!

- - +
diff --git a/packages/nextjs/components/streams/SuperTokens.tsx b/packages/nextjs/components/streams/SuperTokens.tsx index c063ac8..7c60236 100644 --- a/packages/nextjs/components/streams/SuperTokens.tsx +++ b/packages/nextjs/components/streams/SuperTokens.tsx @@ -50,7 +50,8 @@ const SupertokensComponent: React.FC = () => { return ( <> -
+ {/* Top section */} +

Approve Upgrade

{ Approve Upgrade
-

Upgrade

{ Upgrade
-

Downgrade

{ Downgrade
+
+ {/* Bottom section */} +

Set Flowrate

{ Set Flowrate
-

Delete Flowrate

+
{ />
- - $XOC te abre las puertas a la creciente comunidad de Web3, tanto en México como en el mundo. Descubre los - múltiples beneficios que ofrece: + + $XOC opens the doors to the thriving Web3 community, both in Mexico and around the world. Explore the numerous + benefits it offers: @@ -49,15 +49,15 @@ const Home: NextPage = () => {
*/}
- - Descubre los testimonios auténticos de aquellos que forman parte de la vibrante comunidad que está construyendo - y utilizando $XOC. Desde experiencias transformadoras hasta historias de éxito, aquí encontrarás la inspiración - que necesitas para unirte a esta emocionante revolución financiera. + + Discover authentic testimonials from those who are part of the vibrant community building and using $XOC. From + transformative experiences to success stories, here you'll find the inspiration you need to join this + exciting financial revolution. - - Esta sección es para responder preguntas frecuentes de la comunidad emergente alrededor de $XOC y todo ese - desmadre. + + This section is for answering frequently asked questions from the emerging community around $XOC and all that + jazz. diff --git a/packages/nextjs/pages/streams.tsx b/packages/nextjs/pages/streams.tsx index f25d762..8285719 100644 --- a/packages/nextjs/pages/streams.tsx +++ b/packages/nextjs/pages/streams.tsx @@ -33,12 +33,12 @@ const Streams: NextPage = () => {
+
Account's Flowrate
-
Account's Flowrate
diff --git a/packages/nextjs/public/Familia.png b/packages/nextjs/public/Familia.png new file mode 100644 index 0000000..4fa48e3 Binary files /dev/null and b/packages/nextjs/public/Familia.png differ diff --git a/packages/nextjs/tsconfig.json b/packages/nextjs/tsconfig.json index 125f544..2dec84d 100644 --- a/packages/nextjs/tsconfig.json +++ b/packages/nextjs/tsconfig.json @@ -22,14 +22,14 @@ "next-env.d.ts", "**/*.ts", "**/*.tsx", - "components/index/benefits.js", - "components/index/container.js", + "components/index/benefits.tsx", + "components/index/container.tsx", "components/index/data.js", "components/index/sectionTitle.js", "components/index/testimonials.jsx", "components/index/hero.js", "components/index/testimonials.js", "components/index/video.js" - ], +, "components/index/cta.js" ], "exclude": ["node_modules"] }