From 9aea9b6a5ae360b94bbb5c1472ae9ae9b7ffa7c8 Mon Sep 17 00:00:00 2001 From: luca Date: Wed, 9 Oct 2024 16:32:27 +0800 Subject: [PATCH 1/4] fix: incorrect staking data fetching on first render --- .../components/staking/StakingSection.tsx | 7 +------ .../spawn/hooks/staking/useStakingData.ts | 1 + examples/spawn/utils/staking/math.ts | 12 +++++------ examples/spawn/yarn.lock | 20 +++++++++---------- 4 files changed, 18 insertions(+), 22 deletions(-) diff --git a/examples/spawn/components/staking/StakingSection.tsx b/examples/spawn/components/staking/StakingSection.tsx index 67024c1b7..acd8d9cd2 100644 --- a/examples/spawn/components/staking/StakingSection.tsx +++ b/examples/spawn/components/staking/StakingSection.tsx @@ -1,4 +1,3 @@ -import { useEffect } from 'react'; import { useChain } from '@cosmos-kit/react'; import { ChainName } from 'cosmos-kit'; import { Box, Spinner, Text } from '@interchain-ui/react'; @@ -13,13 +12,9 @@ export const StakingSection = ({ chainName }: { chainName: ChainName }) => { const { data, isLoading, refetch } = useStakingData(chainName); const { data: logos, isLoading: isFetchingLogos } = useValidatorLogos( chainName, - data?.allValidators || [], + data?.allValidators || [] ); - useEffect(() => { - refetch(); - }, []); - return ( {!isWalletConnected ? ( diff --git a/examples/spawn/hooks/staking/useStakingData.ts b/examples/spawn/hooks/staking/useStakingData.ts index 0787b6cd4..99139d904 100644 --- a/examples/spawn/hooks/staking/useStakingData.ts +++ b/examples/spawn/hooks/staking/useStakingData.ts @@ -65,6 +65,7 @@ export const useStakingData = (chainName: string) => { options: { enabled: isDataQueryEnabled, select: ({ balance }) => shiftDigits(balance?.amount || '0', -exp), + refetchOnMount: 'always', }, }); diff --git a/examples/spawn/utils/staking/math.ts b/examples/spawn/utils/staking/math.ts index cc6887791..bec54f515 100644 --- a/examples/spawn/utils/staking/math.ts +++ b/examples/spawn/utils/staking/math.ts @@ -22,7 +22,10 @@ export const toNumber = (val: string, decimals: number = 6) => { export const sum = (...args: string[]) => { return args - .reduce((prev, cur) => prev.plus(cur), new BigNumber(0)) + .reduce( + (prev, cur) => prev.plus(new BigNumber(cur).isNaN() ? 0 : cur), + new BigNumber(0) + ) .toString(); }; @@ -37,12 +40,9 @@ export const calcDollarValue = ( .toNumber(); }; -export const toBaseAmount = ( - num: string | number, - places: number -) => { +export const toBaseAmount = (num: string | number, places: number) => { return new BigNumber(num) .shiftedBy(places) .integerValue(BigNumber.ROUND_DOWN) .toString(); -}; \ No newline at end of file +}; diff --git a/examples/spawn/yarn.lock b/examples/spawn/yarn.lock index 0d393a374..7ac0793d9 100644 --- a/examples/spawn/yarn.lock +++ b/examples/spawn/yarn.lock @@ -818,6 +818,16 @@ __metadata: languageName: node linkType: hard +"@cosmology/lcd@npm:^0.12.0": + version: 0.12.0 + resolution: "@cosmology/lcd@npm:0.12.0" + dependencies: + "@babel/runtime": "npm:^7.21.0" + axios: "npm:0.27.2" + checksum: 10c0/28fbc26cd4c7cf693ae5be7aab637d1f5420f407dbc7a588d67bf5e5bb5e8f0b58e1c428993ca54dbe1dbac8c9dbd9d2713dffad76dfbc727d7bb77b5fb9b041 + languageName: node + linkType: hard + "@cosmology/spawn@workspace:.": version: 0.0.0-use.local resolution: "@cosmology/spawn@workspace:." @@ -861,16 +871,6 @@ __metadata: languageName: unknown linkType: soft -"@cosmology/lcd@npm:^0.12.0": - version: 0.12.0 - resolution: "@cosmology/lcd@npm:0.12.0" - dependencies: - "@babel/runtime": "npm:^7.21.0" - axios: "npm:0.27.2" - checksum: 10c0/28fbc26cd4c7cf693ae5be7aab637d1f5420f407dbc7a588d67bf5e5bb5e8f0b58e1c428993ca54dbe1dbac8c9dbd9d2713dffad76dfbc727d7bb77b5fb9b041 - languageName: node - linkType: hard - "@cosmos-kit/cdcwallet-extension@npm:^2.13.2": version: 2.13.2 resolution: "@cosmos-kit/cdcwallet-extension@npm:2.13.2" From 2c00c33d313dd2a475e1723654bc537c745de881 Mon Sep 17 00:00:00 2001 From: luca Date: Wed, 9 Oct 2024 21:24:07 +0800 Subject: [PATCH 2/4] feat: select spawn chain by default if it's running --- .../common/Header/ChainDropdown.tsx | 24 ++++++++++++------- .../spawn/components/common/Header/Header.tsx | 5 ++-- examples/spawn/hooks/common/useSpawnChains.ts | 9 ++++--- examples/spawn/pages/faucet.tsx | 11 ++++----- 4 files changed, 26 insertions(+), 23 deletions(-) diff --git a/examples/spawn/components/common/Header/ChainDropdown.tsx b/examples/spawn/components/common/Header/ChainDropdown.tsx index 3f9a18a8f..9b2ecd95c 100644 --- a/examples/spawn/components/common/Header/ChainDropdown.tsx +++ b/examples/spawn/components/common/Header/ChainDropdown.tsx @@ -13,21 +13,23 @@ export const ChainDropdown = () => { const { chain } = useChain(selectedChain); const [input, setInput] = useState(chain.pretty_name); const { isMobile } = useDetectBreakpoints(); - const { data: spawnChains, refetch } = useSpawnChains(); + const { data: spawnData, refetch, isLoading } = useSpawnChains(); const [isChainsAdded, setIsChainsAdded] = useState(false); const { addChains, getChainLogo } = useManager(); useEffect(() => { - if ( - spawnChains?.chains?.length && - spawnChains?.assets?.length && - !isChainsAdded - ) { - addChains(spawnChains.chains, spawnChains.assets, getSignerOptions()); + if (spawnData && !isChainsAdded) { + addChains(spawnData.chains, spawnData.assets, getSignerOptions()); setIsChainsAdded(true); } - }, [spawnChains, isChainsAdded]); + }, [spawnData, isChainsAdded]); + + useEffect(() => { + if (spawnData && !isLoading) { + chainStore.setSelectedChain(spawnData.chains[0].chain_name); + } + }, [isLoading]); const onOpenChange = (isOpen: boolean) => { if (isOpen && !isChainsAdded) { @@ -36,9 +38,13 @@ export const ChainDropdown = () => { }; const chains = isChainsAdded - ? chainOptions.concat(spawnChains?.chains ?? []) + ? chainOptions.concat(spawnData?.chains ?? []) : chainOptions; + if (isLoading) { + return null; + } + return ( { diff --git a/examples/spawn/components/common/Header/Header.tsx b/examples/spawn/components/common/Header/Header.tsx index daabda170..3c68d0c5e 100644 --- a/examples/spawn/components/common/Header/Header.tsx +++ b/examples/spawn/components/common/Header/Header.tsx @@ -5,7 +5,7 @@ import { RxHamburgerMenu } from 'react-icons/rx'; import { ChainDropdown } from './ChainDropdown'; import { Button } from '../Button'; -import { useDetectBreakpoints } from '@/hooks'; +import { useDetectBreakpoints, useSpawnChains } from '@/hooks'; import { AddressButton } from './AddressButton'; interface HeaderProps { @@ -15,6 +15,7 @@ interface HeaderProps { export const Header = ({ onOpenSidebar }: HeaderProps) => { const { theme, setTheme } = useTheme(); const { isDesktop, isMobile } = useDetectBreakpoints(); + const { isLoading } = useSpawnChains(); const brandLogo = useColorModeValue( '/logos/brand-logo.svg', @@ -45,7 +46,7 @@ export const Header = ({ onOpenSidebar }: HeaderProps) => { )} - + {!isLoading && } - - + + + - - + + +