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 {
|
import {
|
||||||
Container,
|
Container,
|
||||||
Step,
|
Step,
|
||||||
|
@ -5,11 +6,12 @@ import {
|
||||||
StepContent,
|
StepContent,
|
||||||
Stepper,
|
Stepper,
|
||||||
} from "@material-ui/core";
|
} from "@material-ui/core";
|
||||||
import { useEffect } from "react";
|
import { useEffect, useMemo } from "react";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { useLocation } from "react-router";
|
||||||
import useCheckIfWormholeWrapped from "../../hooks/useCheckIfWormholeWrapped";
|
import useCheckIfWormholeWrapped from "../../hooks/useCheckIfWormholeWrapped";
|
||||||
import useFetchTargetAsset from "../../hooks/useFetchTargetAsset";
|
import useFetchTargetAsset from "../../hooks/useFetchTargetAsset";
|
||||||
import { setStep } from "../../store/nftSlice";
|
import { setSourceChain, setStep, setTargetChain } from "../../store/nftSlice";
|
||||||
import {
|
import {
|
||||||
selectNFTActiveStep,
|
selectNFTActiveStep,
|
||||||
selectNFTIsRedeemComplete,
|
selectNFTIsRedeemComplete,
|
||||||
|
@ -17,6 +19,7 @@ import {
|
||||||
selectNFTIsSendComplete,
|
selectNFTIsSendComplete,
|
||||||
selectNFTIsSending,
|
selectNFTIsSending,
|
||||||
} from "../../store/selectors";
|
} from "../../store/selectors";
|
||||||
|
import { CHAINS_WITH_NFT_SUPPORT } from "../../utils/consts";
|
||||||
import Redeem from "./Redeem";
|
import Redeem from "./Redeem";
|
||||||
import RedeemPreview from "./RedeemPreview";
|
import RedeemPreview from "./RedeemPreview";
|
||||||
import Send from "./Send";
|
import Send from "./Send";
|
||||||
|
@ -37,6 +40,39 @@ function NFT() {
|
||||||
const isRedeemComplete = useSelector(selectNFTIsRedeemComplete);
|
const isRedeemComplete = useSelector(selectNFTIsRedeemComplete);
|
||||||
const preventNavigation =
|
const preventNavigation =
|
||||||
(isSending || isSendComplete || isRedeeming) && !isRedeemComplete;
|
(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(() => {
|
useEffect(() => {
|
||||||
if (preventNavigation) {
|
if (preventNavigation) {
|
||||||
window.onbeforeunload = () => true;
|
window.onbeforeunload = () => true;
|
||||||
|
|
|
@ -36,7 +36,7 @@ import { ethers } from "ethers";
|
||||||
import { useSnackbar } from "notistack";
|
import { useSnackbar } from "notistack";
|
||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { useHistory } from "react-router";
|
import { useHistory, useLocation } from "react-router";
|
||||||
import { useEthereumProvider } from "../contexts/EthereumProviderContext";
|
import { useEthereumProvider } from "../contexts/EthereumProviderContext";
|
||||||
import useIsWalletReady from "../hooks/useIsWalletReady";
|
import useIsWalletReady from "../hooks/useIsWalletReady";
|
||||||
import { COLORS } from "../muiTheme";
|
import { COLORS } from "../muiTheme";
|
||||||
|
@ -44,6 +44,7 @@ import { setRecoveryVaa as setRecoveryNFTVaa } from "../store/nftSlice";
|
||||||
import { setRecoveryVaa } from "../store/transferSlice";
|
import { setRecoveryVaa } from "../store/transferSlice";
|
||||||
import {
|
import {
|
||||||
CHAINS,
|
CHAINS,
|
||||||
|
CHAINS_BY_ID,
|
||||||
CHAINS_WITH_NFT_SUPPORT,
|
CHAINS_WITH_NFT_SUPPORT,
|
||||||
getBridgeAddressForChain,
|
getBridgeAddressForChain,
|
||||||
getNFTBridgeAddressForChain,
|
getNFTBridgeAddressForChain,
|
||||||
|
@ -194,6 +195,33 @@ export default function Recovery() {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
}, [recoveryParsedVAA, isNFT]);
|
}, [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(() => {
|
useEffect(() => {
|
||||||
if (recoverySourceTx && (!isEVMChain(recoverySourceChain) || isReady)) {
|
if (recoverySourceTx && (!isEVMChain(recoverySourceChain) || isReady)) {
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { ChainId } from "@certusone/wormhole-sdk";
|
||||||
import {
|
import {
|
||||||
Container,
|
Container,
|
||||||
Step,
|
Step,
|
||||||
|
@ -5,8 +6,9 @@ import {
|
||||||
StepContent,
|
StepContent,
|
||||||
Stepper,
|
Stepper,
|
||||||
} from "@material-ui/core";
|
} from "@material-ui/core";
|
||||||
import { useEffect } from "react";
|
import { useEffect, useMemo } from "react";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { useLocation } from "react-router";
|
||||||
import useCheckIfWormholeWrapped from "../../hooks/useCheckIfWormholeWrapped";
|
import useCheckIfWormholeWrapped from "../../hooks/useCheckIfWormholeWrapped";
|
||||||
import useFetchTargetAsset from "../../hooks/useFetchTargetAsset";
|
import useFetchTargetAsset from "../../hooks/useFetchTargetAsset";
|
||||||
import {
|
import {
|
||||||
|
@ -16,7 +18,12 @@ import {
|
||||||
selectTransferIsSendComplete,
|
selectTransferIsSendComplete,
|
||||||
selectTransferIsSending,
|
selectTransferIsSending,
|
||||||
} from "../../store/selectors";
|
} 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 Redeem from "./Redeem";
|
||||||
import RedeemPreview from "./RedeemPreview";
|
import RedeemPreview from "./RedeemPreview";
|
||||||
import Send from "./Send";
|
import Send from "./Send";
|
||||||
|
@ -37,6 +44,37 @@ function Transfer() {
|
||||||
const isRedeemComplete = useSelector(selectTransferIsRedeemComplete);
|
const isRedeemComplete = useSelector(selectTransferIsRedeemComplete);
|
||||||
const preventNavigation =
|
const preventNavigation =
|
||||||
(isSending || isSendComplete || isRedeeming) && !isRedeemComplete;
|
(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(() => {
|
useEffect(() => {
|
||||||
if (preventNavigation) {
|
if (preventNavigation) {
|
||||||
window.onbeforeunload = () => true;
|
window.onbeforeunload = () => true;
|
||||||
|
|
Loading…
Reference in New Issue