From 4f4d4a105b2cd7c738768798cc7dcecdaff42828 Mon Sep 17 00:00:00 2001 From: Magic Cat Date: Thu, 7 Dec 2023 18:25:36 +0700 Subject: [PATCH 1/7] fix: desmos profile loading in useAccountDetails hook for neutron, nomic, osmosis and stride --- .../src/screens/account_details/hooks.ts | 11 +++++--- .../src/screens/account_details/hooks.ts | 25 ++++++------------- .../src/screens/account_details/hooks.ts | 14 +++++------ .../src/screens/account_details/hooks.ts | 14 +++++------ 4 files changed, 28 insertions(+), 36 deletions(-) diff --git a/apps/web-neutron/src/screens/account_details/hooks.ts b/apps/web-neutron/src/screens/account_details/hooks.ts index 9f07c03b9b..2d5e5a1436 100644 --- a/apps/web-neutron/src/screens/account_details/hooks.ts +++ b/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 }; }; diff --git a/apps/web-nomic/src/screens/account_details/hooks.ts b/apps/web-nomic/src/screens/account_details/hooks.ts index 0bd365071a..dc71baff81 100644 --- a/apps/web-nomic/src/screens/account_details/hooks.ts +++ b/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 }; }; diff --git a/apps/web-osmosis/src/screens/account_details/hooks.ts b/apps/web-osmosis/src/screens/account_details/hooks.ts index 06d68a6c20..6215238833 100644 --- a/apps/web-osmosis/src/screens/account_details/hooks.ts +++ b/apps/web-osmosis/src/screens/account_details/hooks.ts @@ -225,8 +225,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(address); @@ -272,10 +277,5 @@ export const useAccountDetails = () => { })); }, [handleSetState, address, withdrawalAddress]); - if (loadingDesmosProfile) state.loading = true; - return { state }; }; -// function useBoundingBalance(_address?: string) { -// throw new Error('Function not implemented.'); -// } diff --git a/apps/web-stride/src/screens/account_details/hooks.ts b/apps/web-stride/src/screens/account_details/hooks.ts index 7796920da4..3aea2dca38 100644 --- a/apps/web-stride/src/screens/account_details/hooks.ts +++ b/apps/web-stride/src/screens/account_details/hooks.ts @@ -259,8 +259,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); @@ -316,10 +321,5 @@ export const useAccountDetails = () => { })); }, [handleSetState, address, withdrawalAddress?.withdrawalAddress?.address, providerAddress]); - if (loadingDesmosProfile) state.loading = true; - return { state }; }; -// function useBoundingBalance(_address?: string) { -// throw new Error('Function not implemented.'); -// } From ab897dfd02ab3a9c849d97af65f97b8e1fbe2afe Mon Sep 17 00:00:00 2001 From: Magic Cat Date: Thu, 7 Dec 2023 18:28:03 +0700 Subject: [PATCH 2/7] rm account details screen from osmosis --- .../__snapshots__/index.test.tsx.snap | 203 ------------- .../account_details/components/index.ts | 5 - .../src/screens/account_details/hooks.ts | 281 ------------------ .../screens/account_details/index.test.tsx | 203 ------------- .../src/screens/account_details/index.tsx | 64 ---- 5 files changed, 756 deletions(-) delete mode 100644 apps/web-osmosis/src/screens/account_details/__snapshots__/index.test.tsx.snap delete mode 100644 apps/web-osmosis/src/screens/account_details/components/index.ts delete mode 100644 apps/web-osmosis/src/screens/account_details/hooks.ts delete mode 100644 apps/web-osmosis/src/screens/account_details/index.test.tsx delete mode 100644 apps/web-osmosis/src/screens/account_details/index.tsx diff --git a/apps/web-osmosis/src/screens/account_details/__snapshots__/index.test.tsx.snap b/apps/web-osmosis/src/screens/account_details/__snapshots__/index.test.tsx.snap deleted file mode 100644 index e8750651e7..0000000000 --- a/apps/web-osmosis/src/screens/account_details/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,203 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`screen: BlockDetails matches snapshot 1`] = ` -
-
- -
-
-
-
-
-
- -
-
-`; diff --git a/apps/web-osmosis/src/screens/account_details/components/index.ts b/apps/web-osmosis/src/screens/account_details/components/index.ts deleted file mode 100644 index 6947bf7a0a..0000000000 --- a/apps/web-osmosis/src/screens/account_details/components/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { default as Balance } from '@/screens/account_details/components/balance'; -export { default as OtherTokens } from '@/screens/account_details/components/other_tokens'; -export { default as Overview } from '@/screens/account_details/components/overview'; -export { default as Staking } from '@/screens/account_details/components/staking'; -export { default as Transactions } from '@/screens/account_details/components/transactions'; diff --git a/apps/web-osmosis/src/screens/account_details/hooks.ts b/apps/web-osmosis/src/screens/account_details/hooks.ts deleted file mode 100644 index 6215238833..0000000000 --- a/apps/web-osmosis/src/screens/account_details/hooks.ts +++ /dev/null @@ -1,281 +0,0 @@ -import Big from 'big.js'; -import { useRouter } from 'next/router'; -import * as R from 'ramda'; -import { useCallback, useEffect, useState } from 'react'; -import chainConfig from '@/chainConfig'; -import { useDesmosProfile } from '@/hooks/use_desmos_profile'; -import type { AccountDetailState, OtherTokenType } from '@/screens/account_details/types'; -import { - useAccountWithdrawalAddress, - useAvailableBalances, - useCommission, - useDelegationBalance, - useRewards, - useUnbondingBalance, -} from '@/screens/account_details/utils'; -import { formatToken } from '@/utils/format_token'; -import { getDenom } from '@/utils/get_denom'; - -const { extra, primaryTokenUnit, tokenUnits } = chainConfig(); - -const defaultTokenUnit: TokenUnit = { - value: '0', - baseDenom: '', - displayDenom: '', - exponent: 0, -}; - -const initialState: AccountDetailState = { - loading: true, - balanceLoading: true, - exists: true, - desmosProfile: null, - overview: { - address: '', - withdrawalAddress: '', - }, - otherTokens: { - count: 0, - data: [], - }, - balance: { - available: defaultTokenUnit, - delegate: defaultTokenUnit, - unbonding: defaultTokenUnit, - reward: defaultTokenUnit, - commission: defaultTokenUnit, - total: defaultTokenUnit, - }, - rewards: {}, -}; - -type Data = { - delegationRewards?: ReturnType['delegationRewards']; - accountBalances?: ReturnType['accountBalances']; - delegationBalance?: ReturnType['delegationBalance']; - unbondingBalance?: ReturnType['unbondingBalance']; - commission?: ReturnType['commission']; -}; - -// ============================ -// rewards -// ============================ -const formatRewards = (data?: Data) => { - const rewardsDict: AccountDetailState['rewards'] = {}; - // log all the rewards - data?.delegationRewards?.forEach((x) => { - if (!x) return; - const coins = x.coins ?? []; - const denomAmount = getDenom(coins, primaryTokenUnit); - const denomFormat = formatToken(denomAmount.amount, primaryTokenUnit); - rewardsDict[x.validatorAddress] = denomFormat; - }); - return rewardsDict; -}; - -// ============================ -// balance -// ============================ -const formatBalance = (data?: Data) => { - const available = getDenom(R.pathOr([], ['accountBalances', 'coins'], data), primaryTokenUnit); - const availableAmount = formatToken(available.amount, primaryTokenUnit); - const delegate = getDenom(R.pathOr([], ['delegationBalance', 'coins'], data), primaryTokenUnit); - const delegateAmount = formatToken(delegate.amount, primaryTokenUnit); - - const unbonding = getDenom(R.pathOr([], ['unbondingBalance', 'coins'], data), primaryTokenUnit); - const unbondingAmount = formatToken(unbonding.amount, primaryTokenUnit); - - const rewards = (data?.delegationRewards ?? []).reduce((a, b) => { - if (!b) return a; - const coins = b.coins ?? []; - const dsmCoins = getDenom(coins, primaryTokenUnit); - - return Big(a).plus(dsmCoins.amount).toPrecision() ?? ''; - }, '0'); - const rewardsAmount = formatToken(rewards, primaryTokenUnit); - - const commission = getDenom(R.pathOr([], ['commission', 'coins'], data), primaryTokenUnit); - const commissionAmount = formatToken(commission.amount, primaryTokenUnit); - - const total = Big(availableAmount.value) - .plus(delegateAmount.value) - .plus(unbondingAmount.value) - .plus(rewardsAmount.value) - .plus(commissionAmount.value) - .toFixed(tokenUnits?.[primaryTokenUnit].exponent); - - const balance = { - available: availableAmount, - delegate: delegateAmount, - unbonding: unbondingAmount, - reward: rewardsAmount, - commission: commissionAmount, - total: { - value: total, - displayDenom: availableAmount.displayDenom, - baseDenom: availableAmount.baseDenom, - exponent: availableAmount.exponent, - }, - }; - - return balance; -}; - -// ========================== -// Format TX -// ========================== -const formatAllBalance = (data?: Data) => { - const stateChange: Partial = { - balanceLoading: false, - }; - - stateChange.rewards = formatRewards(data); - - stateChange.balance = formatBalance(data); - - formatOtherTokens(data); - - stateChange.otherTokens = formatOtherTokens(data); - - return stateChange; -}; - -// ============================ -// other tokens -// ============================ -const formatOtherTokens = (data?: Data) => { - // Loop through balance and delegation to figure out what the other tokens are - const otherTokenUnits = new Set(); - const otherTokens: OtherTokenType[] = []; - // available tokens - const available = data?.accountBalances?.coins ?? []; - - available.forEach((x) => { - otherTokenUnits.add(x.denom); - }); - - // rewards tokens - const rewards = data?.delegationRewards ?? []; - - rewards.forEach((x) => { - x?.coins?.forEach((y) => { - otherTokenUnits.add(y.denom); - }); - }); - - // commission tokens - const commission = data?.commission?.coins ?? []; - - commission.forEach((x) => { - otherTokenUnits.add(x.denom); - }); - - // remove the primary token unit thats being shown in balance - otherTokenUnits.delete(primaryTokenUnit); - - otherTokenUnits.forEach((x: string) => { - const availableRawAmount = getDenom(available, x); - const availableAmount = formatToken(availableRawAmount.amount, x); - const rewardsRawAmount = rewards.reduce((a, b) => { - if (!b) return a; - const coins = R.pathOr>([], ['coins'], b); - const denom = getDenom(coins, x); - return Big(a).plus(denom.amount).toPrecision(); - }, '0'); - const rewardAmount = formatToken(rewardsRawAmount, x); - const commissionRawAmount = getDenom(commission, x); - const commissionAmount = formatToken(commissionRawAmount.amount, x); - - otherTokens.push({ - denom: tokenUnits?.[x]?.display ?? x, - available: availableAmount, - reward: rewardAmount, - commission: commissionAmount, - }); - }); - - return { - data: otherTokens, - count: otherTokens.length, - }; -}; - -export const useAccountDetails = () => { - const router = useRouter(); - const [state, setState] = useState(initialState); - - const handleSetState = useCallback( - (stateChange: (prevState: AccountDetailState) => AccountDetailState) => { - setState((prevState) => { - const newState = stateChange(prevState); - return R.equals(prevState, newState) ? prevState : newState; - }); - }, - [] - ); - const address = Array.isArray(router.query.address) - ? router.query.address[0] - : router.query.address ?? ''; - - // ========================== - // Desmos Profile - // ========================== - const { data: dataDesmosProfile, loading: loadingDesmosProfile } = useDesmosProfile({ - addresses: [address], - skip: !extra.profile || !address, - }); - useEffect( - () => - setState((prevState) => ({ - ...prevState, - desmosProfile: dataDesmosProfile?.[0], - loading: loadingDesmosProfile, - })), - [dataDesmosProfile, loadingDesmosProfile] - ); - - const commission = useCommission(address); - const available = useAvailableBalances(address); - const delegation = useDelegationBalance(address); - const unbonding = useUnbondingBalance(address); - const rewards = useRewards(address); - - useEffect(() => { - const fetchBalance = async () => { - const formattedRawData = { - commission: commission?.commission, - accountBalances: available?.accountBalances, - delegationBalance: delegation?.delegationBalance, - unbondingBalance: unbonding?.unbondingBalance, - delegationRewards: rewards?.delegationRewards, - }; - - handleSetState((prevState) => ({ ...prevState, ...formatAllBalance(formattedRawData) })); - }; - fetchBalance(); - }, [ - available?.accountBalances, - commission?.commission, - delegation?.delegationBalance, - handleSetState, - rewards?.delegationRewards, - unbonding?.unbondingBalance, - ]); - - // ========================== - // Fetch Data - // ========================== - const withdrawalAddress = useAccountWithdrawalAddress(address); - useEffect(() => { - handleSetState((prevState) => ({ - ...prevState, - loading: false, - overview: { - address: address ?? '', - withdrawalAddress: withdrawalAddress.withdrawalAddress?.address ?? '', - }, - })); - }, [handleSetState, address, withdrawalAddress]); - - return { state }; -}; diff --git a/apps/web-osmosis/src/screens/account_details/index.test.tsx b/apps/web-osmosis/src/screens/account_details/index.test.tsx deleted file mode 100644 index 99f7a0343c..0000000000 --- a/apps/web-osmosis/src/screens/account_details/index.test.tsx +++ /dev/null @@ -1,203 +0,0 @@ -import chainConfig from '@/chainConfig'; -import { GetMessagesByAddressDocument } from '@/graphql/types/general_types'; -import AccountDetails from '@/screens/account_details'; -import MockTheme from '@/tests/mocks/MockTheme'; -import wait from '@/tests/utils/wait'; -import { MockedProvider } from '@apollo/client/testing'; -import { useMemo } from 'react'; -import renderer from 'react-test-renderer'; - -const { prefix } = chainConfig(); - -// ================================== -// mocks -// ================================== -jest.mock('next/router', () => ({ - ...jest.requireActual('next/router'), - useRouter: () => ({ - query: { - address: 'desmos1ltpgdupjgtpqzsznltcptmfh6gfu5d8uehxggj', - }, - }), -})); -jest.mock('@/components/layout', () => (props: JSX.IntrinsicElements['div']) => ( -
-)); -jest.mock('@/components/load_and_exist', () => (props: JSX.IntrinsicElements['div']) => ( -
-)); -jest.mock('@/components/desmos_profile', () => (props: JSX.IntrinsicElements['div']) => ( -
-)); - -jest.mock( - '@/screens/account_details/components/overview', - () => (props: JSX.IntrinsicElements['div']) =>
-); -jest.mock( - '@/screens/account_details/components/balance', - () => (props: JSX.IntrinsicElements['div']) =>
-); -jest.mock( - '@/screens/account_details/components/staking', - () => (props: JSX.IntrinsicElements['div']) =>
-); -jest.mock( - '@/screens/account_details/components/transactions', - () => (props: JSX.IntrinsicElements['div']) =>
-); -jest.mock( - '@/screens/account_details/components/other_tokens', - () => (props: JSX.IntrinsicElements['div']) =>
-); - -// const mockAccount = jest.fn().mockReturnValue({ -// data: { -// commission: { -// coins: [ -// { -// amount: '935371507.295045102561007305', -// denom: 'udsm', -// }, -// ], -// }, -// withdrawalAddress: { -// address: 'desmos1ltpgdupjgtpqzsznltcptmfh6gfu5d8uehxggj', -// }, -// accountBalances: { -// coins: [ -// { -// amount: '116306', -// denom: 'udsm', -// }, -// ], -// }, -// delegationBalance: { -// coins: [ -// { -// amount: '1530000000', -// denom: 'udsm', -// }, -// ], -// }, -// unbondingBalance: { -// coins: [ -// { -// amount: '0', -// denom: 'udsm', -// }, -// ], -// }, -// delegationRewards: [ -// { -// validatorAddress: 'desmosvaloper1gwr9l765vfxv4l4zz8glsxwkkphj2084xjwc68', -// coins: [ -// { -// amount: '1983411.761512021000000000', -// denom: 'udsm', -// }, -// ], -// }, -// { -// validatorAddress: 'desmosvaloper1mqfr567kvp659z0zjvpqudw3wx7hh3s7u9a8g9', -// coins: [ -// { -// amount: '1029160.218282986240000000', -// denom: 'udsm', -// }, -// ], -// }, -// ], -// }, -// }); - -const mockAccountMessages = jest.fn().mockReturnValue({ - data: { - messagesByAddress: [ - { - transaction: { - height: 793314, - hash: '6BC372069E41B5493B785002FD795746384A07C3F373FF6E2CAD6ABDE29860BA', - success: true, - logs: [], - messages: [ - { - '@type': '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward', - delegator_address: 'desmos18kvwy5hzcu3ss08lcfcnx0eajuecg69ujmkwjr', - validator_address: 'desmosvaloper18kvwy5hzcu3ss08lcfcnx0eajuecg69uvk76c3', - }, - { - '@type': '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission', - validator_address: 'desmosvaloper18kvwy5hzcu3ss08lcfcnx0eajuecg69uvk76c3', - }, - ], - block: { - height: 793314, - timestamp: '2021-06-22T03:40:33.804715', - }, - }, - }, - ], - }, -}); - -jest.mock('@/hooks/use_desmos_profile', () => ({ - ...jest.requireActual('@/hooks/use_desmos_profile'), - useDesmosProfile: () => - useMemo( - () => ({ - loading: false, - data: [ - { - dtag: 'HappieSa', - nickname: 'theHappySamoyed', - imageUrl: - 'https://ipfs.desmos.network/ipfs/QmTvkdGrtBHHihjVajqqA2HAoHangeKR1oYbQWzasnPi7B', - coverUrl: - 'https://ipfs.desmos.network/ipfs/Qmf48cpgi2zNiH24Vo1xtVsePUJx9665gtiRduVCvV5fFg', - bio: 'hungry all the time', - connections: [ - { - identifier: `${prefix.account}test`, - network: 'desmos', - creationTime: '2021-10-06T00:10:45.761731', - }, - ], - }, - ], - }), - [] - ), -})); - -// ================================== -// unit tests -// ================================== -describe('screen: BlockDetails', () => { - xit('matches snapshot', async () => { - let component: renderer.ReactTestRenderer | undefined; - - renderer.act(() => { - component = renderer.create( - - - - - - ); - }); - await wait(renderer.act); - - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); -}); diff --git a/apps/web-osmosis/src/screens/account_details/index.tsx b/apps/web-osmosis/src/screens/account_details/index.tsx deleted file mode 100644 index 6d28e31fd3..0000000000 --- a/apps/web-osmosis/src/screens/account_details/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { NextSeo } from 'next-seo'; -import useAppTranslation from '@/hooks/useAppTranslation'; -import DesmosProfile from '@/components/desmos_profile'; -import Layout from '@/components/layout'; -import LoadAndExist from '@/components/load_and_exist'; -import Balance from '@/screens/account_details/components/balance'; -import OtherTokens from '@/screens/account_details/components/other_tokens'; -import Overview from '@/screens/account_details/components/overview'; -import Staking from '@/screens/account_details/components/staking'; -import Transactions from '@/screens/account_details/components/transactions'; -import { useAccountDetails } from '@/screens/account_details/hooks'; -import useStyles from '@/screens/account_details/styles'; - -const AccountDetails = () => { - const { t } = useAppTranslation('accounts'); - const { classes } = useStyles(); - const { state } = useAccountDetails(); - - return ( - <> - - - - - {!!state.desmosProfile && ( - - )} - - - - - - - - - - ); -}; - -export default AccountDetails; From 3b8cf2c3b29e6abad0da834cde03b9c05ed50916 Mon Sep 17 00:00:00 2001 From: Magic Cat Date: Thu, 7 Dec 2023 18:46:06 +0700 Subject: [PATCH 3/7] fix: desmos profile loading in useValidatorDetails hook --- .../src/screens/validator_details/hooks.ts | 11 ++++++++--- .../web-emoney/src/screens/validator_details/hooks.ts | 11 ++++++++--- .../src/screens/validator_details/hooks.ts | 11 ++++++++--- apps/web-nomic/src/screens/validator_details/hooks.ts | 11 ++++++++--- apps/web-regen/src/screens/validator_details/hooks.ts | 11 ++++++++--- packages/ui/src/screens/validator_details/hooks.ts | 11 ++++++++--- 6 files changed, 48 insertions(+), 18 deletions(-) diff --git a/apps/web-crescent/src/screens/validator_details/hooks.ts b/apps/web-crescent/src/screens/validator_details/hooks.ts index 0443e7d935..eeaad3d3cf 100644 --- a/apps/web-crescent/src/screens/validator_details/hooks.ts +++ b/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 }; }; // ============================ diff --git a/apps/web-emoney/src/screens/validator_details/hooks.ts b/apps/web-emoney/src/screens/validator_details/hooks.ts index 351dabdfb6..a32bb84e1d 100644 --- a/apps/web-emoney/src/screens/validator_details/hooks.ts +++ b/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 }; }; // ============================ diff --git a/apps/web-neutron/src/screens/validator_details/hooks.ts b/apps/web-neutron/src/screens/validator_details/hooks.ts index dc43151814..23fa3a2b15 100644 --- a/apps/web-neutron/src/screens/validator_details/hooks.ts +++ b/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 { diff --git a/apps/web-nomic/src/screens/validator_details/hooks.ts b/apps/web-nomic/src/screens/validator_details/hooks.ts index 9eaebb50a8..b85e300d20 100644 --- a/apps/web-nomic/src/screens/validator_details/hooks.ts +++ b/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 }; }; // ============================ diff --git a/apps/web-regen/src/screens/validator_details/hooks.ts b/apps/web-regen/src/screens/validator_details/hooks.ts index 50378e506b..5455230e9f 100644 --- a/apps/web-regen/src/screens/validator_details/hooks.ts +++ b/apps/web-regen/src/screens/validator_details/hooks.ts @@ -79,11 +79,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 }; }; // ============================ diff --git a/packages/ui/src/screens/validator_details/hooks.ts b/packages/ui/src/screens/validator_details/hooks.ts index 1676c2ece8..877abbdf2d 100644 --- a/packages/ui/src/screens/validator_details/hooks.ts +++ b/packages/ui/src/screens/validator_details/hooks.ts @@ -137,11 +137,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 { From ee5e41a34c1a7179102e02b71cb1c17786e11e07 Mon Sep 17 00:00:00 2001 From: Magic Cat Date: Thu, 7 Dec 2023 18:51:06 +0700 Subject: [PATCH 4/7] add changeset entry --- .changeset/proud-onions-burn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/proud-onions-burn.md diff --git a/.changeset/proud-onions-burn.md b/.changeset/proud-onions-burn.md new file mode 100644 index 0000000000..a224378209 --- /dev/null +++ b/.changeset/proud-onions-burn.md @@ -0,0 +1,5 @@ +--- +'ui': patch +--- + +fix validator details page loading From 2e9294fe262fb443d41fe848838f69ab60f57048 Mon Sep 17 00:00:00 2001 From: Magic Cat Date: Thu, 7 Dec 2023 19:08:51 +0700 Subject: [PATCH 5/7] update nomic validator details --- .../components/blocks/index.tsx | 93 +++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx diff --git a/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx b/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx new file mode 100644 index 0000000000..27719a358f --- /dev/null +++ b/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx @@ -0,0 +1,93 @@ +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['state'][number]; + state: ReturnType['state']; +}; + +const BlockBox: FC = ({ i, item, state }) => { + const { address, imageUrl, name } = useProfileRecoil(item.proposer); + const { t } = useAppTranslation('validators'); + const { classes, cx } = useStyles(); + return ( + +
+ + {t('proposer')} + + +
+
+ + {t('block')} + + + {numeral(item.height).format('0,0')} + +
+
+ + {t('txs')} + + + {numeral(item.txs).format('0,0')} + +
+
+ + {t('signed')} + + +
+ + } + placement="top" + > +
+ + ); +}; + +type BlocksProps = ComponentDefault & { + address?: string; +}; + +const Blocks: FC = ({ className, address }) => { + const { t } = useAppTranslation('validators'); + const { state, loading } = useBlocks(); + const { classes, cx } = useStyles(); + return ( + + {t('lastBlocks')} + {loading && } +
+ {state.map((x, i) => ( + + ))} +
+ + ); +}; + +export default Blocks; From 816239e249f4dfe3566304f8da3065e491e784b9 Mon Sep 17 00:00:00 2001 From: Magic Cat Date: Thu, 7 Dec 2023 19:41:56 +0700 Subject: [PATCH 6/7] fix lint --- .../screens/validator_details/components/blocks/index.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx b/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx index 27719a358f..f84484ba1e 100644 --- a/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx +++ b/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx @@ -69,11 +69,7 @@ const BlockBox: FC = ({ i, item, state }) => { ); }; -type BlocksProps = ComponentDefault & { - address?: string; -}; - -const Blocks: FC = ({ className, address }) => { +const Blocks: FC = ({ className }) => { const { t } = useAppTranslation('validators'); const { state, loading } = useBlocks(); const { classes, cx } = useStyles(); From d0dadd2c415530aa473c24dac1491365322697cb Mon Sep 17 00:00:00 2001 From: Magic Cat Date: Thu, 7 Dec 2023 19:59:47 +0700 Subject: [PATCH 7/7] rm key prop --- .../src/screens/validator_details/components/blocks/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx b/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx index f84484ba1e..df9079ae81 100644 --- a/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx +++ b/apps/web-nomic/src/screens/validator_details/components/blocks/index.tsx @@ -23,7 +23,6 @@ const BlockBox: FC = ({ i, item, state }) => { const { classes, cx } = useStyles(); return ( @@ -60,7 +59,6 @@ const BlockBox: FC = ({ i, item, state }) => { placement="top" >