New branch

package.json

@@ -36,5 +36,9 @@
     "husky": "~8.0.3",
     "lint-staged": "~13.2.2"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@uniswap/widgets": "^2.59.0",
+    "vercel": "^33.4.1"
+  }
 }

packages/foundry/contracts/XocVendor.sol

@@ -0,0 +1,57 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.4;
+
+import "./YourToken.sol";
+
+// Learn more about the ERC20 implementation 
+// on OpenZeppelin docs: https://docs.openzeppelin.com/contracts/4.x/api/access#Ownable
+import "@openzeppelin/contracts/access/Ownable.sol";
+
+contract Vendor is Ownable {
+
+  // Our Token Contract
+  XocToken xocToken;
+
+  // token price for ETH
+  uint256 public tokensPerEth = 100;
+
+  // Event that log buy operation
+  event BuyTokens(address buyer, uint256 amountOfETH, uint256 amountOfTokens);
+
+  constructor(address tokenAddress) {
+    yourToken = YourToken(tokenAddress);
+  }
+
+  /**
+  * @notice Allow users to buy token for ETH
+  */
+  function buyTokens() public payable returns (uint256 tokenAmount) {
+    require(msg.value > 0, "Send ETH to buy some tokens");
+
+    uint256 amountToBuy = msg.value * tokensPerEth;
+
+    // check if the Vendor Contract has enough amount of tokens for the transaction
+    uint256 vendorBalance = yourToken.balanceOf(address(this));
+    require(vendorBalance >= amountToBuy, "Vendor contract has not enough tokens in its balance");
+
+    // Transfer token to the msg.sender
+    (bool sent) = yourToken.transfer(msg.sender, amountToBuy);
+    require(sent, "Failed to transfer token to user");
+
+    // emit the event
+    emit BuyTokens(msg.sender, msg.value, amountToBuy);
+
+    return amountToBuy;
+  }
+
+  /**
+  * @notice Allow the owner of the contract to withdraw ETH
+  */
+  function withdraw() public onlyOwner {
+    uint256 ownerBalance = address(this).balance;
+    require(ownerBalance > 0, "Owner has not balance to withdraw");
+
+    (bool sent,) = msg.sender.call{value: address(this).balance}("");
+    require(sent, "Failed to send user balance back to the owner");
+  }
+}

packages/foundry/foundry.toml

@@ -1,4 +1,5 @@
 [profile.default]
+solc = "0.8.19"
 src = 'contracts'
 out = 'out'
 libs = ['lib']

packages/nextjs/.gitignore

@@ -35,4 +35,5 @@ yarn-error.log*
 .vercel
 
 # typescript
-*.tsbuildinfo
+*.tsbuildinfo
+.vercel

packages/nextjs/components/Header.tsx

@@ -2,25 +2,26 @@ import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
+import { BanknotesIcon, Bars3Icon, HomeIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
-type HeaderMenuLink = {
+interface HeaderMenuLink {
   label: string;
   href: string;
   icon?: React.ReactNode;
-};
+}
 
 export const menuLinks: HeaderMenuLink[] = [
   {
     label: "Home",
     href: "/",
+    icon: <HomeIcon className="h-4 w-4" />,
   },
   {
-    label: "Debug Contracts",
-    href: "/debug",
-    icon: <BugAntIcon className="h-4 w-4" />,
+    label: "DeFi",
+    href: "/defi",
+    icon: <BanknotesIcon className="h-4 w-4" />,
   },
 ];
 
@@ -91,7 +92,7 @@ export const Header = () => {
             <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
           </div>
           <div className="flex flex-col">
-            <span className="font-bold leading-tight">Scaffold-ETH</span>
+            <span className="font-bold leading-tight">Scaffold-XOC</span>
             <span className="text-xs">Ethereum dev stack</span>
           </div>
         </Link>

packages/nextjs/components/index/benefits.js

@@ -0,0 +1,72 @@
+import React from "react";
+import Image from "next/image";
+import Container from "./container";
+
+const Benefits = props => {
+  const { data } = props;
+  return (
+    <>
+      <Container className="flex flex-wrap mb-20 lg:gap-10 lg:flex-nowrap ">
+        <div
+          className={`flex items-center justify-center w-full lg:w-1/2 ${props.imgPos === "right" ? "lg:order-1" : ""}`}
+        >
+          <div>
+            <Image
+              src={data.image}
+              width="521"
+              height="auto"
+              alt="Benefits"
+              className={"object-cover"}
+              placeholder="blur"
+              blurDataURL={data.image.src}
+            />
+          </div>
+        </div>
+
+        <div
+          className={`flex flex-wrap items-center w-full lg:w-1/2 ${data.imgPos === "right" ? "lg:justify-end" : ""}`}
+        >
+          <div>
+            <div className="flex flex-col w-full mt-4">
+              <h3 className="max-w-2xl mt-3 text-3xl font-bold leading-snug tracking-tight text-inherit lg:leading-tight lg:text-4xl dark:text-inherit">
+                {data.title}
+              </h3>
+
+              <p className="max-w-2xl py-4 text-lg leading-normal text-inherit lg:text-xl xl:text-xl dark:text-inherit">
+                {data.desc}
+              </p>
+            </div>
+
+            <div className="w-full mt-5">
+              {data.bullets.map((item, index) => (
+                <Benefit key={index} title={item.title} icon={item.icon}>
+                  {item.desc}
+                </Benefit>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Container>
+    </>
+  );
+};
+
+function Benefit(props) {
+  return (
+    <>
+      <div className="flex items-start mt-8 space-x-3">
+        <div className="flex items-center justify-center flex-shrink-0 mt-1 bg-indigo-500 rounded-md w-11 h-11 ">
+          {React.cloneElement(props.icon, {
+            className: "w-7 h-7 text-indigo-50",
+          })}
+        </div>
+        <div>
+          <h4 className="text-xl font-medium text-inherit dark:text-inherit">{props.title}</h4>
+          <p className="mt-1 text-inherit dark:text-inherit">{props.children}</p>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Benefits;

packages/nextjs/components/index/container.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Container = props => {
+  return (
+    <div className={`container p-8 mx-auto xl:px-0 ${props.className ? props.className : ""}`}>{props.children}</div>
+  );
+};
+
+export default Container;

packages/nextjs/components/index/cta.js

@@ -0,0 +1,29 @@
+import React from "react";
+import Container from "./container";
+
+const Cta = () => {
+  return (
+    <Container>
+      <div className="flex flex-wrap items-center justify-between w-full max-w-4xl gap-5 mx-auto text-white bg-indigo-600 px-7 py-7 lg:px-12 lg:py-12 lg:flex-nowrap rounded-xl">
+        <div className="flex-grow text-center lg:text-left">
+          <h2 className="text-2xl font-medium lg:text-3xl">Ready to try-out this template?</h2>
+          <p className="mt-2 font-medium text-white text-opacity-90 lg:text-xl">
+            Don&apos;t let your visitors see a poor landing.
+          </p>
+        </div>
+        <div className="flex-shrink-0 w-full text-center lg:w-auto">
+          <a
+            href="https://github.com/web3templates"
+            target="_blank"
+            rel="noopener noreferrer" // Fix: Added 'noreferrer' attribute
+            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 "
+          >
+            Download for Free
+          </a>
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+export default Cta;

packages/nextjs/components/index/data.js

@@ -0,0 +1,60 @@
+import {
+  FaceSmileIcon,
+  ChartBarSquareIcon,
+  CursorArrowRaysIcon,
+  DevicePhoneMobileIcon,
+  AdjustmentsHorizontalIcon,
+  SunIcon,
+} from "@heroicons/react/24/solid";
+
+import benefitOneImg from "../../public/benefit-one.png";
+import benefitTwoImg from "../../public/benefit-two.png";
+
+const benefitOne = {
+  title: "Highlight your benefits",
+  desc: "You can use this space to highlight your first benefit or a feature of your product. It can also contain an image or Illustration like in the example along with some bullet points.",
+  image: benefitOneImg,
+  bullets: [
+    {
+      title: "Understand your customers",
+      desc: "Then explain the first point breifly in one or two lines.",
+      icon: <FaceSmileIcon />,
+    },
+    {
+      title: "Improve acquisition",
+      desc: "Here you can add the next benefit point.",
+      icon: <ChartBarSquareIcon />,
+    },
+    {
+      title: "Drive customer retention",
+      desc: "This will be your last bullet point in this section.",
+      icon: <CursorArrowRaysIcon />,
+    },
+  ],
+};
+
+const benefitTwo = {
+  title: "Offer more benefits here",
+  desc: "You can use this same layout with a flip image to highlight your rest of the benefits of your product. It can also contain an image or Illustration as above section along with some bullet points.",
+  image: benefitTwoImg,
+  bullets: [
+    {
+      title: "Mobile Responsive Template",
+      desc: "Nextly is designed as a mobile first responsive template.",
+      icon: <DevicePhoneMobileIcon />,
+    },
+    {
+      title: "Powered by Next.js & TailwindCSS",
+      desc: "This template is powered by latest technologies and tools.",
+      icon: <AdjustmentsHorizontalIcon />,
+    },
+    {
+      title: "Dark & Light Mode",
+      desc: "Nextly comes with a zero-config light & dark mode. ",
+      icon: <SunIcon />,
+    },
+  ],
+};
+
+
+export {benefitOne, benefitTwo};

packages/nextjs/components/index/faq.js

@@ -0,0 +1,56 @@
+import React from "react";
+import Container from "./container";
+
+const FaqItem = ({ question, answer }) => {
+  return (
+    <div className="mb-5">
+      <details
+        open
+        className="w-96 bg-base-100 p-4 rounded-xl shadow-md group mx-auto overflow-hidden max-h-[56px] open:!max-h-[400px] transition-[max-height] duration-500"
+      >
+        <summary className="outline-none cursor-pointer focus:underline focus:text-inherit font-semibold marker:text-inherit group-open:before:rotate-90  before:origin-center relative before:w-[18px] before:h-[18px] before:transition-transform before:duration-200 before:-left-1 before:top-2/4 before:-translate-y-2/4 before:absolute before:bg-no-repeat before:bg-[length:18px_18px] before:bg-center before:bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22h-6%20w-6%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%0A%20%20%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9%205l7%207-7%207%22%20%2F%3E%0A%3C%2Fsvg%3E')]">
+          {question}
+        </summary>
+
+        <hr className="my-2 scale-x-150" />
+
+        <div className="text-sm -m-4 -mt-2 p-4 bg-base-100">{answer}</div>
+      </details>
+    </div>
+  );
+};
+
+const Faq = () => {
+  return (
+    <Container className="!p-0">
+      <div className="w-full max-w-2xl p-2 mx-auto rounded-2xl">
+        {faqdata.map(item => (
+          <FaqItem key={item.question} question={item.question} answer={item.answer} />
+        ))}
+      </div>
+    </Container>
+  );
+};
+
+const faqdata = [
+  {
+    question: "Como se respalda el valor de cada $XOC?",
+    answer: "Cada $XOC está respaldado por un token ERC20 en la red de Polygon, Gnosis Chain and Optimism, el cual se puede liquidar por el valor equivalente a la deuda en XOC y saldar la cuenta en el proceso, todo confiando en la red de validadores.",
+  },
+  {
+    question: "Que puedo hacer con $XOC?",
+    answer: "Puedes usar $XOC para pagar tus deudas, comprar bienes y servicios, o simplemente mantenerlo como una reserva de valor como si fuera cualquier otro peso mexicano. Lo mas impactante que puedes hacer es apoyar a la comunidad de La DAO construyendo el siguiente sistema fincanciero abierto y decentralizado.",
+  },
+  {
+    question: "Quien mantiene todo esto? ",
+    answer:
+      "Usamos un modelo de negocio por medio una DAO, al momento se llama solo 'La DAO' quien se encarga de gestionar todo el trabajo requerido para construir en DeFi.",
+  },
+  {
+    question: "Como me involucro? ",
+    answer:
+      "Puedes comprar $XOC en cualquier exchange que lo ofrezca, o puedes participar en la DAO y ayudar a construir el futuro de las finanzas descentralizadas. Si tienes alguna habilidad que creas que pueda ser útil, no dudes en contactarnos.",
+  },
+];
+
+export default Faq;