From db13d4327e95a74a4b67706cce2e8a8f6570a6e7 Mon Sep 17 00:00:00 2001 From: Sebastian Scatularo Date: Tue, 21 Nov 2023 18:51:16 -0300 Subject: [PATCH] fix query params deep link --- apps/connect/src/App.tsx | 42 +++++++++++++++--------- apps/connect/src/hooks/useQueryParams.ts | 15 +++++++++ 2 files changed, 42 insertions(+), 15 deletions(-) create mode 100644 apps/connect/src/hooks/useQueryParams.ts diff --git a/apps/connect/src/App.tsx b/apps/connect/src/App.tsx index daa928e94..8d4332d87 100644 --- a/apps/connect/src/App.tsx +++ b/apps/connect/src/App.tsx @@ -1,4 +1,4 @@ -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"; @@ -6,6 +6,7 @@ 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 new file mode 100644 index 000000000..3dd7e062a --- /dev/null +++ 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 + } +}; \ No newline at end of file