Add subNetwork % staked

src/app/stats/components/Governance/MetricsRow.tsx

@@ -73,7 +73,7 @@ export const MetricsRow = ({
             }}
           />
         </div>
-        <div className="flex grow gap-3">
+        <div className="flex grow gap-2">
           <GovernanceStatItem
             header={`ve${token} voting power`}
             values={[

src/app/stats/components/StatItem.tsx

@@ -44,7 +44,7 @@ export const StatItem = ({
   return (
     <div
       className={clsx(
-        "w-15 flex-1 flex-col justify-between gap-2 rounded-xl border p-4",
+        "min-w-[150px] flex-1 flex-col justify-between gap-2 rounded-xl border p-4",
         "border-zinc-900/5 bg-white text-zinc-800 shadow",
         "dark:border-white/10 dark:bg-slate-900 dark:text-slate-100"
       )}

src/app/stats/components/StatsList.tsx

@@ -49,7 +49,7 @@ export const StatsList = ({
           </Link>
         )}
       </div>
-      <div className="flex flex-wrap gap-3">
+      <div className="flex flex-wrap gap-2">
         <>{children}</>
       </div>
     </div>

src/app/stats/components/SubDaoInfo.tsx

@@ -1,6 +1,7 @@
 import { StatItem } from "@/app/stats/components/StatItem"
 import { Icon, StatsList } from "@/app/stats/components/StatsList"
 import { fetcher, humanReadableVeToken } from "@/app/stats/utils"
+import { BN } from "@coral-xyz/anchor"
 import {
   IOT_MINT,
   MOBILE_MINT,
@@ -11,6 +12,7 @@ import {
 } from "@helium/spl-utils"
 import { PublicKey } from "@solana/web3.js"
 import { isBefore } from "date-fns"
+import { fetchSubDaoGovernanceStats } from "../utils/fetchGovernanceMetrics"
 import { fetchMint } from "../utils/fetchMint"
 import { fetchSubDaoEpochInfo } from "../utils/fetchSubDaoEpochInfo"
 import { fetchSubDaoTreasuryInfo } from "../utils/fetchSubDaoTreasuryInfo"
@@ -68,12 +70,15 @@ export const SubDaoInfo = async ({ subDao }: { subDao: SubDao }) => {
     dailyEmissions,
     maxDescription,
   } = subDao === "mobile" ? MOBILE_INFO : IOT_INFO
-  const [activeCount, mintInfo, epochInfo, treasuryInfo] = await Promise.all([
-    fetcher(activeUrl),
-    fetchMint(subDaoMint),
-    fetchSubDaoEpochInfo(subDao),
-    fetchSubDaoTreasuryInfo(subDaoMint),
-  ])
+  const [activeCount, mintInfo, epochInfo, treasuryInfo, governanceMetrics] =
+    await Promise.all([
+      fetcher(activeUrl),
+      fetchMint(subDaoMint),
+      fetchSubDaoEpochInfo(subDao),
+      fetchSubDaoTreasuryInfo(subDaoMint),
+      fetchSubDaoGovernanceStats(subDao),
+    ])
+
   const treasuryTokenAcct = await fetchTokenAccount(treasuryInfo.info?.treasury)
   const mintSupplyNum =
     toNumber(mintInfo.info?.info.supply, mintInfo?.info?.info || 6) || 0
@@ -86,6 +91,10 @@ export const SubDaoInfo = async ({ subDao }: { subDao: SubDao }) => {
   const maxSupply =
     mintInfo.info?.info.supply! + BigInt(remainingEmissions) * BigInt(1000000)
 
+  const supplyStaked = governanceMetrics.total.hnt
+    .mul(new BN(10000))
+    .div(new BN(mintInfo.info?.info.supply!))
+
   return (
     <StatsList title={title} link={link} linkText={linkText} icon={icon}>
       <StatItem
@@ -189,6 +198,14 @@ export const SubDaoInfo = async ({ subDao }: { subDao: SubDao }) => {
           id: `${title} Estimated Swap`,
         }}
       />
+      <StatItem
+        label="Supply Staked"
+        value={`${supplyStaked.toNumber() / 100}%`}
+        tooltip={{
+          description: `Percent of current ${title} which is staked as ve${title} on Realms.`,
+          id: `${title} Supply Staked`,
+        }}
+      />
     </StatsList>
   )
 }