Dynamic NTT and token config files via JSON (#1278)

* Dynamic ntt routes via json * comment deleted * All tokens config into jsons * remove jsons from main branch * env * Add dynamic JSON 2 * stupid rule * different files for prod and previews * no comments * PR Feedback
XLabs · Feb 5, 2025 · 8785ca0 · 8785ca0
1 parent d00170c
commit 8785ca0
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 1,692 deletions.
diff --git a/apps/connect/src/components/atoms/Connect.tsx b/apps/connect/src/components/atoms/Connect.tsx
@@ -1,10 +1,14 @@
-import { memo, useEffect } from "react";
-import WormholeConnect from "@wormhole-foundation/wormhole-connect";
+import { memo, useEffect, useState } from "react";
+import WormholeConnect, {
+  nttRoutes,
+} from "@wormhole-foundation/wormhole-connect";
 import { useConnectConfig } from "../../hooks/useConnectConfig";
-import { styled } from "@mui/material";
+import { styled, CircularProgress } from "@mui/material";
 import { NAVBAR_WIDTH } from "./NavBar";
 import { theme } from "../../theme/connect";
 import { Banner } from "./Banner";
+import { WormholeConnectConfig } from "@wormhole-foundation/wormhole-connect";
+import { fetchTokensConfig } from "../../utils/fetchTokens";
 
 export const Container = styled("div")(({ theme }) => ({
   paddingRight: `${NAVBAR_WIDTH}px`,
@@ -14,21 +18,68 @@ export const Container = styled("div")(({ theme }) => ({
 }));
 
 export const Connect = memo(() => {
-  const config = useConnectConfig();
+  const [isLoading, setIsLoading] = useState(true);
+  const [config, setConfig] = useState<WormholeConnectConfig | null>(null);
+
+  const offlineConfig = useConnectConfig();
 
   useEffect(() => {
-    if (config) {
-      localStorage.setItem(
-        `${window.location.href}?${import.meta.env.VITE_APP_VERSION}`,
-        JSON.stringify(config, null, 2)
-      );
+    if (offlineConfig) {
+      const asyncConfig = async () => {
+        const { nttTokensConfig, tokensConfig, wrappedTokensConfig } =
+          await fetchTokensConfig("Mainnet");
+
+        const nttRoutesConfig = nttTokensConfig
+          ? nttRoutes({ tokens: nttTokensConfig })
+          : [];
+
+        const allTokensConfig: any = {};
+        if (wrappedTokensConfig) {
+          allTokensConfig.wrappedTokens = wrappedTokensConfig;
+        }
+        if (tokensConfig) {
+          allTokensConfig.tokensConfig = tokensConfig;
+        }
+
+        const fullConfig = {
+          ...offlineConfig,
+          routes: [...(offlineConfig.routes || []), ...nttRoutesConfig],
+          ...allTokensConfig,
+        };
+
+        setConfig(fullConfig);
+
+        localStorage.setItem(
+          `${window.location.href}?${import.meta.env.VITE_APP_VERSION}`,
+          JSON.stringify(fullConfig, null, 2)
+        );
+
+        setIsLoading(false);
+      };
+
+      asyncConfig();
     }
-  }, [config]);
+  }, [offlineConfig]);
 
   return (
     <Container>
-      {!!config && <WormholeConnect config={config} theme={theme} />}
-      <Banner />
+      {isLoading ? (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "self-end",
+            height: "100%",
+          }}
+        >
+          <CircularProgress size={30} />
+        </div>
+      ) : (
+        <>
+          {!!config && <WormholeConnect config={config} theme={theme} />}
+          <Banner />
+        </>
+      )}
     </Container>
   );
 });