bridge_ui: Show swap arrow on hover

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

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 { Button, makeStyles, Typography } from "@material-ui/core";
-import { ArrowForward, VerifiedUser } from "@material-ui/icons";
+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>