fix: remove homepage contract list, promote staking stats, adjust layout

components/StakingTrend.tsx

@@ -12,7 +12,7 @@ export const StakingTrend = (props: IStakingTrendProps) => {
     new Prisma.Decimal(props.totalStaked) <
     new Prisma.Decimal(props.stakingTarget);
 
-  let dir = "text-center p-3 text-sm ";
+  let dir = "text-center p-2 text-sm ";
   if (isMin || !stakedLessThanTarget) {
     dir += "text-color-error";
   } else if (isMax) {
@@ -36,10 +36,5 @@ export const StakingTrend = (props: IStakingTrendProps) => {
       : "decrease by 1% for the next epochs until APR reaches 2.5%";
   }
 
-  const debugMsg = `apr=${props.apr} staked=${props.totalStaked} target=${props.stakingTarget}`;
-  return (
-    <div className={dir} title={debugMsg}>
-      {note}
-    </div>
-  );
+  return <div className={dir}>{note}</div>;
 };

components/TokenCirculating.tsx

@@ -5,19 +5,17 @@ import { noDecimals, toCurrency } from "../services/format";
 import { type ISupply } from "../services/types";
 
 export const TokenCirculating = (props: ISupply) => {
-  const classTitle =
-    "text-sm text-center leading-8 text-color-cell-title uppercase";
-  const classValue = "font-bold";
   return (
-    <BorderedPanel big={true} title="API3 Circulating Supply">
+    <BorderedPanel big={true} title="Circulating Supply">
       <div className="text-center mb-4">
         <div className="font-bold mb-8 text-3xl">
           {noDecimals(toCurrency(props.circulatingSupply))}
         </div>
-        <div className={classTitle}>Total Locked</div>
-        <div className={classValue}>
+        <div className="text-sm text-center leading-8 text-color-cell-title uppercase">
+          Total Locked
+        </div>
+        <div className="font-bold">
           {noDecimals(toCurrency(props.totalLocked))}
-          <span className="md"> tokens</span>
         </div>
       </div>
     </BorderedPanel>

components/TokenStaking.tsx

@@ -1,30 +1,23 @@
 import React from "react";
 
+import { BorderedPanel } from "../components/BorderedPanel";
 import { noDecimals, toCurrency } from "../services/format";
 import { type ISupply } from "../services/types";
 
 export const TokenStaking = (props: ISupply) => {
-  const classTitle =
-    "text-sm text-center mt-4 pb-2 text-color-cell-title uppercase";
-  const classCell =
-    "text-sm text-center py-4 lg:min-h-96px border-t border-solid border-color-cell-border";
-  const classValue = "font-bold";
   return (
-    <div className="sm:grid grid-cols-2">
-      <div className={classCell}>
-        <div className={classTitle}>Total Staked</div>
-        <span className={classValue}>
+    <BorderedPanel big={true} title="Total Staked">
+      <div className="text-center mb-4">
+        <div className="font-bold mb-8 text-3xl">
           {noDecimals(toCurrency(props.totalStaked))}
-          <span className="md"> tokens</span>
-        </span>
-      </div>
-      <div className={classCell}>
-        <div className={classTitle}>Staking Target</div>
-        <span className={classValue}>
+        </div>
+        <div className="text-sm text-center leading-8 text-color-cell-title uppercase">
+          Staking Target
+        </div>
+        <div className="font-bold">
           {noDecimals(toCurrency(props.stakingTarget))}
-          <span className="md"> tokens</span>
-        </span>
+        </div>
       </div>
-    </div>
+    </BorderedPanel>
   );
 };

components/TokenSupply.tsx

@@ -4,25 +4,17 @@ import { noDecimals, toCurrency } from "../services/format";
 import { type ISupply } from "../services/types";
 
 export const TokenSupply = (props: ISupply) => {
-  const classTitle =
-    "text-sm text-center mt-4 pb-2 text-color-cell-title uppercase";
-  const classCell =
-    "text-sm text-center py-4 lg:min-h-96px border-t border-solid border-color-cell-border";
+  const classTitle = "text-sm text-center pb-2 text-color-cell-title uppercase";
+  const classCell = "text-sm text-center py-2 lg:min-h-96px";
   return (
-    <div className="md:grid grid-cols-3 mx-auto">
+    <div className="md:grid grid-cols-2 mx-auto">
       <div className={classCell}>
         <h3 className={classTitle}>Locked by governance</h3>
-        <strong>
-          {noDecimals(toCurrency(props.lockedByGovernance))} tokens
-        </strong>
-      </div>
-      <div className={classCell}>
-        <h3 className={classTitle}>Locked vestings</h3>
-        <strong>{noDecimals(toCurrency(props.lockedVestings))} tokens</strong>
+        <strong>{noDecimals(toCurrency(props.lockedByGovernance))}</strong>
       </div>
       <div className={classCell}>
         <h3 className={classTitle}>Locked rewards</h3>
-        <strong>{noDecimals(toCurrency(props.lockedRewards))} tokens</strong>
+        <strong>{noDecimals(toCurrency(props.lockedRewards))}</strong>
       </div>
     </div>
   );

pages/index.tsx

@@ -2,7 +2,6 @@ import type { NextPage } from "next";
 import { useState } from "react";
 
 import { Footer, Header, Meta } from "../components/";
-import { ContractsList } from "../components/ContractsList";
 import { Epoch } from "../components/Overview";
 import { StakingTrend } from "../components/StakingTrend";
 import { TokenCirculating } from "../components/TokenCirculating";
@@ -102,15 +101,14 @@ const HomePage: NextPage = (props: any) => {
           ) : (
             <div>
               <h2 className="mt-4 mb-0 font-bold text-center text-2xl uppercase">
-                API3 Token Supply
+                API3 Token Stats
               </h2>
-              <TokenSupply {...supply} />
               <div className="lg:flex mx-auto">
                 <div className="lg:flex-1">
-                  <ContractsList contracts={webconfig.contracts} />
+                  <TokenCirculating {...supply} />
+                  <TokenSupply {...supply} />
                 </div>
                 <div className="lg:flex-1">
-                  <TokenCirculating {...supply} />
                   <TokenStaking {...supply} />
                   <StakingTrend
                     apr={current ? current.apr : 25.75}