diff --git a/bridge_ui/src/components/Transfer/Redeem.tsx b/bridge_ui/src/components/Transfer/Redeem.tsx
index 3cadaa511..ee56f91fa 100644
--- a/bridge_ui/src/components/Transfer/Redeem.tsx
+++ b/bridge_ui/src/components/Transfer/Redeem.tsx
@@ -5,6 +5,7 @@ import { selectTransferTargetChain } from "../../store/selectors";
import ButtonWithLoader from "../ButtonWithLoader";
import KeyAndBalance from "../KeyAndBalance";
import StepDescription from "../StepDescription";
+import WaitingForWalletMessage from "./WaitingForWalletMessage";
function Redeem() {
const { handleClick, disabled, showLoader } = useHandleRedeem();
@@ -22,6 +23,7 @@ function Redeem() {
>
Redeem
+
>
);
}
diff --git a/bridge_ui/src/components/Transfer/Send.tsx b/bridge_ui/src/components/Transfer/Send.tsx
index 411038b3c..913b61890 100644
--- a/bridge_ui/src/components/Transfer/Send.tsx
+++ b/bridge_ui/src/components/Transfer/Send.tsx
@@ -12,6 +12,7 @@ import ButtonWithLoader from "../ButtonWithLoader";
import KeyAndBalance from "../KeyAndBalance";
import StepDescription from "../StepDescription";
import TransferProgress from "../TransferProgress";
+import WaitingForWalletMessage from "./WaitingForWalletMessage";
function Send() {
const { handleClick, disabled, showLoader } = useHandleTransfer();
@@ -49,6 +50,7 @@ function Send() {
>
Transfer
+
>
);
diff --git a/bridge_ui/src/components/Transfer/WaitingForWalletMessage.tsx b/bridge_ui/src/components/Transfer/WaitingForWalletMessage.tsx
new file mode 100644
index 000000000..c60c193c8
--- /dev/null
+++ b/bridge_ui/src/components/Transfer/WaitingForWalletMessage.tsx
@@ -0,0 +1,42 @@
+import { CHAIN_ID_ETH, CHAIN_ID_SOLANA } from "@certusone/wormhole-sdk";
+import { Typography, makeStyles } from "@material-ui/core";
+import { useSelector } from "react-redux";
+import {
+ selectTransferIsRedeeming,
+ selectTransferIsSending,
+ selectTransferRedeemTx,
+ selectTransferSourceChain,
+ selectTransferTargetChain,
+ selectTransferTransferTx,
+} from "../../store/selectors";
+
+const useStyles = makeStyles((theme) => ({
+ message: {
+ color: theme.palette.warning.light,
+ marginTop: theme.spacing(1),
+ textAlign: "center",
+ },
+}));
+
+const WAITING_FOR_WALLET = "Waiting for wallet approval (likely in a popup)...";
+
+export default function WaitingForWalletMessage() {
+ const classes = useStyles();
+ const sourceChain = useSelector(selectTransferSourceChain);
+ const isSending = useSelector(selectTransferIsSending);
+ const transferTx = useSelector(selectTransferTransferTx);
+ const targetChain = useSelector(selectTransferTargetChain);
+ const isRedeeming = useSelector(selectTransferIsRedeeming);
+ const redeemTx = useSelector(selectTransferRedeemTx);
+ const showWarning = (isSending && !transferTx) || (isRedeeming && !redeemTx);
+ return showWarning ? (
+
+ {WAITING_FOR_WALLET}{" "}
+ {targetChain === CHAIN_ID_SOLANA && isRedeeming
+ ? "Note: there will be several transactions"
+ : sourceChain === CHAIN_ID_ETH && isSending
+ ? "Note: there will be two transactions"
+ : null}
+
+ ) : null;
+}