ve pop page

.env.example

@@ -1,6 +1,6 @@
-RPC_URL=
 PINATA_API_SECRET=
 PINATA_API_KEY=
-PINATA_JWT=
 IPFS_URL=
 DUNE_API_KEY=
+ALCHEMY_API_KEY=
+ENSO_API_KEY=

components/SocialMediaLinks.tsx

@@ -1,28 +1,24 @@
 import DiscordIcon from "@/components/svg/socialMedia/DiscordIcon";
 import MediumIcon from "@/components/svg/socialMedia/MediumIcon";
 import RedditIcon from "@/components/svg/socialMedia/RedditIcon";
-import TelegramIcon from "@/components/svg/socialMedia/TelegramIcon";
 import TwitterIcon from "@/components/svg/socialMedia/TwitterIcon";
 import YoutubeIcon from "@/components/svg/socialMedia/YoutubeIcon";
 
 export default function SocialMediaLinks() {
   return <>
-    <a href="https://twitter.com/Popcorn_DAO">
+    <a href="https://twitter.com/VaultCraft_io" target="_blank">
       <TwitterIcon color={"#645F4B"} size={"24"} />
     </a>
-    <a href="https://discord.gg/NYgNA6wv">
+    <a href="https://discord.gg/ujxSKu2H" target="_blank">
       <DiscordIcon color={"#645F4B"} size={"24"} />
     </a>
-    <a href="https://t.me/popcorndaochat">
-      <TelegramIcon color={"#645F4B"} size={"24"} />
-    </a>
-    <a href="https://medium.com/popcorndao">
+    <a href="https://medium.com/popcorndao" target="_blank">
       <MediumIcon color={"#645F4B"} size={"24"} />
     </a>
-    <a href="https://www.reddit.com/r/popcorndao/">
+    <a href="https://www.reddit.com/r/popcorndao/" target="_blank">
       <RedditIcon color={"#645F4B"} size={"24"} />
     </a>
-    <a href="https://www.youtube.com/channel/UCe8n8mGG4JR7nhFT4v9APyA">
+    <a href="https://www.youtube.com/channel/UCe8n8mGG4JR7nhFT4v9APyA" target="_blank">
       <YoutubeIcon color={"#645F4B"} size={"24"} />
     </a>
   </>

components/button/PseudoRadioButton.tsx

@@ -6,10 +6,10 @@ interface PseudoRadioButtonProps {
   extraClasses?: string;
 }
 
-export default function PseudoRadioButton({ label, handleClick, isActive, activeClass, extraClasses, }: PseudoRadioButtonProps): JSX.Element {
+export default function PseudoRadioButton({ label, handleClick, isActive, activeClass, extraClasses}: PseudoRadioButtonProps): JSX.Element {
   return (
     <button
-      className={`leading-8 ${extraClasses ? extraClasses : "py-2 px-3  h-12 border w-full rounded-lg text-lg"} ${isActive ? `${activeClass ? activeClass : "border-1 border-tokenTextGray"}` : "border-customLightGray"
+      className={`leading-8 ${extraClasses ? extraClasses : "py-2 px-3 h-12 border w-full rounded-lg text-lg"} ${isActive ? `${activeClass ? activeClass : "border-1 border-tokenTextGray"}` : "border-customLightGray"
         }`}
       type="button"
       onClick={() => handleClick()}

components/button/SecondaryActionButton.tsx

@@ -1,30 +1,15 @@
-import RightArrowIcon from "@/components/svg/RightArrowIcon";
-import React, { useState } from "react";
 import { ButtonProps } from "@/components/button/MainActionButton";
 
-export default function SecondaryActionButton({ label, handleClick, hidden, disabled = false }: ButtonProps): JSX.Element {
-  const [arrowColor, setArrowColor] = useState("645F4B");
-  const [arrowClass, setArrowClass] = useState("transform translate-x-0");
-
-  const animateArrow = () => {
-    setArrowColor("000000");
-    setArrowClass("transform -translate-x-1/2");
-    setTimeout(() => {
-      setArrowColor("645F4B");
-      setArrowClass("transform translate-x-0");
-    }, 500);
-  };
+export default function SecondaryActionButton({ label, handleClick, disabled = false, hidden = false }: ButtonProps): JSX.Element {
   return (
     <button
-      className={`${hidden ? "hidden" : ""
-        } w-full flex justify-between items-center text-primary hover:text-black transition-all ease-in-out font-medium leading-4 md:leading-7 relative`}
-      onMouseEnter={animateArrow}
+      type="button"
+      className={`whitespace-nowrap px-8 py-3 font-medium text-base transition-all ease-in-out duration-500 w-full flex flex-row items-center justify-center bg-white border border-primary text-primary rounded-4xl hover:bg-primary hover:text-white disabled:bg-white disabled:border-secondaryLight disabled:text-secondaryLight disabled:hover:border-secondaryLight disabled:hover:text-secondaryLight disabled:hover:bg-white ${hidden ? "hidden" : ""
+        }`}
       onClick={handleClick}
+      disabled={disabled}
     >
-      <span>{label}</span>
-      <div className={`'absolute right-0 transition-all ease-in-out duration-500 ${arrowClass}`}>
-        <RightArrowIcon color={arrowColor} />
-      </div>
+      {label}
     </button>
   );
-};
+};

components/button/TertiaryActionButton.tsx

@@ -1,16 +1,30 @@
+import RightArrowIcon from "@/components/svg/RightArrowIcon";
+import React, { useState } from "react";
 import { ButtonProps } from "@/components/button/MainActionButton";
 
-export default function TertiaryActionButton({ label, handleClick, disabled = false, hidden = false }: ButtonProps): JSX.Element {
+export default function TertiaryActionButton({ label, handleClick, hidden, disabled = false }: ButtonProps): JSX.Element {
+  const [arrowColor, setArrowColor] = useState("645F4B");
+  const [arrowClass, setArrowClass] = useState("transform translate-x-0");
+
+  const animateArrow = () => {
+    setArrowColor("000000");
+    setArrowClass("transform -translate-x-1/2");
+    setTimeout(() => {
+      setArrowColor("645F4B");
+      setArrowClass("transform translate-x-0");
+    }, 500);
+  };
   return (
     <button
-      type="button"
-      className={`whitespace-nowrap px-8 py-3 font-medium text-base transition-all ease-in-out duration-500 w-full flex flex-row items-center justify-center bg-white border border-primary text-primary rounded-4xl hover:bg-primary hover:text-white disabled:bg-white disabled:border-secondaryLight disabled:text-secondaryLight disabled:hover:border-secondaryLight disabled:hover:text-secondaryLight disabled:hover:bg-white ${hidden ? "hidden" : ""
-        }`}
+      className={`${hidden ? "hidden" : ""
+        } w-full flex justify-between items-center text-primary hover:text-black transition-all ease-in-out font-medium leading-4 md:leading-7 relative`}
+      onMouseEnter={animateArrow}
       onClick={handleClick}
-      disabled={disabled}
     >
-      {label}
+      <span>{label}</span>
+      <div className={`'absolute right-0 transition-all ease-in-out duration-500 ${arrowClass}`}>
+        <RightArrowIcon color={arrowColor} />
+      </div>
     </button>
   );
-};
-
+};

components/common/TokenIcon.tsx

@@ -21,6 +21,6 @@ export default function TokenIcon({
     return <img src={icon} alt="token icon" className={imageSize ? imageSize : "w-6 md:w-10 h-6 md:h-10"} />
   }
   return (
-    <img src={"/images/icons/POP.svg"} alt="token icon" className={imageSize ? imageSize : "w-6 md:w-10 h-6 md:h-10"} />
+    <img src={"/images/tokens/pop.svg"} alt="token icon" className={imageSize ? imageSize : "w-6 md:w-10 h-6 md:h-10"} />
   );
 }

components/input/InputTokenWithError.tsx

@@ -62,7 +62,7 @@ export default function InputTokenWithError({
               </svg>
             </div>
             <p className="text-secondaryLight group-hover/max:text-primary mb-2.5">
-              {`${formatNumber(Number(selectedToken?.balance) / (10 ** (selectedToken?.decimals as number)))}`}
+            {`${formatNumber(Number(selectedToken?.balance) / (10 ** (selectedToken?.decimals as number)))}`}
             </p>
           </>}
         </div>

components/landing/Hero.tsx

@@ -1,11 +1,15 @@
 import StatusWithLabel from "@/components/common/StatusWithLabel";
-import { Networth, getTotalNetworth } from "@/lib/getNetworth";
+import { vaultsAtom } from "@/lib/atoms/vaults";
+import { Networth, getTotalNetworth, getVaultNetworthByChain } from "@/lib/getNetworth";
+import { SUPPORTED_NETWORKS } from "@/lib/utils/connectors";
 import { NumberFormatter } from "@/lib/utils/formatBigNumber";
+import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
-import { useAccount } from "wagmi";
+import { Address, useAccount } from "wagmi";
 
 export default function Hero(): JSX.Element {
   const { address: account } = useAccount();
+  const [vaults] = useAtom(vaultsAtom)
   const [networth, setNetworth] = useState<Networth>({ pop: 0, stake: 0, vault: 0, total: 0 });
   const [tvl, setTvl] = useState<string>("0");
   const [loading, setLoading] = useState<boolean>(true);
@@ -19,13 +23,15 @@ export default function Hero(): JSX.Element {
       ))
   }, [])
 
+
   useEffect(() => {
-    if (account && loading)
-      // fetch and set networth
-      getTotalNetworth({ account }).then(res => {
-        setNetworth(res.total);
-        setLoading(false);
-      });
+    async function fetchNetworth() {
+      const vaultNetworth = SUPPORTED_NETWORKS.map(chain => getVaultNetworthByChain({ vaults, chainId: chain.id })).reduce((a, b) => a + b, 0)
+      const totalNetworth = await getTotalNetworth({ account: account as Address })
+      setNetworth({ ...totalNetworth.total, vault: vaultNetworth, total: totalNetworth.total.total + vaultNetworth });
+      setLoading(false);
+    }
+    if (account && loading && vaults.length > 0) fetchNetworth()
   }, [account]);
 
 
@@ -43,7 +49,7 @@ export default function Hero(): JSX.Element {
               content={<p className="text-3xl font-bold text-black">$ {loading ? "..." : NumberFormatter.format(networth.stake)}</p>}
             />
             <StatusWithLabel
-              label={"POP in Wallet"}
+              label={"VCX in Wallet"}
               content={<p className="text-3xl font-bold text-black">$ {loading ? "..." : NumberFormatter.format(networth.pop)}</p>}
             />
           </div>

components/landing/Products.tsx

@@ -44,14 +44,14 @@ export default function Products(): JSX.Element {
               </>
             }
             customContent={<SmileyIcon size={"60"} color={"black"} className="group-hover:fill-[#C391FF]" />}
-            description="Lock stake your POP LP to boost your rewards with call options on POP"
+            description="Lock stake your VCX LP to boost your rewards with call options on VCX"
             stats={[
               {
                 label: "TVL",
                 content: <p>Coming soon</p>,
               },
             ]}
-            route=""
+            route="boost"
           />
           <Product
             title={

components/navbar/DesktopMenu.tsx

@@ -105,7 +105,7 @@ export default function DesktopMenu(): JSX.Element {
                       <img src="/images/icons/popLogo.svg" alt="Logo" className="w-10 h-10" />
                     </Link>
                   </div>
-                  <div className="flex flex-col space-y-6 pb-12">
+                  <div className="flex flex-col space-y-6 pb-12" onClick={() => toggleMenu(false)}>
                     <NavbarLinks />
                   </div>
                   <div>

components/navbar/MobileMenu.tsx

@@ -65,12 +65,7 @@ export default function MobileMenu(): JSX.Element {
   const closePopUp = () => {
     setShowPopUp(false);
   };
-
-  function handleCloseAll() {
-    toggleMenu(false);
-    toggleProductsMenu(false);
-  }
-
+
   return (
     <>
       <div className={`flex flex-row justify-between items-center py-6 font-khTeka ${router.pathname === "/" ? "bg-[#FAF9F4]" : ""}`}>

components/navbar/NavbarLinks.tsx

@@ -3,13 +3,21 @@ import NavbarLink from "@/components/navbar/NavbarLink"
 
 const links: { label: string, url: string, onClick?: Function }[] = [
   {
-    label: "Vaults",
+    label: "Smart Vaults",
     url: "/vaults",
   },
+  {
+    label: "Boost Vaults",
+    url: "/boost",
+  },
   {
     label: "Stats",
     url: "/stats"
   },
+  {
+    label: "Pop to VCX Migration",
+    url: "/migration"
+  },
   {
     label: "VaultCraft",
     url: "https://vaultcraft.io/",

components/page/Footer.tsx

@@ -29,7 +29,7 @@ const GeneralLinks = [
   },
   {
     label: "Gitbook",
-    href: "https://popcorn-dao.gitbook.io/popcorndao-gitbook/about-popcorn/welcome-to-popcorn",
+    href: "https://docs.vaultcraft.io/welcome-to-vaultcraft/introduction",
   },
   {
     label: "Disclaimer",

components/page/Page.tsx

@@ -9,30 +9,46 @@ import Navbar from "@/components/navbar/NavBar";
 import { useAtom } from "jotai";
 import { yieldOptionsAtom } from "@/lib/atoms/sdk";
 import { CachedProvider, YieldOptions } from "vaultcraft-sdk";
+import { SUPPORTED_NETWORKS } from "@/lib/utils/connectors";
+import { getVaultsByChain } from "@/lib/vault/getVault";
+import { vaultsAtom } from "@/lib/atoms/vaults";
+import { useAccount } from "wagmi";
 
 async function setUpYieldOptions() {
   const ttl = 360_000;
   const provider = new CachedProvider();
-  await provider.initialize("https://raw.githubusercontent.com/Popcorn-Limited/apy-data/main/apy-data.json");
+  await provider.initialize("https://raw.githubusercontent.com/Popcorn-Limited/defi-db/main/apy-data.json");
 
-  return new YieldOptions(provider, ttl);
+  return new YieldOptions({ provider, ttl });
 }
-
 export default function Page({ children }: { children: JSX.Element }): JSX.Element {
   const { pathname } = useRouter();
+  const { address: account } = useAccount()
 
   const [yieldOptions, setYieldOptions] = useAtom(yieldOptionsAtom)
+  const [, setVaults] = useAtom(vaultsAtom)
 
   useEffect(() => {
     if (!yieldOptions) {
       setUpYieldOptions().then((res: any) => setYieldOptions(res))
     }
   }, [])
 
+  useEffect(() => {
+    async function getVaults() {
+      // get vaults
+      const fetchedVaults = (await Promise.all(
+        SUPPORTED_NETWORKS.map(async (chain) => getVaultsByChain({ chain, account, yieldOptions: yieldOptions as YieldOptions }))
+      )).flat();
+      setVaults(fetchedVaults)
+    }
+    if (yieldOptions) getVaults()
+  }, [account, yieldOptions])
+
   return (
     <>
       <TermsCheck />
-      <div className="w-full  mx-auto min-h-screen h-full font-khTeka flex flex-col justify-between">
+      <div className="w-full mx-auto min-h-screen h-full font-khTeka flex flex-col justify-between">
         <NoSSR>
           <Navbar />
         </NoSSR>

components/svg/SwitchIcon.tsx

@@ -0,0 +1,12 @@
+import { IconProps } from "@/lib/types"
+
+
+const SwitchIcon: React.FC<IconProps> = ({ className, color, size}) => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width={size} viewBox="0 0 21 20" fill="none" className={className}>
+            <path d="M6.33333 13.3334V3.33337M6.33333 3.33337L3 6.66671M6.33333 3.33337L9.66667 6.66671M14.6667 6.66671V16.6667M14.6667 16.6667L18 13.3334M14.6667 16.6667L11.3333 13.3334" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+    )
+}
+
+export default SwitchIcon;

components/vault/ActionSteps.tsx

@@ -0,0 +1,35 @@
+import { ActionStep } from "@/lib/vault/getActionSteps"
+import { XMarkIcon } from "@heroicons/react/24/outline"
+
+function getStepColor(preFix: string, step: any): string {
+  if (step.loading || step.success) return `${preFix}-green-500`
+  if (step.error) return `${preFix}-red-500`
+  return `${preFix}-warmGray`
+}
+
+interface ActionStepsProps {
+  steps: ActionStep[];
+  stepCounter: number;
+}
+
+export default function ActionSteps({ steps, stepCounter }: ActionStepsProps): JSX.Element {
+  return (
+    <div className="flex flex-row items-center">
+      {
+        steps.map((step, i) => <>
+          <div
+            key={step.label}
+            className={`w-8 h-8 rounded-full border leading-none flex justify-center items-center cursor-default bg-opacity-40
+              ${i === stepCounter ? "border-[#FFE650] bg-[#FFE650]" : `${getStepColor("border", step)} ${getStepColor("bg", step)}`}`}
+          >
+            {step.loading && <img src="/images/loader/puff.svg" className={`h-6 w-6 text-primaryLight`} />}
+            {!step.loading && step.error && <XMarkIcon className="h-4 w-4 text-red-500" />}
+            {!step.loading && step.success && <img src="/images/icons/checkIcon.svg" className={`h-4 w-4`} />}
+            {!step.loading && !step.error && !step.success && <div className={`rounded-full h-3 w-3 ${i === stepCounter ? "bg-[#FFE650]" : "bg-primaryLight bg-opacity-80"}`} />}
+          </div>
+          {step.step < steps.length && <p className={`mb-3 tracking-none text-primaryLight`}>________</p>}
+        </>)
+      }
+    </div>
+  )
+}