preview messages in the stepper & navigation changes

Change-Id: Ic0a60899890af7a6c17467965f05f4d9cbc05825

bridge_ui/src/components/Transfer/Recovery.tsx

@@ -151,7 +151,13 @@ const parsePayload = (arr: Buffer) => ({
   targetChain: arr.readUInt16BE(99) as ChainId,
 });
 
-function RecoveryDialogContent({ onClose }: { onClose: () => void }) {
+function RecoveryDialogContent({
+  onClose,
+  disabled,
+}: {
+  onClose: () => void;
+  disabled: boolean;
+}) {
   const dispatch = useDispatch();
   const { provider } = useEthereumProvider();
   const currentSourceChain = useSelector(selectTransferSourceChain);
@@ -408,7 +414,7 @@ function RecoveryDialogContent({ onClose }: { onClose: () => void }) {
           onClick={handleRecoverClick}
           variant="contained"
           color="primary"
-          disabled={!enableRecovery}
+          disabled={!enableRecovery || disabled}
         >
           Recover
         </Button>
@@ -420,9 +426,11 @@ function RecoveryDialogContent({ onClose }: { onClose: () => void }) {
 export default function Recovery({
   open,
   setOpen,
+  disabled,
 }: {
   open: boolean;
   setOpen: (open: boolean) => void;
+  disabled: boolean;
 }) {
   const classes = useStyles();
   const handleOpenClick = useCallback(() => {
@@ -438,7 +446,7 @@ export default function Recovery({
       </Fab>
       <Dialog open={open} onClose={handleCloseClick} maxWidth="md" fullWidth>
         <DialogTitle>Recovery</DialogTitle>
-        <RecoveryDialogContent onClose={handleCloseClick} />
+        <RecoveryDialogContent onClose={handleCloseClick} disabled={disabled} />
       </Dialog>
     </>
   );

bridge_ui/src/components/Transfer/RedeemPreview.tsx

@@ -0,0 +1,24 @@
+import { makeStyles, Typography } from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+  description: {
+    textAlign: "center",
+  },
+}));
+
+export default function RedeemPreview() {
+  const classes = useStyles();
+
+  const explainerString =
+    "Success! The redeem transaction was submitted. The tokens will become available once the transaction confirms.";
+
+  return (
+    <Typography
+      component="div"
+      variant="subtitle2"
+      className={classes.description}
+    >
+      {explainerString}
+    </Typography>
+  );
+}

bridge_ui/src/components/Transfer/SendPreview.tsx

@@ -0,0 +1,23 @@
+import { makeStyles, Typography } from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+  description: {
+    textAlign: "center",
+  },
+}));
+
+export default function SendPreview() {
+  const classes = useStyles();
+
+  const explainerString = "The tokens have been sent!";
+
+  return (
+    <Typography
+      component="div"
+      variant="subtitle2"
+      className={classes.description}
+    >
+      {explainerString}
+    </Typography>
+  );
+}

bridge_ui/src/components/Transfer/SourcePreview.tsx

@@ -0,0 +1,46 @@
+import { makeStyles, Typography } from "@material-ui/core";
+import { useSelector } from "react-redux";
+import {
+  selectTransferAmount,
+  selectTransferSourceChain,
+  selectTransferSourceParsedTokenAccount,
+} from "../../store/selectors";
+import { CHAINS_BY_ID } from "../../utils/consts";
+import { shortenAddress } from "../../utils/solana";
+
+const useStyles = makeStyles((theme) => ({
+  description: {
+    textAlign: "center",
+  },
+}));
+
+export default function SourcePreview() {
+  const classes = useStyles();
+  const sourceChain = useSelector(selectTransferSourceChain);
+  const sourceParsedTokenAccount = useSelector(
+    selectTransferSourceParsedTokenAccount
+  );
+  const sourceAmount = useSelector(selectTransferAmount);
+
+  const plural = parseInt(sourceAmount) !== 1;
+
+  const explainerString = sourceParsedTokenAccount
+    ? `You will transfer ${sourceAmount} token${
+        plural ? "s" : ""
+      } of ${shortenAddress(
+        sourceParsedTokenAccount?.mintKey
+      )}, from ${shortenAddress(sourceParsedTokenAccount?.publicKey)} on ${
+        CHAINS_BY_ID[sourceChain].name
+      }`
+    : "Step complete.";
+
+  return (
+    <Typography
+      component="div"
+      variant="subtitle2"
+      className={classes.description}
+    >
+      {explainerString}
+    </Typography>
+  );
+}

bridge_ui/src/components/Transfer/TargetPreview.tsx

@@ -0,0 +1,38 @@
+import { makeStyles, Typography } from "@material-ui/core";
+import { useSelector } from "react-redux";
+import {
+  selectTransferTargetAddressHex,
+  selectTransferTargetChain,
+} from "../../store/selectors";
+import { hexToNativeString } from "../../utils/array";
+import { CHAINS_BY_ID } from "../../utils/consts";
+import { shortenAddress } from "../../utils/solana";
+
+const useStyles = makeStyles((theme) => ({
+  description: {
+    textAlign: "center",
+  },
+}));
+
+export default function TargetPreview() {
+  const classes = useStyles();
+  const targetChain = useSelector(selectTransferTargetChain);
+  const targetAddress = useSelector(selectTransferTargetAddressHex); //TODO convert to readable
+  const targetAddressNative = hexToNativeString(targetAddress, targetChain);
+
+  const explainerString = targetAddressNative
+    ? `to ${shortenAddress(targetAddressNative)} on ${
+        CHAINS_BY_ID[targetChain].name
+      }`
+    : "Step complete.";
+
+  return (
+    <Typography
+      component="div"
+      variant="subtitle2"
+      className={classes.description}
+    >
+      {explainerString}
+    </Typography>
+  );
+}

bridge_ui/src/components/Transfer/index.tsx

@@ -23,7 +23,10 @@ import Redeem from "./Redeem";
 import Send from "./Send";
 import Source from "./Source";
 import Target from "./Target";
-
+import SourcePreview from "./SourcePreview";
+import TargetPreview from "./TargetPreview";
+import SendPreview from "./SendPreview";
+import RedeemPreview from "./RedeemPreview";
 // TODO: ensure that both wallets are connected to the same known network
 // TODO: loaders and such, navigation block?
 // TODO: refresh displayed token amount after transfer somehow, could be resolved by having different components appear
@@ -62,27 +65,31 @@ function Transfer() {
         orientation="vertical"
         className={classes.rootContainer}
       >
-        <Step>
+        <Step expanded={activeStep >= 0} disabled={preventNavigation}>
           <StepButton onClick={() => dispatch(setStep(0))}>Source</StepButton>
           <StepContent>
-            <Source setIsRecoveryOpen={setIsRecoveryOpen} />
+            {activeStep === 0 ? (
+              <Source setIsRecoveryOpen={setIsRecoveryOpen} />
+            ) : (
+              <SourcePreview />
+            )}
           </StepContent>
         </Step>
-        <Step>
+        <Step expanded={activeStep >= 1} disabled={preventNavigation}>
           <StepButton onClick={() => dispatch(setStep(1))}>Target</StepButton>
           <StepContent>
-            <Target />
+            {activeStep === 1 ? <Target /> : <TargetPreview />}
           </StepContent>
         </Step>
-        <Step>
+        <Step expanded={activeStep >= 2}>
           <StepButton onClick={() => dispatch(setStep(2))}>
             Send tokens
           </StepButton>
           <StepContent>
-            <Send />
+            {activeStep === 2 ? <Send /> : <SendPreview />}
           </StepContent>
         </Step>
-        <Step>
+        <Step expanded={activeStep >= 3}>
           <StepButton
             onClick={() => dispatch(setStep(3))}
             disabled={!isSendComplete}
@@ -90,11 +97,15 @@ function Transfer() {
             Redeem tokens
           </StepButton>
           <StepContent>
-            <Redeem />
+            {activeStep === 3 ? <Redeem /> : <RedeemPreview />}
           </StepContent>
         </Step>
       </Stepper>
-      <Recovery open={isRecoveryOpen} setOpen={setIsRecoveryOpen} />
+      <Recovery
+        open={isRecoveryOpen}
+        setOpen={setIsRecoveryOpen}
+        disabled={preventNavigation}
+      />
     </Container>
   );
 }