diff --git a/apps/extension/src/hooks/numeraires-query.ts b/apps/extension/src/hooks/numeraires-query.ts index 1379260a..4b17c2db 100644 --- a/apps/extension/src/hooks/numeraires-query.ts +++ b/apps/extension/src/hooks/numeraires-query.ts @@ -3,26 +3,25 @@ import { ChainRegistryClient } from '@penumbra-labs/registry'; import { useMemo } from 'react'; export const useNumeraires = (chainId?: string) => { - const { data, isLoading, error, isError } = useQuery({ + const { data, isLoading, isError } = useQuery({ queryKey: ['registry', chainId], queryFn: async () => { const registryClient = new ChainRegistryClient(); return registryClient.remote.get(chainId!); }, + retry: 1, + retryDelay: 0, staleTime: Infinity, enabled: Boolean(chainId), }); const numeraires = useMemo(() => { - if (!chainId) { - if (isError) { - console.error(`Could not load numeraires for chainId: ${chainId}`); - } - return []; + if (isError) { + console.error(`Could not load numeraires for chainId: ${chainId}`); } return data?.numeraires.map(n => data.getMetadata(n)) ?? []; }, [data, chainId, isError]); - return { numeraires, isLoading, error }; + return { numeraires, isLoading, isError }; }; diff --git a/apps/extension/src/routes/page/onboarding/set-numeraire.tsx b/apps/extension/src/routes/page/onboarding/set-numeraire.tsx index f80852ab..e34ce81b 100644 --- a/apps/extension/src/routes/page/onboarding/set-numeraire.tsx +++ b/apps/extension/src/routes/page/onboarding/set-numeraire.tsx @@ -3,9 +3,11 @@ import { FadeTransition } from '@repo/ui/components/ui/fade-transition'; import { usePageNav } from '../../../utils/navigate'; import { PagePath } from '../paths'; import { NumeraireForm } from '../../../shared/components/numeraires-form'; +import { useStore } from '../../../state'; export const SetNumerairesPage = () => { const navigate = usePageNav(); + const chainId = useStore(state => state.network.chainId); const onSuccess = (): void => { navigate(PagePath.ONBOARDING_SUCCESS); @@ -22,7 +24,7 @@ export const SetNumerairesPage = () => {
- +
diff --git a/apps/extension/src/routes/popup/settings/settings-numeraires.tsx b/apps/extension/src/routes/popup/settings/settings-numeraires.tsx index 9ad1902d..0c68a0fe 100644 --- a/apps/extension/src/routes/popup/settings/settings-numeraires.tsx +++ b/apps/extension/src/routes/popup/settings/settings-numeraires.tsx @@ -3,16 +3,18 @@ import { NumerairesGradientIcon } from '../../../icons/numeraires-gradient'; import { usePopupNav } from '../../../utils/navigate'; import { PopupPath } from '../paths'; import { NumeraireForm } from '../../../shared/components/numeraires-form'; +import { useChainIdQuery } from '../../../hooks/chain-id'; export const SettingsNumeraires = () => { const navigate = usePopupNav(); + const { chainId } = useChainIdQuery(); const onSuccess = () => { navigate(PopupPath.INDEX); }; return ( - + ); }; diff --git a/apps/extension/src/shared/components/numeraires-form.tsx b/apps/extension/src/shared/components/numeraires-form.tsx index a17590de..4f63005c 100644 --- a/apps/extension/src/shared/components/numeraires-form.tsx +++ b/apps/extension/src/shared/components/numeraires-form.tsx @@ -1,5 +1,4 @@ import { AllSlices, useStore } from '../../state'; -import { useChainIdQuery } from '../../hooks/chain-id'; import { useEffect, useState } from 'react'; import { ServicesMessage } from '../../message/services'; import { SelectList } from '@repo/ui/components/ui/select'; @@ -13,30 +12,27 @@ const useNumerairesSelector = (state: AllSlices) => { selectedNumeraires: state.numeraires.selectedNumeraires, selectNumeraire: state.numeraires.selectNumeraire, saveNumeraires: state.numeraires.saveNumeraires, - networkChainId: state.network.chainId, }; }; export const NumeraireForm = ({ isOnboarding, onSuccess, + chainId, }: { + chainId?: string; isOnboarding?: boolean; - onSuccess: () => void | Promise; + onSuccess: () => void; }) => { - const { chainId } = useChainIdQuery(); - const { selectedNumeraires, selectNumeraire, saveNumeraires, networkChainId } = - useStore(useNumerairesSelector); - - // 'chainId' from 'useChainIdQuery' is not available during onboarding, - // this forces you to use two sources to guarantee 'chainId' for both settings and onboarding - const { numeraires } = useNumeraires(chainId ?? networkChainId); + const { selectedNumeraires, selectNumeraire, saveNumeraires } = useStore(useNumerairesSelector); + const { numeraires, isLoading, isError } = useNumeraires(chainId); + // If query errors or there aren't numeraires in the registry, can skip useEffect(() => { - if (numeraires.length === 0) { - void onSuccess(); + if (isError || (!isLoading && numeraires.length === 0)) { + onSuccess(); } - }, [numeraires]); + }, [numeraires.length, isError, isLoading]); const [loading, setLoading] = useState(false); @@ -44,8 +40,8 @@ export const NumeraireForm = ({ setLoading(true); void (async function () { await saveNumeraires(); - await chrome.runtime.sendMessage(ServicesMessage.ChangeNumeraires); - await onSuccess(); + void chrome.runtime.sendMessage(ServicesMessage.ChangeNumeraires); + onSuccess(); })(); };