Skip to content

Commit b59d911

Browse files
0xTxbi0xTxbi
authored
More mobile ux improvments for TokenWidget (#865)
* improved z-indexes * dynamic payment screen height * fix missing balances * cleaner rwd * feat: changeset
1 parent 109a29d commit b59d911

File tree

10 files changed

+167
-63
lines changed

10 files changed

+167
-63
lines changed

‎.changeset/hip-needles-lie.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@relayprotocol/relay-kit-ui': patch
3+
---
4+
5+
Mobile payment selector improvments

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

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export type PaymentMethodProps = {
6363
linkedWallets?: any[]
6464
setToken: (token: Token) => void
6565
onAnalyticEvent?: (eventName: string, data?: any) => void
66+
onPaymentMethodOpenChange?: (open: boolean) => void
6667
}
6768

6869
const PaymentMethod: FC<PaymentMethodProps> = ({
@@ -79,7 +80,8 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
7980
popularChainIds,
8081
linkedWallets,
8182
setToken,
82-
onAnalyticEvent
83+
onAnalyticEvent,
84+
onPaymentMethodOpenChange
8385
}) => {
8486
const relayClient = useRelayClient()
8587
const { chains: allRelayChains } = useInternalRelayChains()
@@ -196,14 +198,20 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
196198
)
197199

198200
const filteredDuneTokenBalances = useMemo(() => {
199-
return duneTokens?.balances?.filter((balance) =>
200-
configuredChainIds.includes(balance.chain_id)
201-
)
202-
}, [duneTokens?.balances, configuredChainIds])
201+
return duneTokens?.balances
202+
}, [duneTokens?.balances])
203203

204204
const userTokensQuery = useMemo(() => {
205205
if (filteredDuneTokenBalances && filteredDuneTokenBalances.length > 0) {
206-
return filteredDuneTokenBalances.map(
206+
const sortedBalances = [...filteredDuneTokenBalances]
207+
.sort((a, b) => {
208+
const aValue = a.value_usd || 0
209+
const bValue = b.value_usd || 0
210+
return bValue - aValue
211+
})
212+
.slice(0, 50)
213+
214+
return sortedBalances.map(
207215
(balance) => `${balance.chain_id}:${balance.address}`
208216
)
209217
}
@@ -392,6 +400,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
392400
}
393401

394402
setOpen(openChange)
403+
onPaymentMethodOpenChange?.(openChange)
395404
},
396405
[
397406
tokenBalances,
@@ -402,7 +411,8 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
402411
setOpen,
403412
chainFilterOptions,
404413
depositAddressOnly,
405-
token
414+
token,
415+
onPaymentMethodOpenChange
406416
]
407417
)
408418

@@ -506,6 +516,9 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
506516
color: 'gray9',
507517
cursor: 'pointer',
508518
borderRadius: 8,
519+
display: 'flex',
520+
alignItems: 'center',
521+
gap: '1',
509522
'--focusColor': 'colors.focus-color',
510523
_focusVisible: {
511524
boxShadow: 'inset 0 0 0 2px var(--focusColor)'
@@ -516,20 +529,20 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
516529
}}
517530
>
518531
<FontAwesomeIcon icon={faChevronLeft} width={20} height={20} />
532+
<Text
533+
style="subtitle1"
534+
css={{
535+
color: 'text-subtle',
536+
'@media(min-width: 660px)': {
537+
fontSize: '14px',
538+
color: 'text-default',
539+
lineHeight: '20px'
540+
}
541+
}}
542+
>
543+
{context === 'from' ? 'Pay with' : 'Sell to'}
544+
</Text>
519545
</Button>
520-
<Text
521-
style="subtitle1"
522-
css={{
523-
color: 'text-subtle',
524-
'@media(min-width: 660px)': {
525-
fontSize: '14px',
526-
color: 'text-default',
527-
lineHeight: '20px'
528-
}
529-
}}
530-
>
531-
{context === 'from' ? 'Pay with' : 'Sell to'}
532-
</Text>
533546
</Flex>
534547

535548
<Flex
@@ -833,8 +846,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
833846
background: 'widget-background',
834847
display: 'flex',
835848
flexDirection: 'column',
836-
overflow: 'hidden',
837-
py: '4'
849+
overflow: 'hidden'
838850
}}
839851
>
840852
{paymentMethodContent}

‎packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Dispatch, FC } from 'react'
1+
import type { FC } from 'react'
22
import OnrampWidgetRenderer from './OnrampWidgetRenderer.js'
33
import { Box, Button, Flex, Text } from '../../../primitives/index.js'
44
import AmountInput from '../../../common/AmountInput.js'
@@ -200,7 +200,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
200200
return (
201201
<div
202202
className="relay-kit-reset"
203-
style={{ maxWidth: 408, minWidth: 308, width: '100%' }}
203+
style={{ maxWidth: 408, minWidth: 320, width: '100%' }}
204204
>
205205
<Flex
206206
direction="column"

‎packages/ui/src/components/widgets/SwapWidget/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -752,7 +752,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
752752
width: '100%',
753753
overflow: 'hidden',
754754
border: 'widget-border',
755-
minWidth: 300,
755+
minWidth: 320,
756756
maxWidth: 408
757757
}}
758758
>

‎packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { MultiWalletDropdown } from '../../common/MultiWalletDropdown.js'
1313
import PaymentMethod from '../../common/TokenSelector/PaymentMethod.js'
1414
import { EventNames } from '../../../constants/events.js'
1515
import { isChainLocked } from '../../../utils/tokenSelector.js'
16+
import { useState } from 'react'
1617
import type { Dispatch, FC, SetStateAction } from 'react'
1718
import type { TradeType, ChildrenProps } from './widget/TokenWidgetRenderer.js'
1819
import type { Token, LinkedWallet } from '../../../types/index.js'
@@ -134,6 +135,9 @@ type BuyTabContentProps = ChildrenPropsSubset & {
134135
// Additional props not covered by ChildrenProps
135136
recipientLinkedWallet?: LinkedWallet
136137
toChainVmType?: string
138+
139+
// Payment method configuration
140+
paymentMethodMinHeight?: string
137141
}
138142

139143
const BuyTabContent: FC<BuyTabContentProps> = ({
@@ -215,8 +219,10 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
215219
supportsExternalLiquidity,
216220
recipientLinkedWallet,
217221
toChainVmType,
218-
ctaCopy
222+
ctaCopy,
223+
paymentMethodMinHeight = '85vh'
219224
}) => {
225+
const [isPaymentMethodOpen, setIsPaymentMethodOpen] = useState(false)
220226
const displayCta = [
221227
'Swap',
222228
'Confirm',
@@ -271,11 +277,11 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
271277
<SectionContainer
272278
css={{
273279
border: { base: 'none', md: '1px solid' },
274-
borderColor: { base: 'transparent', md: 'slate.4' },
275-
minWidth: { base: '350px', md: '400px' },
276-
maxWidth: '400px'
280+
borderColor: { base: 'transparent', md: 'slate.4' }
277281
}}
278282
id={'buy-token-section'}
283+
isPaymentMethodOpen={isPaymentMethodOpen}
284+
paymentMethodMinHeight={paymentMethodMinHeight}
279285
>
280286
<AmountSectionHeader
281287
label="Amount"
@@ -476,6 +482,7 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
476482
: undefined
477483
}
478484
popularChainIds={popularChainIds}
485+
onPaymentMethodOpenChange={setIsPaymentMethodOpen}
479486
trigger={
480487
<div>
481488
<PaymentMethodTrigger

‎packages/ui/src/components/widgets/TokenWidget/FeeBreakdownInfo.tsx‎

Lines changed: 58 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,21 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
3838
minHeight: 42
3939
}}
4040
>
41-
<Flex align="center" css={{ gap: '1' }}>
41+
<Flex align="center" css={{ gap: '1', minWidth: 0 }}>
4242
{isLoading ? (
4343
<Skeleton css={{ width: 90, height: 20 }} />
4444
) : amountUsd && Number(amountUsd) > 0 ? (
4545
<>
46-
<Text style="h6" css={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
46+
<Text
47+
style="h6"
48+
css={{
49+
textAlign: 'right',
50+
overflow: 'hidden',
51+
textOverflow: 'ellipsis',
52+
whiteSpace: 'nowrap',
53+
minWidth: 0
54+
}}
55+
>
4756
{formatDollarCompact(Number(amountUsd))} total
4857
</Text>
4958
<FeeBreakdownTooltip
@@ -72,14 +81,26 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
7281
style="h6"
7382
css={{
7483
textAlign: 'right',
84+
overflow: 'hidden',
85+
textOverflow: 'ellipsis',
7586
whiteSpace: 'nowrap',
76-
lineHeight: 'normal'
87+
lineHeight: 'normal',
88+
minWidth: 0
7789
}}
7890
>
7991
$0 total
8092
</Text>
8193
) : (
82-
<Text style="h6" css={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
94+
<Text
95+
style="h6"
96+
css={{
97+
textAlign: 'right',
98+
overflow: 'hidden',
99+
textOverflow: 'ellipsis',
100+
whiteSpace: 'nowrap',
101+
minWidth: 0
102+
}}
103+
>
83104
- total
84105
</Text>
85106
)}
@@ -88,16 +109,46 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
88109
<Skeleton css={{ width: 70, height: 14 }} />
89110
) : amountUsd && Number(amountUsd) > 0 ? (
90111
token && tokenAmountFormatted && Number(tokenAmountFormatted) > 0 ? (
91-
<Text style="subtitle3" color="subtleSecondary">
112+
<Text
113+
style="subtitle3"
114+
color="subtleSecondary"
115+
css={{
116+
overflow: 'hidden',
117+
textOverflow: 'ellipsis',
118+
whiteSpace: 'nowrap',
119+
minWidth: 0,
120+
maxWidth: '100%'
121+
}}
122+
>
92123
{formatNumber(tokenAmountFormatted, 4, true)} {token.symbol}
93124
</Text>
94125
) : token && fallbackTokenAmount && Number(fallbackTokenAmount) > 0 ? (
95-
<Text style="subtitle3" color="subtleSecondary">
126+
<Text
127+
style="subtitle3"
128+
color="subtleSecondary"
129+
css={{
130+
overflow: 'hidden',
131+
textOverflow: 'ellipsis',
132+
whiteSpace: 'nowrap',
133+
minWidth: 0,
134+
maxWidth: '100%'
135+
}}
136+
>
96137
{formatNumber(fallbackTokenAmount, 4, true)} {token.symbol}
97138
</Text>
98139
) : null
99140
) : token ? (
100-
<Text style="subtitle3" color="subtleSecondary">
141+
<Text
142+
style="subtitle3"
143+
color="subtleSecondary"
144+
css={{
145+
overflow: 'hidden',
146+
textOverflow: 'ellipsis',
147+
whiteSpace: 'nowrap',
148+
minWidth: 0,
149+
maxWidth: '100%'
150+
}}
151+
>
101152
0.00 {token.symbol}
102153
</Text>
103154
) : null}

‎packages/ui/src/components/widgets/TokenWidget/SectionContainer.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,40 @@ import { type FC, type PropsWithChildren } from 'react'
22
import { Flex } from '../../primitives/index.js'
33
import { type Styles } from '@relayprotocol/relay-design-system/css'
44

5-
const SectionContainer: FC<
6-
PropsWithChildren & { css?: Styles; id?: string }
7-
> = ({ children, css, id }) => {
5+
type SectionContainerProps = PropsWithChildren & {
6+
css?: Styles
7+
id?: string
8+
isPaymentMethodOpen?: boolean
9+
paymentMethodMinHeight?: string
10+
}
11+
12+
const SectionContainer: FC<SectionContainerProps> = ({
13+
children,
14+
css,
15+
id,
16+
isPaymentMethodOpen = false,
17+
paymentMethodMinHeight = '85vh'
18+
}) => {
819
return (
920
<Flex
1021
align="center"
1122
justify="between"
1223
id={id}
1324
css={{
1425
width: '100%',
15-
minWidth: '400px',
16-
maxWidth: '400px',
1726
display: 'flex',
1827
flexDirection: 'column',
1928
alignItems: 'start',
2029
backgroundColor: { base: 'transparent', md: 'widget-card-background' },
2130
border: 'widget-card-border',
2231
gap: '4',
23-
paddingY: '16px',
32+
paddingY: { base: '12px', md: '16px' },
2433
paddingX: { base: '0', md: '16px' },
2534
borderRadius: { base: '0', md: 'widget-card-border-radius' },
35+
minHeight: {
36+
base: isPaymentMethodOpen ? paymentMethodMinHeight : 'auto',
37+
md: 'auto'
38+
},
2639
...css
2740
}}
2841
>

0 commit comments

Comments
 (0)