diff --git a/apps/connect/src/App.tsx b/apps/connect/src/App.tsx index daa928e94..493c054f9 100644 --- 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 { useMemo } from "react"; +import type { ChainName, WormholeConnectConfig } from "@wormhole-foundation/wormhole-connect"; +import { useEffect, 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 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