refactor: rework edge configs and flag support

Signed-off-by: Griko Nibras <griko@nibras.co>

.env.example

@@ -10,7 +10,6 @@ POLKACHU_USER
 POLKACHU_PASSWORD
 
 NEXT_PUBLIC_EDGE_CONFIG=
-NEXT_PUBLIC_FLAGS_OVERRIDE=
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=
 RESEND_API_KEY=
 WALLETCONNECT_VERIFY_KEY=

env.d.ts

@@ -8,7 +8,6 @@ declare namespace NodeJS {
     readonly POLKACHU_PASSWORD?: string;
 
     readonly NEXT_PUBLIC_EDGE_CONFIG?: string;
-    readonly NEXT_PUBLIC_FLAGS_OVERRIDE?: string;
     readonly NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID?: string;
     readonly RESEND_API_KEY?: string;
     readonly WALLETCONNECT_VERIFY_KEY?: string;

src/hooks/useExperimentalFeatures.ts

@@ -0,0 +1,21 @@
+import { ExperimentalFeature } from "@skip-router/core";
+import { useQuery } from "@tanstack/react-query";
+
+export function useExperimentalFeatures() {
+  return useQuery({
+    queryKey: ["USE_EXPERIMENTAL_FEATURES"] as const,
+    queryFn: async () => {
+      try {
+        const response = await fetch("/api/flags");
+        const data = (await response.json()) as ExperimentalFeature[];
+        return data;
+      } catch {
+        //
+      }
+    },
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    retry: false,
+  });
+}

src/lib/edge-config.ts

@@ -1,35 +1,45 @@
+if (typeof window !== "undefined") {
+  throw new Error("edge-config.ts should only be imported on the server");
+}
+
+import { ExperimentalFeature } from "@skip-router/core";
 import { createClient } from "@vercel/edge-config";
 
-function getClient() {
-  return createClient(process.env.NEXT_PUBLIC_EDGE_CONFIG!);
-}
+const client = createClient(process.env.NEXT_PUBLIC_EDGE_CONFIG!);
 
-export async function getCorsDomains(): Promise<string[]> {
+export async function getCorsDomains() {
   try {
-    const client = getClient();
-    const value = await client.get<string[]>("domains");
-    if (Array.isArray(value)) return value;
-    return [];
+    const key = "domains";
+    const value = await client.get<string[]>(key);
+    if (Array.isArray(value)) {
+      return value;
+    }
   } catch (error) {
     console.error(error);
-    return [];
   }
 }
 
-type ExperimentalFeature = /* import('@skip-router/core').ExperimentalFeature */ string;
-
-export async function getClientFlags(): Promise<ExperimentalFeature[]> {
+export async function getExperimentalFeatures() {
   try {
-    if (process.env.NEXT_PUBLIC_FLAGS_OVERRIDE) {
-      const value = process.env.NEXT_PUBLIC_FLAGS_OVERRIDE.split(",").filter(Boolean) as ExperimentalFeature[];
+    const branch = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF;
+    const key = (() => {
+      switch (branch) {
+        case "main":
+          return "experimental-features";
+        case "staging":
+          return "experimental-features-staging";
+        case "dev":
+          return "experimental-features-dev";
+        default:
+          return "experimental-features";
+      }
+    })();
+
+    const value = await client.get<ExperimentalFeature[]>(key);
+    if (Array.isArray(value)) {
       return value;
     }
-    const client = getClient();
-    const value = await client.get<ExperimentalFeature[]>("experimentalFeatures");
-    if (Array.isArray(value)) return value;
-    return [];
   } catch (error) {
     console.error(error);
-    return [];
   }
 }

src/pages/api/flags.ts

@@ -0,0 +1,22 @@
+import { PageConfig } from "next";
+
+import { getExperimentalFeatures } from "@/lib/edge-config";
+
+export const config: PageConfig = {
+  runtime: "edge",
+};
+
+export default async function handler() {
+  try {
+    const flags = await getExperimentalFeatures();
+    return new Response(JSON.stringify(flags), {
+      headers: {
+        "cache-control": "public, s-maxage=1, stale-while-revalidate",
+        "content-type": "application/json",
+      },
+    });
+  } catch (error) {
+    console.error(error);
+    return new Response(null, { status: 500 }); // Internal Server Error
+  }
+}

src/pages/api/version.ts

@@ -14,7 +14,7 @@ export default function handler() {
   }
   return new Response(version, {
     headers: {
-      "cache-control": "s-maxage=1, stale-while-revalidate",
+      "cache-control": "public, s-maxage=1, stale-while-revalidate",
       "content-type": "text/plain",
     },
   });

src/solve/queries.ts

@@ -2,9 +2,9 @@ import { AssetsRequest, ChainTransaction, SwapVenue, TransferState } from "@skip
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 
-import { useSkipClient } from "./hooks";
+import { useExperimentalFeatures } from "@/hooks/useExperimentalFeatures";
 
-// import { getClientFlags } from "@/lib/edge-config";
+import { useSkipClient } from "./hooks";
 
 interface TransferSequence {
   srcChainID: string;
@@ -61,6 +61,8 @@ export function useRoute({
 
   const [refetchCount, setRefetchCount] = useState(0);
 
+  const { data: experimentalFeatures } = useExperimentalFeatures();
+
   const queryKey = useMemo(
     () =>
       [
@@ -72,8 +74,18 @@ export function useRoute({
         sourceAssetChainID,
         destinationAssetChainID,
         swapVenue,
+        experimentalFeatures,
       ] as const,
-    [amount, destinationAsset, destinationAssetChainID, direction, sourceAsset, sourceAssetChainID, swapVenue],
+    [
+      amount,
+      destinationAsset,
+      destinationAssetChainID,
+      direction,
+      sourceAsset,
+      sourceAssetChainID,
+      swapVenue,
+      experimentalFeatures,
+    ],
   );
 
   const query = useQuery({
@@ -88,14 +100,13 @@ export function useRoute({
         sourceAssetChainID,
         destinationAssetChainID,
         swapVenue,
+        experimentalFeatures,
       ],
     }) => {
       if (!sourceAsset || !sourceAssetChainID || !destinationAsset || !destinationAssetChainID) {
         return;
       }
 
-      // const experimentalFeatures = await getClientFlags();
-
       const route = await skipClient.route(
         direction === "swap-in"
           ? {
@@ -106,7 +117,7 @@ export function useRoute({
               destAssetChainID: destinationAssetChainID,
               swapVenue,
               allowUnsafe: true,
-              // experimentalFeatures,
+              experimentalFeatures,
             }
           : {
               amountOut: amount,
@@ -116,7 +127,7 @@ export function useRoute({
               destAssetChainID: destinationAssetChainID,
               swapVenue,
               allowUnsafe: true,
-              // experimentalFeatures,
+              experimentalFeatures,
             },
       );