native in token swap tx get data fix

package.json

@@ -98,7 +98,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.5",
-    "@orbs-network/liquidity-hub-sdk": "^1.0.45",
+    "@orbs-network/liquidity-hub-sdk": "^1.0.47",
     "@orbs-network/swap-ui": "^0.0.14",
     "@orbs-network/twap-sdk": "^2.0.33",
     "@orderly.network/hooks": "^1.4.3",

public/locales/en.json

@@ -1038,5 +1038,7 @@
   "networkFeeHelper": "Network fees are paid for transaction",
   "dragonEggAlert": "Screenshot this and DM  <alink>@QuickswapDEX on X (Twitter)</alink>  for a chance to win prizes! First come, first serve.",
   "cancelOrder": "Cancel Order",
-  "seekingBetterPrice": "Seeking better price"
+  "seekingBetterPrice": "Seeking better price",
+  "wrapError": "Your {{ native }} has been wrapped to {{ wrapped }}",
+  "txFailed": "Transaction failed"
 }

src/components/Swap/orbs/ConfirmationModal.tsx

@@ -51,7 +51,6 @@ export type ConfirmationState = {
   txHash?: string;
   steps?: Steps[];
   error?: string;
-  stapStatus?: SwapStatus;
 };
 
 interface ConfirmationModalProps extends SharedProps {
@@ -117,14 +116,14 @@ const ConfirmationProvider = (props: ContextProps) => {
   );
 
   const onDismiss = useCallback(() => {
+    if (store.swapStatus) {
+      dispatch(updateUserBalance());
+    }
     setTimeout(() => {
       resetStore();
     }, 5_00);
     props.onDismiss();
-    if (store.stapStatus === SwapStatus.SUCCESS) {
-      dispatch(updateUserBalance());
-    }
-  }, [props, resetStore, store.stapStatus, dispatch]);
+  }, [props, resetStore, store.swapStatus, dispatch]);
 
   return (
     <Context.Provider
@@ -251,11 +250,12 @@ export const Error = () => {
   const {
     onDismiss,
     inAmount,
-    state: { shouldUnwrap, error },
+    state: { shouldUnwrap },
   } = useConfirmationContext();
   const { t } = useTranslation();
   const { chainId } = useActiveWeb3React();
   const nativeSymbol = ETHER[chainId].symbol;
+  const wSymbol = WETH[chainId].symbol;
 
   const { execute, wrapType } = useWrapCallback(
     WETH[chainId],
@@ -300,9 +300,19 @@ export const Error = () => {
 
   return (
     <ConfirmationContainer className='orbsErrorContent' title={t('txFailed')}>
-      <Box>
+      <Box
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
         <img src={TransactionFailed} alt='Transaction Failed' />
-        {error && <p className='orbsErrorContentText'>Transaction Failed</p>}
+        {shouldUnwrap && (
+          <p className='orbsErrorContentText'>
+            {t('wrapError', { native: nativeSymbol, wrapped: wSymbol })}
+          </p>
+        )}
       </Box>
       {shouldUnwrap ? (
         <Box className='orbsErrorContentButtons'>

src/components/Swap/orbs/LiquidityHub/LiquidityHubSwapConfirmation.tsx

@@ -9,13 +9,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { Currency, WETH } from '@uniswap/sdk';
 import { useActiveWeb3React } from 'hooks';
-import {
-  fromRawAmount,
-  subtractSlippage,
-  isRejectedError,
-  isTimeoutError,
-  promiseWithTimeout,
-} from '../utils';
+import { fromRawAmount, isRejectedError, isTimeoutError } from '../utils';
 import { OptimalRate } from '@paraswap/sdk';
 import { useParaswap } from 'hooks/useParaswap';
 import { wrappedCurrency } from 'utils/wrappedCurrency';
@@ -156,6 +150,7 @@ const useAmounts = () => {
 
 const useParseSteps = () => {
   const { inCurrency, signature } = useLiquidityHubConfirmationContext();
+  const { chainId } = useActiveWeb3React();
   const getLogo = useGetLogoCallback();
 
   return useCallback(
@@ -171,7 +166,9 @@ const useParseSteps = () => {
         }
         if (step === Steps.APPROVE) {
           return {
-            title: `Approve ${inCurrency?.symbol} spending`,
+            title: `Approve ${
+              wrappedCurrency(inCurrency, chainId)?.symbol
+            } spending`,
             icon: <CheckCircleIcon />,
             id: Steps.APPROVE,
           };
@@ -185,7 +182,7 @@ const useParseSteps = () => {
         };
       });
     },
-    [inCurrency, signature, getLogo],
+    [inCurrency, signature, getLogo, chainId],
   );
 };
 
@@ -403,7 +400,7 @@ const useLiquidityHubSwapCallback = () => {
   const { mutateAsync: approvalCallback } = useApproveCallback();
   const onTradeSuccess = useOnTradeSuccessCallback();
   const { onUserInput } = useSwapActionHandlers();
-  const dispatch = useAppDispatch();
+  const liquidityHubSdk = useLiquidityHubSDK();
 
   return useMutation({
     mutationFn: async (
@@ -452,13 +449,15 @@ const useLiquidityHubSwapCallback = () => {
           signature,
         });
 
-        const transaction = await library.getTransaction(txHash);
-        const receipt = await transaction.wait();
+        const details = await liquidityHubSdk.getTransactionDetails(
+          txHash,
+          acceptedQuote,
+        );
+        console.log('lh swap success', details);
+
         onUserInput(Field.INPUT, '');
-        dispatch(updateUserBalance());
         updateStore({ swapStatus: SwapStatus.SUCCESS });
         onTradeSuccess(acceptedQuote);
-        return receipt;
       } catch (error) {
         const isRejectedOrTimeout =
           isRejectedError(error) || isTimeoutError(error);
@@ -502,29 +501,24 @@ const useOnTradeSuccessCallback = () => {
         );
       } catch (error) {}
     },
-    [liquidityHubSDK, outTokenUsdPrice, outToken, outCurrency],
+    [liquidityHubSDK, outTokenUsdPrice, outCurrency],
   );
 };
 
 const useParaswapTxParamsCallback = () => {
   const paraswap = useParaswap();
-  const { account, chainId } = useActiveWeb3React();
-  const {
-    allowedSlippage,
-    optimalRate,
-    inCurrency,
-  } = useLiquidityHubConfirmationContext();
+  const { account } = useActiveWeb3React();
+  const { allowedSlippage, optimalRate } = useLiquidityHubConfirmationContext();
 
   return useMutation({
     mutationFn: async () => {
-      const inToken = wrappedCurrency(inCurrency, chainId);
-      if (!optimalRate || !allowedSlippage || !inToken || !account) {
+      if (!optimalRate || !allowedSlippage || !account) {
         throw new Error('useParaswapTxParamsCallback missing args');
       }
       try {
         const result = await paraswap.buildTx(
           {
-            srcToken: inToken.address,
+            srcToken: optimalRate.srcToken,
             destToken: optimalRate.destToken,
             srcAmount: optimalRate.srcAmount,
             destAmount: optimalRate.destAmount,

src/components/Swap/orbs/LiquidityHub/hooks.ts

@@ -147,7 +147,7 @@ export const useGetBetterPrice = (
       try {
         if (skip) return false;
         setSeekingBestPrice(true);
-        const quote = await promiseWithTimeout(fetchLiquidityHubQuote(), 5_000);
+        const quote = await promiseWithTimeout(fetchLiquidityHubQuote(), 8_000);
         const dexMinAmountOut =
           subtractSlippage(allowedSlippage, dexOutAmount) || 0;
         return BN(quote?.userMinOutAmountWithGas || 0).gt(dexMinAmountOut);

src/components/Swap/orbs/utils.ts

@@ -52,7 +52,7 @@ export const isRejectedError = (error: any) => {
 
 export const isTimeoutError = (error: any) => {
   const message = error.message?.toLowerCase();
-  return message?.includes('timeout');
+  return message === 'timeout';
 };
 
 export const makeElipsisAddress = (address?: string, padding = 6): string => {