diff --git a/src/components/Swap/SwapBestTrade.tsx b/src/components/Swap/SwapBestTrade.tsx index c626d5461..e1b6721a9 100644 --- a/src/components/Swap/SwapBestTrade.tsx +++ b/src/components/Swap/SwapBestTrade.tsx @@ -453,7 +453,6 @@ const SwapBestTrade: React.FC<{ isLoading: liquidityHubQuoteLoading, error: liquidityHubQuoteError, refetch: fetchLiquidityHubQuote, - getLatestQuote, } = useLiquidityHubQuote({ allowedSlippage, inAmount: parsedAmount?.raw.toString(), @@ -1279,6 +1278,8 @@ const SwapBestTrade: React.FC<{ } }, [handleParaswap, onApprove, showApproveFlow]); + const getLatestOptimalRate = useCallback(() => optimalRate, [optimalRate]); + return ( diff --git a/src/components/Swap/orbs/ConfirmationModal.tsx b/src/components/Swap/orbs/ConfirmationModal.tsx index 8e146fc95..c8eca9a7e 100644 --- a/src/components/Swap/orbs/ConfirmationModal.tsx +++ b/src/components/Swap/orbs/ConfirmationModal.tsx @@ -248,7 +248,7 @@ function ConfirmationContainer({ export const Error = () => { const { - onDismiss, + onDismiss: _onDismiss, inAmount, state: { shouldUnwrap }, } = useConfirmationContext(); @@ -256,23 +256,32 @@ export const Error = () => { const { chainId } = useActiveWeb3React(); const nativeSymbol = ETHER[chainId].symbol; const wSymbol = WETH[chainId].symbol; + const [isLoading, setIsLoading] = useState(false); - const { execute, wrapType } = useWrapCallback( + const { execute, inputError } = useWrapCallback( WETH[chainId], ETHER[chainId], inAmount, ); + const [success, setSuccess] = useState(false); - const isLoading = wrapType === WrapType.UNWRAPPING; const unwrap = useCallback(async () => { try { + setIsLoading(true); await execute?.(); setSuccess(true); } catch (error) { console.error(error); + } finally { + setIsLoading(false); } }, [execute]); + const onDismiss = useCallback(() => { + _onDismiss(); + setSuccess(false); + }, [_onDismiss]); + if (success) { return ( {

)}
- {shouldUnwrap ? ( + {!inputError && shouldUnwrap ? ( - - - ); -}; - export const Main = ({ parseSteps, swapDetails, diff --git a/src/components/Swap/orbs/LiquidityHub/LiquidityHubSwapConfirmation.tsx b/src/components/Swap/orbs/LiquidityHub/LiquidityHubSwapConfirmation.tsx index 312edab79..982a631f1 100644 --- a/src/components/Swap/orbs/LiquidityHub/LiquidityHubSwapConfirmation.tsx +++ b/src/components/Swap/orbs/LiquidityHub/LiquidityHubSwapConfirmation.tsx @@ -35,18 +35,16 @@ import { useLiquidityHubSDK } from './hooks'; import useWrapCallback from 'hooks/useWrapCallback'; import { useSwapActionHandlers } from 'state/swap/hooks'; import { Field } from 'state/swap/actions'; -import { useAppDispatch } from 'state'; -import { updateUserBalance } from 'state/balance/actions'; export interface LiquidityHubConfirmationProps { inCurrency?: Currency; outCurrency?: Currency; isOpen: boolean; onDismiss: () => void; - getLatestQuote: () => Quote | undefined; + fetchLiquidityHubQuote: () => Promise; quote?: Quote | null; onSwapFailed: () => void; - optimalRate?: OptimalRate; + getOptimalRate: () => OptimalRate | undefined; allowedSlippage?: number; onLiquidityHubSwapInProgress: (value: boolean) => void; inAmount?: string; @@ -363,15 +361,15 @@ const useSwapCallback = () => { return useMutation({ mutationFn: async ({ - acceptedQuote, + quote, signature, }: { - acceptedQuote: Quote; + quote: Quote; signature: string; }) => { const txParams = await getParaswapTxParams(); - const txHash = await liquidityHub.swap(acceptedQuote, signature, { + const txHash = await liquidityHub.swap(quote, signature, { data: txParams?.data || '', to: txParams?.to, }); @@ -389,9 +387,8 @@ const useLiquidityHubSwapCallback = () => { onAcceptQuote, inCurrency, outCurrency, - getLatestQuote, + fetchLiquidityHubQuote, onLiquidityHubSwapInProgress, - quote, } = useLiquidityHubConfirmationContext(); const { mutateAsync: signCallback } = useSignEIP712Callback(); const getSteps = useGetStepsCallback(); @@ -433,31 +430,34 @@ const useLiquidityHubSwapCallback = () => { await approvalCallback(); } - const acceptedQuote = getLatestQuote() || quote; + const latestQuote = await fetchLiquidityHubQuote(); - if (!acceptedQuote) { + if (!latestQuote) { throw new Error('missing quote'); } - onAcceptQuote(acceptedQuote); + onAcceptQuote(latestQuote); updateStore({ currentStep: Steps.SWAP }); - const signature = await signCallback(acceptedQuote.permitData); + const signature = await signCallback(latestQuote.permitData); onSignature(signature); const txHash = await swapCallback({ - acceptedQuote, + quote: latestQuote, signature, }); const details = await liquidityHubSdk.getTransactionDetails( txHash, - acceptedQuote, + latestQuote, ); - console.log('lh swap success', details); + + if (!details) { + throw new Error('missing transaction details'); + } onUserInput(Field.INPUT, ''); updateStore({ swapStatus: SwapStatus.SUCCESS }); - onTradeSuccess(acceptedQuote); + onTradeSuccess(latestQuote); } catch (error) { const isRejectedOrTimeout = isRejectedError(error) || isTimeoutError(error); @@ -508,10 +508,14 @@ const useOnTradeSuccessCallback = () => { const useParaswapTxParamsCallback = () => { const paraswap = useParaswap(); const { account } = useActiveWeb3React(); - const { allowedSlippage, optimalRate } = useLiquidityHubConfirmationContext(); + const { + allowedSlippage, + getOptimalRate, + } = useLiquidityHubConfirmationContext(); return useMutation({ mutationFn: async () => { + const optimalRate = getOptimalRate(); if (!optimalRate || !allowedSlippage || !account) { throw new Error('useParaswapTxParamsCallback missing args'); } diff --git a/src/components/Swap/orbs/LiquidityHub/hooks.ts b/src/components/Swap/orbs/LiquidityHub/hooks.ts index ad93d23a2..3e63d6479 100644 --- a/src/components/Swap/orbs/LiquidityHub/hooks.ts +++ b/src/components/Swap/orbs/LiquidityHub/hooks.ts @@ -69,8 +69,8 @@ export const useLiquidityHubQuote = ({ : wrappedCurrency(outCurrency, chainId)?.address; }, [outCurrency, isNativeCurrency, chainId]); - const queryKey = useMemo( - () => [ + const query = useQuery({ + queryKey: [ 'useLiquidityHubQuote', fromToken, toToken, @@ -78,11 +78,6 @@ export const useLiquidityHubQuote = ({ allowedSlippage, chainId, ], - [fromToken, toToken, inAmount, allowedSlippage, chainId], - ); - - const query = useQuery({ - queryKey, queryFn: async ({ signal }) => { if (!fromToken || !toToken || !inAmount || !chainId || !allowedSlippage) { throw new Error('useLiquidityHubQuote Missing required parameters'); @@ -118,15 +113,14 @@ export const useLiquidityHubQuote = ({ isSupported, }); - const queryClient = useQueryClient(); + const refetch = useCallback(async () => { + return (await query.refetch()).data; + }, [query.refetch]); - return useMemo(() => { - return { - ...query, - getLatestQuote: () => queryClient.getQueryData(queryKey), - refetch: async () => (await query.refetch()).data, - }; - }, [query, queryClient, queryKey]); + return { + ...query, + refetch, + }; }; export const useGetBetterPrice = (