From 1879a37f53e0a29de644b9420ef74bdb541f3210 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Wed, 3 May 2023 09:33:02 +0300
Subject: [PATCH] Add info message to stalled eras (on unbonding tooltip)
 (#9401)

---
 .nvmrc                                        |  2 +-
 .../react-components/src/StakingUnbonding.tsx | 27 +++++++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/.nvmrc b/.nvmrc
index b6a7d89c68..932b2b01d7 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-16
+18.15
diff --git a/packages/react-components/src/StakingUnbonding.tsx b/packages/react-components/src/StakingUnbonding.tsx
index 4261c30107..9598ea7c83 100644
--- a/packages/react-components/src/StakingUnbonding.tsx
+++ b/packages/react-components/src/StakingUnbonding.tsx
@@ -30,11 +30,12 @@ interface Props {
   stakingInfo?: DeriveStakingAccountPartial;
 }
 
-function extractTotals (stakingInfo?: DeriveStakingAccountPartial, progress?: DeriveSessionProgress): [[Unlocking, BN, BN][], BN] {
+function extractTotals (stakingInfo?: DeriveStakingAccountPartial, progress?: DeriveSessionProgress): [[Unlocking, BN, BN][], BN, boolean] {
   if (!stakingInfo?.unlocking || !progress) {
-    return [[], BN_ZERO];
+    return [[], BN_ZERO, false];
   }
 
+  const isStalled = progress.eraProgress.gt(BN_ZERO) && progress.eraProgress.gt(progress.eraLength);
   const mapped = stakingInfo.unlocking
     .filter(({ remainingEras, value }) => value.gt(BN_ZERO) && remainingEras.gt(BN_ZERO))
     .map((unlock): [Unlocking, BN, BN] => [
@@ -44,11 +45,24 @@ function extractTotals (stakingInfo?: DeriveStakingAccountPartial, progress?: De
         .sub(BN_ONE)
         .imul(progress.eraLength)
         .iadd(progress.eraLength)
-        .isub(progress.eraProgress)
+        .isub(
+          // in the case of a stalled era, this would not be accurate. We apply the mod here
+          // otherwise we would enter into negative values (which is "accurate" since we are
+          // overdue, but confusing since it implied it needed to be done already).
+          //
+          // This does mean that in cases of era stalls we would have an jiggling time, i.e.
+          // would be down and then when a session completes, would be higher again, just to
+          // repeat the cycle again
+          //
+          // See https://github.com/polkadot-js/apps/issues/9397#issuecomment-1532465939
+          isStalled
+            ? progress.eraProgress.mod(progress.eraLength)
+            : progress.eraProgress
+        )
     ]);
   const total = mapped.reduce((total, [{ value }]) => total.iadd(value), new BN(0));
 
-  return [mapped, total];
+  return [mapped, total, isStalled];
 }
 
 function StakingUnbonding ({ className = '', iconPosition = 'left', stakingInfo }: Props): React.ReactElement<Props> | null {
@@ -56,7 +70,7 @@ function StakingUnbonding ({ className = '', iconPosition = 'left', stakingInfo
   const progress = useCall<DeriveSessionProgress>(api.derive.session.progress);
   const { t } = useTranslation();
 
-  const [mapped, total] = useMemo(
+  const [mapped, total, isStalled] = useMemo(
     () => extractTotals(stakingInfo, progress),
     [progress, stakingInfo]
   );
@@ -95,6 +109,9 @@ function StakingUnbonding ({ className = '', iconPosition = 'left', stakingInfo
                 : t<string>('{{eras}} eras remaining', { replace: { eras: formatNumber(eras) } })
               }
             </div>
+            {isStalled && (
+              <div className='faded'>{t<string>('Era is overdue for completion due to current network operating conditions')}</div>
+            )}
           </div>
         ))}
       </Tooltip>