comment for clientid + token.decimals, prefetchedQuery hook

src/App.tsx

@@ -43,13 +43,12 @@ import { config, privyConfig } from '@/lib/wagmi';
 import { RestrictionWarning } from './components/RestrictionWarning';
 import { ComplianceStates } from './constants/compliance';
 import { DialogTypes } from './constants/dialogs';
-import { useSkipClient } from './hooks/transfers/skipClient';
-import { assetsQueryFn, chainsQueryFn } from './hooks/transfers/useTransfers';
 import { useAnalytics } from './hooks/useAnalytics';
 import { useBreakpoints } from './hooks/useBreakpoints';
 import { useCommandMenu } from './hooks/useCommandMenu';
 import { useComplianceState } from './hooks/useComplianceState';
 import { useInitializePage } from './hooks/useInitializePage';
+import { usePrefetchedQueries } from './hooks/usePrefetchedQueries';
 import { useShouldShowFooter } from './hooks/useShouldShowFooter';
 import { useTokenConfigs } from './hooks/useTokenConfigs';
 import { testFlags } from './lib/testFlags';
@@ -87,8 +86,6 @@ const Content = () => {
   const { complianceState } = useComplianceState();
   const showRestrictionWarning = complianceState === ComplianceStates.READ_ONLY;
 
-  const { skipClient, skipClientId } = useSkipClient();
-
   const pathFromHash = useMemo(() => {
     if (location.hash === '') {
       return '';
@@ -104,16 +101,7 @@ const Content = () => {
     }
   }, [dispatch]);
 
-  useEffect(() => {
-    appQueryClient.prefetchQuery({
-      queryKey: ['transferEligibleChains', skipClientId],
-      queryFn: () => chainsQueryFn(skipClient),
-    });
-    appQueryClient.prefetchQuery({
-      queryKey: ['transferEligibleAssets', skipClientId],
-      queryFn: () => assetsQueryFn(skipClient),
-    });
-  }, [skipClient]);
+  usePrefetchedQueries();
 
   return (
     <>

src/hooks/transfers/skipClient.tsx

@@ -32,6 +32,9 @@ const useSkipClientContext = () => {
     useEndpointsConfig();
   const { compositeClient } = useDydxClient();
   const selectedDydxChainId = useAppSelector(getSelectedDydxChainId);
+  // reactQuery only accepts serializable objects/values, so we return a string id
+  // so any useQuery that uses the skipClient can use that id as a query key
+  // to ensure it has the most up-to-date skipClient
   const { skipClient, skipClientId } = useMemo(
     () => ({
       skipClient: new SkipClient({

src/hooks/transfers/useTransfers.tsx

@@ -169,6 +169,8 @@ export const useTransfers = () => {
     queryFn: async () => {
       // this should never happen since all params are required in order for the query to be enabled
       // this is mostly just to satisfy typescript
+      // fromToken.decimals needs to be checked separately since it's listed as optional in the skip types.
+      // this is because users are allowed to request assets that don't have metadata (decimals is part of metadata)
       if (!hasAllParams || !fromToken.decimals) {
         throw new Error(
           JSON.stringify({
@@ -197,7 +199,6 @@ export const useTransfers = () => {
         allowUnsafe: true,
         slippageTolerancePercent: '1',
         smartRelay: true,
-        // TODO [onboarding-rewrite]: talk to skip about this, why are decimals optional? when would that happen?
         amountIn: parseUnits(amount, fromToken.decimals).toString(),
       };
 

src/hooks/usePrefetchedQueries.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+import { appQueryClient } from '@/state/appQueryClient';
+
+import { useSkipClient } from './transfers/skipClient';
+import { assetsQueryFn, chainsQueryFn } from './transfers/useTransfers';
+
+export const usePrefetchedQueries = () => {
+  const { skipClient, skipClientId } = useSkipClient();
+  useEffect(() => {
+    appQueryClient.prefetchQuery({
+      queryKey: ['transferEligibleChains', skipClientId],
+      queryFn: () => chainsQueryFn(skipClient),
+    });
+    appQueryClient.prefetchQuery({
+      queryKey: ['transferEligibleAssets', skipClientId],
+      queryFn: () => assetsQueryFn(skipClient),
+    });
+  }, [skipClient, skipClientId]);
+};