From 43c382469def5f7b0bb23fa24a233a123a3a3b61 Mon Sep 17 00:00:00 2001
From: eshark9312 <eshark9312@outlook.com>
Date: Mon, 24 Jul 2023 13:50:50 -0500
Subject: [PATCH] fix some issue in Era widget

---
 .../Validators/ValidatorList.stories.tsx      |  4 ----
 .../validators/components/statistics/Era.tsx  |  4 ++--
 .../validators/hooks/useStakingStatistics.tsx | 21 ++++++++++---------
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/app/pages/Validators/ValidatorList.stories.tsx b/packages/ui/src/app/pages/Validators/ValidatorList.stories.tsx
index 782d608bc7..a12c0be257 100644
--- a/packages/ui/src/app/pages/Validators/ValidatorList.stories.tsx
+++ b/packages/ui/src/app/pages/Validators/ValidatorList.stories.tsx
@@ -34,14 +34,11 @@ export default {
               ],
             },
           },
-
           query: {
             balances: {
               totalIssuance: joy(1000000),
             },
-
             timestamp: { now: Date.now() },
-
             session: {
               validators: [
                 'j4RLnWh3DWgc9u4CMprqxfBhq3kthXhvZDmnpjEtETFVm446D',
@@ -56,7 +53,6 @@ export default {
                 'j4S998Thq5kQHyurofh8QfHrcFN2c1T19gTdMGUVVx5EHKgky',
               ],
             },
-
             staking: {
               activeEra: {
                 index: 700,
diff --git a/packages/ui/src/validators/components/statistics/Era.tsx b/packages/ui/src/validators/components/statistics/Era.tsx
index 7bf00f9155..f27841d7a3 100644
--- a/packages/ui/src/validators/components/statistics/Era.tsx
+++ b/packages/ui/src/validators/components/statistics/Era.tsx
@@ -22,9 +22,9 @@ interface EraProps {
 
 export const Era = ({ eraStartedOn, eraDuration, now, eraRewardPoints }: EraProps) => {
   const { nextReward, percentage } = useMemo(() => {
-    const nextReward = now && eraStartedOn && eraDuration - Number(now) - Number(eraStartedOn)
+    const nextReward = now && eraStartedOn && eraDuration - (Number(now) - Number(eraStartedOn))
     const totalDuration = Number(eraDuration)
-    const percentage = nextReward ? Math.floor(100 - (nextReward / totalDuration) * 100) : 0
+    const percentage = nextReward ? Math.ceil(100 - (nextReward / totalDuration) * 100) : 0
     return {
       nextReward: formatDurationDate(nextReward ?? 0),
       totalDuration: formatDurationDate(totalDuration ?? 0),
diff --git a/packages/ui/src/validators/hooks/useStakingStatistics.tsx b/packages/ui/src/validators/hooks/useStakingStatistics.tsx
index d25aaf81b5..c10e0b45aa 100644
--- a/packages/ui/src/validators/hooks/useStakingStatistics.tsx
+++ b/packages/ui/src/validators/hooks/useStakingStatistics.tsx
@@ -22,17 +22,18 @@ export const useStakingStatistics = () => {
   const now = useObservable(() => api?.query.timestamp.now(), [api?.isConnected])
   const totalIssuance = useObservable(() => api?.query.balances.totalIssuance(), [api?.isConnected])
   const currentStaking = useObservable(
-    () => activeEra && api?.query.staking.erasTotalStake(activeEra.eraIndex),
+    () => activeEra && api && api.query.staking.erasTotalStake(activeEra.eraIndex),
     [activeEra, api?.isConnected]
   )
   const activeValidators = useObservable(() => api?.query.session.validators(), [api?.isConnected])
-  const stakers = useObservable(() => {
-    if (activeValidators && api)
-      return (
-        activeEra &&
-        combineLatest(activeValidators.map((address) => api.query.staking.erasStakers(activeEra.eraIndex, address)))
-      )
-  }, [api?.isConnected, activeValidators, activeEra])
+  const stakers = useObservable(
+    () =>
+      activeValidators &&
+      api &&
+      activeEra &&
+      combineLatest(activeValidators.map((address) => api.query.staking.erasStakers(activeEra.eraIndex, address))),
+    [api?.isConnected, activeValidators, activeEra]
+  )
   const acitveNominators = useMemo(() => {
     const nominators = stakers?.map((validator) => validator.others.map((nominator) => nominator.who.toString()))
     const uniqueNominators = [...new Set(nominators?.flat())]
@@ -41,7 +42,7 @@ export const useStakingStatistics = () => {
   const allValidatorsCount = useObservable(() => api?.query.staking.counterForValidators(), [api?.isConnected])
   const allNominatorsCount = useObservable(() => api?.query.staking.counterForNominators(), [api?.isConnected])
   const lastValidatorRewards = useObservable(
-    () => activeEra && api?.query.staking.erasValidatorReward(activeEra.eraIndex.subn(1)),
+    () => activeEra && api && api.query.staking.erasValidatorReward(activeEra.eraIndex.subn(1)),
     [activeEra, api?.isConnected]
   )
   const totalRewards = useObservable(() => api?.derive.staking.erasRewards(), [api?.isConnected])
@@ -50,7 +51,7 @@ export const useStakingStatistics = () => {
     [currentStaking, totalIssuance]
   )
   const eraRewardPoints = useObservable(
-    () => activeEra && api?.query.staking.erasRewardPoints(activeEra.eraIndex),
+    () => activeEra && api && api.query.staking.erasRewardPoints(activeEra.eraIndex),
     [activeEra, api?.isConnected]
   )
   return {