bridge_ui: add query strings to transfer urls
This commit is contained in:
parent
4efa63fe4f
commit
537495b4bb
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue