diff --git a/.changeset/brown-cougars-exist.md b/.changeset/brown-cougars-exist.md new file mode 100644 index 000000000..49363e627 --- /dev/null +++ b/.changeset/brown-cougars-exist.md @@ -0,0 +1,5 @@ +--- +'@reservoir0x/relay-kit-ui': patch +--- + +Fix token selection bugs with lockChainId and restrictedTokens diff --git a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx index 889d4c23f..a6d858792 100644 --- a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx +++ b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx @@ -149,14 +149,27 @@ const TokenSelector: FC = ({ ) : configuredChains + const filteredRestrictedTokenList = useMemo(() => { + if (!restrictedTokensList) return undefined + + // Only filter tokens if we're viewing a specific chain + if (chainFilter.id === undefined) { + return restrictedTokensList + } + + return restrictedTokensList.filter( + (token) => token.chainId === chainFilter.id + ) + }, [restrictedTokensList, chainFilter.id]) + const useDefaultTokenList = debouncedTokenSearchValue === '' && - (!restrictedTokensList || !restrictedTokensList.length) + (!filteredRestrictedTokenList || !filteredRestrictedTokenList.length) let tokenListQuery: string[] | undefined - if (restrictedTokensList && restrictedTokensList.length > 0) { - tokenListQuery = restrictedTokensList.map( + if (filteredRestrictedTokenList && filteredRestrictedTokenList.length > 0) { + tokenListQuery = filteredRestrictedTokenList.map( (token) => `${token.chainId}:${token.address}` ) } @@ -217,7 +230,7 @@ const TokenSelector: FC = ({ : undefined ) - const restrictedTokenAddresses = restrictedTokensList?.map((token) => + const restrictedTokenAddresses = filteredRestrictedTokenList?.map((token) => token.address.toLowerCase() ) @@ -234,8 +247,8 @@ const TokenSelector: FC = ({ let suggestedTokenQuery: string[] | undefined - if (restrictedTokensList && restrictedTokensList.length > 0) { - suggestedTokenQuery = restrictedTokensList.map( + if (filteredRestrictedTokenList && filteredRestrictedTokenList.length > 0) { + suggestedTokenQuery = filteredRestrictedTokenList.map( (token) => `${token.chainId}:${token.address}` ) } else if (duneTokenBalances) { @@ -577,6 +590,7 @@ const TokenSelector: FC = ({ setInputElement={setInputElement} tokenSearchInput={tokenSearchInput} setTokenSearchInput={setTokenSearchInput} + configuredChainIds={configuredChainIds} chainFilterOptions={chainFilterOptions} chainFilter={chainFilter} setChainFilter={setChainFilter} diff --git a/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx b/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx index 4027dcfa0..20ba5b23a 100644 --- a/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx +++ b/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx @@ -44,6 +44,7 @@ type SetCurrencyProps = { ) => void tokenSearchInput: string setTokenSearchInput: (value: string) => void + configuredChainIds: number[] | undefined chainFilterOptions: RelayChain[] chainFilter: ChainFilterValue setChainFilter: (value: React.SetStateAction) => void @@ -73,6 +74,7 @@ export const SetCurrencyStep: FC = ({ setInputElement, tokenSearchInput, setTokenSearchInput, + configuredChainIds, chainFilterOptions, chainFilter, setChainFilter, @@ -158,7 +160,7 @@ export const SetCurrencyStep: FC = ({ Select Token - {isDesktop && allChains.length > 2 ? ( + {isDesktop && (!configuredChainIds || configuredChainIds.length > 1) ? ( <> = ({ } /> - {!isDesktop && allChains.length > 2 ? ( + {!isDesktop && + (!configuredChainIds || configuredChainIds.length > 1) ? ( = ({ { setFromTokenSelectorType('chain') fromTokenSelectorOpenState[1]( @@ -414,8 +414,8 @@ const SwapWidget: FC = ({ tradeType === 'EXACT_INPUT' ? amountInputValue : amountInputValue - ? formatFixedLength(amountInputValue, 8) - : amountInputValue + ? formatFixedLength(amountInputValue, 8) + : amountInputValue } setValue={(e) => { setAmountInputValue(e) @@ -475,10 +475,13 @@ const SwapWidget: FC = ({ lockedChainIds={ isSingleChainLocked ? [lockChainId] - : fromToken?.chainId !== undefined && - fromToken?.chainId === lockChainId - ? [fromToken?.chainId] - : undefined + : isChainLocked( + fromToken?.chainId, + lockChainId, + toToken?.chainId + ) && fromToken?.chainId + ? [fromToken.chainId] + : undefined } chainIdsFilter={ !fromChainWalletVMSupported && toToken @@ -746,10 +749,11 @@ const SwapWidget: FC = ({ { setToTokenSelectorType('chain') toTokenSelectorOpenState[1]( @@ -775,8 +779,8 @@ const SwapWidget: FC = ({ tradeType === 'EXPECTED_OUTPUT' ? amountOutputValue : amountOutputValue - ? formatFixedLength(amountOutputValue, 8) - : amountOutputValue + ? formatFixedLength(amountOutputValue, 8) + : amountOutputValue } setValue={(e) => { setAmountOutputValue(e) @@ -864,10 +868,13 @@ const SwapWidget: FC = ({ lockedChainIds={ isSingleChainLocked ? [lockChainId] - : toToken?.chainId !== undefined && - toToken?.chainId === lockChainId - ? [toToken?.chainId] - : undefined + : isChainLocked( + toToken?.chainId, + lockChainId, + fromToken?.chainId + ) && toToken?.chainId + ? [toToken.chainId] + : undefined } chainIdsFilter={ !fromChainWalletVMSupported && fromToken diff --git a/packages/ui/src/utils/tokenSelector.ts b/packages/ui/src/utils/tokenSelector.ts new file mode 100644 index 000000000..d8380b66d --- /dev/null +++ b/packages/ui/src/utils/tokenSelector.ts @@ -0,0 +1,14 @@ +export const isChainLocked = ( + chainId: number | undefined, + lockChainId: number | undefined, + otherTokenChainId: number | undefined +) => { + if (lockChainId === undefined) return false + + // If this token is on the locked chain, only lock it if the other token isn't + if (chainId === lockChainId) { + return otherTokenChainId !== lockChainId + } + + return false +}