From 43d858772a8f7f9269720f9085a85f16b4699759 Mon Sep 17 00:00:00 2001
From: Kevin Peters <kpeters@jumptrading.com>
Date: Thu, 23 Dec 2021 15:11:03 +0000
Subject: [PATCH] bridge_ui: Show swap arrow on hover

---
 bridge_ui/src/components/ChainSelectArrow.tsx | 28 +++++++++++++++++++
 bridge_ui/src/components/Transfer/Source.tsx  | 11 ++++----
 2 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 bridge_ui/src/components/ChainSelectArrow.tsx

diff --git a/bridge_ui/src/components/ChainSelectArrow.tsx b/bridge_ui/src/components/ChainSelectArrow.tsx
new file mode 100644
index 00000000..78cc70e2
--- /dev/null
+++ b/bridge_ui/src/components/ChainSelectArrow.tsx
@@ -0,0 +1,28 @@
+import { IconButton } from "@material-ui/core";
+import { ArrowForward, SwapHoriz } from "@material-ui/icons";
+import { useState } from "react";
+
+export default function ChainSelectArrow({
+  onClick,
+  disabled,
+}: {
+  onClick: () => void;
+  disabled: boolean;
+}) {
+  const [showSwap, setShowSwap] = useState(false);
+
+  return (
+    <IconButton
+      onClick={onClick}
+      onMouseEnter={() => {
+        setShowSwap(true);
+      }}
+      onMouseLeave={() => {
+        setShowSwap(false);
+      }}
+      disabled={disabled}
+    >
+      {showSwap ? <SwapHoriz /> : <ArrowForward />}
+    </IconButton>
+  );
+}
diff --git a/bridge_ui/src/components/Transfer/Source.tsx b/bridge_ui/src/components/Transfer/Source.tsx
index b0171f52..6c0883f5 100644
--- a/bridge_ui/src/components/Transfer/Source.tsx
+++ b/bridge_ui/src/components/Transfer/Source.tsx
@@ -4,8 +4,8 @@ import {
   CHAIN_ID_SOLANA,
 } from "@certusone/wormhole-sdk";
 import { getAddress } from "@ethersproject/address";
-import { Button, IconButton, makeStyles, Typography } from "@material-ui/core";
-import { ArrowForward, VerifiedUser } from "@material-ui/icons";
+import { Button, makeStyles, Typography } from "@material-ui/core";
+import { VerifiedUser } from "@material-ui/icons";
 import { useCallback, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory } from "react-router";
@@ -35,6 +35,7 @@ import {
 } from "../../utils/consts";
 import ButtonWithLoader from "../ButtonWithLoader";
 import ChainSelect from "../ChainSelect";
+import ChainSelectArrow from "../ChainSelectArrow";
 import KeyAndBalance from "../KeyAndBalance";
 import LowBalanceWarning from "../LowBalanceWarning";
 import NumberTextField from "../NumberTextField";
@@ -170,14 +171,12 @@ function Source() {
           />
         </div>
         <div className={classes.chainSelectArrow}>
-          <IconButton
+          <ChainSelectArrow
             onClick={() => {
               dispatch(setSourceChain(targetChain));
             }}
             disabled={shouldLockFields}
-          >
-            <ArrowForward />
-          </IconButton>
+          />
         </div>
         <div className={classes.chainSelectContainer}>
           <Typography variant="caption">Target</Typography>