Refactor

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

Author: emreboga

wormhole-connect/src/hooks/useSendTransaction.ts wormhole-connect/src/hooks/useConfirmTransaction.ts

@@ -36,15 +36,18 @@ type Props = {
 
 type ReturnProps = {
   error: string | undefined;
-  errorInternal: unknown | undefined;
-  send: () => void;
+  // errorInternal can be a result of custom validation, hence of any type.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  errorInternal: any | undefined;
+  onConfirm: () => void;
 };
 
 const useSendTransaction = (props: Props): ReturnProps => {
   const dispatch = useDispatch();
 
   const [error, setError] = useState<string | undefined>(undefined);
-  const [errorInternal, setErrorInternal] = useState<unknown | undefined>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [errorInternal, setErrorInternal] = useState<any | undefined>(
     undefined,
   );
 
@@ -74,8 +77,11 @@ const useSendTransaction = (props: Props): ReturnProps => {
 
   const getUSDAmount = useUSDamountGetter();
 
-  const send = async () => {
-    setError(undefined);
+  const onConfirm = async () => {
+    // Clear previous errors
+    if (error) {
+      setError(undefined);
+    }
 
     if (config.ui.previewMode) {
       setError('Connect is in preview mode');
@@ -95,11 +101,11 @@ const useSendTransaction = (props: Props): ReturnProps => {
       return;
     }
 
+    // Validate all inputs
+    // The results of this check will be written back to Redux store (see transferInput.validations).
     await validate({ transferInput, relay, wallet }, dispatch, () => false);
 
-    const valid = isTransferValid(validations);
-
-    if (!valid || !route) {
+    if (!isTransferValid(validations)) {
       return;
     }
 
@@ -279,7 +285,7 @@ const useSendTransaction = (props: Props): ReturnProps => {
   };
 
   return {
-    send,
+    onConfirm,
     error,
     errorInternal,
   };

wormhole-connect/src/views/v2/Bridge/AssetPicker/ChainList.tsx

@@ -115,9 +115,8 @@ const ChainList = (props: Props) => {
     return (
       <List component={Stack} direction="row">
         {topChains.map((chain: ChainConfig) => (
-          <Tooltip title={chain.displayName}>
+          <Tooltip key={chain.key} title={chain.displayName}>
             <ListItemButton
-              key={chain.key}
               selected={selectedChainConfig?.key === chain.key}
               className={classes.chainButton}
               onClick={() => onChainSelect(chain.key)}

wormhole-connect/src/views/v2/Bridge/ReviewTransaction/GasSlider.tsx wormhole-connect/src/views/v2/Bridge/GasSlider/index.tsx

@@ -100,14 +100,14 @@ const GasSlider = (props: {
   const destChainConfig = config.chains[destChain!];
   const nativeGasTokenConfig = config.tokens[destChainConfig!.gasToken];
 
-  const [isGasSliderOpen, setIsGasSliderOpen] = useState(!props.disabled);
+  const [isGasSliderOpen, setIsGasSliderOpen] = useState(false);
   const [percentage, setPercentage] = useState(0);
 
   const [debouncedPercentage] = useDebounce(percentage, 500);
 
   useEffect(() => {
     dispatch(setToNativeToken(debouncedPercentage / 100));
-  }, [debouncedPercentage]);
+  }, [debouncedPercentage, dispatch]);
 
   const nativeGasPrice = useMemo(() => {
     if (!destChain) {
@@ -151,6 +151,7 @@ const GasSlider = (props: {
           <Typography>{`Need more gas on ${destChain}?`}</Typography>
           <StyledSwitch
             checked={isGasSliderOpen}
+            disabled={props.disabled}
             onClick={(e: any) => {
               const { checked } = e.target;
 
@@ -172,6 +173,7 @@ const GasSlider = (props: {
               <StyledSlider
                 aria-label="Native gas conversion amount"
                 defaultValue={0}
+                disabled={props.disabled}
                 value={percentage}
                 baseColor={theme.palette.primary.main}
                 railColor={theme.palette.background.default}

wormhole-connect/src/views/v2/Bridge/ReviewTransaction/SendError.tsx

@@ -31,7 +31,7 @@ import type { RootState } from 'store';
 import { TokenConfig } from 'config/types';
 import FastestRoute from 'icons/FastestRoute';
 import CheapestRoute from 'icons/CheapestRoute';
-import GasSlider from 'views/v2/Bridge/ReviewTransaction/GasSlider';
+import GasSlider from 'views/v2/Bridge/GasSlider';
 
 const HIGH_FEE_THRESHOLD = 20; // dollhairs