Merge pull request #408 from reservoirprotocol/ted/relay-6448-taller-tokenchain-popup

Update token selector dimensions and breakpoints

Author: pedromcunha

.changeset/calm-monkeys-tan.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Update token selector dimensions and breakpoints

packages/ui/src/components/common/TokenSelector/TokenSelector.tsx

@@ -561,15 +561,16 @@ const TokenSelector: FC<TokenSelectorProps> = ({
           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
             }
           }}
         >

packages/ui/src/components/common/TokenSelector/steps/SetChainStep.tsx

@@ -86,7 +86,7 @@ export const SetChainStep: FC<SetChainStepProps> = ({
   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<SetChainStepProps> = ({
           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',

packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx

@@ -89,7 +89,7 @@ export const SetCurrencyStep: FC<SetCurrencyProps> = ({
   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<SetCurrencyProps> = ({
       >
         Select Token
       </Text>
-      <Flex css={{ width: '100%', gap: '3', height: '400px' }}>
+      <Flex css={{ width: '100%', gap: '3', height: '530px' }}>
         {isDesktop && (!configuredChainIds || configuredChainIds.length > 1) ? (
           <>
             <Flex
               direction="column"
-              css={{ maxWidth: 170, flexShrink: 0, gap: '1' }}
+              css={{ maxWidth: 210, flexShrink: 0, gap: '1' }}
             >
               <AccessibleList
                 onSelect={(value) => {

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'