diff --git a/.changeset/orange-sloths-search.md b/.changeset/orange-sloths-search.md new file mode 100644 index 000000000..2c92a3a7d --- /dev/null +++ b/.changeset/orange-sloths-search.md @@ -0,0 +1,5 @@ +--- +'@reservoir0x/relay-kit-ui': patch +--- + +Add chain icon to token selector in single chain mode diff --git a/packages/ui/src/components/common/TokenSelector/triggers/SwapWidgetTokenTrigger.tsx b/packages/ui/src/components/common/TokenSelector/triggers/SwapWidgetTokenTrigger.tsx index f61639864..70e73df38 100644 --- a/packages/ui/src/components/common/TokenSelector/triggers/SwapWidgetTokenTrigger.tsx +++ b/packages/ui/src/components/common/TokenSelector/triggers/SwapWidgetTokenTrigger.tsx @@ -4,7 +4,8 @@ import { Button, Flex, Text, - Box + Box, + ChainTokenIcon } from '../../../../components/primitives/index.js' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faChevronDown, faCoins } from '@fortawesome/free-solid-svg-icons' @@ -12,11 +13,13 @@ import { faChevronDown, faCoins } from '@fortawesome/free-solid-svg-icons' type SwapWidgetTokenTriggerProps = { token?: Token locked?: boolean + isSingleChainLocked?: boolean } export const SwapWidgetTokenTrigger: FC = ({ token, - locked + locked, + isSingleChainLocked }) => { const isValidTokenLogo = token?.logoURI && token.logoURI !== 'missing.png' @@ -44,7 +47,13 @@ export const SwapWidgetTokenTrigger: FC = ({ }} > - {isValidTokenLogo ? ( + {isSingleChainLocked ? ( + + ) : isValidTokenLogo ? ( {token.name} = ({ token.chainId === fromToken?.chainId ).length === 1) } + isSingleChainLocked={isSingleChainLocked} /> } @@ -750,6 +751,7 @@ const SwapWidget: FC = ({ token.chainId === toToken?.chainId ).length === 1) } + isSingleChainLocked={isSingleChainLocked} /> }