From 7bdf3a3e99ebe96e0a2873ede72faebd00d936d5 Mon Sep 17 00:00:00 2001
From: ryuash <ryuash123@gmail.com>
Date: Fri, 10 Sep 2021 11:23:50 +0800
Subject: [PATCH 1/2] fix: validator and account details rendering problem

---
 src/components/avatar/index.tsx        |   4 +-
 src/screens/account_details/hooks.ts   |   5 +-
 src/screens/validator_details/hooks.ts | 117 ++++++++++++-------------
 3 files changed, 60 insertions(+), 66 deletions(-)

diff --git a/src/components/avatar/index.tsx b/src/components/avatar/index.tsx
index 54b0fbc7bf..f29828c5cd 100644
--- a/src/components/avatar/index.tsx
+++ b/src/components/avatar/index.tsx
@@ -17,9 +17,7 @@ const Avatar: React.FC<{
   const icon = useRef(null);
   const [error, setError] = useState<boolean>(false);
   useEffect(() => {
-    if (!imageUrl) {
-      jdenticon.update(icon.current, address);
-    }
+    jdenticon.update(icon.current, address);
   }, [address, error, imageUrl]);
 
   const handleError = () => {
diff --git a/src/screens/account_details/hooks.ts b/src/screens/account_details/hooks.ts
index 182d7daa8b..628a404eda 100644
--- a/src/screens/account_details/hooks.ts
+++ b/src/screens/account_details/hooks.ts
@@ -99,10 +99,7 @@ export const useAccountDetails = () => {
   });
 
   useEffect(() => {
-    handleSetState({
-      loading: true,
-      exists: true,
-    });
+    handleSetState(initialState);
     if (chainConfig.extra.desmosProfile) {
       fetchDesmosProfile(R.pathOr('', ['query', 'address'], router));
     }
diff --git a/src/screens/validator_details/hooks.ts b/src/screens/validator_details/hooks.ts
index 9bc0988e4d..7de672a9a8 100644
--- a/src/screens/validator_details/hooks.ts
+++ b/src/screens/validator_details/hooks.ts
@@ -24,6 +24,62 @@ import {
 } from '@models';
 import { ValidatorDetailsState } from './types';
 
+const initialState = {
+  loading: true,
+  exists: true,
+  desmosProfile: null,
+  overview: {
+    validator: {
+      imageUrl: '',
+      moniker: '',
+    },
+    operatorAddress: '',
+    selfDelegateAddress: '',
+    description: '',
+    website: '',
+  },
+  status: {
+    status: 0,
+    jailed: false,
+    condition: 0,
+    commission: 0,
+    missedBlockCounter: 0,
+    signedBlockWindow: 0,
+    lastSeen: '',
+  },
+  votingPower: {
+    height: 0,
+    overall: {
+      value: 0,
+      denom: '',
+    },
+    self: 0,
+    selfDelegatePercent: 0,
+    selfDelegate: {
+      value: 0,
+      denom: '',
+    },
+  },
+  delegations: {
+    count: 0,
+    data: [],
+  },
+  redelegations: {
+    count: 0,
+    data: [],
+  },
+  undelegations: {
+    count: 0,
+    data: [],
+  },
+  transactions: {
+    data: [],
+    hasNextPage: false,
+    isNextPageLoading: false,
+    offsetCount: 0,
+  },
+};
+
 export const useValidatorDetails = () => {
   const router = useRouter();
   const {
@@ -31,61 +87,7 @@ export const useValidatorDetails = () => {
     findOperator,
     validatorToDelegatorAddress,
   } = useChainContext();
-  const [state, setState] = useState<ValidatorDetailsState>({
-    loading: true,
-    exists: true,
-    desmosProfile: null,
-    overview: {
-      validator: {
-        imageUrl: '',
-        moniker: '',
-      },
-      operatorAddress: '',
-      selfDelegateAddress: '',
-      description: '',
-      website: '',
-    },
-    status: {
-      status: 0,
-      jailed: false,
-      condition: 0,
-      commission: 0,
-      missedBlockCounter: 0,
-      signedBlockWindow: 0,
-      lastSeen: '',
-    },
-    votingPower: {
-      height: 0,
-      overall: {
-        value: 0,
-        denom: '',
-      },
-      self: 0,
-      selfDelegatePercent: 0,
-      selfDelegate: {
-        value: 0,
-        denom: '',
-      },
-    },
-    delegations: {
-      count: 0,
-      data: [],
-    },
-    redelegations: {
-      count: 0,
-      data: [],
-    },
-    undelegations: {
-      count: 0,
-      data: [],
-    },
-    transactions: {
-      data: [],
-      hasNextPage: false,
-      isNextPageLoading: false,
-      offsetCount: 0,
-    },
-  });
+  const [state, setState] = useState<ValidatorDetailsState>(initialState);
 
   const handleSetState = (stateChange: any) => {
     setState((prevState) => R.mergeDeepLeft(stateChange, prevState));
@@ -105,10 +107,7 @@ export const useValidatorDetails = () => {
   });
 
   useEffect(() => {
-    handleSetState({
-      loading: true,
-      exists: true,
-    });
+    handleSetState(initialState);
     if (chainConfig.extra.desmosProfile) {
       const address = validatorToDelegatorAddress(R.pathOr('', ['query', 'address'], router));
 

From 3b214f337d56451ed77ffb9780f12e60d5893d31 Mon Sep 17 00:00:00 2001
From: ryuash <ryuash123@gmail.com>
Date: Fri, 10 Sep 2021 11:39:16 +0800
Subject: [PATCH 2/2] add: changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d932c7973b..c9c249de37 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Add License to footer ([\#287](https://github.com/forbole/big-dipper-2.0-cosmos/issues/287))
 - Changed position of desmos profile
 - Fix avatar images not loading correctly ([\#296](https://github.com/forbole/big-dipper-2.0-cosmos/issues/296))
+- Fix rendering issue on account and validtor details page ([\#297](https://github.com/forbole/big-dipper-2.0-cosmos/issues/297))
 
 # base-v1.0.9 - 2021-09-03