bridge_ui: add query strings to transfer urls

bridge_ui/src/components/NFT/index.tsx

@@ -1,3 +1,4 @@
+import { ChainId } from "@certusone/wormhole-sdk";
 import {
   Container,
   Step,
@@ -5,11 +6,12 @@ import {
   StepContent,
   Stepper,
 } from "@material-ui/core";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useLocation } from "react-router";
 import useCheckIfWormholeWrapped from "../../hooks/useCheckIfWormholeWrapped";
 import useFetchTargetAsset from "../../hooks/useFetchTargetAsset";
-import { setStep } from "../../store/nftSlice";
+import { setSourceChain, setStep, setTargetChain } from "../../store/nftSlice";
 import {
   selectNFTActiveStep,
   selectNFTIsRedeemComplete,
@@ -17,6 +19,7 @@ import {
   selectNFTIsSendComplete,
   selectNFTIsSending,
 } from "../../store/selectors";
+import { CHAINS_WITH_NFT_SUPPORT } from "../../utils/consts";
 import Redeem from "./Redeem";
 import RedeemPreview from "./RedeemPreview";
 import Send from "./Send";
@@ -37,6 +40,39 @@ function NFT() {
   const isRedeemComplete = useSelector(selectNFTIsRedeemComplete);
   const preventNavigation =
     (isSending || isSendComplete || isRedeeming) && !isRedeemComplete;
+
+  const { search } = useLocation();
+  const query = useMemo(() => new URLSearchParams(search), [search]);
+  const pathSourceChain = query.get("sourceChain");
+  const pathTargetChain = query.get("targetChain");
+
+  //This effect initializes the state based on the path params
+  useEffect(() => {
+    if (!pathSourceChain && !pathTargetChain) {
+      return;
+    }
+    try {
+      const sourceChain: ChainId | undefined = CHAINS_WITH_NFT_SUPPORT.find(
+        (x) => parseFloat(pathSourceChain || "") === x.id
+      )?.id;
+      const targetChain: ChainId | undefined = CHAINS_WITH_NFT_SUPPORT.find(
+        (x) => parseFloat(pathTargetChain || "") === x.id
+      )?.id;
+
+      if (sourceChain === targetChain) {
+        return;
+      }
+      if (sourceChain) {
+        dispatch(setSourceChain(sourceChain));
+      }
+      if (targetChain) {
+        dispatch(setTargetChain(targetChain));
+      }
+    } catch (e) {
+      console.error("Invalid path params specified.");
+    }
+  }, [pathSourceChain, pathTargetChain, dispatch]);
+
   useEffect(() => {
     if (preventNavigation) {
       window.onbeforeunload = () => true;

bridge_ui/src/components/Recovery.tsx

@@ -36,7 +36,7 @@ import { ethers } from "ethers";
 import { useSnackbar } from "notistack";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
-import { useHistory } from "react-router";
+import { useHistory, useLocation } from "react-router";
 import { useEthereumProvider } from "../contexts/EthereumProviderContext";
 import useIsWalletReady from "../hooks/useIsWalletReady";
 import { COLORS } from "../muiTheme";
@@ -44,6 +44,7 @@ import { setRecoveryVaa as setRecoveryNFTVaa } from "../store/nftSlice";
 import { setRecoveryVaa } from "../store/transferSlice";
 import {
   CHAINS,
+  CHAINS_BY_ID,
   CHAINS_WITH_NFT_SUPPORT,
   getBridgeAddressForChain,
   getNFTBridgeAddressForChain,
@@ -194,6 +195,33 @@ export default function Recovery() {
       return null;
     }
   }, [recoveryParsedVAA, isNFT]);
+
+  const { search } = useLocation();
+  const query = useMemo(() => new URLSearchParams(search), [search]);
+  const pathSourceChain = query.get("sourceChain");
+  const pathSourceTransaction = query.get("transactionId");
+
+  //This effect initializes the state based on the path params.
+  useEffect(() => {
+    if (!pathSourceChain && !pathSourceTransaction) {
+      return;
+    }
+    try {
+      const sourceChain: ChainId =
+        CHAINS_BY_ID[parseFloat(pathSourceChain || "") as ChainId]?.id;
+
+      if (sourceChain) {
+        setRecoverySourceChain(sourceChain);
+      }
+      if (pathSourceTransaction) {
+        setRecoverySourceTx(pathSourceTransaction);
+      }
+    } catch (e) {
+      console.error(e);
+      console.error("Invalid path params specified.");
+    }
+  }, [pathSourceChain, pathSourceTransaction]);
+
   useEffect(() => {
     if (recoverySourceTx && (!isEVMChain(recoverySourceChain) || isReady)) {
       let cancelled = false;

bridge_ui/src/components/Transfer/index.tsx

@@ -1,3 +1,4 @@
+import { ChainId } from "@certusone/wormhole-sdk";
 import {
   Container,
   Step,
@@ -5,8 +6,9 @@ import {
   StepContent,
   Stepper,
 } from "@material-ui/core";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useLocation } from "react-router";
 import useCheckIfWormholeWrapped from "../../hooks/useCheckIfWormholeWrapped";
 import useFetchTargetAsset from "../../hooks/useFetchTargetAsset";
 import {
@@ -16,7 +18,12 @@ import {
   selectTransferIsSendComplete,
   selectTransferIsSending,
 } from "../../store/selectors";
-import { setStep } from "../../store/transferSlice";
+import {
+  setSourceChain,
+  setStep,
+  setTargetChain,
+} from "../../store/transferSlice";
+import { CHAINS_BY_ID } from "../../utils/consts";
 import Redeem from "./Redeem";
 import RedeemPreview from "./RedeemPreview";
 import Send from "./Send";
@@ -37,6 +44,37 @@ function Transfer() {
   const isRedeemComplete = useSelector(selectTransferIsRedeemComplete);
   const preventNavigation =
     (isSending || isSendComplete || isRedeeming) && !isRedeemComplete;
+
+  const { search } = useLocation();
+  const query = useMemo(() => new URLSearchParams(search), [search]);
+  const pathSourceChain = query.get("sourceChain");
+  const pathTargetChain = query.get("targetChain");
+
+  //This effect initializes the state based on the path params
+  useEffect(() => {
+    if (!pathSourceChain && !pathTargetChain) {
+      return;
+    }
+    try {
+      const sourceChain: ChainId =
+        CHAINS_BY_ID[parseFloat(pathSourceChain || "") as ChainId]?.id;
+      const targetChain: ChainId =
+        CHAINS_BY_ID[parseFloat(pathTargetChain || "") as ChainId]?.id;
+
+      if (sourceChain === targetChain) {
+        return;
+      }
+      if (sourceChain) {
+        dispatch(setSourceChain(sourceChain));
+      }
+      if (targetChain) {
+        dispatch(setTargetChain(targetChain));
+      }
+    } catch (e) {
+      console.error("Invalid path params specified.");
+    }
+  }, [pathSourceChain, pathTargetChain, dispatch]);
+
   useEffect(() => {
     if (preventNavigation) {
       window.onbeforeunload = () => true;