fix: validator details page loading (#1316)

## Description

Closes: #XXXX

[BDU-1132](https://forbole.atlassian.net/jira/software/c/projects/BDU/issues/BDU-1132)

<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

_All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues._

I have...

- [x] ran linting via `yarn lint`
- [ ] wrote tests where necessary
- [x] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [x] targeted the correct branch
- [x] provided a link to the relevant issue or specification
- [x] reviewed "Files changed" and left comments if necessary
- [x] confirmed all CI checks have passed
- [x] added a changeset via [`yarn && yarn
changeset`](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)


[BDU-1132]:
https://forbole.atlassian.net/browse/BDU-1132?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

.changeset/proud-onions-burn.md

@@ -0,0 +1,5 @@
+---
+'ui': patch
+---
+
+fix validator details page loading

apps/web-crescent/src/screens/validator_details/hooks.ts

@@ -80,11 +80,16 @@ export const useValidatorDetails = () => {
     skip: !extra.profile || !state.overview.selfDelegateAddress,
   });
   useEffect(
-    () => setState((prevState) => ({ ...prevState, desmosProfile: dataDesmosProfile?.[0] })),
-    [dataDesmosProfile]
+    () =>
+      setState((prevState) => ({
+        ...prevState,
+        desmosProfile: dataDesmosProfile?.[0],
+        loading: loadingDesmosProfile,
+      })),
+    [dataDesmosProfile, loadingDesmosProfile]
   );
 
-  return { state, loading: loading || loadingDesmosProfile };
+  return { state, loading };
 };
 
 // ============================

apps/web-emoney/src/screens/validator_details/hooks.ts

@@ -80,11 +80,16 @@ export const useValidatorDetails = () => {
     skip: !extra.profile || !state.overview.selfDelegateAddress,
   });
   useEffect(
-    () => setState((prevState) => ({ ...prevState, desmosProfile: dataDesmosProfile?.[0] })),
-    [dataDesmosProfile]
+    () =>
+      setState((prevState) => ({
+        ...prevState,
+        desmosProfile: dataDesmosProfile?.[0],
+        loading: loadingDesmosProfile,
+      })),
+    [dataDesmosProfile, loadingDesmosProfile]
   );
 
-  return { state, loading: loading || loadingDesmosProfile };
+  return { state, loading };
 };
 
 // ============================

apps/web-neutron/src/screens/account_details/hooks.ts

@@ -289,8 +289,13 @@ export const useAccountDetails = () => {
     skip: !extra.profile || !address,
   });
   useEffect(
-    () => setState((prevState) => ({ ...prevState, desmosProfile: dataDesmosProfile?.[0] })),
-    [dataDesmosProfile]
+    () =>
+      setState((prevState) => ({
+        ...prevState,
+        desmosProfile: dataDesmosProfile?.[0],
+        loading: loadingDesmosProfile,
+      })),
+    [dataDesmosProfile, loadingDesmosProfile]
   );
 
   const commission = useCommission(providerAddress);
@@ -351,7 +356,5 @@ export const useAccountDetails = () => {
     providerAddress,
   ]);
 
-  if (loadingDesmosProfile) state.loading = true;
-
   return { state };
 };

apps/web-neutron/src/screens/validator_details/hooks.ts

@@ -148,11 +148,16 @@ export const useValidatorDetails = () => {
     skip: !extra.profile || !state.overview.selfDelegateAddress,
   });
   useEffect(
-    () => setState((prevState) => ({ ...prevState, desmosProfile: dataDesmosProfile?.[0] })),
-    [dataDesmosProfile]
+    () =>
+      setState((prevState) => ({
+        ...prevState,
+        desmosProfile: dataDesmosProfile?.[0],
+        loading: loadingDesmosProfile,
+      })),
+    [dataDesmosProfile, loadingDesmosProfile]
   );
 
-  return { state, loading: loading || loadingDesmosProfile };
+  return { state, loading };
 };
 
 function formatAccountQuery(data: ValidatorDetailsQuery): Partial<ValidatorDetailsState> {

apps/web-nomic/src/screens/account_details/hooks.ts

@@ -160,8 +160,13 @@ export const useAccountDetails = () => {
     skip: !extra.profile || !address,
   });
   useEffect(
-    () => setState((prevState) => ({ ...prevState, desmosProfile: dataDesmosProfile?.[0] })),
-    [dataDesmosProfile]
+    () =>
+      setState((prevState) => ({
+        ...prevState,
+        desmosProfile: dataDesmosProfile?.[0],
+        loading: loadingDesmosProfile,
+      })),
+    [dataDesmosProfile, loadingDesmosProfile]
   );
 
   const available = useAvailableBalances(address);
@@ -175,21 +180,5 @@ export const useAccountDetails = () => {
     handleSetState((prevState) => ({ ...prevState, ...formatAllBalance(formattedRawData) }));
   }, [available, delegation, handleSetState]);
 
-  // // ==========================
-  // // Fetch Data
-  // // ==========================
-  // const withdrawalAddress = useWithdrawalAddress(address);
-  // useEffect(() => {
-  //   handleSetState((prevState) => ({
-  //     ...prevState,
-  //     overview: {
-  //       address: address ?? '',
-  //       withdrawalAddress: withdrawalAddress?.withdrawalAddress?.address ?? '',
-  //     },
-  //   }));
-  // }, [address, handleSetState, withdrawalAddress]);
-
-  if (loadingDesmosProfile) state.loading = true;
-
   return { state };
 };

apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx

@@ -0,0 +1,87 @@
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import useAppTranslation from '@/hooks/useAppTranslation';
+import numeral from 'numeral';
+import { FC } from 'react';
+import Loading from '@/components/loading';
+import AvatarName from '@/components/avatar_name';
+import Box from '@/components/box';
+import Result from '@/components/result';
+import { useProfileRecoil } from '@/recoil/profiles/hooks';
+import { useBlocks } from '@/screens/validator_details/components/blocks/hooks';
+import useStyles from '@/screens/validator_details/components/blocks/styles';
+
+type BlockBoxProps = {
+  i: number;
+  item: ReturnType<typeof useBlocks>['state'][number];
+  state: ReturnType<typeof useBlocks>['state'];
+};
+
+const BlockBox: FC<BlockBoxProps> = ({ i, item, state }) => {
+  const { address, imageUrl, name } = useProfileRecoil(item.proposer);
+  const { t } = useAppTranslation('validators');
+  const { classes, cx } = useStyles();
+  return (
+    <Tooltip
+      enterTouchDelay={50}
+      title={
+        <Box className={classes.toolTip}>
+          <div className={classes.item}>
+            <Typography variant="h4" className="label">
+              {t('proposer')}
+            </Typography>
+            <AvatarName address={address} imageUrl={imageUrl} name={name} />
+          </div>
+          <div className={classes.item}>
+            <Typography variant="h4" className="label">
+              {t('block')}
+            </Typography>
+            <Typography variant="body1" className="value">
+              {numeral(item.height).format('0,0')}
+            </Typography>
+          </div>
+          <div className={classes.item}>
+            <Typography variant="h4" className="label">
+              {t('txs')}
+            </Typography>
+            <Typography variant="body1" className="value">
+              {numeral(item.txs).format('0,0')}
+            </Typography>
+          </div>
+          <div className={classes.item}>
+            <Typography variant="h4" className="label">
+              {t('signed')}
+            </Typography>
+            <Result success={item.signed} />
+          </div>
+        </Box>
+      }
+      placement="top"
+    >
+      <div
+        className={cx(classes.singleBlock, {
+          signed: state[i].signed,
+        })}
+      />
+    </Tooltip>
+  );
+};
+
+const Blocks: FC<ComponentDefault> = ({ className }) => {
+  const { t } = useAppTranslation('validators');
+  const { state, loading } = useBlocks();
+  const { classes, cx } = useStyles();
+  return (
+    <Box className={cx(classes.root, className)}>
+      <Typography variant="h2">{t('lastBlocks')}</Typography>
+      {loading && <Loading />}
+      <div className={classes.blocks}>
+        {state.map((x, i) => (
+          <BlockBox key={x.height} i={i} item={x} state={state} />
+        ))}
+      </div>
+    </Box>
+  );
+};
+
+export default Blocks;

apps/web-nomic/src/screens/validator_details/hooks.ts

@@ -76,11 +76,16 @@ export const useValidatorDetails = () => {
     skip: !extra.profile || !state.overview.selfDelegateAddress,
   });
   useEffect(
-    () => setState((prevState) => ({ ...prevState, desmosProfile: dataDesmosProfile?.[0] })),
-    [dataDesmosProfile]
+    () =>
+      setState((prevState) => ({
+        ...prevState,
+        desmosProfile: dataDesmosProfile?.[0],
+        loading: loadingDesmosProfile,
+      })),
+    [dataDesmosProfile, loadingDesmosProfile]
   );
 
-  return { state, loading: loading || loadingDesmosProfile };
+  return { state, loading };
 };
 
 // ============================