fix: validator and account details rendering problem (#300)

forbole · Sep 10, 2021 · fe22b3e · fe22b3e
1 parent a1a37cf
commit fe22b3e
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 66 deletions.
diff --git 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
 

diff --git 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
@@ -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
@@ -24,68 +24,70 @@ 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 {
     findAddress,
     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));