From ba3d4637bddfc997f204287ccd5b0e61095f6f8b Mon Sep 17 00:00:00 2001 From: Samuele Agostinelli Date: Wed, 9 Oct 2024 16:26:53 -0400 Subject: [PATCH] useSwapQuote (#167) * useSwapPrice * fix pnpm dev * swap quotes loading fix * build errors * package version for 0xsequence --- examples/components/package.json | 2 +- examples/next/package.json | 2 +- examples/react/package.json | 2 +- packages/checkout/package.json | 12 +- .../PaymentSelection/PayWithCrypto/index.tsx | 87 ++-- packages/kit/package.json | 24 +- packages/kit/src/hooks/data.ts | 78 ++-- packages/kit/src/index.ts | 5 +- packages/wallet/package.json | 8 +- pnpm-lock.yaml | 370 +++++++++--------- 10 files changed, 313 insertions(+), 277 deletions(-) diff --git a/examples/components/package.json b/examples/components/package.json index ba3a3e8a..3261b576 100644 --- a/examples/components/package.json +++ b/examples/components/package.json @@ -9,7 +9,7 @@ }, "peerDependencies": { "@0xsequence/design-system": ">= 1.7.8", - "@0xsequence/network": ">= 2.0.9", + "@0xsequence/network": ">=2.0.12", "wagmi": "*" }, "private": true diff --git a/examples/next/package.json b/examples/next/package.json index 96be194c..ed7284b1 100644 --- a/examples/next/package.json +++ b/examples/next/package.json @@ -15,7 +15,7 @@ "@0xsequence/kit-checkout": "workspace:*", "@0xsequence/kit-wallet": "workspace:*", "@0xsequence/kit-example-shared-components": "workspace:*", - "@0xsequence/network": "^2.0.9", + "@0xsequence/network": "2.0.12", "@tanstack/react-query": "^5.37.1", "next": "14.2.3", "react": "^18.3.1", diff --git a/examples/react/package.json b/examples/react/package.json index d5c30f0b..9cf866fa 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -17,7 +17,7 @@ "@0xsequence/kit-wallet": "workspace:*", "@0xsequence/kit-example-shared-components": "workspace:*", "@tanstack/react-query": "^5.37.1", - "@0xsequence/network": "^2.0.9", + "@0xsequence/network": "2.0.12", "framer-motion": "^8.5.2", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/packages/checkout/package.json b/packages/checkout/package.json index fd84e51d..2ba3a336 100644 --- a/packages/checkout/package.json +++ b/packages/checkout/package.json @@ -36,14 +36,14 @@ "react-copy-to-clipboard": "^5.1.0" }, "peerDependencies": { - "0xsequence": ">= 2.0.9", - "@0xsequence/api": ">= 2.0.9", + "0xsequence": ">= 2.0.12", + "@0xsequence/api": ">= 2.0.12", "@0xsequence/design-system": ">= 1.7.8", - "@0xsequence/indexer": ">= 2.0.9", - "@0xsequence/metadata": ">= 2.0.9", - "@0xsequence/network": ">= 2.0.9", + "@0xsequence/indexer": ">= 2.0.12", + "@0xsequence/metadata": ">= 2.0.12", + "@0xsequence/network": ">= 2.0.12", "@0xsequence/kit": "workspace:*", - "@0xsequence/waas": ">= 2.0.9", + "@0xsequence/waas": ">= 2.0.12", "@tanstack/react-query": ">= 5.0.0", "ethers": ">= 6.13.0", "framer-motion": ">= 8.5.2", diff --git a/packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx b/packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx index 6f769c18..cd17a4bb 100644 --- a/packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx +++ b/packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx @@ -3,11 +3,12 @@ import { useBalances, useContractInfo, useCoinPrices, - useSwapQuotes, + useSwapPrices, + useSwapQuote, compareAddress, TRANSACTION_CONFIRMATIONS_DEFAULT, sendTransactions, - SwapQuotesWithCurrencyInfo + SwapPricesWithCurrencyInfo } from '@0xsequence/kit' import { findSupportedNetwork } from '@0xsequence/network' import Fuse from 'fuse.js' @@ -75,18 +76,30 @@ export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: P const { data: currencyInfoData, isLoading: isLoadingCurrencyInfo } = useContractInfo(chainId, currencyAddress) - const { - data: swapQuotes = [], - isLoading: swapQuotesIsLoading, - isError: swapQuotesIsError - } = useSwapQuotes({ + const { data: swapPrices = [], isLoading: swapPricesIsLoading } = useSwapPrices({ userAddress: userAddress ?? '', - currencyAddress: settings?.currencyAddress, + buyCurrencyAddress: settings?.currencyAddress, chainId: chainId, - currencyAmount: price, + buyAmount: price, withContractInfo: true }) + const disableSwapQuote = !selectedCurrency || compareAddress(settings.currencyAddress, selectedCurrency || '') + + const { data: swapQuote, isLoading: isLoadingSwapQuote } = useSwapQuote( + { + userAddress: userAddress ?? '', + buyCurrencyAddress: settings?.currencyAddress, + buyAmount: price, + chainId: chainId, + sellCurrencyAddress: selectedCurrency || '', + includeApprove: true + }, + { + disabled: !selectedCurrency + } + ) + const nativeToken = [ { chainId, @@ -95,15 +108,15 @@ export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: P ] const swapTokens = [ - ...swapQuotes.map(quote => ({ + ...swapPrices.map(price => ({ chainId, - contractAddress: quote.info?.address || '' + contractAddress: price.info?.address || '' })) ] const { data: mainCoinPrice = [], isLoading: mainCoinsPricesIsLoading } = useCoinPrices([...nativeToken]) - const disableCoinPricesQuery = swapQuotesIsLoading + const disableCoinPricesQuery = swapPricesIsLoading const { data: swapTokensPrices = [], isLoading: swapTokensPricesIsLoading } = useCoinPrices( [...swapTokens], @@ -112,7 +125,7 @@ export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: P const isLoading = allowanceIsLoading || currencyBalanceIsLoading || isLoadingCurrencyInfo || mainCoinsPricesIsLoading - const swapsIsLoading = swapQuotesIsLoading || swapTokensPricesIsLoading + const swapsIsLoading = swapPricesIsLoading || swapTokensPricesIsLoading interface IndexedData { index: number @@ -128,12 +141,12 @@ export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: P symbol: currencyInfoData?.symbol || '', currencyAddress }, - ...swapQuotes.map((quote, index) => { + ...swapPrices.map((price, index) => { return { index: index + 1, - name: quote.info?.name || 'Unknown', - symbol: quote.info?.symbol || '', - currencyAddress: quote.info?.address || '' + name: price.info?.name || 'Unknown', + symbol: price.info?.symbol || '', + currencyAddress: price.info?.address || '' } }) ] @@ -223,8 +236,8 @@ export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: P setDisableButtons(false) } - const onClickPurchaseSwap = async (swapQuote: SwapQuotesWithCurrencyInfo) => { - if (!walletClient || !userAddress || !publicClient || !userAddress || !connector) { + const onClickPurchaseSwap = async (swapPrice: SwapPricesWithCurrencyInfo) => { + if (!walletClient || !userAddress || !publicClient || !userAddress || !connector || !swapQuote) { return } @@ -242,27 +255,27 @@ export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: P args: [targetContractAddress, price] }) - const isSwapNativeToken = compareAddress(currencyAddress, swapQuote.quote.currencyAddress) + const isSwapNativeToken = compareAddress(currencyAddress, swapPrice.price.currencyAddress) const transactions = [ // Swap quote optional approve step - ...(swapQuote.quote.approveData && !isSwapNativeToken + ...(swapQuote?.approveData && !isSwapNativeToken ? [ { - to: swapQuote.quote.currencyAddress as Hex, - data: swapQuote.quote.approveData as Hex, + to: swapPrice.price.currencyAddress as Hex, + data: swapQuote.approveData as Hex, chain: chainId } ] : []), // Swap quote tx { - to: swapQuote.quote.to as Hex, - data: swapQuote.quote.transactionData as Hex, + to: swapQuote.to as Hex, + data: swapQuote.transactionData as Hex, chain: chainId, ...(isSwapNativeToken ? { - value: BigInt(swapQuote.quote.price) + value: BigInt(swapQuote.price) } : {}) }, @@ -350,25 +363,25 @@ export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: P ) const exchangeRate = foundCoinPrice?.price?.value || 0 - const swapQuote = swapQuotes?.find(quote => compareAddress(quote.info?.address || '', coin.currencyAddress)) + const swapPrice = swapPrices?.find(price => compareAddress(price.info?.address || '', coin.currencyAddress)) const currencyInfoNotFound = - !swapQuote || !swapQuote.info || swapQuote?.info?.decimals === undefined || !swapQuote.balance?.balance + !swapPrice || !swapPrice.info || swapPrice?.info?.decimals === undefined || !swapPrice.balance?.balance if (currencyInfoNotFound || !enableSwapPayments) { return null } - const swapQuotePriceFormatted = formatUnits(BigInt(swapQuote.quote.price), swapQuote.info?.decimals || 18) - const balanceFormatted = formatUnits(BigInt(swapQuote.balance?.balance || 0), swapQuote.info?.decimals || 18) - const swapQuoteAddress = swapQuote.info?.address || '' + const swapQuotePriceFormatted = formatUnits(BigInt(swapPrice.price.price), swapPrice.info?.decimals || 18) + const balanceFormatted = formatUnits(BigInt(swapPrice.balance?.balance || 0), swapPrice.info?.decimals || 18) + const swapQuoteAddress = swapPrice.info?.address || '' const priceFiat = (exchangeRate * Number(swapQuotePriceFormatted)).toFixed(2) return ( { setSelectedCurrency(swapQuoteAddress) }} @@ -387,10 +400,10 @@ export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: P } const onClickPurchase = () => { - if (selectedCurrency === currencyAddress) { + if (compareAddress(selectedCurrency || '', currencyAddress)) { onPurchaseMainCurrency() } else { - const foundSwap = swapQuotes?.find(quote => quote.info?.address === selectedCurrency) + const foundSwap = swapPrices?.find(price => price.info?.address === selectedCurrency) if (foundSwap) { onClickPurchaseSwap(foundSwap) } @@ -426,7 +439,7 @@ export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: P