From 1ba078be93a4a08d13933a54b66d2ad6f73e80eb Mon Sep 17 00:00:00 2001
From: Evan Gray <battledingo@gmail.com>
Date: Mon, 13 Sep 2021 16:24:35 -0400
Subject: [PATCH] bridge_ui: waiting for wallet message

Change-Id: Id4481ccf0e97616640ef466e170e78d3f65d207d
---
 bridge_ui/src/components/Transfer/Redeem.tsx  |  2 +
 bridge_ui/src/components/Transfer/Send.tsx    |  2 +
 .../Transfer/WaitingForWalletMessage.tsx      | 42 +++++++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 bridge_ui/src/components/Transfer/WaitingForWalletMessage.tsx

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