diff --git a/.changeset/fair-feet-build.md b/.changeset/fair-feet-build.md new file mode 100644 index 00000000..c5fbf542 --- /dev/null +++ b/.changeset/fair-feet-build.md @@ -0,0 +1,5 @@ +--- +'@reservoir0x/relay-kit-ui': patch +--- + +Add single chain mode to swap widget diff --git a/demo/pages/ui/swap.tsx b/demo/pages/ui/swap.tsx index d8eb35a9..a44d7442 100644 --- a/demo/pages/ui/swap.tsx +++ b/demo/pages/ui/swap.tsx @@ -35,6 +35,7 @@ const SwapWidgetPage: NextPage = () => { const { setWalletFilter } = useWalletFilter() const { setShowAuthFlow, primaryWallet } = useDynamicContext() const { theme } = useTheme() + const [singleChainMode, setSingleChainMode] = useState(false) const _switchWallet = useSwitchWallet() const { setShowLinkNewWalletModal } = useDynamicModals() const userWallets = useUserWallets() @@ -127,14 +128,37 @@ const SwapWidgetPage: NextPage = () => { }} > { }} /> +
+
+ + setSingleChainMode(e.target.checked)} + /> +
+
) } diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx index f1bccca8..5e9152c6 100644 --- a/packages/ui/src/components/widgets/SwapWidget/index.tsx +++ b/packages/ui/src/components/widgets/SwapWidget/index.tsx @@ -45,6 +45,7 @@ type BaseSwapWidgetProps = { lockToToken?: boolean lockFromToken?: boolean lockChainId?: number + singleChainMode?: boolean tokens?: Token[] wallet?: AdaptedWallet onFromTokenChange?: (token?: Token) => void @@ -83,6 +84,7 @@ const SwapWidget: FC = ({ lockToToken = false, lockFromToken = false, lockChainId, + singleChainMode = false, tokens, wallet, multiWalletSupportEnabled = false, @@ -110,6 +112,8 @@ const SwapWidget: FC = ({ decimals: 18, logoURI: `${ASSETS_RELAY_API}/icons/1/light.png` } + const isSingleChainLocked = singleChainMode && lockChainId !== undefined + return ( = ({ /> ) : null} - { - setFromTokenSelectorType('chain') - fromTokenSelectorOpenState[1]( - !fromTokenSelectorOpenState[0] - ) - onAnalyticEvent?.(EventNames.SWAP_START_TOKEN_SELECT, { - type: 'chain', - direction: 'input' - }) - }} - /> + {!isSingleChainLocked && ( + { + setFromTokenSelectorType('chain') + fromTokenSelectorOpenState[1]( + !fromTokenSelectorOpenState[0] + ) + onAnalyticEvent?.( + EventNames.SWAP_START_TOKEN_SELECT, + { + type: 'chain', + direction: 'input' + } + ) + }} + /> + )} = ({ context="from" multiWalletSupportEnabled={multiWalletSupportEnabled} chainIdsFilter={ - lockChainId !== undefined && - fromToken?.chainId === lockChainId - ? [fromToken.chainId] + isSingleChainLocked + ? [lockChainId] + : fromToken?.chainId !== undefined && + fromToken?.chainId === lockChainId + ? [fromToken?.chainId] : undefined } restrictedTokensList={tokens?.filter( @@ -631,24 +642,29 @@ const SwapWidget: FC = ({ ) : null} - { - setToTokenSelectorType('chain') - toTokenSelectorOpenState[1]( - !toTokenSelectorOpenState[0] - ) - onAnalyticEvent?.(EventNames.SWAP_START_TOKEN_SELECT, { - type: 'chain', - direction: 'output' - }) - }} - /> + {!isSingleChainLocked && ( + { + setToTokenSelectorType('chain') + toTokenSelectorOpenState[1]( + !toTokenSelectorOpenState[0] + ) + onAnalyticEvent?.( + EventNames.SWAP_START_TOKEN_SELECT, + { + type: 'chain', + direction: 'output' + } + ) + }} + /> + )} = ({ } onAnalyticEvent={onAnalyticEvent} chainIdsFilter={ - lockChainId !== undefined && - toToken?.chainId === lockChainId - ? [toToken.chainId] + isSingleChainLocked + ? [lockChainId] + : toToken?.chainId !== undefined && + toToken?.chainId === lockChainId + ? [toToken?.chainId] : undefined } restrictedTokensList={tokens?.filter(