Disable/dim all actionable components when tx in progress

emreboga · emreboga · commit 5ef14cfab624 · 2025-01-09T23:27:56.000+03:00
Signed-off-by: Emre Bogazliyanlioglu &lt;emre@wormholelabs.xyz&gt;
diff --git a/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx b/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx
@@ -57,7 +57,7 @@ const DebouncedTextField = memo(
         setInnerValue(e.target.value);
         deferredOnChange(e.target.value);
       },
-      [],
+      [deferredOnChange],
     );
 
     // Propagate any outside changes to the inner TextField value
@@ -133,9 +133,11 @@ const AmountInput = (props: Props) => {
     amount ? sdkAmount.display(amount) : '',
   );
 
-  const { fromChain: sourceChain, token: sourceToken } = useSelector(
-    (state: RootState) => state.transferInput,
-  );
+  const {
+    fromChain: sourceChain,
+    token: sourceToken,
+    isTransactionInProgress,
+  } = useSelector((state: RootState) => state.transferInput);
 
   const { balances, isFetching } = useGetTokenBalances(
     sendingWallet?.address || '',
@@ -159,8 +161,8 @@ const AmountInput = (props: Props) => {
   );
 
   const isInputDisabled = useMemo(
-    () => !sourceChain || !sourceToken,
-    [sourceChain, sourceToken],
+    () => isTransactionInProgress || !sourceChain || !sourceToken,
+    [isTransactionInProgress, sourceChain, sourceToken],
   );
 
   const balance = useMemo(() => {
@@ -193,12 +195,21 @@ const AmountInput = (props: Props) => {
         )}
       </Stack>
     );
-  }, [isInputDisabled, balances, tokenBalance, sendingWallet.address]);
+  }, [
+    isInputDisabled,
+    sendingWallet.address,
+    classes.balance,
+    isFetching,
+    tokenBalance,
+  ]);
 
-  const handleChange = useCallback((newValue: string): void => {
-    dispatch(setAmount(newValue));
-    setAmountInput(newValue);
-  }, []);
+  const handleChange = useCallback(
+    (newValue: string): void => {
+      dispatch(setAmount(newValue));
+      setAmountInput(newValue);
+    },
+    [dispatch],
+  );
 
   const maxButton = useMemo(() => {
     const maxButtonDisabled =
diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx
@@ -22,6 +22,7 @@ import ChainList from './ChainList';
 import TokenList from './TokenList';
 import { Chain } from '@wormhole-foundation/sdk';
 import AssetBadge from 'components/AssetBadge';
+import { joinClass } from 'utils/style';
 
 const useStyles = makeStyles()((theme: any) => ({
   card: {
@@ -46,8 +47,8 @@ const useStyles = makeStyles()((theme: any) => ({
     justifyContent: 'space-between',
   },
   disabled: {
-    opacity: '0.4',
-    cursor: 'not-allowed',
+    opacity: '0.6',
+    cursor: 'default',
     clickEvent: 'none',
   },
   popover: {
@@ -70,6 +71,7 @@ type Props = {
   setChain: (value: Chain) => void;
   wallet: WalletData;
   isSource: boolean;
+  isTransactionInProgress: boolean;
 };
 
 const AssetPicker = (props: Props) => {
@@ -138,12 +140,19 @@ const AssetPicker = (props: Props) => {
     );
   }, [chainConfig, tokenConfig]);
 
+  const triggerProps = props.isTransactionInProgress
+    ? {}
+    : bindTrigger(popupState);
+
   return (
     <>
       <Card
-        className={classes.card}
+        className={joinClass([
+          classes.card,
+          props.isTransactionInProgress && classes.disabled,
+        ])}
         variant="elevation"
-        {...bindTrigger(popupState)}
+        {...triggerProps}
       >
         <CardContent className={classes.cardContent}>
           <Typography
diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx
@@ -25,6 +25,7 @@ import {
   millisToHumanString,
   formatDuration,
 } from 'utils';
+import { joinClass } from 'utils/style';
 
 import type { RouteData } from 'config/routes';
 import type { RootState } from 'store';
@@ -35,56 +36,65 @@ import GasSlider from 'views/v2/Bridge/GasSlider';
 
 const HIGH_FEE_THRESHOLD = 20; // dollhairs
 
-const useStyles = makeStyles()((theme: any) => ({
-  container: {
-    width: '100%',
-    maxWidth: '420px',
-    marginBottom: '8px',
-  },
-  card: {
-    borderRadius: '8px',
-    width: '100%',
-    maxWidth: '420px',
-  },
-  cardHeader: {
-    padding: '20px 20px 0px',
-  },
-  cardContent: {
-    marginTop: '18px',
-    padding: '0px 20px 20px',
-  },
-  errorIcon: {
-    color: theme.palette.error.main,
-    height: '34px',
-    width: '34px',
-    marginRight: '24px',
-  },
-  fastestBadge: {
-    width: '14px',
-    height: '14px',
-    position: 'relative',
-    top: '2px',
-    marginRight: '4px',
-    fill: theme.palette.primary.main,
-  },
-  cheapestBadge: {
-    width: '12px',
-    height: '12px',
-    position: 'relative',
-    top: '1px',
-    marginRight: '3px',
-    fill: theme.palette.primary.main,
-  },
-  messageContainer: {
-    padding: '12px 0px 0px',
-  },
-  warningIcon: {
-    color: theme.palette.warning.main,
-    height: '34px',
-    width: '34px',
-    marginRight: '12px',
-  },
-}));
+const useStyles = makeStyles<{ isSelected: boolean }>()(
+  (theme: any, { isSelected }) => ({
+    container: {
+      width: '100%',
+      maxWidth: '420px',
+      marginBottom: '8px',
+    },
+    card: {
+      border: '1px solid',
+      borderColor: isSelected ? theme.palette.primary.main : 'transparent',
+      borderRadius: '8px',
+      width: '100%',
+      maxWidth: '420px',
+    },
+    cardHeader: {
+      padding: '20px 20px 0px',
+    },
+    cardContent: {
+      marginTop: '18px',
+      padding: '0px 20px 20px',
+    },
+    disabled: {
+      opacity: '0.6',
+      cursor: 'default',
+      clickEvent: 'none',
+    },
+    errorIcon: {
+      color: theme.palette.error.main,
+      height: '34px',
+      width: '34px',
+      marginRight: '24px',
+    },
+    fastestBadge: {
+      width: '14px',
+      height: '14px',
+      position: 'relative',
+      top: '2px',
+      marginRight: '4px',
+      fill: theme.palette.primary.main,
+    },
+    cheapestBadge: {
+      width: '12px',
+      height: '12px',
+      position: 'relative',
+      top: '1px',
+      marginRight: '3px',
+      fill: theme.palette.primary.main,
+    },
+    messageContainer: {
+      padding: '12px 0px 0px',
+    },
+    warningIcon: {
+      color: theme.palette.warning.main,
+      height: '34px',
+      width: '34px',
+      marginRight: '12px',
+    },
+  }),
+);
 
 type Props = {
   route: RouteData;
@@ -99,7 +109,6 @@ type Props = {
 };
 
 const SingleRoute = (props: Props) => {
-  const { classes } = useStyles();
   const theme = useTheme();
   const routeConfig = config.routes.get(props.route.name);
 
@@ -115,10 +124,12 @@ const SingleRoute = (props: Props) => {
     (state: RootState) => state.tokenPrices,
   );
 
+  const { quote, isSelected } = props;
   const { name } = props.route;
-  const { quote } = props;
   const receiveNativeAmount = quote?.destinationNativeGas;
 
+  const { classes } = useStyles({ isSelected });
+
   const destTokenConfig = useMemo(
     () => config.tokens[destToken] as TokenConfig | undefined,
     [destToken],
@@ -566,7 +577,7 @@ const SingleRoute = (props: Props) => {
   // 1- If no action handler provided, fall back to default
   // 2- Otherwise there is an action handler, "pointer"
   const cursor = useMemo(() => {
-    if (props.isSelected || typeof props.onSelect !== 'function') {
+    if (isSelected || typeof props.onSelect !== 'function') {
       return 'default';
     }
 
@@ -575,7 +586,7 @@ const SingleRoute = (props: Props) => {
     }
 
     return 'pointer';
-  }, [props.error, props.isSelected, props.onSelect]);
+  }, [props.error, isSelected, props.onSelect]);
 
   const routeCardBadge = useMemo(() => {
     if (props.isFastest) {
@@ -609,18 +620,16 @@ const SingleRoute = (props: Props) => {
   return (
     <div key={name} className={classes.container}>
       <Card
-        className={classes.card}
-        sx={{
-          border: '1px solid',
-          borderColor: props.isSelected
-            ? theme.palette.primary.main
-            : 'transparent',
-          opacity: 1,
-        }}
+        className={joinClass([
+          classes.card,
+          isTransactionInProgress && classes.disabled,
+        ])}
       >
         <CardActionArea
           disabled={
-            typeof props.onSelect !== 'function' || props.error !== undefined
+            isTransactionInProgress ||
+            typeof props.onSelect !== 'function' ||
+            props.error !== undefined
           }
           disableTouchRipple
           sx={{ cursor }}
diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx b/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx
@@ -50,7 +50,7 @@ const Routes = ({ ...props }: Props) => {
     const selectedRoute = routes.find((route) => route === props.selectedRoute);
 
     return selectedRoute ? [selectedRoute] : routes.slice(0, 1);
-  }, [showAll, routes]);
+  }, [showAll, routes, props.selectedRoute]);
 
   const fastestRoute = useMemo(() => {
     return routes.reduce(
diff --git a/wormhole-connect/src/views/v2/Bridge/SwapInputs/index.tsx b/wormhole-connect/src/views/v2/Bridge/SwapInputs/index.tsx
@@ -34,6 +34,7 @@ function SwapInputs() {
   } = useSelector((state: RootState) => state.transferInput);
 
   const canSwap =
+    !isTransactionInProgress &&
     fromChain &&
     !config.chains[fromChain]?.disabledAsDestination &&
     toChain &&
diff --git a/wormhole-connect/src/views/v2/Bridge/WalletConnector/Controller.tsx b/wormhole-connect/src/views/v2/Bridge/WalletConnector/Controller.tsx
@@ -17,6 +17,7 @@ import { RootState } from 'store';
 import { disconnectWallet as disconnectFromStore } from 'store/wallet';
 import { TransferWallet } from 'utils/wallet';
 import { copyTextToClipboard, displayWalletAddress } from 'utils';
+import { joinClass } from 'utils/style';
 
 import DownIcon from 'icons/Down';
 import WalletIcons from 'icons/WalletIcons';
@@ -47,6 +48,11 @@ const useStyles = makeStyles()((theme: any) => ({
   up: {
     transform: 'scaleY(-1)',
   },
+  disabled: {
+    opacity: '0.6',
+    cursor: 'default',
+    clickEvent: 'none',
+  },
   dropdown: {
     backgroundColor: theme.palette.popover.background,
     display: 'flex',
@@ -76,6 +82,10 @@ const ConnectedWallet = (props: Props) => {
 
   const { classes } = useStyles();
 
+  const { isTransactionInProgress } = useSelector(
+    (state: RootState) => state.transferInput,
+  );
+
   const wallet = useSelector((state: RootState) => state.wallet[props.type]);
 
   const [isOpen, setIsOpen] = useState(false);
@@ -89,18 +99,18 @@ const ConnectedWallet = (props: Props) => {
   const connectWallet = useCallback(() => {
     popupState?.close();
     setIsOpen(true);
-  }, []);
+  }, [popupState]);
 
   const copyAddress = useCallback(() => {
     copyTextToClipboard(wallet.address);
     popupState?.close();
     setIsCopied(true);
-  }, [wallet.address]);
+  }, [popupState, wallet.address]);
 
   const disconnectWallet = useCallback(() => {
     dispatch(disconnectFromStore(props.type));
     popupState?.close();
-  }, [props.type]);
+  }, [dispatch, popupState, props.type]);
 
   useEffect(() => {
     if (isCopied) {
@@ -110,13 +120,21 @@ const ConnectedWallet = (props: Props) => {
     }
   }, [isCopied]);
 
+  const popupTrigger = isTransactionInProgress ? {} : bindTrigger(popupState);
+
   if (!wallet?.address) {
     return <></>;
   }
 
   return (
     <>
-      <div className={classes.connectWallet} {...bindTrigger(popupState)}>
+      <div
+        className={joinClass([
+          classes.connectWallet,
+          isTransactionInProgress && classes.disabled,
+        ])}
+        {...popupTrigger}
+      >
         <WalletIcons name={wallet.name} icon={wallet.icon} size={20} />
         <Tooltip title="Copied" open={isCopied} placement="top" arrow>
           <Typography
diff --git a/wormhole-connect/src/views/v2/Bridge/index.tsx b/wormhole-connect/src/views/v2/Bridge/index.tsx
