fix: market loading using the wrong data source (#1565)

src/bonsai/lib/mapLoadable.ts

@@ -31,3 +31,19 @@ export function mergeLoadableStatus(...status: Array<Loadable<any>>): Loadable<a
   }
   return 'success';
 }
+
+// CAUTION: doesn't take into account the actual data state so shouldn't be trusted alone, also check for data presence
+export function mergeLoadableStatusState(
+  ...status: Array<Loadable<any>['status']>
+): Loadable<any>['status'] {
+  if (status.some((s) => s === 'error')) {
+    return 'error';
+  }
+  if (status.some((s) => s === 'pending')) {
+    return 'pending';
+  }
+  if (status.some((s) => s === 'idle')) {
+    return 'idle';
+  }
+  return 'success';
+}

src/components/Loading/LoadingSpinner.tsx

@@ -54,7 +54,7 @@ export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   );
 };
 
-type LoadingSpaceProps = { className?: string; description?: ReactNode; id: string };
+type LoadingSpaceProps = { className?: string; description?: ReactNode; id?: string };
 
 export const LoadingSpace: React.FC<LoadingSpaceProps> = ({
   className,

src/hooks/useLaunchableMarkets.ts

@@ -1,27 +1,37 @@
 import { useMemo } from 'react';
 
-import { useMetadataService } from './useMetadataService';
-import { usePerpetualMarkets } from './userPerpetualMarkets';
+import { mergeLoadableStatusState } from '@/bonsai/lib/mapLoadable';
+import { BonsaiCore } from '@/bonsai/ontology';
+
+import { useAppSelector } from '@/state/appTypes';
+
+import { getMarketIdFromAsset } from '@/lib/assetUtils';
+import { orEmptyRecord } from '@/lib/typeUtils';
 
 export const useLaunchableMarkets = () => {
-  const perpetualMarketsFetch = usePerpetualMarkets();
-  const metadataServiceData = useMetadataService();
+  const perpsRaw = orEmptyRecord(useAppSelector(BonsaiCore.markets.markets.data));
+  const assetsRaw = orEmptyRecord(useAppSelector(BonsaiCore.markets.assets.data));
+  const loadingStateMarkets = useAppSelector(BonsaiCore.markets.markets.loading);
+  const loadingStateAssets = useAppSelector(BonsaiCore.markets.assets.loading);
+  const loadingState = mergeLoadableStatusState(loadingStateMarkets, loadingStateAssets);
 
   const filteredPotentialMarkets: { id: string; asset: string }[] = useMemo(() => {
-    const assets = Object.keys(metadataServiceData.data).map((asset) => {
+    const assets = Object.values(assetsRaw).map((asset) => {
       return {
-        id: `${asset}-USD`,
-        asset,
+        id: getMarketIdFromAsset(asset.assetId),
+        asset: asset.assetId,
       };
     });
 
     return assets.filter(({ id }) => {
-      return !perpetualMarketsFetch.data?.[id];
+      return perpsRaw[id] == null;
     });
-  }, [perpetualMarketsFetch.data, metadataServiceData.data]);
+  }, [assetsRaw, perpsRaw]);
 
   return {
-    ...metadataServiceData,
     data: filteredPotentialMarkets,
+    isLoading:
+      (Object.keys(perpsRaw).length === 0 || Object.keys(assetsRaw).length === 0) &&
+      (loadingState === 'idle' || loadingState === 'pending'),
   };
 };

src/views/forms/TradeForm.tsx

@@ -37,6 +37,7 @@ import { AlertMessage } from '@/components/AlertMessage';
 import { Icon, IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Link } from '@/components/Link';
+import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 import { ToggleButton } from '@/components/ToggleButton';
 import { ToggleGroup } from '@/components/ToggleGroup';
 
@@ -333,11 +334,7 @@ export const TradeForm = ({
 
   // prevent real trading if null/zero oracle price or we are out of sync with abacus somehow
   if (!isTruthy(oraclePrice) || currentMarketId !== marketId) {
-    return (
-      <div tw="flex h-full w-full items-center p-1 text-center">
-        {stringGetter({ key: STRING_KEYS.SOMETHING_WENT_WRONG })}
-      </div>
-    );
+    return <LoadingSpace />;
   }
 
   return (