Skip to content

Update token selector dimensions and breakpoints #408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pedromcunha merged 4 commits into from
Dec 19, 2024
Merged

Update token selector dimensions and breakpoints #408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
89083c4
Increase height and width of token selector
ted-palmer Dec 18, 2024
6a5a13e
Update token selector dimensions and breakpoints
ted-palmer Dec 18, 2024
5e627d4
Merge branch 'main' of https://github.com/reservoirprotocol/relay-kit…
ted-palmer Dec 18, 2024
73f94b2
feat: changeset
ted-palmer Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/calm-monkeys-tan.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@reservoir0x/relay-kit-ui': patch
---

Update token selector dimensions and breakpoints
7 changes: 4 additions & 3 deletions packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/common/TokenSelector/steps/SetChainStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || []
Expand Down Expand Up @@ -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',
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down Expand Up @@ -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) => {
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/widgets/SwapWidget/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand Down
Loading