#225 - limit pandle transfer to ethereum/bsc bsc/ethereum (#227)

* #225 - limit pandle transfer to ethereum/bsc bsc/ethereum

* [skip ci] - bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xlabs/portal-bridge-ui",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "private": true,
   "dependencies": {
     "@certusone/wormhole-sdk": "^0.9.20",

src/components/PandleWarning.tsx

@@ -0,0 +1,23 @@
+import { makeStyles, Typography } from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
+
+const useStyles = makeStyles((theme) => ({
+  alert: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+function PandleWarning() {
+  const classes = useStyles();
+
+  return (
+    <Alert severity="warning" variant="outlined" className={classes.alert}>
+      <Typography variant="body1">
+        Pandle transfer are limited to Ethereum to BSC and BSC to Ethereum
+      </Typography>
+    </Alert>
+  );
+}
+
+export default PandleWarning;

src/components/Transfer/Source.tsx

@@ -7,7 +7,7 @@ import {
 import { getAddress } from "@ethersproject/address";
 import { Button, makeStyles, Typography } from "@material-ui/core";
 import { VerifiedUser } from "@material-ui/icons";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory } from "react-router";
 import { Link } from "react-router-dom";
@@ -49,6 +49,8 @@ import SourceAssetWarning from "./SourceAssetWarning";
 import ChainWarningMessage from "../ChainWarningMessage";
 import useIsTransferLimited from "../../hooks/useIsTransferLimited";
 import TransferLimitedWarning from "./TransferLimitedWarning";
+import { RootState } from "../../store";
+import PandleWarning from "../PandleWarning";
 
 const useStyles = makeStyles((theme) => ({
   chainSelectWrapper: {
@@ -151,6 +153,39 @@ function Source() {
     dispatch(incrementStep());
   }, [dispatch]);
 
+  /* Only allow sending from ETH <-> BSC Pandle Token */
+  const [isPandle, setIsPandle] = useState(false);
+  const selectedTokenAddress = useSelector(
+    (state: RootState) => state.transfer.sourceParsedTokenAccount?.mintKey
+  );
+  useEffect(() => {
+    const EthereumPandleAddress =
+      "0x808507121b80c02388fad14726482e061b8da827".toUpperCase();
+    const BscPandleAddres =
+      "0xb3Ed0A426155B79B898849803E3B36552f7ED507".toUpperCase();
+    const isFromEthereum = (
+      sourceChain: number,
+      selectedTokenAddress: string | undefined
+    ) =>
+      sourceChain === CHAIN_ID_ETH &&
+      selectedTokenAddress === EthereumPandleAddress;
+    const isFromBsc = (
+      sourceChain: number,
+      selectedTokenAddress: string | undefined
+    ) =>
+      sourceChain === CHAIN_ID_BSC && selectedTokenAddress === BscPandleAddres;
+    if (isFromEthereum(sourceChain, selectedTokenAddress?.toUpperCase())) {
+      setIsPandle(true);
+      handleTargetChange({ target: { value: CHAIN_ID_BSC } });
+    } else if (isFromBsc(sourceChain, selectedTokenAddress?.toUpperCase())) {
+      setIsPandle(true);
+      handleTargetChange({ target: { value: CHAIN_ID_ETH } });
+    } else {
+      setIsPandle(false);
+    }
+  }, [sourceChain, selectedTokenAddress, handleTargetChange]);
+  /* End pandle token check */
+
   return (
     <>
       <StepDescription>
@@ -202,7 +237,7 @@ function Source() {
             fullWidth
             value={targetChain}
             onChange={handleTargetChange}
-            disabled={shouldLockFields}
+            disabled={shouldLockFields || isPandle}
             chains={targetChainOptions}
           />
         </div>
@@ -225,6 +260,7 @@ function Source() {
       ) : (
         <>
           <LowBalanceWarning chainId={sourceChain} />
+          {isPandle && <PandleWarning />}
           {sourceChain === CHAIN_ID_SOLANA && CLUSTER === "mainnet" && (
             <SolanaTPSWarning />
           )}