Explorer: hide irrelevant delegation information displayed for inactive stake (#16467)

* fix: hide irrelevant delegation information displayed for inactive stake

* fix: when inactive_stake equals delegated_stake, display as initialized

* refactor: clean up logic

* fix: reverse logic on showDelegation

* fix: change copy to not delegated

explorer/src/components/account/StakeAccountSection.tsx

@@ -25,6 +25,9 @@ export function StakeAccountSection({
   stakeAccountType: StakeAccountType;
   activation?: StakeActivationData;
 }) {
+  const hideDelegation =
+    stakeAccountType !== "delegated" ||
+    isFullyInactivated(stakeAccount, activation);
   return (
     <>
       <LockupCard stakeAccount={stakeAccount} />
@@ -32,17 +35,17 @@ export function StakeAccountSection({
         account={account}
         stakeAccount={stakeAccount}
         stakeAccountType={stakeAccountType}
+        activation={activation}
+        hideDelegation={hideDelegation}
       />
-      {stakeAccount.meta && (
-        <>
-          <DelegationCard
-            stakeAccount={stakeAccount}
-            activation={activation}
-            stakeAccountType={stakeAccountType}
-          />
-          <AuthoritiesCard meta={stakeAccount.meta} />
-        </>
+      {!hideDelegation && (
+        <DelegationCard
+          stakeAccount={stakeAccount}
+          activation={activation}
+          stakeAccountType={stakeAccountType}
+        />
       )}
+      <AuthoritiesCard meta={stakeAccount.meta} />
     </>
   );
 }
@@ -68,14 +71,33 @@ const TYPE_NAMES = {
   rewardsPool: "RewardsPool",
 };
 
+function displayStatus(
+  stakeAccountType: StakeAccountType,
+  activation?: StakeActivationData
+) {
+  let status = TYPE_NAMES[stakeAccountType];
+  let activationState = "";
+  if (stakeAccountType !== "delegated") {
+    status = "Not delegated";
+  } else {
+    activationState = activation ? `(${activation.state})` : "";
+  }
+
+  return [status, activationState].join(" ");
+}
+
 function OverviewCard({
   account,
   stakeAccount,
   stakeAccountType,
+  activation,
+  hideDelegation,
 }: {
   account: Account;
   stakeAccount: StakeAccountInfo;
   stakeAccountType: StakeAccountType;
+  activation?: StakeActivationData;
+  hideDelegation: boolean;
 }) {
   const refresh = useFetchAccountInfo();
   return (
@@ -106,20 +128,22 @@ function OverviewCard({
             {lamportsToSolString(account.lamports || 0)}
           </td>
         </tr>
-        {stakeAccount.meta && (
+        <tr>
+          <td>Rent Reserve (SOL)</td>
+          <td className="text-lg-right">
+            {lamportsToSolString(stakeAccount.meta.rentExemptReserve)}
+          </td>
+        </tr>
+        {hideDelegation && (
           <tr>
-            <td>Rent Reserve (SOL)</td>
+            <td>Status</td>
             <td className="text-lg-right">
-              {lamportsToSolString(stakeAccount.meta.rentExemptReserve)}
+              {isFullyInactivated(stakeAccount, activation)
+                ? "Not delegated"
+                : displayStatus(stakeAccountType, activation)}
             </td>
           </tr>
         )}
-        {!stakeAccount.meta && (
-          <tr>
-            <td>State</td>
-            <td className="text-lg-right">{TYPE_NAMES[stakeAccountType]}</td>
-          </tr>
-        )}
       </TableCardBody>
     </div>
   );
@@ -134,18 +158,6 @@ function DelegationCard({
   stakeAccountType: StakeAccountType;
   activation?: StakeActivationData;
 }) {
-  const displayStatus = () => {
-    let status = TYPE_NAMES[stakeAccountType];
-    let activationState = "";
-    if (stakeAccountType !== "delegated") {
-      status = "Not delegated";
-    } else {
-      activationState = activation ? `(${activation.state})` : "";
-    }
-
-    return [status, activationState].join(" ");
-  };
-
   let voterPubkey, activationEpoch, deactivationEpoch;
   const delegation = stakeAccount?.stake?.delegation;
   if (delegation) {
@@ -157,7 +169,6 @@ function DelegationCard({
       ? "-"
       : delegation.deactivationEpoch.toString();
   }
-
   const { stake } = stakeAccount;
   return (
     <div className="card">
@@ -169,7 +180,9 @@ function DelegationCard({
       <TableCardBody>
         <tr>
           <td>Status</td>
-          <td className="text-lg-right">{displayStatus()}</td>
+          <td className="text-lg-right">
+            {displayStatus(stakeAccountType, activation)}
+          </td>
         </tr>
 
         {stake && (
@@ -225,7 +238,7 @@ function DelegationCard({
 }
 
 function AuthoritiesCard({ meta }: { meta: StakeMeta }) {
-  const hasLockup = meta && meta.lockup.unixTimestamp > 0;
+  const hasLockup = meta.lockup.unixTimestamp > 0;
   return (
     <div className="card">
       <div className="card-header">
@@ -260,3 +273,16 @@ function AuthoritiesCard({ meta }: { meta: StakeMeta }) {
     </div>
   );
 }
+
+function isFullyInactivated(
+  stakeAccount: StakeAccountInfo,
+  activation?: StakeActivationData
+): boolean {
+  const { stake } = stakeAccount;
+
+  if (!stake || !activation) {
+    return false;
+  }
+
+  return stake.delegation.stake.toString() === activation.inactive.toString();
+}