fix query params deep link

XLabs · Nov 21, 2023 · db13d43 · db13d43
1 parent 6f36946
commit db13d43
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 15 deletions.
diff --git a/apps/connect/src/App.tsx b/apps/connect/src/App.tsx
@@ -1,11 +1,12 @@
-import type { WormholeConnectConfig } from "@wormhole-foundation/wormhole-connect";
+import type { ChainName, WormholeConnectConfig } from "@wormhole-foundation/wormhole-connect";
 import { useMemo } from "react";
 import customTheme from "./theme/connect";
 import mui from "./theme/portal";
 import NavBar from "./components/atoms/NavBar";
 import NewsBar from "./components/atoms/NewsBar";
 import messageConfig from "./configs/messages";
 import ConnectLoader from "./components/ConnectLoader";
+import { useQueryParams } from "./hooks/useQueryParams";
 
 const defaultConfig: WormholeConnectConfig = {
   ...wormholeConnectConfig,
@@ -14,20 +15,31 @@ const defaultConfig: WormholeConnectConfig = {
 };
 
 export default function Root() {
-  const query = new URLSearchParams(window.location.search);
-  const txHash = query.get("txHash");
-  const sourceChain = query.get("sourceChain");
-  const config = useMemo(() => {
-    if (txHash && sourceChain) {
-      return {
-        ...defaultConfig,
-        txHash,
-        sourceChain,
-      };
-    } else {
-      return defaultConfig;
-    }
-  }, []);
+  const { txHash, transactionId, sourceChain, targetChain } = useQueryParams();
+  const config = useMemo(
+    () => ({
+      ...defaultConfig,
+      ...(txHash &&
+        sourceChain && {
+          searchTx: {
+            txHash,
+            sourceChain,
+          },
+        }),
+      ...(transactionId &&
+        sourceChain && {
+          searchTx: {
+            txHash: transactionId,
+            sourceChain,
+          },
+        }),
+      bridgeDefaults: {
+        fromNetwork: sourceChain as ChainName || null,
+        toNetwork: targetChain as ChainName || null,
+      },
+    }),
+    [txHash, transactionId, sourceChain, targetChain]
+  );
   const messages = Object.values(messageConfig);
   return (
     <>

diff --git a/apps/connect/src/hooks/useQueryParams.ts b/apps/connect/src/hooks/useQueryParams.ts
@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+
+export function useQueryParams() {
+    const query = new URLSearchParams(window.location.search);
+    const txHash = useMemo(() => query.get("txHash"), [query]);
+    const transactionId = useMemo(() => query.get("transactionId"), []);
+    const sourceChain = useMemo(() => query.get("sourceChain"), []);
+    const targetChain = useMemo(() => query.get("targetChain"), []);
+    return {
+        txHash,
+        transactionId,
+        sourceChain,
+        targetChain
+    }
+};