add terra classic bridge warning + refactor (#234)

* add terra classic warning message * setup transfer control engine to centrlize warning messages * run prettier * fix typo * add warning and disable button on redeem step * apply prettier format * remove unecesary debug code * re name property from isTransferDisabled to isRedeemDisabled * bug fix and code simplifications * refactor and bug fix foreign to native terra classic transfer * revert change * fix prettier issues * update pandle rule * run prettier * revert change to avoid issue on throws error * code review observations * update to align to current naming convetion
XLabs · Jul 13, 2023 · f8e14c2 · f8e14c2
1 parent 6b17bba
commit f8e14c2
Show file tree

Hide file tree

Showing 13 changed files with 343 additions and 132 deletions.
diff --git a/src/components/ChainWarningMessage.tsx b/src/components/ChainWarningMessage.tsx
@@ -1,8 +1,6 @@
-import { ChainId } from "@certusone/wormhole-sdk";
 import { Link, makeStyles, Typography } from "@material-ui/core";
 import { Alert } from "@material-ui/lab";
-import { useMemo } from "react";
-import { CHAIN_CONFIG_MAP } from "../config";
+import { WarningMessage } from "../hooks/useWarningRulesEngine";
 
 const useStyles = makeStyles((theme) => ({
  alert: {
@@ -11,27 +9,22 @@ const useStyles = makeStyles((theme) => ({
  },
 }));
 
-export default function ChainWarningMessage({ chainId }: { chainId: ChainId }) {
- const classes = useStyles();
-
- const warningMessage = useMemo(() => {
- return CHAIN_CONFIG_MAP[chainId]?.warningMessage;
- }, [chainId]);
-
- if (warningMessage === undefined) {
- return null;
- }
+export interface ChainWarningProps {
+ message: WarningMessage;
+}
 
+export default function ChainWarningMessage({ message }: ChainWarningProps) {
+ const classes = useStyles();
  return (
  <Alert variant="outlined" severity="warning" className={classes.alert}>
- {warningMessage.text}
- {warningMessage.link ? (
+ {message.text}
+ {message.link && (
  <Typography component="div">
- <Link href={warningMessage.link.url} target="_blank" rel="noreferrer">
- {warningMessage.link.text}
+ <Link href={message.link.url} target="_blank" rel="noreferrer">
+ {message.link.text}
  </Link>
  </Typography>
- ) : null}
+ )}
  </Alert>
  );
 }
diff --git a/src/components/NFT/Source.tsx b/src/components/NFT/Source.tsx
@@ -2,7 +2,7 @@ import { CHAIN_ID_SOLANA, isEVMChain } from "@certusone/wormhole-sdk";
 import { Button, makeStyles } from "@material-ui/core";
 import { VerifiedUser } from "@material-ui/icons";
 import { Alert } from "@material-ui/lab";
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 import useIsWalletReady from "../../hooks/useIsWalletReady";
@@ -13,12 +13,9 @@ import {
  selectNFTSourceBalanceString,
  selectNFTSourceChain,
  selectNFTSourceError,
+ selectNFTTargetChain,
 } from "../../store/selectors";
-import {
- CHAINS_WITH_NFT_SUPPORT,
- CLUSTER,
- getIsTransferDisabled,
-} from "../../utils/consts";
+import { CHAINS_WITH_NFT_SUPPORT, CLUSTER } from "../../utils/consts";
 import ButtonWithLoader from "../ButtonWithLoader";
 import ChainSelect from "../ChainSelect";
 import KeyAndBalance from "../KeyAndBalance";
@@ -27,6 +24,8 @@ import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import { TokenSelector } from "../TokenSelectors/SourceTokenSelector";
 import ChainWarningMessage from "../ChainWarningMessage";
+import transferRules from "../../config/transferRules";
+import useTransferControl from "../../hooks/useTransferControl";
 
 const useStyles = makeStyles((theme) => ({
  transferField: {
@@ -38,6 +37,7 @@ function Source() {
  const classes = useStyles();
  const dispatch = useDispatch();
  const sourceChain = useSelector(selectNFTSourceChain);
+ const targetChain = useSelector(selectNFTTargetChain);
  const uiAmountString = useSelector(selectNFTSourceBalanceString);
  const error = useSelector(selectNFTSourceError);
  const isSourceComplete = useSelector(selectNFTIsSourceComplete);
@@ -52,9 +52,11 @@ function Source() {
  const handleNextClick = useCallback(() => {
  dispatch(incrementStep());
  }, [dispatch]);
- const isTransferDisabled = useMemo(() => {
- return getIsTransferDisabled(sourceChain, true);
- }, [sourceChain]);
+ const { isTransferDisabled, warnings } = useTransferControl(
+ transferRules,
+ sourceChain,
+ targetChain
+ );
  return (
  <>
  <StepDescription>
@@ -103,7 +105,9 @@ function Source() {
  {sourceChain === CHAIN_ID_SOLANA && CLUSTER === "mainnet" && (
  <SolanaTPSWarning />
  )}
- <ChainWarningMessage chainId={sourceChain} />
+ {warnings.map((message, key) => (
+ <ChainWarningMessage key={key} message={message} />
+ ))}
  <ButtonWithLoader
  disabled={!isSourceComplete || isTransferDisabled}
  onClick={handleNextClick}

diff --git a/src/components/NFT/Target.tsx b/src/components/NFT/Target.tsx
@@ -29,7 +29,6 @@ import {
  CHAINS_BY_ID,
  CHAINS_WITH_NFT_SUPPORT,
  CLUSTER,
- getIsTransferDisabled,
  getWalletAddressNative,
 } from "../../utils/consts";
 import ButtonWithLoader from "../ButtonWithLoader";
@@ -39,6 +38,8 @@ import LowBalanceWarning from "../LowBalanceWarning";
 import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import ChainWarningMessage from "../ChainWarningMessage";
+import useTransferControl from "../../hooks/useTransferControl";
+import transferRules from "../../config/transferRules";
 
 const useStyles = makeStyles((theme) => ({
  transferField: {
@@ -92,9 +93,11 @@ function Target() {
  const handleNextClick = useCallback(() => {
  dispatch(incrementStep());
  }, [dispatch]);
- const isTransferDisabled = useMemo(() => {
- return getIsTransferDisabled(targetChain, false);
- }, [targetChain]);
+ const { isTransferDisabled, warnings } = useTransferControl(
+ transferRules,
+ sourceChain,
+ targetChain
+ );
  const isValidTargetAssetAddress =
  targetAsset && targetAsset !== ethers.constants.AddressZero;
  return (
@@ -152,7 +155,9 @@ function Target() {
  {targetChain === CHAIN_ID_SOLANA && CLUSTER === "mainnet" && (
  <SolanaTPSWarning />
  )}
- <ChainWarningMessage chainId={targetChain} />
+ {warnings.map((message, key) => (
+ <ChainWarningMessage key={key} message={message} />
+ ))}
  <ButtonWithLoader
  disabled={!isTargetComplete || isTransferDisabled} //|| !associatedAccountExists}
  onClick={handleNextClick}

diff --git a/src/components/Recovery.tsx b/src/components/Recovery.tsx
@@ -413,8 +413,6 @@ function RelayerRecovery({
  const [isAttemptingToSchedule, setIsAttemptingToSchedule] = useState(false);
  const { enqueueSnackbar } = useSnackbar();
 
- console.log(parsedPayload, relayerInfo, "in recovery relayer");
-
  const fee =
  (parsedPayload && parsedPayload.fee && parseInt(parsedPayload.fee)) || null;
  //This check is probably more sophisticated in the future. Possibly a net call.
@@ -432,7 +430,6 @@ function RelayerRecovery({
  );
 
  const handleGo = useCallback(async () => {
- console.log("handle go", selectedRelayer, parsedPayload);
  if (!(selectedRelayer && selectedRelayer.url)) {
  return;
  }
@@ -462,7 +459,7 @@ function RelayerRecovery({
  });
  }
  );
- }, [selectedRelayer, enqueueSnackbar, onClick, signedVaa, parsedPayload]);
+ }, [selectedRelayer, enqueueSnackbar, onClick, signedVaa]);
 
  if (!isEligible) {
  return null;
@@ -885,7 +882,7 @@ export default function Recovery() {
  const parsedVAA = parseVaa(hexToUint8Array(recoverySignedVAA));
  setRecoveryParsedVAA(parsedVAA);
  } catch (e) {
- console.log(e);
+ console.error(e);
  setRecoveryParsedVAA(null);
  }
  }

diff --git a/src/components/Transfer/Redeem.tsx b/src/components/Transfer/Redeem.tsx
@@ -66,6 +66,10 @@ import TerraFeeDenomPicker from "../TerraFeeDenomPicker";
 import AddToMetamask from "./AddToMetamask";
 import RedeemPreview from "./RedeemPreview";
 import WaitingForWalletMessage from "./WaitingForWalletMessage";
+import ChainWarningMessage from "../ChainWarningMessage";
+import { useRedeemControl } from "../../hooks/useRedeemControl";
+import transferRules from "../../config/transferRules";
+import { RootState } from "../../store";
 
 const useStyles = makeStyles((theme) => ({
  alert: {
@@ -179,7 +183,22 @@ function Redeem() {
  dispatch(reset());
  }, [dispatch]);
  const howToAddTokensUrl = getHowToAddTokensToWalletUrl(targetChain);
-
+ const originAsset = useSelector(
+ (state: RootState) => state.transfer.originAsset
+ );
+ const originChain = useSelector(
+ (state: RootState) => state.transfer.originChain
+ );
+ const sourceChain = useSelector(
+ (state: RootState) => state.transfer.sourceChain
+ );
+ const { warnings, isRedeemDisabled } = useRedeemControl(
+ transferRules,
+ sourceChain,
+ targetChain,
+ originAsset,
+ originChain
+ );
  const relayerContent = (
  <>
  {isEVMChain(targetChain) && !isTransferCompleted && !targetIsAcala ? (
@@ -270,12 +289,15 @@ function Redeem() {
  {targetChain === CHAIN_ID_SOLANA ? (
  <SolanaCreateAssociatedAddressAlternate />
  ) : null}
-
+ {warnings.map((message, key) => (
+ <ChainWarningMessage message={message} key={key} />
+ ))}
  <>
  {" "}
  <ButtonWithLoader
  //TODO disable when the associated token account is confirmed to not exist
  disabled={
+ isRedeemDisabled ||
  !isReady ||
  disabled ||
  (isRecovery && (isTransferCompletedLoading || isTransferCompleted))
@@ -285,7 +307,10 @@ function Redeem() {
  ? handleNativeClick
  : handleClick
  }
- showLoader={showLoader || (isRecovery && isTransferCompletedLoading)}
+ showLoader={
+ !isRedeemDisabled &&
+ (showLoader || (isRecovery && isTransferCompletedLoading))
+ }
  error={statusMessage}
  >
  Redeem