diff --git a/bridge_ui/src/components/Transfer/Recovery.tsx b/bridge_ui/src/components/Transfer/Recovery.tsx
index db232778b..3a89ac11c 100644
--- a/bridge_ui/src/components/Transfer/Recovery.tsx
+++ b/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
@@ -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({
>
);
diff --git a/bridge_ui/src/components/Transfer/RedeemPreview.tsx b/bridge_ui/src/components/Transfer/RedeemPreview.tsx
new file mode 100644
index 000000000..622b87771
--- /dev/null
+++ b/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 (
+
+ {explainerString}
+
+ );
+}
diff --git a/bridge_ui/src/components/Transfer/SendPreview.tsx b/bridge_ui/src/components/Transfer/SendPreview.tsx
new file mode 100644
index 000000000..d0a5d618f
--- /dev/null
+++ b/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 (
+
+ {explainerString}
+
+ );
+}
diff --git a/bridge_ui/src/components/Transfer/SourcePreview.tsx b/bridge_ui/src/components/Transfer/SourcePreview.tsx
new file mode 100644
index 000000000..c729c4043
--- /dev/null
+++ b/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 (
+
+ {explainerString}
+
+ );
+}
diff --git a/bridge_ui/src/components/Transfer/TargetPreview.tsx b/bridge_ui/src/components/Transfer/TargetPreview.tsx
new file mode 100644
index 000000000..b382bf576
--- /dev/null
+++ b/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 (
+
+ {explainerString}
+
+ );
+}
diff --git a/bridge_ui/src/components/Transfer/index.tsx b/bridge_ui/src/components/Transfer/index.tsx
index 6f88e36a3..fc0ee2a22 100644
--- a/bridge_ui/src/components/Transfer/index.tsx
+++ b/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}
>
-
+ = 0} disabled={preventNavigation}>
dispatch(setStep(0))}>Source
-
+ {activeStep === 0 ? (
+
+ ) : (
+
+ )}
-
+ = 1} disabled={preventNavigation}>
dispatch(setStep(1))}>Target
-
+ {activeStep === 1 ? : }
-
+ = 2}>
dispatch(setStep(2))}>
Send tokens
-
+ {activeStep === 2 ? : }
-
+ = 3}>
dispatch(setStep(3))}
disabled={!isSendComplete}
@@ -90,11 +97,15 @@ function Transfer() {
Redeem tokens
-
+ {activeStep === 3 ? : }
-
+
);
}