Skip to content

Commit 09031d5

Browse files
0xTxbi0xTxbi
authored
Mobile improvements for Tokenwidget (#860)
* improved z-indexes * disable auto focus * improved payment method auto selection * feat: changeset
1 parent 33e5864 commit 09031d5

File tree

11 files changed

+149
-104
lines changed

11 files changed

+149
-104
lines changed

‎.changeset/chatty-windows-study.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+
Fix mobile ux

‎demo/pages/ui/token/[[...params]].tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const TokenWidgetPage: NextPage = () => {
5858
const [hasInitialized, setHasInitialized] = useState(false)
5959

6060
const { setWalletFilter } = useWalletFilter()
61-
const { setShowAuthFlow, primaryWallet } = useDynamicContext()
61+
const { setShowAuthFlow, primaryWallet, sdkHasLoaded } = useDynamicContext()
6262
const { theme } = useTheme()
6363
const [singleChainMode, setSingleChainMode] = useState(false)
6464
const [supportedWalletVMs, setSupportedWalletVMs] = useState<
@@ -79,6 +79,7 @@ const TokenWidgetPage: NextPage = () => {
7979
}
8080
| undefined
8181
>()
82+
const walletsLoading = !sdkHasLoaded
8283

8384
// Parse URL params for token
8485
const [urlTokenAddress, setUrlTokenAddress] = useState<string | undefined>()
@@ -368,7 +369,7 @@ const TokenWidgetPage: NextPage = () => {
368369
return (
369370
<Layout
370371
styles={{
371-
background: theme === 'light' ? 'rgba(245, 242, 255, 1)' : '#1c172b'
372+
background: theme === 'light' ? 'white' : '#111113'
372373
}}
373374
>
374375
<Head>
@@ -459,6 +460,7 @@ const TokenWidgetPage: NextPage = () => {
459460
wallet={wallet}
460461
multiWalletSupportEnabled={true}
461462
linkedWallets={linkedWallets}
463+
walletsLoading={walletsLoading}
462464
onLinkNewWallet={({ chain, direction }) => {
463465
if (linkWalletPromise) {
464466
linkWalletPromise.reject()

‎packages/ui/src/components/common/Modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const Modal: FC<
3434
> = ({
3535
trigger,
3636
css,
37-
overlayZIndex = 9999,
37+
overlayZIndex = 10000000,
3838
showCloseButton = true,
3939
disableAnimation = false,
4040
children,

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

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

6968
const PaymentMethod: FC<PaymentMethodProps> = ({
@@ -80,8 +79,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
8079
popularChainIds,
8180
linkedWallets,
8281
setToken,
83-
onAnalyticEvent,
84-
autoSelectToken = false
82+
onAnalyticEvent
8583
}) => {
8684
const relayClient = useRelayClient()
8785
const { chains: allRelayChains } = useInternalRelayChains()
@@ -326,30 +324,6 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
326324
setStarredChainIds(getStarredChainIds())
327325
}, [])
328326

329-
useEffect(() => {
330-
if (!autoSelectToken) {
331-
return
332-
}
333-
334-
if (
335-
address &&
336-
isValidAddress &&
337-
!token &&
338-
sortedUserTokens &&
339-
sortedUserTokens.length > 0
340-
) {
341-
const topToken = sortedUserTokens[0]
342-
setToken(topToken)
343-
}
344-
}, [
345-
address,
346-
isValidAddress,
347-
token,
348-
sortedUserTokens,
349-
setToken,
350-
autoSelectToken
351-
])
352-
353327
useEffect(() => {
354328
if (open) {
355329
setStarredChainIds(getStarredChainIds())
@@ -526,20 +500,34 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
526500
size="none"
527501
onClick={() => onOpenChange(false)}
528502
css={{
529-
p: '1',
503+
py: '1',
504+
px: '0',
530505
minWidth: 'auto',
531506
color: 'gray9',
532507
cursor: 'pointer',
533508
borderRadius: 8,
534509
'--focusColor': 'colors.focus-color',
535510
_focusVisible: {
536511
boxShadow: 'inset 0 0 0 2px var(--focusColor)'
512+
},
513+
'@media(min-width: 660px)': {
514+
p: '0'
537515
}
538516
}}
539517
>
540518
<FontAwesomeIcon icon={faChevronLeft} width={20} height={20} />
541519
</Button>
542-
<Text style="subtitle2">
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+
>
543531
{context === 'from' ? 'Pay with' : 'Sell to'}
544532
</Text>
545533
</Flex>
@@ -846,7 +834,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
846834
display: 'flex',
847835
flexDirection: 'column',
848836
overflow: 'hidden',
849-
p: '4'
837+
py: '4'
850838
}}
851839
>
852840
{paymentMethodContent}

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,15 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
5050
<Flex
5151
key={index}
5252
align="center"
53-
css={{ gap: '2', p: '2', width: '100%' }}
53+
css={{
54+
gap: '2',
55+
py: '2',
56+
px: '0',
57+
width: '100%',
58+
'@media(min-width: 660px)': {
59+
px: '2'
60+
}
61+
}}
5462
>
5563
<Skeleton
5664
css={{
@@ -91,9 +99,12 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
9199
css={{
92100
gap: '2',
93101
cursor: 'pointer',
94-
px: '2',
102+
px: '0',
95103
py: '2',
96104
transition: 'backdrop-filter 250ms linear',
105+
'@media(min-width: 660px)': {
106+
px: '2'
107+
},
97108
_hover: {
98109
backgroundColor: 'gray/10'
99110
},

‎packages/ui/src/components/common/UnverifiedTokenModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,9 @@ export const UnverifiedTokenModal: FC<UnverifiedTokenModalProps> = ({
5353
}}
5454
css={{
5555
overflow: 'hidden',
56-
zIndex: 1000
56+
zIndex: 10000001
5757
}}
58-
overlayZIndex={10001}
58+
overlayZIndex={10000001}
5959
>
6060
<Flex
6161
direction="column"

‎packages/ui/src/components/primitives/Dropdown.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const DropdownMenuContentCss = cva({
1717
mx: '4',
1818
p: '3',
1919
borderRadius: 8,
20-
zIndex: 5,
20+
zIndex: 10000002,
2121
background: 'modal-background',
2222
boxShadow: '0px 0px 50px 0px #0000001F',
2323
border: 'dropdown-border'
@@ -51,13 +51,11 @@ const DropdownMenuItemCss = cva({
5151
p: '3',
5252
outline: 'none',
5353
cursor: 'pointer',
54-
transition: 'backdrop-filter 250ms linear',
54+
transition: 'background-color 150ms linear',
5555
_hover: {
56-
backdropFilter: 'brightness(95%)',
5756
backgroundColor: 'gray/10'
5857
},
5958
'&:focus': {
60-
backdropFilter: 'brightness(95%)',
6159
backgroundColor: 'gray/10'
6260
}
6361
}

‎packages/ui/src/components/primitives/Tooltip.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@ const Tooltip = ({
3939
sideOffset={2}
4040
side="bottom"
4141
align="center"
42-
style={{ zIndex: 100, outline: 'none', maxWidth: '100vw' }}
42+
style={{ zIndex: 10000003, outline: 'none', maxWidth: '100vw' }}
4343
{...props}
4444
>
4545
<Popover.Arrow className={PopoverArrow()} />
4646
<Box
4747
css={{
48-
zIndex: 9999,
48+
zIndex: 10000004,
4949
boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
5050
borderRadius: 8,
5151
overflow: 'hidden'
@@ -79,13 +79,13 @@ const Tooltip = ({
7979
sideOffset={2}
8080
side="bottom"
8181
align="center"
82-
style={{ zIndex: 100 }}
82+
style={{ zIndex: 10000003 }}
8383
{...props}
8484
>
8585
<div className={TooltipArrowStyle()}></div>
8686
<Box
8787
css={{
88-
zIndex: 9999,
88+
zIndex: 10000004,
8989
boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
9090
borderRadius: 8,
9191
overflow: 'hidden'

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -466,7 +466,6 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
466466
linkedWallets={linkedWallets}
467467
multiWalletSupportEnabled={multiWalletSupportEnabled}
468468
context="from"
469-
autoSelectToken={false}
470469
setToken={(token) => {
471470
handleSetFromToken(token)
472471
}}

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

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@ type SellTabContentProps = SellChildrenPropsSubset & {
9090
onSlippageToleranceChange?: (value: string | undefined) => void
9191

9292
// Input/output state
93-
disableInputAutoFocus: boolean
9493
isUsdInputMode: boolean
9594
usdInputValue: string
9695
tradeType: TradeType
@@ -162,7 +161,6 @@ const SellTabContent: FC<SellTabContentProps> = ({
162161
slippageTolerance,
163162
onOpenSlippageConfig,
164163
onSlippageToleranceChange,
165-
disableInputAutoFocus,
166164
isUsdInputMode,
167165
usdInputValue,
168166
tradeType,
@@ -351,7 +349,6 @@ const SellTabContent: FC<SellTabContentProps> = ({
351349
/>
352350
<Flex align="center" justify="between" css={{ width: '100%' }}>
353351
<AmountInput
354-
autoFocus={!disableInputAutoFocus}
355352
prefixSymbol={isUsdInputMode ? '$' : undefined}
356353
value={
357354
isUsdInputMode
@@ -634,19 +631,18 @@ const SellTabContent: FC<SellTabContentProps> = ({
634631
isValidAddress={isValidToAddress}
635632
token={toToken}
636633
onAnalyticEvent={onAnalyticEvent}
637-
multiWalletSupportEnabled={multiWalletSupportEnabled}
638-
fromChainWalletVMSupported={toChainWalletVMSupported}
639-
supportedWalletVMs={supportedWalletVMs}
640-
popularChainIds={popularChainIds}
641-
chainIdsFilter={chainIdsFilterForDestination}
642-
linkedWallets={linkedWallets}
643-
context="to"
644-
autoSelectToken={true}
645-
setToken={(token) => {
646-
if (
647-
token?.address === fromToken?.address &&
648-
token?.chainId === fromToken?.chainId &&
649-
recipient === address
634+
multiWalletSupportEnabled={multiWalletSupportEnabled}
635+
fromChainWalletVMSupported={toChainWalletVMSupported}
636+
supportedWalletVMs={supportedWalletVMs}
637+
popularChainIds={popularChainIds}
638+
chainIdsFilter={chainIdsFilterForDestination}
639+
linkedWallets={linkedWallets}
640+
context="to"
641+
setToken={(token) => {
642+
if (
643+
token?.address === fromToken?.address &&
644+
token?.chainId === fromToken?.chainId &&
645+
recipient === address
650646
) {
651647
return
652648
}

0 commit comments

Comments
 (0)