Skip to content

Commit

Permalink
prettier linting
Browse files Browse the repository at this point in the history
  • Loading branch information
@SamueleA
SamueleA committed Sep 26, 2024
1 parent 6d66e2a commit 4cc8f3f
Showing 1 changed file with 65 additions and 80 deletions.
145 changes: 65 additions & 80 deletions packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import {
useState,
useEffect,
} from 'react'
import { useState, useEffect } from 'react'
import Fuse from 'fuse.js'

import {
Expand All @@ -12,17 +9,9 @@ import {
compareAddress,
TRANSACTION_CONFIRMATIONS_DEFAULT,
sendTransactions,
SwapQuotesWithCurrencyInfo,
SwapQuotesWithCurrencyInfo
} from '@0xsequence/kit'
import {
Box,
Button,
Text,
TextInput,
SearchIcon,
Scroll,
Spinner,
} from '@0xsequence/design-system'
import { Box, Button, Text, TextInput, SearchIcon, Scroll, Spinner } from '@0xsequence/design-system'
import { encodeFunctionData, formatUnits, Hex, zeroAddress } from 'viem'

import { SelectPaymentSettings } from '../../../contexts'
Expand All @@ -41,14 +30,10 @@ interface PayWithCryptoProps {
setDisableButtons: React.Dispatch<React.SetStateAction<boolean>>
}

export const PayWithCrypto = ({
settings,
disableButtons,
setDisableButtons
}: PayWithCryptoProps) => {
export const PayWithCrypto = ({ settings, disableButtons, setDisableButtons }: PayWithCryptoProps) => {
const { enableSwapPayments = true, enableMainCurrencyPayment = true } = settings
const [search, setSearch] = useState('')
const [selectedCurrency, setSelectedCurrency] = useState<string>()
const [selectedCurrency, setSelectedCurrency] = useState<string>()

const {
chain,
Expand All @@ -58,7 +43,7 @@ export const PayWithCrypto = ({
txData,
transactionConfirmations = TRANSACTION_CONFIRMATIONS_DEFAULT,
onSuccess = () => {},
onError = () => {},
onError = () => {}
} = settings
const { address: userAddress, connector } = useAccount()
const { data: walletClient } = useWalletClient()
Expand Down Expand Up @@ -91,40 +76,42 @@ export const PayWithCrypto = ({
includeMetadata: false
})

const { data: currencyInfoData, isLoading: isLoadingCurrencyInfo } = useContractInfo(
chainId,
currencyAddress
)
const { data: currencyInfoData, isLoading: isLoadingCurrencyInfo } = useContractInfo(chainId, currencyAddress)

const { data: swapQuotes = [], isLoading: swapQuotesIsLoading, isError: swapQuotesIsError } = useSwapQuotes({
const {
data: swapQuotes = [],
isLoading: swapQuotesIsLoading,
isError: swapQuotesIsError
} = useSwapQuotes({
userAddress: userAddress ?? '',
currencyAddress: settings?.currencyAddress,
chainId: chainId,
currencyAmount: price,
withContractInfo: true
})

const nativeToken = [{
chainId,
contractAddress: currencyAddress
}]
const nativeToken = [
{
chainId,
contractAddress: currencyAddress
}
]

const swapTokens = [
...swapQuotes.map(quote => ({
chainId,
contractAddress: quote.info?.address || ''
}))
...swapQuotes.map(quote => ({
chainId,
contractAddress: quote.info?.address || ''
}))
]

const { data: mainCoinPrice = [], isLoading: mainCoinsPricesIsLoading } = useCoinPrices([
...nativeToken
])
const { data: mainCoinPrice = [], isLoading: mainCoinsPricesIsLoading } = useCoinPrices([...nativeToken])

const disableCoinPricesQuery = swapQuotesIsLoading

const { data: swapTokensPrices = [], isLoading: swapTokensPricesIsLoading } = useCoinPrices([
...swapTokens
], disableCoinPricesQuery)
const { data: swapTokensPrices = [], isLoading: swapTokensPricesIsLoading } = useCoinPrices(
[...swapTokens],
disableCoinPricesQuery
)

const isLoading = allowanceIsLoading || currencyBalanceIsLoading || isLoadingCurrencyInfo || mainCoinsPricesIsLoading

Expand All @@ -142,16 +129,16 @@ export const PayWithCrypto = ({
index: 0,
name: currencyInfoData?.name || 'Unknown',
symbol: currencyInfoData?.symbol || '',
currencyAddress,
currencyAddress
},
...(swapQuotes.map((quote, index ) => {
return ({
...swapQuotes.map((quote, index) => {
return {
index: index + 1,
name: quote.info?.name || 'Unknown',
symbol: quote.info?.symbol || '',
currencyAddress: quote.info?.address || ''
})
}))
}
})
]

const fuzzySearchCoins = new Fuse(indexedCoins, {
Expand All @@ -162,7 +149,7 @@ export const PayWithCrypto = ({

const priceFormatted = formatUnits(BigInt(price), currencyInfoData?.decimals || 0)
const isNativeToken = compareAddress(currencyAddress, zeroAddress)
const isApproved: boolean = ((allowanceData as bigint) >= BigInt(price)) || isNativeToken
const isApproved: boolean = (allowanceData as bigint) >= BigInt(price) || isNativeToken

const balanceInfo = currencyBalanceData?.find(balanceData => compareAddress(currencyAddress, balanceData.contractAddress))

Expand Down Expand Up @@ -209,9 +196,11 @@ export const PayWithCrypto = ({
to: targetContractAddress as Hex,
data: txData,
chainId,
...(isNativeToken ? {
value: BigInt(settings.price)
} : {})
...(isNativeToken
? {
value: BigInt(settings.price)
}
: {})
}
]

Expand All @@ -222,7 +211,7 @@ export const PayWithCrypto = ({
walletClient,
connector,
transactions,
transactionConfirmations,
transactionConfirmations
})

closeSelectPaymentModal()
Expand Down Expand Up @@ -274,29 +263,32 @@ export const PayWithCrypto = ({
to: swapQuote.quote.to as Hex,
data: swapQuote.quote.transactionData as Hex,
chain: chainId,
...(isSwapNativeToken ? {
value: BigInt(swapQuote.quote.price)
} : {})
...(isSwapNativeToken
? {
value: BigInt(swapQuote.quote.price)
}
: {})
},
// Actual transaction optional approve step
...(isApproved
? []
: [
{
to: currencyAddress as Hex,
to: currencyAddress as Hex,
data: approveTxData as Hex,
chainId: chainId,
chainId: chainId
}
]
),
]),
// transaction on the contract
{
to: targetContractAddress as Hex,
to: targetContractAddress as Hex,
data: txData as Hex,
chainId,
...(isNativeToken ? {
value: BigInt(settings.price)
} : {})
...(isNativeToken
? {
value: BigInt(settings.price)
}
: {})
}
]

Expand All @@ -307,7 +299,7 @@ export const PayWithCrypto = ({
walletClient,
connector,
transactions,
transactionConfirmations,
transactionConfirmations
})

closeSelectPaymentModal()
Expand All @@ -325,7 +317,7 @@ export const PayWithCrypto = ({
const Options = () => {
return (
<Box flexDirection="column" justifyContent="center" alignItems="center" gap="2" width="full">
{foundCoins.map((coin) => {
{foundCoins.map(coin => {
if (compareAddress(coin.currencyAddress, currencyAddress) && enableMainCurrencyPayment) {
const coinPrice = mainCoinPrice[0]
const exchangeRate = coinPrice?.price?.value || 0
Expand Down Expand Up @@ -357,15 +349,14 @@ export const PayWithCrypto = ({
</>
)
} else {
const foundCoinPrice = swapTokensPrices.find(coinPrice => (
const foundCoinPrice = swapTokensPrices.find(coinPrice =>
compareAddress(coinPrice.token.contractAddress, coin.currencyAddress)
))
)
const exchangeRate = foundCoinPrice?.price?.value || 0

const swapQuote = swapQuotes?.find(quote => (
compareAddress(quote.info?.address || '', coin.currencyAddress)
))
const currencyInfoNotFound = !swapQuote || !swapQuote.info || swapQuote?.info?.decimals === undefined || !swapQuote.balance?.balance
const swapQuote = swapQuotes?.find(quote => compareAddress(quote.info?.address || '', coin.currencyAddress))
const currencyInfoNotFound =
!swapQuote || !swapQuote.info || swapQuote?.info?.decimals === undefined || !swapQuote.balance?.balance
if (currencyInfoNotFound || !enableSwapPayments) {
return null
}
Expand Down Expand Up @@ -394,18 +385,16 @@ export const PayWithCrypto = ({
/>
)
}

})}
</Box>
)
}


const onClickPurchase = () => {
if (selectedCurrency === currencyAddress) {
onPurchaseMainCurrency()
} else {
const foundSwap = swapQuotes?.find(quote => (quote.info?.address === selectedCurrency))
} else {
const foundSwap = swapQuotes?.find(quote => quote.info?.address === selectedCurrency)
if (foundSwap) {
onClickPurchaseSwap(foundSwap)
}
Expand All @@ -425,12 +414,8 @@ export const PayWithCrypto = ({
data-1p-ignore
/>
</Box>
<Box marginTop="3" >
<Text
variant="small"
fontWeight="medium"
color="text50"
>
<Box marginTop="3">
<Text variant="small" fontWeight="medium" color="text50">
Select a crypto
</Text>
</Box>
Expand All @@ -454,4 +439,4 @@ export const PayWithCrypto = ({
/>
</Box>
)
}
}

0 comments on commit 4cc8f3f

Please sign in to comment.