Skip to content

[TASK-6945] refactor(claim): use new token selector #535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 19, 2024
Merged

[TASK-6945] refactor(claim): use new token selector #535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7bcebcd
refactor(claim): use new token selector
jjramirezn Nov 18, 2024
eab0cc9
refactor: no empty if block
jjramirezn Nov 18, 2024
8264929
refactor: better useEffect dependency
jjramirezn Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 26 additions & 27 deletions src/components/Claim/Claim.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,6 @@ export const Claim = ({}) => {
return chain
})

setSelectedChainID(filteredXchainDetails[0].chainId)
setSelectedTokenAddress(filteredXchainDetails[0].tokens[0].address)
return filteredXchainDetails
} else {
return undefined
Expand All @@ -133,34 +131,35 @@ export const Claim = ({}) => {
})

setClaimLinkData(linkDetails)
setSelectedChainID(linkDetails.chainId)
setSelectedTokenAddress(linkDetails.tokenAddress)

if (linkDetails.claimed) {
setLinkState(_consts.claimLinkStateType.ALREADY_CLAIMED)
return
}

const crossChainDetails = await getCrossChainDetails(linkDetails)
setCrossChainDetails(crossChainDetails)
const tokenPrice = await utils.fetchTokenPrice(linkDetails.tokenAddress.toLowerCase(), linkDetails.chainId)
tokenPrice && setTokenPrice(tokenPrice?.price)

if (address) {
setRecipient({ name: '', address })

const estimatedPoints = await estimatePoints({
address: address ?? '',
chainId: linkDetails.chainId,
amountUSD: Number(linkDetails.tokenAmount) * (tokenPrice?.price ?? 0),
actionType: ActionType.CLAIM,
})
setEstimatedPoints(estimatedPoints)
}

if (address && linkDetails.senderAddress === address) {
setLinkState(_consts.claimLinkStateType.CLAIM_SENDER)
} else {
const crossChainDetails = await getCrossChainDetails(linkDetails)
setCrossChainDetails(crossChainDetails)
const tokenPrice = await utils.fetchTokenPrice(
linkDetails.tokenAddress.toLowerCase(),
linkDetails.chainId
)
tokenPrice && setTokenPrice(tokenPrice?.price)

if (address) {
setRecipient({ name: '', address })

const estimatedPoints = await estimatePoints({
address: address ?? '',
chainId: linkDetails.chainId,
amountUSD: Number(linkDetails.tokenAmount) * (tokenPrice?.price ?? 0),
actionType: ActionType.CLAIM,
})
setEstimatedPoints(estimatedPoints)
}

if (address && linkDetails.senderAddress === address) {
setLinkState(_consts.claimLinkStateType.CLAIM_SENDER)
} else {
setLinkState(_consts.claimLinkStateType.CLAIM)
}
setLinkState(_consts.claimLinkStateType.CLAIM)
}
} catch (error) {
setLinkState(_consts.claimLinkStateType.NOT_FOUND)
Expand Down
141 changes: 52 additions & 89 deletions src/components/Claim/Link/Initial.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,16 @@ import useClaimLink from '../useClaimLink'
import * as context from '@/context'
import Loading from '@/components/Global/Loading'
import * as consts from '@/constants'
import * as utils from '@/utils'
import {
areTokenAddressesEqual,
saveClaimedLinkToLocalStorage,
ErrorHandler,
getBridgeTokenName,
getBridgeChainName,
checkifImageType,
formatTokenAmount,
} from '@/utils'
import MoreInfo from '@/components/Global/MoreInfo'
import TokenSelectorXChain from '@/components/Global/TokenSelector/TokenSelectorXChain'
import { getSquidRouteRaw } from '@squirrel-labs/peanut-sdk'
import * as _interfaces from '../Claim.interfaces'
import * as _utils from '../Claim.utils'
Expand All @@ -27,6 +34,7 @@ import {
} from '@/components/Offramp/Offramp.consts'
import { TOOLTIPS } from '@/constants/tooltips'
import AddressLink from '@/components/Global/AddressLink'
import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'

export const InitialClaimLinkView = ({
onNext,
Expand Down Expand Up @@ -62,9 +70,16 @@ export const InitialClaimLinkView = ({
const [inputChanging, setInputChanging] = useState<boolean>(false)

const { setLoadingState, loadingState, isLoading } = useContext(context.loadingStateContext)
const { selectedChainID, selectedTokenAddress, refetchXchainRoute, setRefetchXchainRoute } = useContext(
context.tokenSelectorContext
)
const {
selectedChainID,
setSelectedChainID,
selectedTokenAddress,
setSelectedTokenAddress,
refetchXchainRoute,
setRefetchXchainRoute,
isXChain,
setIsXChain,
} = useContext(context.tokenSelectorContext)
const mappedData: _interfaces.CombinedType[] = _utils.mapToIPeanutChainDetailsArray(crossChainDetails)
const { claimLink } = useClaimLink()
const { open } = useWeb3Modal()
Expand Down Expand Up @@ -98,7 +113,7 @@ export const InitialClaimLinkView = ({
})

if (claimTxHash) {
utils.saveClaimedLinkToLocalStorage({
saveClaimedLinkToLocalStorage({
address: address ?? '',
data: {
...claimLinkData,
Expand All @@ -117,7 +132,7 @@ export const InitialClaimLinkView = ({
throw new Error('Error claiming link')
}
} catch (error) {
const errorString = utils.ErrorHandler(error)
const errorString = ErrorHandler(error)
setErrorState({
showError: true,
errorMessage: errorString,
Expand All @@ -134,8 +149,8 @@ export const InitialClaimLinkView = ({
errorMessage: '',
})
setLoadingState('Fetching route')
let tokenName = utils.getBridgeTokenName(claimLinkData.chainId, claimLinkData.tokenAddress)
let chainName = utils.getBridgeChainName(claimLinkData.chainId)
let tokenName = getBridgeTokenName(claimLinkData.chainId, claimLinkData.tokenAddress)
let chainName = getBridgeChainName(claimLinkData.chainId)

if (tokenPrice) {
const cashoutUSDAmount = Number(claimLinkData.tokenAmount) * tokenPrice
Expand All @@ -153,8 +168,7 @@ export const InitialClaimLinkView = ({
}
}

if (tokenName && chainName) {
} else {
if (!tokenName || !chainName) {
if (!crossChainDetails) {
setErrorState({
showError: true,
Expand Down Expand Up @@ -277,6 +291,19 @@ export const InitialClaimLinkView = ({
}
}, [address])

useEffect(() => {
if (
selectedChainID === claimLinkData.chainId &&
areTokenAddressesEqual(selectedTokenAddress, claimLinkData.tokenAddress)
) {
setIsXChain(false)
setSelectedRoute(null)
setHasFetchedRoute(false)
} else {
setIsXChain(true)
}
}, [selectedChainID, selectedTokenAddress, claimLinkData.chainId, claimLinkData.tokenAddress])

useEffect(() => {
if (refetchXchainRoute) {
setIsXchainLoading(true)
Expand All @@ -299,10 +326,12 @@ export const InitialClaimLinkView = ({
route.fromChain === claimLinkData.chainId &&
route.fromToken.toLowerCase() === claimLinkData.tokenAddress.toLowerCase() &&
route.toChain === selectedChainID &&
utils.areTokenAddressesEqual(route.toToken, selectedTokenAddress)
areTokenAddressesEqual(route.toToken, selectedTokenAddress)
)
if (existingRoute) {
setSelectedRoute(existingRoute)
} else if (!isXChain) {
setHasFetchedRoute(false)
} else {
const tokenAmount = Math.floor(
Number(claimLinkData.tokenAmount) * Math.pow(10, claimLinkData.tokenDecimals)
Expand Down Expand Up @@ -357,7 +386,7 @@ export const InitialClaimLinkView = ({
{(attachment.message || attachment.attachmentUrl) && (
<>
<div
className={`flex w-full items-center justify-center gap-2 ${utils.checkifImageType(fileType) ? ' flex-row' : ' flex-col'}`}
className={`flex w-full items-center justify-center gap-2 ${checkifImageType(fileType) ? ' flex-row' : ' flex-col'}`}
>
{attachment.message && (
<label className="max-w-full text-h8">
Expand Down Expand Up @@ -385,7 +414,7 @@ export const InitialClaimLinkView = ({
</label>
{tokenPrice ? (
<label className="text-h2">
$ {utils.formatTokenAmount(Number(claimLinkData.tokenAmount) * tokenPrice)}
$ {formatTokenAmount(Number(claimLinkData.tokenAmount) * tokenPrice)}
</label>
) : (
<label className="text-h2 ">
Expand All @@ -394,81 +423,15 @@ export const InitialClaimLinkView = ({
)}
</div>
<div className="flex w-full flex-col items-start justify-center gap-3 px-2">
<TokenSelectorXChain
data={mappedData}
chainName={
hasFetchedRoute
? selectedRoute
? mappedData.find((chain) => chain.chainId === selectedRoute.route.params.toChain)
?.name
: mappedData.find((data) => data.chainId === selectedChainID)?.name
: consts.supportedPeanutChains.find((chain) => chain.chainId === claimLinkData.chainId)
?.name
}
tokenSymbol={
hasFetchedRoute
? selectedRoute
? selectedRoute.route.estimate.toToken.symbol
: mappedData
.find((data) => data.chainId === selectedChainID)
?.tokens?.find((token) =>
utils.areTokenAddressesEqual(token.address, selectedTokenAddress)
)?.symbol
: claimLinkData.tokenSymbol
}
tokenLogoUrl={
hasFetchedRoute
? selectedRoute
? selectedRoute.route.estimate.toToken.logoURI
: mappedData
.find((data) => data.chainId === selectedChainID)
?.tokens?.find((token) =>
utils.areTokenAddressesEqual(token.address, selectedTokenAddress)
)?.logoURI
: consts.peanutTokenDetails
.find((chain) => chain.chainId === claimLinkData.chainId)
?.tokens.find((token) =>
utils.areTokenAddressesEqual(token.address, claimLinkData.tokenAddress)
)?.logoURI
}
chainLogoUrl={
hasFetchedRoute
? selectedRoute
? crossChainDetails?.find(
(chain) => chain.chainId === selectedRoute.route.params.toChain
)?.chainIconURI
: mappedData.find((data) => data.chainId === selectedChainID)?.icon.url
: consts.supportedPeanutChains.find((chain) => chain.chainId === claimLinkData.chainId)
?.icon.url
}
tokenAmount={
hasFetchedRoute
? selectedRoute
? utils.formatTokenAmount(
utils.formatAmountWithDecimals({
amount: selectedRoute.route.estimate.toAmountMin,
decimals: selectedRoute.route.estimate.toToken.decimals,
}),
4
)
: undefined
: claimLinkData.tokenAmount
}
isLoading={isXchainLoading}
routeError={errorState.errorMessage === 'No route found for the given token pair.'}
routeFound={selectedRoute ? true : false}
onReset={() => {
setSelectedRoute(null)
setHasFetchedRoute(false)
setErrorState({
showError: false,
errorMessage: '',
})
}}
isStatic={
recipientType === 'iban' || recipientType === 'us' || !crossChainDetails ? true : false
}
/>
{recipientType !== 'iban' && recipientType !== 'us' && (
<TokenSelector
shouldBeConnected={false}
onReset={() => {
setSelectedChainID(claimLinkData.chainId)
setSelectedTokenAddress(claimLinkData.tokenAddress)
}}
/>
)}
<GeneralRecipientInput
className=""
placeholder="wallet address / ENS / IBAN / US account number"
Expand Down
Loading