diff --git a/.changeset/calm-monkeys-tan.md b/.changeset/calm-monkeys-tan.md new file mode 100644 index 000000000..f5ea8de98 --- /dev/null +++ b/.changeset/calm-monkeys-tan.md @@ -0,0 +1,5 @@ +--- +'@reservoir0x/relay-kit-ui': patch +--- + +Update token selector dimensions and breakpoints diff --git a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx index a6d858792..1201ae2e1 100644 --- a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx +++ b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx @@ -561,15 +561,16 @@ const TokenSelector: FC = ({ trigger={trigger} css={{ p: '4', - sm: { + overflowY: 'clip', + '@media(min-width: 660px)': { minWidth: size === 'desktop' ? configuredChainIds.length > 1 - ? 568 + ? 660 : 378 : 400, maxWidth: - size === 'desktop' && configuredChainIds.length > 1 ? 568 : 378 + size === 'desktop' && configuredChainIds.length > 1 ? 660 : 378 } }} > diff --git a/packages/ui/src/components/common/TokenSelector/steps/SetChainStep.tsx b/packages/ui/src/components/common/TokenSelector/steps/SetChainStep.tsx index 4a6380204..4230b4efa 100644 --- a/packages/ui/src/components/common/TokenSelector/steps/SetChainStep.tsx +++ b/packages/ui/src/components/common/TokenSelector/steps/SetChainStep.tsx @@ -86,7 +86,7 @@ export const SetChainStep: FC = ({ selectedCurrencyList }) => { const client = useRelayClient() - const isSmallDevice = useMediaQuery('(max-width: 600px)') + const isSmallDevice = useMediaQuery('(max-width: 660px)') const isDesktop = size === 'desktop' && !isSmallDevice const supportedChains = selectedCurrencyList?.chains || [] @@ -207,7 +207,7 @@ export const SetChainStep: FC = ({ gridTemplateColumns: isDesktop ? 'repeat(2, minmax(0, 1fr))' : 'none', gridColumnGap: isDesktop ? '8px' : '0', gridAutoRows: 'min-content', - height: 370, + height: 530, overflowY: 'auto', pb: '2', gap: isDesktop ? '0' : '2', diff --git a/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx b/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx index 20ba5b23a..932de20de 100644 --- a/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx +++ b/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx @@ -89,7 +89,7 @@ export const SetCurrencyStep: FC = ({ setCurrencyList, onAnalyticEvent }) => { - const isSmallDevice = useMediaQuery('(max-width: 600px)') + const isSmallDevice = useMediaQuery('(max-width: 660px)') const isDesktop = size === 'desktop' && !isSmallDevice const allChains = [ { id: undefined, name: 'All Chains' }, @@ -159,12 +159,12 @@ export const SetCurrencyStep: FC = ({ > Select Token - + {isDesktop && (!configuredChainIds || configuredChainIds.length > 1) ? ( <> { diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx index 4e0e99b2d..fc39966c3 100644 --- a/packages/ui/src/components/widgets/SwapWidget/index.tsx +++ b/packages/ui/src/components/widgets/SwapWidget/index.tsx @@ -1,4 +1,4 @@ -import { Flex, Button, Text, Box, Pill } from '../../primitives/index.js' +import { Flex, Button, Text, Box } from '../../primitives/index.js' import { useContext, useEffect, useState, type FC } from 'react' import { useRelayClient } from '../../../hooks/index.js' import type { Address } from 'viem' @@ -22,7 +22,7 @@ import TokenSelectorContainer from '../TokenSelectorContainer.js' import FeeBreakdown from '../FeeBreakdown.js' import { mainnet } from 'viem/chains' import { PriceImpactTooltip } from '../PriceImpactTooltip.js' -import { faClipboard, faPenToSquare } from '@fortawesome/free-solid-svg-icons' +import { faClipboard } from '@fortawesome/free-solid-svg-icons' import { SwapWidgetTokenTrigger } from '../../common/TokenSelector/triggers/SwapWidgetTokenTrigger.js' import { ChainTrigger } from '../../common/TokenSelector/triggers/ChainTrigger.js' import type { AdaptedWallet } from '@reservoir0x/relay-sdk'