Skip to content

Commit

Permalink
useSwapQuote (#167)
Browse files Browse the repository at this point in the history 
* useSwapPrice

* fix pnpm dev

* swap quotes loading fix

* build errors

* package version for 0xsequence
  • Loading branch information
@SamueleA
SamueleA authored Oct 9, 2024
1 parent 4736cee commit ba3d463
Show file tree
Hide file tree
Showing 10 changed files with 313 additions and 277 deletions.
2 changes: 1 addition & 1 deletion examples/components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
},
"peerDependencies": {
"@0xsequence/design-system": ">= 1.7.8",
"@0xsequence/network": ">= 2.0.9",
"@0xsequence/network": ">=2.0.12",
"wagmi": "*"
},
"private": true
Expand Down
2 changes: 1 addition & 1 deletion examples/next/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion examples/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 6 additions & 6 deletions packages/checkout/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
87 changes: 50 additions & 37 deletions packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
Expand All @@ -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],
Expand All @@ -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
Expand All @@ -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 || ''
}
})
]
Expand Down Expand Up @@ -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
}

Expand All @@ -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)
}
: {})
},
Expand Down Expand Up @@ -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 (
<CryptoOption
key={swapQuoteAddress}
currencyName={swapQuote.info?.name || 'Unknown'}
currencyName={swapPrice.info?.name || 'Unknown'}
chainId={chainId}
iconUrl={swapQuote.info?.logoURI}
symbol={swapQuote.info?.symbol || ''}
iconUrl={swapPrice.info?.logoURI}
symbol={swapPrice.info?.symbol || ''}
onClick={() => {
setSelectedCurrency(swapQuoteAddress)
}}
Expand All @@ -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)
}
Expand Down Expand Up @@ -426,7 +439,7 @@ export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: P
</Scroll>
<Button
onClick={onClickPurchase}
disabled={isLoading || disableButtons || !selectedCurrency}
disabled={isLoading || disableButtons || !selectedCurrency || (!disableSwapQuote && isLoadingSwapQuote)}
marginTop="2"
shape="square"
variant="primary"
Expand Down
24 changes: 12 additions & 12 deletions packages/kit/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,27 +33,27 @@
"build:types": "tsc --declaration --declarationMap --emitDeclarationOnly --declarationDir dist/types/",
"build:copy-styles": "cp ./node_modules/@0xsequence/design-system/dist/style.css ./dist/styles.css",
"build:clean": "rimraf -g ./dist",
"dev": "tsc --watch --module es2022 --declaration --declarationMap --outDir dist/esm/ --declarationDir dist/types/",
"dev": "pnpm build:types && pnpm build:copy-styles && tsc --watch --module es2022 --declaration --declarationMap --outDir dist/esm/ --declarationDir dist/types/",
"test": "echo",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@0xsequence/api": "^2.0.9",
"@0xsequence/auth": "^2.0.9",
"@0xsequence/core": "^2.0.9",
"@0xsequence/api": "2.0.12",
"@0xsequence/auth": "2.0.12",
"@0xsequence/core": "2.0.12",
"@0xsequence/design-system": "^1.7.8",
"@0xsequence/ethauth": "^1.0.0",
"@0xsequence/indexer": "^2.0.9",
"@0xsequence/metadata": "^2.0.9",
"@0xsequence/network": "^2.0.9",
"@0xsequence/provider": "^2.0.9",
"@0xsequence/utils": "^2.0.9",
"@0xsequence/waas": "^2.0.9",
"@0xsequence/indexer": "2.0.12",
"@0xsequence/metadata": "2.0.12",
"@0xsequence/network": "2.0.12",
"@0xsequence/provider": "2.0.12",
"@0xsequence/utils": "2.0.12",
"@0xsequence/waas": "2.0.12",
"framer-motion": "^8.5.2",
"uuid": "^10.0.0"
},
"peerDependencies": {
"0xsequence": ">= 2.0.9",
"0xsequence": ">= 2.0.12",
"@react-oauth/google": ">= 0.11.1",
"@tanstack/react-query": ">= 5.0.0",
"ethers": ">= 6.13.0",
Expand All @@ -64,7 +64,7 @@
"wagmi": ">= 2.0.0"
},
"devDependencies": {
"0xsequence": "^2.0.9",
"0xsequence": "2.0.12",
"@tanstack/react-query": "^5.37.1",
"@types/uuid": "^9.0.8",
"ethers": "6.13.0",
Expand Down
Loading

0 comments on commit ba3d463

Please sign in to comment.