bridge_ui: waiting for wallet message

Change-Id: Id4481ccf0e97616640ef466e170e78d3f65d207d

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
       </ButtonWithLoader>
+      <WaitingForWalletMessage />
     </>
   );
 }

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
       </ButtonWithLoader>
+      <WaitingForWalletMessage />
       <TransferProgress />
     </>
   );

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 ? (
+    <Typography className={classes.message} variant="body2">
+      {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}
+    </Typography>
+  ) : null;
+}