rework queries

configs/app/features/marketplace.ts

@@ -11,28 +11,32 @@ const adminServiceApiHost = getEnvValue('NEXT_PUBLIC_ADMIN_SERVICE_API_HOST');
 
 const title = 'Marketplace';
 
-const config: Feature<{
-  configUrl: string | undefined;
-  submitFormUrl: string;
-  categoriesUrl: string | undefined;
-  api: { endpoint: string; basePath: string } | undefined;
-}> = (() => {
-  if (
-    chain.rpcUrl &&
-    (configUrl || adminServiceApiHost) &&
-    submitFormUrl
-  ) {
-    return Object.freeze({
-      title,
-      isEnabled: true,
-      configUrl: adminServiceApiHost ? undefined : configUrl,
-      submitFormUrl,
-      categoriesUrl,
-      api: adminServiceApiHost ? {
-        endpoint: adminServiceApiHost,
-        basePath: '',
-      } : undefined,
-    });
+const config: Feature<(
+  { configUrl: string } |
+  { api: { endpoint: string; basePath: string } }
+) & { submitFormUrl: string; categoriesUrl: string | undefined }
+> = (() => {
+  if (chain.rpcUrl && submitFormUrl) {
+    if (adminServiceApiHost) {
+      return Object.freeze({
+        title,
+        isEnabled: true,
+        submitFormUrl,
+        categoriesUrl,
+        api: {
+          endpoint: adminServiceApiHost,
+          basePath: '',
+        },
+      });
+    } else if (configUrl) {
+      return Object.freeze({
+        title,
+        isEnabled: true,
+        configUrl,
+        submitFormUrl,
+        categoriesUrl,
+      });
+    }
   }
 
   return Object.freeze({

lib/api/resources.ts

@@ -82,7 +82,6 @@ import type { VerifiedContractsSorting } from 'types/api/verifiedContracts';
 import type { VisualizedContract } from 'types/api/visualization';
 import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals';
 import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem, ZkEvmL2TxnBatchesResponse, ZkEvmL2TxnBatchTxs } from 'types/api/zkEvmL2TxnBatches';
-import type { MarketplaceAppOverview } from 'types/client/marketplace';
 import type { ArrayElement } from 'types/utils';
 
 import config from 'configs/app';
@@ -215,20 +214,6 @@ export const RESOURCES = {
     filterFields: [ 'name' as const, 'only_active' as const ],
   },
 
-  // MARKETPLACE
-  marketplace_dapps: {
-    path: '/api/v1/chains/:chainId/marketplace/dapps',
-    pathParams: [ 'chainId' as const ],
-    endpoint: getFeaturePayload(config.features.marketplace)?.api?.endpoint,
-    basePath: getFeaturePayload(config.features.marketplace)?.api?.basePath,
-  },
-  marketplace_dapp: {
-    path: '/api/v1/chains/:chainId/marketplace/dapps/:dappId',
-    pathParams: [ 'chainId' as const, 'dappId' as const ],
-    endpoint: getFeaturePayload(config.features.marketplace)?.api?.endpoint,
-    basePath: getFeaturePayload(config.features.marketplace)?.api?.basePath,
-  },
-
   // VISUALIZATION
   visualize_sol2uml: {
     path: '/api/v1/solidity\\:visualize-contracts',
@@ -787,8 +772,6 @@ Q extends 'domains_lookup' ? EnsDomainLookupResponse :
 Q extends 'user_ops' ? UserOpsResponse :
 Q extends 'user_op' ? UserOp :
 Q extends 'user_ops_account' ? UserOpsAccount :
-Q extends 'marketplace_dapps' ? Array<MarketplaceAppOverview> :
-Q extends 'marketplace_dapp' ? MarketplaceAppOverview :
 never;
 /* eslint-enable @typescript-eslint/indent */
 

ui/marketplace/useMarketplaceApps.tsx

@@ -6,7 +6,6 @@ import { MarketplaceCategory } from 'types/client/marketplace';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
-import useApiQuery from 'lib/api/useApiQuery';
 import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useApiFetch from 'lib/hooks/useFetch';
 import { MARKETPLACE_APP } from 'stubs/marketplace';
@@ -47,36 +46,28 @@ function sortApps(apps: Array<MarketplaceAppOverview>, isExperiment: boolean) {
   });
 }
 
-function useAppsQuery() {
+export default function useMarketplaceApps(filter: string, selectedCategoryId: string = MarketplaceCategory.ALL, favoriteApps: Array<string> = []) {
   const apiFetch = useApiFetch();
   const { value: isExperiment } = useFeatureValue('marketplace_exp', false);
 
-  const placeholderData = feature.isEnabled ? Array(9).fill(MARKETPLACE_APP) : undefined;
+  const { isPlaceholderData, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppOverview>>({
+    queryKey: [ 'marketplace-dapps' ],
+    queryFn: async() => {
+      if (!feature.isEnabled) {
+        return [];
+      }
+      const url = 'configUrl' in feature ?
+        feature.configUrl :
+        feature.api.endpoint + `/api/v1/chains/${ config.chain.id }/marketplace/dapps`;
 
-  const data1 = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppOverview>>({
-    queryKey: [ 'marketplace-apps' ],
-    queryFn: async() => apiFetch(feature.isEnabled && feature.configUrl ? feature.configUrl : '', undefined, { resource: 'marketplace-apps' }),
+      return apiFetch<Array<MarketplaceAppOverview>, unknown>(url, undefined, { resource: 'marketplace-dapps' });
+    },
     select: (data) => sortApps(data as Array<MarketplaceAppOverview>, isExperiment),
-    placeholderData,
+    placeholderData: feature.isEnabled ? Array(9).fill(MARKETPLACE_APP) : undefined,
     staleTime: Infinity,
     enabled: feature.isEnabled,
   });
 
-  const data2 = useApiQuery('marketplace_dapps', {
-    pathParams: { chainId: config.chain.id },
-    queryOptions: {
-      select: (data) => sortApps(data as Array<MarketplaceAppOverview>, isExperiment),
-      placeholderData,
-      enabled: feature.isEnabled,
-    },
-  });
-
-  return feature.isEnabled && feature.configUrl ? data1 : data2;
-}
-
-export default function useMarketplaceApps(filter: string, selectedCategoryId: string = MarketplaceCategory.ALL, favoriteApps: Array<string> = []) {
-  const { isPlaceholderData, isError, error, data } = useAppsQuery();
-
   const displayedApps = React.useMemo(() => {
     return data?.filter(app => isAppNameMatches(filter, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps)) || [];
   }, [ selectedCategoryId, data, filter, favoriteApps ]);

ui/pages/MarketplaceApp.tsx

@@ -10,7 +10,6 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
-import useApiQuery from 'lib/api/useApiQuery';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import useApiFetch from 'lib/hooks/useFetch';
 import * as metadata from 'lib/metadata';
@@ -94,44 +93,41 @@ const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
   );
 };
 
-function useAppQuery(id: string) {
+const MarketplaceApp = () => {
+  const { address, sendTransaction, signMessage, signTypedData } = useMarketplaceWallet();
   const apiFetch = useApiFetch();
 
-  const data1 = useQuery<unknown, ResourceError<unknown>, MarketplaceAppOverview>({
-    queryKey: [ 'marketplace-apps', id ],
+  const router = useRouter();
+  const id = getQueryParamString(router.query.id);
+
+  const query = useQuery<unknown, ResourceError<unknown>, MarketplaceAppOverview>({
+    queryKey: [ 'marketplace-dapps', id ],
     queryFn: async() => {
-      const configUrl = feature.isEnabled && feature.configUrl ? feature.configUrl : '';
-      const result = await apiFetch<Array<MarketplaceAppOverview>, unknown>(configUrl, undefined, { resource: 'marketplace-apps' });
-      if (!Array.isArray(result)) {
-        throw result;
+      if (!feature.isEnabled) {
+        return null;
       }
-      const item = result.find((app: MarketplaceAppOverview) => app.id === id);
-      if (!item) {
-        throw { status: 404 };
+      const isConfigFile = 'configUrl' in feature;
+      const url = isConfigFile ?
+        feature.configUrl :
+        feature.api.endpoint + `/api/v1/chains/${ config.chain.id }/marketplace/dapps/${ id }`;
+
+      const result = await apiFetch<Array<MarketplaceAppOverview>, unknown>(url, undefined, { resource: 'marketplace-dapps' });
+
+      if (isConfigFile) {
+        if (!Array.isArray(result)) {
+          throw result;
+        }
+        const item = result.find((app: MarketplaceAppOverview) => app.id === id);
+        if (!item) {
+          throw { status: 404 };
+        }
+        return item;
       }
 
-      return item;
+      return result;
     },
     enabled: feature.isEnabled,
   });
-
-  const data2 = useApiQuery('marketplace_dapp', {
-    pathParams: { chainId: config.chain.id, dappId: id },
-    queryOptions: {
-      enabled: feature.isEnabled,
-    },
-  });
-
-  return feature.isEnabled && feature.configUrl ? data1 : data2;
-}
-
-const MarketplaceApp = () => {
-  const { address, sendTransaction, signMessage, signTypedData } = useMarketplaceWallet();
-
-  const router = useRouter();
-  const id = getQueryParamString(router.query.id);
-
-  const query = useAppQuery(id);
   const { data, isPending } = query;
 
   useEffect(() => {