Refactor

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

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

@@ -5,6 +5,7 @@ import { Context } from 'sdklegacy';
 import config from 'config';
 import { RouteContext } from 'contexts/RouteContext';
 import { useUSDamountGetter } from 'hooks/useUSDamountGetter';
+import { useGetTokens } from 'hooks/useGetTokens';
 import {
   setTxDetails,
   setSendTx,
@@ -15,7 +16,6 @@ import { setRoute as setAppRoute } from 'store/router';
 import { setAmount, setIsTransactionInProgress } from 'store/transferInput';
 import { getTransferDetails } from 'telemetry';
 import { ERR_USER_REJECTED } from 'telemetry/types';
-import { getTokenDecimals, getWrappedToken } from 'utils';
 import { toDecimals } from 'utils/balance';
 import { interpretTransferError } from 'utils/errors';
 import { addTxToLocalStorage } from 'utils/inProgressTxCache';
@@ -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,
   );
 
@@ -56,12 +59,12 @@ const useSendTransaction = (props: Props): ReturnProps => {
     amount,
     fromChain: sourceChain,
     toChain: destChain,
-    token: sourceToken,
-    destToken,
     route,
     validations,
   } = transferInput;
 
+  const { sourceToken, destToken } = useGetTokens();
+
   const wallet = useSelector((state: RootState) => state.wallet);
   const { sending: sendingWallet, receiving: receivingWallet } = wallet;
 
@@ -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;
     }
 
@@ -135,8 +141,6 @@ const useSendTransaction = (props: Props): ReturnProps => {
 
     dispatch(setIsTransactionInProgress(true));
 
-    const sourceTokenConfig = config.tokens[sourceToken];
-
     try {
       const fromConfig = config.chains[sourceChain];
 
@@ -159,7 +163,7 @@ const useSendTransaction = (props: Props): ReturnProps => {
       const [sdkRoute, receipt] = await config.routes
         .get(route)
         .send(
-          sourceTokenConfig,
+          sourceToken,
           amount,
           sourceChain,
           sendingWallet.address,
@@ -184,18 +188,15 @@ const useSendTransaction = (props: Props): ReturnProps => {
       let relayerFee: RelayerFee | undefined = undefined;
       if (quote.relayFee) {
         const { token, amount } = quote.relayFee;
-        const feeToken = config.sdkConverter.findTokenConfigV1(
-          token,
-          Object.values(config.tokens),
-        );
+        const feeToken = config.tokens.get(token);
 
         const formattedFee = Number.parseFloat(
           toDecimals(amount.amount, amount.decimals, 6),
         );
 
         relayerFee = {
           fee: formattedFee,
-          tokenKey: feeToken?.key || '',
+          token: feeToken?.tuple,
         };
       }
 
@@ -208,13 +209,11 @@ const useSendTransaction = (props: Props): ReturnProps => {
         recipient: receivingWallet.address,
         toChain: receipt.to,
         fromChain: receipt.from,
-        tokenAddress: getWrappedToken(sourceTokenConfig).tokenId?.address ?? '',
-        tokenKey: sourceTokenConfig.key,
-        tokenDecimals: getTokenDecimals(
-          sourceChain,
-          getWrappedToken(sourceTokenConfig),
-        ),
-        receivedTokenKey: config.tokens[destToken].key, // TODO: possibly wrong (e..g if portico swap fails)
+        receivedToken: destToken.tuple,
+        token: sourceToken.tuple,
+        tokenAddress: sourceToken.tuple[1],
+        tokenKey: sourceToken.key,
+        tokenDecimals: sourceToken.decimals,
         relayerFee,
         receiveAmount: quote.destinationToken.amount,
         receiveNativeAmount,
@@ -279,7 +278,7 @@ const useSendTransaction = (props: Props): ReturnProps => {
   };
 
   return {
-    send,
+    onConfirm,
     error,
     errorInternal,
   };

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

@@ -99,7 +99,7 @@ const GasSlider = (props: {
   const destChainConfig = config.chains[destChain!];
   const nativeGasToken = config.tokens.getGasToken(destChain!);
 
-  const [isGasSliderOpen, setIsGasSliderOpen] = useState(!props.disabled);
+  const [isGasSliderOpen, setIsGasSliderOpen] = useState(false);
   const [percentage, setPercentage] = useState(0);
 
   const [debouncedPercentage] = useDebounce(percentage, 500);
@@ -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.secondary.main}