Re-enable numeraires in onboarding (#203)

prax-wallet · Sep 26, 2024 · cb29a43 · cb29a43
1 parent 523e864
commit cb29a43
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 24 deletions.
diff --git 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
@@ -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 = () => {
           </CardDescription>
         </CardHeader>
         <div className='mt-6'>
-          <NumeraireForm isOnboarding onSuccess={onSuccess} />
+          <NumeraireForm isOnboarding onSuccess={onSuccess} chainId={chainId} />
         </div>
       </Card>
     </FadeTransition>

diff --git 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 (
     <SettingsScreen title='Price denominations' IconComponent={NumerairesGradientIcon}>
-      <NumeraireForm onSuccess={onSuccess} />
+      <NumeraireForm onSuccess={onSuccess} chainId={chainId} />
     </SettingsScreen>
   );
 };
diff --git 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,39 +12,36 @@ 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<void>;
+  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);
 
   const handleSubmit = () => {
     setLoading(true);
     void (async function () {
       await saveNumeraires();
-      await chrome.runtime.sendMessage(ServicesMessage.ChangeNumeraires);
-      await onSuccess();
+      void chrome.runtime.sendMessage(ServicesMessage.ChangeNumeraires);
+      onSuccess();
     })();
   };