From b5292e68e490973389d572603a7b1c0be5e0a0b2 Mon Sep 17 00:00:00 2001
From: Yaki <shibatales@gmail.com>
Date: Wed, 6 Dec 2023 22:49:17 -0600
Subject: [PATCH] chore: fix staking dashboard values not loading

---
 src/components/DashboardCard.tsx    |  9 +++++----
 src/components/StakingDashboard.tsx | 27 ++++++++++++++++++++-------
 src/modals/ManageStaking.tsx        | 16 +---------------
 src/routes/staking.tsx              | 24 ++++--------------------
 4 files changed, 30 insertions(+), 46 deletions(-)

diff --git a/src/components/DashboardCard.tsx b/src/components/DashboardCard.tsx
index 1635b87..38afb61 100644
--- a/src/components/DashboardCard.tsx
+++ b/src/components/DashboardCard.tsx
@@ -2,21 +2,22 @@ import React, { ReactNode } from 'react';
 
 interface DashboardCardProps {
   children: ReactNode;
-  cardTitle: string;
+  cardTitle: string | ReactNode;
   iconSrc?: string;
+  leading?: string;
 }
 
 const DashboardCard = (props: DashboardCardProps) => {
-  const { children, cardTitle, iconSrc } = props;
+  const { children, cardTitle, iconSrc, leading } = props;
   return (
     <div className="min-w-[151px] h-[194px] bg-tinkerDarkGrey rounded-lg p-8 flex flex-col justify-between items-center">
       <div className="w-[48px] h-[48px] bg-[#393a3e] rounded-full mx-auto flex items-center justify-center">
         {iconSrc && <img src={iconSrc} alt="icon" />}
       </div>
-      <div className="font-bold text-white leading-tight text-md text-center">
+      <div className={`font-bold text-white leading-tight text-md text-center`}>
         {children}
       </div>
-      <div className="font-normal text-tinkerTextGrey text-[12px] text-center leading-none whitespace-nowrap">
+      <div className={`font-normal text-tinkerTextGrey text-[12px] text-center ${ leading ? leading : 'leading-none' } whitespace-nowrap`}>
         {cardTitle}
       </div>
     </div>
diff --git a/src/components/StakingDashboard.tsx b/src/components/StakingDashboard.tsx
index 2ba9ac9..b39fa17 100644
--- a/src/components/StakingDashboard.tsx
+++ b/src/components/StakingDashboard.tsx
@@ -50,12 +50,25 @@ const StakingDashboard = (props: StakingDashboardProps) => {
         }) || "0 TNKR"}
       </DashboardCard>
 
-      <DashboardCard cardTitle="Total Supply Staked" iconSrc={AggregateStakedIcon}>
-        {formatBalance(aggregateStaked.toString(), {
-          decimals: 12,
-          withUnit: 'TNKR',
-          forceUnit: "-",
-        }) || "0 TNKR"}
+      <DashboardCard
+        cardTitle={
+          <>
+            {"Staked from Total"}
+            <br />
+            {/* {"Circulating Supply"}
+            <br /> */}
+            {formatBalance(aggregateStaked.toString(), {
+              decimals: 12,
+              withUnit: "TNKR",
+              forceUnit: "-",
+            }) || "0"}
+
+          </>
+        }
+        iconSrc={AggregateStakedIcon}
+        leading="leading-tight"
+      >
+        {totalStaked && totalStaked.toNumber() > 0 && aggregateStaked && aggregateStaked.toNumber() > 0 ? totalStaked.dividedBy(aggregateStaked).times(100).toFixed(2) : 0}%
       </DashboardCard>
 
       <DashboardCard cardTitle="Staking APY" iconSrc={StakingApyIcon}>
@@ -106,7 +119,7 @@ const StakingDashboard = (props: StakingDashboardProps) => {
         {currentStakingEra}
       </DashboardCard>
 
-      <DashboardCard cardTitle="% Til Next Redeem" iconSrc={CompletionRateIcon}>
+      <DashboardCard cardTitle="% Til Next Era" iconSrc={CompletionRateIcon}>
         {(
           ((currentBlock - (nextEraBlock - blocksPerEra)) /
             (nextEraBlock - (nextEraBlock - blocksPerEra))) *
diff --git a/src/modals/ManageStaking.tsx b/src/modals/ManageStaking.tsx
index ffb80d3..30a0587 100644
--- a/src/modals/ManageStaking.tsx
+++ b/src/modals/ManageStaking.tsx
@@ -311,7 +311,7 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => {
                 <Tab.Group>
                   {metadata?.totalUserStaked &&
                     metadata?.totalUserStaked.toString() !== "0" ? (
-                    <Tab.List className="flex gap-6 space-x-1 rounded-md bg-neutral-900">
+                    <Tab.List className="flex gap-3 space-x-1 rounded-md bg-neutral-900">
                       <Tab
                         key={mode.STAKE}
                         className={({ selected }) =>
@@ -370,13 +370,6 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => {
                           />
 
                           <div className="absolute inset-y-0 right-0 flex items-center gap-4 pr-3">
-                            <span
-                              className="pointer-events-none block text-white text-xs"
-                              id="currency"
-                            >
-                              TNKR
-                            </span>
-
                             <span
                               className="block cursor-pointer text-white text-xs"
                               id="currency"
@@ -430,13 +423,6 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => {
                           />
 
                           <div className="absolute inset-y-0 right-0 flex items-center gap-4 pr-3">
-                            <span
-                              className="pointer-events-none block text-white text-xs"
-                              id="currency"
-                            >
-                              TNKR
-                            </span>
-
                             <span
                               className="block cursor-pointer text-white text-xs"
                               id="currency"
diff --git a/src/routes/staking.tsx b/src/routes/staking.tsx
index eedd9d8..1a28e17 100644
--- a/src/routes/staking.tsx
+++ b/src/routes/staking.tsx
@@ -116,7 +116,6 @@ export type CorePrimitiveType = {
 const Staking = () => {
   const api = useApi();
   const descriptionRef = useRef<HTMLDivElement | null>(null);
-  const mountedRef = useRef(false);
   const setOpenModal = useModal((state) => state.setOpenModal);
   const selectedAccount = useAccount((state) => state.selectedAccount);
   const [hasUnbondedTokens, setHasUnbondedTokens] = useState(false);
@@ -238,7 +237,6 @@ const Staking = () => {
 
       api.query.ocifStaking.ledger(selectedAccount.address, (c: Codec) => {
         const ledger = c.toPrimitive() as LedgerType;
-
         setHasUnbondedTokens(ledger.unbondingInfo.unlockingChunks.length > 0);
       });
 
@@ -247,15 +245,12 @@ const Staking = () => {
         selectedAccount.address,
         (generalStakerInfo: Codec) => {
           const info = generalStakerInfo.toPrimitive() as StakesInfo;
-
           if (info.stakes.length > 0) {
             const unclaimedEarliest = info.stakes.reduce((p, v) => p.era < v.era ? p : v).era;
-
             if (parseInt(unclaimedEarliest) < currentStakingEra) {
               const unclaimed = unclaimedEras;
-
               const cores = unclaimed.cores.filter((value) => {
-                return value.coreId != stakingCore.key;
+                return value.coreId === stakingCore.key;
               });
 
               cores.push({
@@ -264,14 +259,11 @@ const Staking = () => {
               });
 
               let total = unclaimed.total;
-
-              if (currentStakingEra - parseInt(unclaimedEarliest) > total) {
-                total = currentStakingEra - parseInt(unclaimedEarliest);
-              }
+              total = currentStakingEra - parseInt(unclaimedEarliest);
 
               setUnclaimedEras({
                 cores,
-                total: unclaimed.total,
+                total,
               });
             } else {
               setUnclaimedEras((unclaimedEras) => ({
@@ -351,6 +343,7 @@ const Staking = () => {
 
     for (const stakingCore of stakingCores) {
       const coreEraStake = (await api.query.ocifStaking.coreEraStake(stakingCore.key, currentStakingEra)).toPrimitive() as CoreEraStakeType;
+      console.log('coreEraStake', coreEraStake);
       coreEraStakeInfo.push({ coreId: stakingCore.key, account: stakingCore.account, ...coreEraStake });
     }
 
@@ -512,14 +505,6 @@ const Staking = () => {
     );
   }
 
-  useEffect(() => {
-    mountedRef.current = true;
-
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
   useSubscription(
     {
       query: TotalRewardsClaimedSubscription,
@@ -534,7 +519,6 @@ const Staking = () => {
       _: unknown,
       result: { stakers: { latestClaimBlock: number; totalRewards: string; }[]; }
     ) => {
-      if (!mountedRef.current) return;
       if (result.stakers.length === 0) return;
 
       if (!result.stakers[0].totalRewards) return;