[Feature] Refactor chain services handling in API calls (thirdweb-dev…

…#4037)
theonrex · Aug 11, 2024 · 40fbe9a · 40fbe9a
1 parent 74e0052
commit 40fbe9a
Show file tree

Hide file tree

Showing 7 changed files with 231 additions and 280 deletions.
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -119,7 +119,7 @@
     "@chakra-ui/cli": "^2.4.1",
     "@next/bundle-analyzer": "^14.2.4",
     "@next/eslint-plugin-next": "^14.2.4",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "1.44.1",
     "@types/color": "^3.0.6",
     "@types/node": "20.14.9",
     "@types/papaparse": "^5.3.14",

diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/types/chain.ts b/apps/dashboard/src/app/(dashboard)/(chain)/types/chain.ts
@@ -7,11 +7,18 @@ export type ChainSupportedService =
   | "account-abstraction"
   | "pay"
   | "faucet"
-  | "rpc-edge";
+  | "rpc-edge"
+  | "chainsaw";
 
 export type ChainService = {
   service: ChainSupportedService;
   enabled: boolean;
+  status: "enabled" | "disabled";
+};
+
+export type ChainServices = {
+  chainId: number;
+  services: Array<ChainService>;
 };
 
 export type ChainMetadataWithServices = ChainMetadata & {

diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/utils.ts b/apps/dashboard/src/app/(dashboard)/(chain)/utils.ts
@@ -24,44 +24,69 @@ import vanarBanner from "./temp-assets/vanar-banner.png";
 import vanarCTABG from "./temp-assets/vanar-cta.png";
 import xaiBanner from "./temp-assets/xai-banner.jpg";
 
-import type { ChainMetadataWithServices } from "./types/chain";
-
 // END TEMPORARY
 
+import type { ChainMetadata } from "thirdweb/chains";
+import type {
+  ChainMetadataWithServices,
+  ChainService,
+  ChainServices,
+} from "./types/chain";
+
 const THIRDWEB_API_HOST =
   process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
 
 export async function getChains() {
-  const response = await fetch(
-    `${THIRDWEB_API_HOST}/v1/chains?includeServices=true`,
-    // revalidate every hour
-    { next: { revalidate: 60 * 60 } },
-  );
+  const [chains, chainServices] = await Promise.all([
+    fetch(
+      `${THIRDWEB_API_HOST}/v1/chains`,
+      // revalidate every 60 minutes
+      { next: { revalidate: 60 * 60 } },
+    ).then((res) => res.json()) as Promise<{ data: ChainMetadata[] }>,
+    fetch(
+      `${THIRDWEB_API_HOST}/v1/chains/services`,
+      // revalidate every 60 minutes
+      { next: { revalidate: 60 * 60 } },
+    ).then((res) => res.json()) as Promise<{
+      data: Record<number, Array<ChainService>>;
+    }>,
+  ]);
 
-  if (!response.ok) {
-    response.body?.cancel();
+  if (!chains.data.length) {
     throw new Error("Failed to fetch chains");
   }
-  return (await response.json()).data as ChainMetadataWithServices[];
+  return chains.data.map((c) => ({
+    ...c,
+    services: chainServices.data[c.chainId] || [],
+  })) satisfies ChainMetadataWithServices[];
 }
 
 export async function getChain(
   chainIdOrSlug: string,
 ): Promise<ChainMetadataWithServices> {
-  const res = await fetch(
-    `${THIRDWEB_API_HOST}/v1/chains/${chainIdOrSlug}?includeServices=true`,
-    // revalidate every 15 minutes
-    { next: { revalidate: 15 * 60 } },
-  );
+  const [chain, chainServices] = await Promise.all([
+    fetch(
+      `${THIRDWEB_API_HOST}/v1/chains/${chainIdOrSlug}`,
+      // revalidate every 15 minutes
+      { next: { revalidate: 15 * 60 } },
+    ).then((res) => res.json()) as Promise<{ data: ChainMetadata }>,
+    fetch(
+      `${THIRDWEB_API_HOST}/v1/chains/${chainIdOrSlug}/services`,
+      // revalidate every 15 minutes
+      { next: { revalidate: 15 * 60 } },
+    ).then((res) => res.json()) as Promise<{ data: ChainServices }>,
+  ]);
 
-  const result = await res.json();
-  if (!result.data) {
+  if (!chain.data) {
     redirect("/404");
   }
-  return result.data as ChainMetadataWithServices;
+  return {
+    ...chain.data,
+    services: chainServices.data.services,
+  } satisfies ChainMetadataWithServices;
 }
 
-type ChainMetadata = Partial<{
+type ExtraChainMetadata = Partial<{
   headerImgUrl: string;
   about: string;
   gasSponsored: boolean;
@@ -321,12 +346,12 @@ const chainMetaRecord = {
       buttonText: "Learn more",
     },
   },
-} satisfies Record<number, ChainMetadata>;
+} satisfies Record<number, ExtraChainMetadata>;
 // END TEMPORARY
 
 export async function getChainMetadata(
   chainId: number,
-): Promise<ChainMetadata | null> {
+): Promise<ExtraChainMetadata | null> {
   // TODO: fetch this from the API
   if (chainId in chainMetaRecord) {
     return chainMetaRecord[chainId as keyof typeof chainMetaRecord];

diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -28,7 +28,10 @@ import { useQuery } from "@tanstack/react-query";
 import { useSDK, useSDKChainId } from "@thirdweb-dev/react";
 import { FaucetButton } from "app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton";
 import { GiftIcon } from "app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/icons/GiftIcon";
-import type { ChainMetadataWithServices } from "app/(dashboard)/(chain)/types/chain";
+import type {
+  ChainMetadataWithServices,
+  ChainServices,
+} from "app/(dashboard)/(chain)/types/chain";
 import { getSDKTheme } from "app/components/sdk-component-theme";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useSupportedChain } from "hooks/chains/configureChains";
@@ -229,20 +232,23 @@ function NoFundsDialogContent(props: {
   onCloseModal: () => void;
 }) {
   const chainWithServiceInfoQuery = useQuery({
-    queryKey: ["chain", props.chain.id],
+    queryKey: ["chain-with-services", props.chain.id],
     queryFn: async () => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/chains/${props.chain.id}?includeServices=true`,
-      );
-
-      const result = await res.json();
-
-      if (!result.data) {
-        throw new Error("Failed to fetch chain metadata with services");
-      }
-
-      return result.data as ChainMetadataWithServices;
+      const [chain, chainServices] = await Promise.all([
+        fetch(`${THIRDWEB_API_HOST}/v1/chains/${props.chain.id}`).then((res) =>
+          res.json(),
+        ) as Promise<{ data: ChainMetadata }>,
+        fetch(`${THIRDWEB_API_HOST}/v1/chains/${props.chain.id}/services`).then(
+          (res) => res.json(),
+        ) as Promise<{ data: ChainServices }>,
+      ]);
+
+      return {
+        ...chain.data,
+        services: chainServices.data.services,
+      } satisfies ChainMetadataWithServices;
     },
+    enabled: !!props.chain.id,
   });
 
   return (
@@ -261,30 +267,34 @@ function NoFundsDialogContent(props: {
         </DialogHeader>
 
         {/* Get Funds content */}
+
         {!chainWithServiceInfoQuery.data ? (
           <div className="h-[300px] flex justify-center items-center">
             <Spinner className="size-10" />
           </div>
         ) : (
           <div>
-            {props.chain.id === localhost.id && <GetLocalHostTestnetFunds />}
-
-            {props.chain.id !== localhost.id &&
-              chainWithServiceInfoQuery.data.testnet && (
-                <GetFundsFromFaucet chain={chainWithServiceInfoQuery.data} />
-              )}
-
-            {chainWithServiceInfoQuery.data.services.find(
-              (x) => x.enabled && x.service === "pay",
-            ) && (
+            {props.chain.id === localhost.id ? (
+              // localhost case
+              <GetLocalHostTestnetFunds />
+            ) : chainWithServiceInfoQuery.data.services.find(
+                (x) => x.enabled && x.service === "faucet",
+              ) ? (
+              // faucet case
+              <GetFundsFromFaucet chain={chainWithServiceInfoQuery.data} />
+            ) : chainWithServiceInfoQuery.data.services.find(
+                (x) => x.enabled && x.service === "pay",
+              ) ? (
+              // pay case
               <ButtonShadcn
                 variant="primary"
                 className="w-full"
                 onClick={props.openPayModal}
               >
                 Buy Funds
               </ButtonShadcn>
-            )}
+            ) : // no funds options available
+            null}
           </div>
         )}
       </div>

diff --git a/legacy_packages/wallets/package.json b/legacy_packages/wallets/package.json
@@ -580,7 +580,7 @@
   "devDependencies": {
     "@aws-sdk/client-secrets-manager": "^3.549.0",
     "@babel/plugin-transform-class-properties": "^7.24.1",
-    "@babel/plugin-transform-flow-strip-types": "^7.24.1",
+    "@babel/plugin-transform-flow-strip-types": "^7.24.7",
     "@babel/plugin-transform-private-methods": "^7.24.7",
     "@microsoft/api-extractor": "^7.47.0",
     "@nomiclabs/hardhat-ethers": "^2.2.3",

diff --git a/package.json b/package.json
@@ -61,15 +61,15 @@
     "@types/react": "^18.3.3",
     "@viem/anvil": "0.0.10",
     "@vitest/coverage-v8": "1.6.0",
-    "dotenv-mono": "1.3.14",
+    "dotenv-mono": "^1.3.14",
     "eslint-plugin-i18next": "^6.0.3",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-inclusive-language": "^2.2.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-tsdoc": "^0.3.0",
     "ethers5": "npm:[email protected]",
     "ethers6": "npm:[email protected]",
-    "knip": "5.23.1",
+    "knip": "^5.23.1",
     "mitata": "0.1.11",
     "react": "18.3.1",
     "rimraf": "5.0.7",