Skip to content

Commit

Permalink
Remove wagmi and view, refcatored code to use native fetch for market…
Browse files Browse the repository at this point in the history 
…data erc20 data and total supply
  • Loading branch information
@Adebesin-Cell
Adebesin-Cell committed Jul 12, 2024
1 parent 1dd524f commit 8e29bc0
Show file tree
Hide file tree
Showing 16 changed files with 272 additions and 2,843 deletions.
4 changes: 1 addition & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,7 @@
"react-icons": "^4.11.0",
"react-intersection-observer": "^9.5.2",
"three": "^0.157.0",
"typescript": "5.0.4",
"viem": "1.2.5",
"wagmi": "1.3.3"
"typescript": "5.0.4"
},
"devDependencies": {
"@types/three": "^0.156.0",
Expand Down
2,571 changes: 8 additions & 2,563 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

29 changes: 22 additions & 7 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,28 @@
import BraindaoTeam from "@/components/layouts/braindao-team";
import Ecosystem from "@/components/layouts/ecosystem";
import Hero from "@/components/layouts/Hero";
import Iqtoken from "@/components/layouts/Iqtoken";
import Hero from '@/components/layouts/Hero';
import Iqtoken from '@/components/layouts/Iqtoken';
import BraindaoTeam from '@/components/layouts/braindao-team';
import Ecosystem from '@/components/layouts/ecosystem';
import { fetchCoinMarketData } from '@/modules/fetchCoinMarketData';
import { getLockOverview } from '@/modules/getLockOverview';
import { getTvl } from '@/modules/getTVL';

export default async function Home() {
const [tvl, marketData, lockOverview] = await Promise.all([
getTvl(),
fetchCoinMarketData(),
getLockOverview()
]);

const { totalHiiqSupply } = lockOverview;

export default function Home() {
return (
<div className="">
<div className=''>
<Hero />
<Iqtoken />
<Iqtoken
tvl={tvl}
totalHiiqSupply={totalHiiqSupply}
marketData={marketData}
/>
<Ecosystem />
<BraindaoTeam />
</div>
Expand Down
21 changes: 6 additions & 15 deletions src/components/layouts/ClientProviders.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,13 @@
"use client";
'use client';

import { publicClient } from "@/config/wagmi";
import { ThemeProvider } from "next-themes";
import type { PropsWithChildren } from "react";
import { WagmiConfig, createConfig } from "wagmi";
import { CSPostHogProvider } from "./CgPosthogProvider";

const client = createConfig({
autoConnect: true,
publicClient,
});
import { ThemeProvider } from 'next-themes';
import type { PropsWithChildren } from 'react';
import { CSPostHogProvider } from './CgPosthogProvider';

const ClientProviders = ({ children }: PropsWithChildren) => {
return (
<ThemeProvider attribute="class" defaultTheme="dark">
<WagmiConfig config={client}>
<CSPostHogProvider>{children}</CSPostHogProvider>
</WagmiConfig>
<ThemeProvider attribute='class' defaultTheme='dark'>
<CSPostHogProvider>{children}</CSPostHogProvider>
</ThemeProvider>
);
};
Expand Down
143 changes: 67 additions & 76 deletions src/components/layouts/Iqtoken.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,34 @@
"use client";
'use client';

import { useErc20 } from "@/hooks/useEr20";
import { useLockOverview } from "@/hooks/useLockOverview";
import { motion } from "framer-motion";
import { useTheme } from "next-themes";
import Image from "next/image";
import React, { useEffect, useRef, useState } from "react";
import InViewAnimateBottom from "../transitions/InViewAnimateBottom";
import InViewAnimateSlideDown from "../transitions/InViewSlideDown";
import InViewAnimateSlideUp from "../transitions/inViewSlideUp";
import { fetchPriceChange, numFormatter } from "../utils/stats-utils";
import { numFormatter } from '@/modules/helpers/numFormatter';
import { useTheme } from 'next-themes';
import Image from 'next/image';
import React, { useEffect, useState } from 'react';
import InViewAnimateBottom from '../transitions/InViewAnimateBottom';

export const StatsPointers = ({
title,
content,
className,
headerSize,
headerSize
}: {
title: string;
content: string;
className?: string;
headerSize?: string;
}) => {
return (
<InViewAnimateBottom className="flex-1">
<div className="border-l-2 border-pink-500 pl-4">
<InViewAnimateBottom className='flex-1'>
<div className='border-l-2 border-pink-500 pl-4'>
<div className={`flex flex-col ${className}`}>
<h4
className={`dark:text-whiteAlpha-900 text-gray800 font-semibold ${
headerSize ? headerSize : "text-2xl xl:text-3xl"
headerSize || 'text-2xl xl:text-3xl'
}`}
>
{title}
</h4>
<span className={headerSize ? "" : "xl:text-lg"}>{content}</span>
<span className={headerSize ? '' : 'xl:text-lg'}>{content}</span>
</div>
</div>
</InViewAnimateBottom>
Expand All @@ -45,7 +40,7 @@ export const TokenBrief = ({
description,
description2,
buttonText,
action,
action
}: {
title: string;
description: string;
Expand All @@ -54,29 +49,29 @@ export const TokenBrief = ({
action: string;
}) => {
return (
<div className="flex items-start flex-col xl:flex-row xl:gap-[186px]">
<div className='flex items-start flex-col xl:flex-row xl:gap-[186px]'>
<InViewAnimateBottom>
<h3 className="font-semibold dark:text-whiteAlpha-900 text-gray800 text-2xl sm:text-3xl xl:text-4xl">
<h3 className='font-semibold dark:text-whiteAlpha-900 text-gray800 text-2xl sm:text-3xl xl:text-4xl'>
{title}
</h3>
</InViewAnimateBottom>
<div className="flex-1 mt-2 xl:mt-0">
<div className='flex-1 mt-2 xl:mt-0'>
<InViewAnimateBottom>
<p className="xl:text-lg dark:text-whiteAlpha-800 text-gray600">
<p className='xl:text-lg dark:text-whiteAlpha-800 text-gray600'>
{description}
</p>
{description2 && (
<p className="xl:text-lg dark:text-whiteAlpha-800 text-gray600">
<p className='xl:text-lg dark:text-whiteAlpha-800 text-gray600'>
{description2}
</p>
)}
</InViewAnimateBottom>
<InViewAnimateBottom>
<a
href={action}
target="_blank"
className="flex justify-center w-[200px] xl:w-[256px] text-white/90 dark:bg-brand-800 bg-brand-500 py-3 xl:py-4 mt-4 xl:mt-8 rounded-md hover:bg-brand-700 transition-all ease-in-out duration-300"
rel="noreferrer"
target='_blank'
className='flex justify-center w-[200px] xl:w-[256px] text-white/90 dark:bg-brand-800 bg-brand-500 py-3 xl:py-4 mt-4 xl:mt-8 rounded-md hover:bg-brand-700 transition-all ease-in-out duration-300'
rel='noreferrer'
>
{buttonText}
</a>
Expand All @@ -86,106 +81,102 @@ export const TokenBrief = ({
);
};

const Iqtoken = () => {
const Iqtoken = ({
marketData,
tvl,
totalHiiqSupply
}: {
totalHiiqSupply: number;
tvl: number;
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
marketData: { [x: string]: any } | null;
}) => {
const { theme } = useTheme();
const [appTheme, setAppTheme] = useState("");
const { tvl } = useErc20();
const { totalHiiqSupply } = useLockOverview();
const isFetchedData = useRef(false);
const [marketData, setMarketData] = useState<{ [x: string]: any } | null>(
null
);
const [appTheme, setAppTheme] = useState('');

useEffect(() => {
setAppTheme(theme || "");
if (!isFetchedData.current) {
isFetchedData.current = true;
const res2 = fetchPriceChange();

Promise.resolve(res2).then((data) => {
setMarketData(data);
});
}
setAppTheme(theme ?? '');
}, [theme]);
let imageUrl;
if (appTheme === "light") {
imageUrl = "/images/aboutus.png";

let imageUrl: string | undefined = undefined;
if (appTheme === 'light') {
imageUrl = '/images/aboutus.png';
}
if (appTheme === "dark") {
imageUrl = "/images/aboutus-dark.png";
if (appTheme === 'dark') {
imageUrl = '/images/aboutus-dark.png';
}

return (
<div
id="iq-token"
className="dark:bg-gray800 bg-[#F9FAFB] dark:text-whiteAlpha-900 text-gray600"
id='iq-token'
className='dark:bg-gray800 bg-[#F9FAFB] dark:text-whiteAlpha-900 text-gray600'
>
<div className="max-w-[1536px] px-4 md:px-10 xl:px-24 2xl:px-[120px] mx-auto py-[48px] sm:py-[80px] xl:py-24">
<div className='max-w-[1536px] px-4 md:px-10 xl:px-24 2xl:px-[120px] mx-auto py-[48px] sm:py-[80px] xl:py-24'>
<TokenBrief
title="The IQ Token"
title='The IQ Token'
description="The IQ token is a cryptocurrency that powers a knowledge ecosystem
that includes the world's largest cryptocurrency and
blockchain encyclopedia, IQ.wiki. IQ token holders can stake their
tokens to participate in governance and get access to additional
features. They can vote on governance decisions and govern
BrainDAO, the native DAO and treasury of the IQ ecosystem."
action="https://iq.wiki"
buttonText="Learn more"
action='https://iq.wiki'
buttonText='Learn more'
/>
<div className="flex flex-col-reverse lg:flex-row items-start mt-16">
<div className="lg:flex-1 w-full overflow-hidden">
<InViewAnimateBottom className="w-full md:w-[80%] xl:w-full h-[300px] sm:h-[450px] lg:h-[380px] xl:h-[500px] relative">
<div className='flex flex-col-reverse lg:flex-row items-start mt-16'>
<div className='lg:flex-1 w-full overflow-hidden'>
<InViewAnimateBottom className='w-full md:w-[80%] xl:w-full h-[300px] sm:h-[450px] lg:h-[380px] xl:h-[500px] relative'>
{imageUrl && (
<Image
src={imageUrl}
alt=""
alt=''
fill
sizes="(max-width:960px) 80vw, 50vw"
className="object-contain"
sizes='(max-width:960px) 80vw, 50vw'
className='object-contain'
/>
)}
</InViewAnimateBottom>
</div>
<div className="flex-1">
<div className='flex-1'>
<InViewAnimateBottom>
<h3 className="dark:text-whiteAlpha-900 text-gray800 text-3xl xl:text-4xl font-semibold">
<h3 className='dark:text-whiteAlpha-900 text-gray800 text-3xl xl:text-4xl font-semibold'>
HiIQ
</h3>
</InViewAnimateBottom>
<InViewAnimateBottom>
<p className="text-sm xl:text-lg dark:text-whiteAlpha-800 text-gray600 mt-4">
<p className='text-sm xl:text-lg dark:text-whiteAlpha-800 text-gray600 mt-4'>
HiIQ, launched to incentivize long-term engagement and
governance participation, allows users to lock up IQ tokens,
increasing HiIQ balance for voting power and earning IQ token
rewards, with 3 million tokens generated daily.
</p>
</InViewAnimateBottom>
<div className="pt-8">
<div className="flex flex-col gap-10 xl:gap-12">
<div className="flex justify-between">
<div className='pt-8'>
<div className='flex flex-col gap-10 xl:gap-12'>
<div className='flex justify-between'>
<StatsPointers
title={`${numFormatter(
marketData?.circulatingSupply || ""
marketData?.circulatingSupply || ''
)} IQ`}
content="Circulating supply"
className="h-[80px] xl:h-[95px] justify-between"
content='Circulating supply'
className='h-[80px] xl:h-[95px] justify-between'
/>
<StatsPointers
title={`$${numFormatter(marketData?.marketCap || "")}`}
content="Market cap"
className="h-[80px] xl:h-[95px] justify-between"
title={`$${numFormatter(marketData?.marketCap || '')}`}
content='Market cap'
className='h-[80px] xl:h-[95px] justify-between'
/>
</div>
<div className="flex justify-between">
<div className='flex justify-between'>
<StatsPointers
title={`$${numFormatter(tvl)}+`}
content="Total HiIQ"
className="h-[80px] xl:h-[95px] justify-between"
content='Total HiIQ'
className='h-[80px] xl:h-[95px] justify-between'
/>
<StatsPointers
title={`${numFormatter(totalHiiqSupply)} IQ+`}
content="Total volume locked"
className="h-[80px] xl:h-[95px] justify-between"
content='Total volume locked'
className='h-[80px] xl:h-[95px] justify-between'
/>
</div>
</div>
Expand Down
Loading

0 comments on commit 8e29bc0

Please sign in to comment.