cleanup

0LNetworkCommunity · Jun 7, 2024 · cfbc177 · cfbc177
1 parent 1912a45
commit cfbc177
Show file tree

Hide file tree

Showing 19 changed files with 316 additions and 435 deletions.
diff --git a/web-app/src/contants.tsx b/web-app/src/contants.tsx
@@ -5,58 +5,3 @@ export const OL_LANDING_LINK = 'https://0l.network/';
 export const OL_DISCORD_URL = 'https://discord.gg/0lnetwork';
 
 export const OL_COINGECKO_URL = 'https://www.coingecko.com/en/coins/0l-network';
-
-export const SOCIAL_LINKS: Record<
-  string,
-  {
-    label: string;
-    href: string;
-    logoSvg: JSX.Element;
-  }
-> = {
-  discord: {
-    label: 'Discord',
-    href: 'https://discord.com/invite/0lnetwork',
-    logoSvg: (
-      <svg
-        height={24}
-        width={24}
-        fill="white"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 640 512"
-      >
-        <path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z" />
-      </svg>
-    ),
-  },
-  x: {
-    label: 'X',
-    href: 'https://twitter.com/0LNetwork',
-    logoSvg: (
-      <svg
-        height={24}
-        width={24}
-        fill="white"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 512 512"
-      >
-        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
-      </svg>
-    ),
-  },
-  github: {
-    label: 'Github',
-    href: 'https://github.com/0LNetworkCommunity',
-    logoSvg: (
-      <svg
-        height={24}
-        width={24}
-        fill="white"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 496 512"
-      >
-        <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
-      </svg>
-    ),
-  },
-};
diff --git a/web-app/src/modules/core/router.tsx b/web-app/src/modules/core/router.tsx
@@ -11,7 +11,6 @@ import AccountModules from './routes/Account/Modules';
 import Block from './routes/Block';
 import Root from './Root';
 import Validators from './routes/Validators';
-import Test from './routes/Test';
 import Module from './routes/Account/Modules/Module';
 import Stats from './routes/Stats';
 import Postero from './routes/Postero';
@@ -86,10 +85,6 @@ const router = createBrowserRouter([
         path: '/postero',
         element: <Postero />,
       },
-      {
-        path: '/test',
-        element: <Test />,
-      },
     ],
   },
 ]);

diff --git a/web-app/src/modules/core/routes/Home/Home.tsx b/web-app/src/modules/core/routes/Home/Home.tsx
@@ -1,12 +1,12 @@
 import { gql, useQuery } from '@apollo/client';
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
+import { ArrowUpRightIcon } from '@heroicons/react/20/solid';
+
 import Page from '../../../ui/Page/Page';
 import TransactionsTable from '../../../ui/UserTransactionsTable';
 import Stats from './Stats';
-import { ArrowUpRightIcon } from '@heroicons/react/20/solid';
 import { OL_DISCORD_URL } from '../../../../contants';
-// import NodeMap from '../../../ui/NodeMap';
 
 const GET_USER_TRANSACTIONS = gql`
   query GetUserTransactions {
@@ -36,9 +36,9 @@ const Transactions: FC = () => {
 
 const Home: FC = () => {
   return (
-    <>
+    <Page>
       <section className="pt-5 lg:pt-20 pb-12 lg:pb-8">
-        <div className="max-w-[1200px] mx-auto px-3">
+        <div className="px-3">
           <div className="flex flex-col lg:flex-row justify-between gap-6">
             <div className="max-w-max lg:max-w-2xl">
               <h1 className="pb-3 font-medium text-5xl text-[#141414]">0L Network Explorer</h1>
@@ -58,19 +58,17 @@ const Home: FC = () => {
           </div>
         </div>
       </section>
-      <Page __deprecated_grayBg={false} mainClassName={'max-w-[1200px] w-full mx-auto'}>
-        <Stats />
-        <section className="mt-2 overflow-x-auto">
-          <div className="my-6 px-2	flex flex-row justify-between align-center gap-3">
-            <h2 className="text-[#141414] text-xl font-medium">Latest Transactions</h2>
-            <Link to="/transactions" className="text-base font-medium text-[#B7353B]">
-              View all
-            </Link>
-          </div>
-          <Transactions />
-        </section>
-      </Page>
-    </>
+      <Stats />
+      <section className="mt-2 overflow-x-auto">
+        <div className="my-6 px-2	flex flex-row justify-between align-center gap-3">
+          <h2 className="text-[#141414] text-xl font-medium">Latest Transactions</h2>
+          <Link to="/transactions" className="text-base font-medium text-[#B7353B]">
+            View all
+          </Link>
+        </div>
+        <Transactions />
+      </section>
+    </Page>
   );
 };
 

diff --git a/web-app/src/modules/core/routes/Home/Stats.tsx b/web-app/src/modules/core/routes/Home/Stats.tsx
@@ -4,21 +4,47 @@ import { Link, NavLink } from 'react-router-dom';
 import useAptos from '../../../aptos';
 import { useLedgerInfo, useTotalSupply, useValidatorSet } from '../../../ol';
 import Countdown from '../../../ui/Countdown';
-import PriceStats from './Stats/PriceStats';
 import NodeMap from '../../../ui/NodeMap';
 
+const Validators = () => {
+  const validatorSet = useValidatorSet();
+
+  return (
+    <div className="bg-[#F5F5F5] p-5 relative overflow-hidden min-h-60">
+      <div className="flex flex-col gap-4 relative z-20">
+        <NavLink to="/validators" className="text-xl font-bold">
+          Validators
+        </NavLink>
+        <div className="grid grid-cols-2 md:grid-cols-1 gap-2">
+          <div className="flex flex-col">
+            <span className="text-lg font-extralight">Total Validators</span>
+            <span className="text-xl font-medium">
+              {validatorSet ? validatorSet.active_validators.length : null}
+            </span>
+          </div>
+
+          {/* <div className="flex flex-col">
+            <span className="text-lg font-extralight">Eligible</span>
+            <span className="text-xl font-medium">70</span>
+          </div> */}
+        </div>
+      </div>
+      <div className="md:absolute md:top-[-80px] md:right-[-90px] md:h-[300px] md:w-[600px] z-10">
+        <NodeMap />
+      </div>
+    </div>
+  );
+};
+
 const Stats: FC = () => {
   const aptos = useAptos();
 
   const [nextEpoch, setNextEpoch] = useState<Date>();
   const [nextEpochDate, setNextEpochDate] = useState<string>();
 
   const totalSupply = useTotalSupply();
-  const validatorSet = useValidatorSet();
   const ledgerInfo = useLedgerInfo();
 
-  const dev = location.search.includes('dev=true');
-
   useEffect(() => {
     let timeout: NodeJS.Timeout | undefined = undefined;
     const load = async () => {
@@ -63,35 +89,14 @@ const Stats: FC = () => {
   }, []);
 
   return (
-    <dl className="flex flex-col gap-[4px]">
-      {dev && (
-        <div className="grid grid-cols-1 gap-[4px] md:grid-cols-2">
-          <PriceStats />
-
-          <div className="bg-[#F5F5F5] p-5 relative overflow-hidden">
-            <div className="flex flex-col gap-4 relative z-20">
-              <span className="text-xl font-bold">Validator Map</span>
-              <div className="grid grid-cols-2 md:grid-cols-1 gap-2">
-                {/* @TODO: DUMMY DATA */}
-                <div className="flex flex-col">
-                  <span className="text-lg font-extralight">Total Validators</span>
-                  <span className="text-xl font-medium">15</span>
-                </div>
-                {/* @TODO: DUMMY DATA */}
-                <div className="flex flex-col">
-                  <span className="text-lg font-extralight">Eligible</span>
-                  <span className="text-xl font-medium">70</span>
-                </div>
-              </div>
-            </div>
-            <div className="md:absolute md:top-[-80px] md:right-[-90px] md:h-[300px] md:w-[600px] z-10">
-              <NodeMap />
-            </div>
-          </div>
+    <dl className="flex flex-col">
+      <div className="grid md:grid-cols-4 grid-cols-2 gap-2">
+        {/* <PriceStats /> */}
+
+        <div className="row-span-2 col-span-2">
+          <Validators />
         </div>
-      )}
 
-      <div className="grid grid-cols-2 gap-[4px] md:grid-cols-4">
         <div className="flex flex-col bg-[#F5F5F5] p-5 gap-2">
           <span className="text-sm font-medium text-[#525252]">Total Supply</span>
           <span
@@ -128,17 +133,6 @@ const Stats: FC = () => {
           </span>
         </div>
 
-        <NavLink to="/validators" className="flex flex-col bg-[#F5F5F5] p-5 gap-2">
-          <span className="text-sm font-medium text-[#525252]">Validators</span>
-          <span
-            className={`hover:underline text-2xl md:text-3xl tracking-tight text-[#141414] h-8 rounded ${
-              !validatorSet ? 'animate-pulse bg-gray-300 space-y-4' : ''
-            }`}
-          >
-            {validatorSet ? validatorSet.active_validators.length : null}
-          </span>
-        </NavLink>
-
         <div className="flex flex-col bg-[#F5F5F5] p-5">
           <span className="text-sm font-medium text-[#525252]">
             Next Epoch
@@ -159,7 +153,7 @@ const Stats: FC = () => {
           </span>
         </div>
 
-        {dev && (
+        {false && (
           <>
             {/* @TODO: DUMMY DATA */}
             <div className="flex flex-col bg-[#F5F5F5] p-5 gap-2">

diff --git a/web-app/src/modules/core/routes/Home/Stats/PriceStats.tsx b/web-app/src/modules/core/routes/Home/Stats/PriceStats.tsx
@@ -7,6 +7,9 @@ import { OL_COINGECKO_URL } from '../../../../../contants';
 import CoingeckoLogo from '../../../../assets/images/coingecko.png';
 
 const PriceStats: FC = () => {
+
+  const dev = location.search.includes('dev=true');
+
   const priceIsIncreasing = true;
 
   const upIcon = (
@@ -63,41 +66,47 @@ const PriceStats: FC = () => {
         </div>
       </div>
       {/* @TODO: DUMMY DATA */}
-      <div className="flex gap-0.5 items-end mt-2">
-        <span className="text-4xl	font-medium mr-2">$0.00000</span>
-        {priceIsIncreasing ? upIcon : downIcon}
-        <span
-          className={clsx(
-            `flex gap-2 font-medium text-sm ${
-              priceIsIncreasing ? `text-[#079455]` : `text-red-600`
-            }`,
-          )}
-        >
-          2.57%
-        </span>
-      </div>
-      {/* @TODO: DUMMY DATA */}
-      <div className="flex flex-col py-5 gap-2 border-b border-[#E5E5E5]">
-        <div className="flex justify-between items-center">
-          <span className="text-lg font-extralight">Marketcap</span>
-          <span className="text-lg font-medium">$000,000,000</span>
-        </div>
-        <div className="flex justify-between items-center">
-          <span className="text-lg font-extralight">Trading Volume (24hrs)</span>
-          <span className="text-lg font-medium">$000,000</span>
+      {dev && (
+        <div className="flex gap-0.5 items-end mt-2">
+          <span className="text-4xl	font-medium mr-2">$0.00000</span>
+          {priceIsIncreasing ? upIcon : downIcon}
+          <span
+            className={clsx(
+              `flex gap-2 font-medium text-sm ${
+                priceIsIncreasing ? `text-[#079455]` : `text-red-600`
+              }`,
+            )}
+          >
+            2.57%
+          </span>
         </div>
-      </div>
+      )}
       {/* @TODO: DUMMY DATA */}
-      <div className="grid grid-cols-2 pt-5 gap-2">
-        <div className="flex flex-col items-start">
-          <span className="text-lg font-extralight">Marketcap</span>
-          <span className="text-lg font-medium">$000,000,000</span>
-        </div>
-        <div className="flex flex-col items-start">
-          <span className="text-lg font-extralight">Trading Volume (24hrs)</span>
-          <span className="text-lg font-medium">$000,000</span>
-        </div>
-      </div>
+      {dev && (
+        <>
+          <div className="flex flex-col py-5 gap-2 border-b border-[#E5E5E5]">
+            <div className="flex justify-between items-center">
+              <span className="text-lg font-extralight">Marketcap</span>
+              <span className="text-lg font-medium">$000,000,000</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-lg font-extralight">Trading Volume (24hrs)</span>
+              <span className="text-lg font-medium">$000,000</span>
+            </div>
+          </div>
+          {/* @TODO: DUMMY DATA */}
+          <div className="grid grid-cols-2 pt-5 gap-2">
+            <div className="flex flex-col items-start">
+              <span className="text-lg font-extralight">Marketcap</span>
+              <span className="text-lg font-medium">$000,000,000</span>
+            </div>
+            <div className="flex flex-col items-start">
+              <span className="text-lg font-extralight">Trading Volume (24hrs)</span>
+              <span className="text-lg font-medium">$000,000</span>
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 };