diff --git a/.changeset/twenty-bananas-admire.md b/.changeset/twenty-bananas-admire.md new file mode 100644 index 00000000..d026b871 --- /dev/null +++ b/.changeset/twenty-bananas-admire.md @@ -0,0 +1,5 @@ +--- +'@reservoir0x/relay-kit-ui': patch +--- + +Added keyboard navigation to token selector diff --git a/packages/ui/package.json b/packages/ui/package.json index 3eac96c7..72fac89c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -68,6 +68,7 @@ "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-tabs": "^1.1.0", + "@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-tooltip": "^1.0.7", "@reservoir0x/relay-design-system": "workspace:^", "@reservoir0x/relay-kit-hooks": "workspace:*", diff --git a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx index 47ebcef6..8bbf2b38 100644 --- a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx +++ b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx @@ -457,6 +457,7 @@ const TokenSelector: FC = ({ {tokenSelectorStep === TokenSelectorStep.SetCurrency ? ( = ({ > Select Chain - { - setInputElement(element) - }} - placeholder="Search for a chain" - icon={ - - - - } - containerCss={{ width: '100%', height: 40 }} - css={{ - width: '100%', - _placeholder_parent: { - textOverflow: 'ellipsis' + { + if (value && value !== 'input') { + const chain = filteredChains.find( + (chain) => chain.id.toString() === value + ) + if (chain) { + const token = chain.isSupported + ? (chain.currency as Currency) + : { + ...chain.relayChain.currency, + metadata: { + logoURI: `https://assets.relay.link/icons/currencies/${chain.relayChain.currency?.id}.png` + } + } + selectToken(token, chain.id) + } } }} - value={chainSearchInput} - onChange={(e) => - setChainSearchInput((e.target as HTMLInputElement).value) - } - /> - - - {filteredChains?.map((chain) => { - const isSupported = chain.isSupported - const token = isSupported - ? (chain.currency as Currency) - : { - ...chain.relayChain.currency, - metadata: { - logoURI: `https://assets.relay.link/icons/currencies/${chain.relayChain.currency?.id}.png` - } + + + + + } + containerCss={{ + width: '100%', + height: 40, + scrollSnapAlign: 'start' + }} + style={{ + gridColumn: isDesktop ? '1/3' : '', + marginBottom: isDesktop ? '10px' : '', + position: 'sticky', + top: 0, + zIndex: 1 + }} + css={{ + width: '100%', + _placeholder: { + textOverflow: 'ellipsis' } + }} + value={chainSearchInput} + onChange={(e) => + setChainSearchInput((e.target as HTMLInputElement).value) + } + /> + + {filteredChains?.map((chain) => { const decimals = chain?.currency?.balance?.decimals ?? 18 const compactBalance = Boolean( chain?.currency?.balance?.amount && @@ -205,57 +231,73 @@ export const SetChainStep: FC = ({ ) return ( - + + ) })} - + ) } diff --git a/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx b/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx index cb31f2d1..826b22ef 100644 --- a/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx +++ b/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx @@ -1,4 +1,11 @@ -import { useEffect, useMemo, useRef, useState, type FC } from 'react' +import { + useEffect, + useMemo, + useRef, + useState, + type FC, + forwardRef +} from 'react' import { Flex, Text, @@ -7,7 +14,9 @@ import { Skeleton, ChainIcon, Button, - ChainTokenIcon + ChainTokenIcon, + AccessibleList, + AccessibleListItem } from '../../../primitives/index.js' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons' @@ -25,6 +34,7 @@ import { EventNames } from '../../../../constants/events.js' type SetCurrencyProps = { size: 'mobile' | 'desktop' + inputElement?: HTMLInputElement | null setInputElement: ( value: React.SetStateAction ) => void @@ -52,6 +62,7 @@ const fuseSearchOptions = { export const SetCurrencyStep: FC = ({ size, + inputElement, setInputElement, tokenSearchInput, setTokenSearchInput, @@ -105,106 +116,145 @@ export const SetCurrencyStep: FC = ({ > Select Token - + {isDesktop && (!chainIdsFilter || chainIdsFilter.length > 1) ? ( <> - { - setInputElement(element) - }} - placeholder="Search chains" - icon={ - - - - } - containerCss={{ width: '100%', height: 40 }} - css={{ - width: '100%', - _placeholder_parent: { - textOverflow: 'ellipsis' + { + if (value) { + const chain = + value === 'all-chains' + ? { id: undefined, name: 'All Chains' } + : filteredChains.find( + (chain) => chain.id?.toString() === value + ) + if (chain) { + setChainFilter(chain) + onAnalyticEvent?.(EventNames.CURRENCY_STEP_CHAIN_FILTER, { + chain: chain.name, + chain_id: chain.id + }) + inputElement?.focus() + } } }} - value={chainSearchInput} - onChange={(e) => - setChainSearchInput((e.target as HTMLInputElement).value) - } - /> - + + + + + } + containerCss={{ + width: '100%', + height: 40, + scrollSnapAlign: 'start' + }} + style={{ + position: 'sticky', + top: 0, + zIndex: 1 + }} + css={{ + width: '100%', + _placeholder_parent: { + textOverflow: 'ellipsis' + } + }} + value={chainSearchInput} + onChange={(e) => + setChainSearchInput((e.target as HTMLInputElement).value) + } + /> + {filteredChains?.map((chain) => { const active = chainFilter.id === chain.id return ( - + + ) })} - + = ({ align="center" css={{ width: '100%', gap: '1' }} > - - { - setInputElement(element) - }} - placeholder="Search for a token" - icon={ - - - - } - containerCss={{ width: '100%', height: 40 }} - css={{ - width: '100%', - _placeholder_parent: { - textOverflow: 'ellipsis' + { + if (value && value !== 'input') { + const selectedCurrency = enhancedCurrencyList?.find((list) => + list?.chains.some((chain) => chain.address === value) + ) + if (selectedCurrency) { + if (selectedCurrency.chains.length === 1) { + selectToken( + selectedCurrency.chains[0], + selectedCurrency.chains[0].chainId + ) + } else { + setCurrencyList(selectedCurrency) + } } - }} - value={tokenSearchInput} - onChange={(e) => - setTokenSearchInput((e.target as HTMLInputElement).value) } - /> - {!isDesktop && (!chainIdsFilter || chainIdsFilter.length > 1) ? ( - { - setChainFilter(value) - }} - /> - ) : null} - - + + + + + + } + containerCss={{ + width: '100%', + height: 40, + scrollSnapAlign: 'start' + }} + style={{ + position: 'sticky', + top: 0, + zIndex: 1 + }} + css={{ + width: '100%', + _placeholder_parent: { + textOverflow: 'ellipsis' + } + }} + value={tokenSearchInput} + onChange={(e) => + setTokenSearchInput((e.target as HTMLInputElement).value) + } + /> + + {!isDesktop && (!chainIdsFilter || chainIdsFilter.length > 1) ? ( + { + setChainFilter(value) + }} + /> + ) : null} + + {/* Loading State*/} {isLoading ? ( @@ -282,14 +370,19 @@ export const SetCurrencyStep: FC = ({ enhancedCurrencyList && enhancedCurrencyList?.length > 0 ? enhancedCurrencyList?.map((list, idx) => - list ? ( - + value={list.chains[0].address} + asChild + > + + ) : null ) : null} @@ -300,7 +393,7 @@ export const SetCurrencyStep: FC = ({ No results found. ) : null} - + @@ -314,112 +407,134 @@ type CurrencyRowProps = { isLoadingDuneBalances: boolean } -const CurrencyRow: FC = ({ - currencyList, - setCurrencyList, - selectToken, - isLoadingDuneBalances -}) => { - const balance = currencyList.totalBalance - const decimals = - currencyList?.chains?.length > 0 - ? currencyList?.chains?.[0].decimals ?? 18 - : 18 - const compactBalance = Boolean( - balance && decimals && balance.toString().length - decimals > 4 - ) +const CurrencyRow = forwardRef( + ( + { + currencyList, + setCurrencyList, + selectToken, + isLoadingDuneBalances, + ...props + }, + ref + ) => { + const balance = currencyList.totalBalance + const decimals = + currencyList?.chains?.length > 0 + ? currencyList?.chains?.[0].decimals ?? 18 + : 18 + const compactBalance = Boolean( + balance && decimals && balance.toString().length - decimals > 4 + ) - const isSingleChainCurrency = currencyList?.chains?.length === 1 + const isSingleChainCurrency = currencyList?.chains?.length === 1 - return ( - - ) -} + + {!isSingleChainCurrency ? ( + + {currencyList?.chains?.slice(0, 6).map((currency, index) => ( + 0 ? '-4px' : 0, + '--borderColor': 'colors.modal-background', + border: '1px solid var(--borderColor)', + borderRadius: 4, + background: 'modal-background', + overflow: 'hidden' + }} + /> + ))} + {currencyList?.chains?.length > 6 ? ( + + + more + + ) : null} + + ) : null} + {isLoadingDuneBalances && !balance ? ( + + ) : null} + {balance ? ( + + {formatBN(balance, 5, decimals, compactBalance)} + + ) : null} + + ) + } +) diff --git a/packages/ui/src/components/primitives/AccessibleList.tsx b/packages/ui/src/components/primitives/AccessibleList.tsx new file mode 100644 index 00000000..c1bf9e3c --- /dev/null +++ b/packages/ui/src/components/primitives/AccessibleList.tsx @@ -0,0 +1,77 @@ +import React, { forwardRef, type FC } from 'react' +import * as ToggleGroup from '@radix-ui/react-toggle-group' +import { + cva, + css as designCss, + type Styles +} from '@reservoir0x/relay-design-system/css' + +const AccessibleListContainerCss = cva({ + base: { + display: 'flex', + flexDirection: 'column' + } +}) + +const AccessibleListItemCss = cva({ + base: { + display: 'flex', + alignItems: 'center', + position: 'relative', + userSelect: 'none', + cursor: 'pointer', + '&[data-state=on]': {} + } +}) + +type AccessibleListProps = { + children: React.ReactNode + onSelect: (value: string) => void + css?: Styles +} + +export const AccessibleList: FC = ({ + children, + onSelect, + css +}) => { + return ( + + {children} + + ) +} + +type AccessibleListItemProps = { + children: React.ReactNode + value: string + css?: Styles + asChild?: boolean +} + +export const AccessibleListItem = forwardRef< + HTMLButtonElement, + AccessibleListItemProps +>(({ children, value, css, asChild, ...props }, forwardedRef) => { + return ( + + {children} + + ) +}) + +AccessibleListItem.displayName = 'AccessibleListItem' diff --git a/packages/ui/src/components/primitives/Flex.tsx b/packages/ui/src/components/primitives/Flex.tsx index 83275acb..06ae0ec9 100644 --- a/packages/ui/src/components/primitives/Flex.tsx +++ b/packages/ui/src/components/primitives/Flex.tsx @@ -3,7 +3,7 @@ import { css as designCss, type Styles } from '@reservoir0x/relay-design-system/css' -import type { FC, PropsWithChildren } from 'react' +import type { FC, PropsWithChildren, CSSProperties } from 'react' export const FlexCss = cva({ base: { @@ -74,13 +74,14 @@ export const FlexCss = cva({ type FlexCssProps = Parameters['0'] -const Flex: FC<{ css?: Styles } & FlexCssProps & PropsWithChildren> = ({ - css, - children, - ...props -}) => { +const Flex: FC< + { css?: Styles; style?: CSSProperties } & FlexCssProps & PropsWithChildren +> = ({ css, style, children, ...props }) => { return ( -
+
{children}
) diff --git a/packages/ui/src/components/primitives/Input.tsx b/packages/ui/src/components/primitives/Input.tsx index 870eada0..92cefcd9 100644 --- a/packages/ui/src/components/primitives/Input.tsx +++ b/packages/ui/src/components/primitives/Input.tsx @@ -1,5 +1,6 @@ +import React, { forwardRef } from 'react' import Flex from './Flex.js' -import type { FC, HTMLProps, PropsWithChildren, ReactNode } from 'react' +import type { HTMLProps, PropsWithChildren, ReactNode } from 'react' import { cva, css as designCss, @@ -21,7 +22,7 @@ const StyledInputCss = cva({ }, '--focusColor': 'colors.focus-color', _focus: { - boxShadow: '0 0 0 2px var(--focusColor)', + boxShadow: 'inset 0 0 0 2px var(--focusColor)', outline: 'none' }, _disabled: { @@ -53,66 +54,64 @@ type StyledInputCssVariants = NonNullable< Parameters<(typeof StyledInputCss)['raw']>['0'] > -const Input: FC< +const Input = forwardRef< + HTMLInputElement, Omit, 'size'> & PropsWithChildren & { icon?: ReactNode iconPosition?: 'left' | 'right' iconCss?: Styles containerCss?: Styles - inputRef?: (element: HTMLInputElement) => void } & { css?: Styles } & StyledInputCssVariants -> = ({ - children, - icon, - iconPosition, - iconCss, - containerCss, - css, - inputRef, - ...props -}) => { - const { size, ellipsify, ...inputProps } = props +>( + ( + { children, icon, iconPosition, iconCss, containerCss, css, ...props }, + ref + ) => { + const { size, ellipsify, ...inputProps } = props - return ( - - {icon && ( - - - {icon} - - - )} - + {icon && ( + + + {icon} + + )} - /> - - ) -} + + + ) + } +) Input.displayName = 'Input' diff --git a/packages/ui/src/components/primitives/index.tsx b/packages/ui/src/components/primitives/index.tsx index c538512e..5ec49d62 100644 --- a/packages/ui/src/components/primitives/index.tsx +++ b/packages/ui/src/components/primitives/index.tsx @@ -8,6 +8,7 @@ import { ChainTokenIcon } from './ChainTokenIcon.js' import { Pill } from './Pill.js' import { default as Anchor } from './Anchor.js' import { default as Input } from './Input.js' +import { AccessibleList, AccessibleListItem } from './AccessibleList.js' export { Box, @@ -19,5 +20,7 @@ export { ChainTokenIcon, Pill, Anchor, - Input + Input, + AccessibleList, + AccessibleListItem } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e8bd104c..6f490a47 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -258,6 +258,9 @@ importers: '@radix-ui/react-tabs': specifier: ^1.1.0 version: 1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-toggle-group': + specifier: ^1.1.0 + version: 1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-tooltip': specifier: ^1.0.7 version: 1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) @@ -1839,13 +1842,13 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.1 + dev: true /@babel/runtime@7.25.6: resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==} engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.1 - dev: false /@babel/template@7.23.9: resolution: {integrity: sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==} @@ -3777,7 +3780,7 @@ packages: /@manypkg/find-root@1.1.0: resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@types/node': 12.20.55 find-up: 4.1.0 fs-extra: 8.1.0 @@ -4642,7 +4645,7 @@ packages: /@radix-ui/primitive@1.0.1: resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 dev: false /@radix-ui/primitive@1.1.0: @@ -4662,7 +4665,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@types/react': 18.2.55 '@types/react-dom': 18.2.19 @@ -4711,7 +4714,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@radix-ui/react-context': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) @@ -4754,7 +4757,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@types/react': 18.2.55 react: 18.2.0 dev: false @@ -4781,7 +4784,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@types/react': 18.2.55 react: 18.2.0 dev: false @@ -4842,7 +4845,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@types/react': 18.2.55 react: 18.2.0 dev: false @@ -4921,7 +4924,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@types/react': 18.2.55 react: 18.2.0 dev: false @@ -4958,7 +4961,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 react: 18.2.0 @@ -5158,7 +5161,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/react-slot': 1.0.2(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 '@types/react-dom': 18.2.19 @@ -5199,7 +5202,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.55)(react@18.2.0) @@ -5252,7 +5255,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 react: 18.2.0 @@ -5299,6 +5302,54 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-toggle-group@1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-context': 1.1.0(@types/react@18.2.55)(react@18.2.0) + '@radix-ui/react-direction': 1.1.0(@types/react@18.2.55)(react@18.2.0) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-toggle': 1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.55)(react@18.2.0) + '@types/react': 18.2.55 + '@types/react-dom': 18.2.19 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@radix-ui/react-toggle@1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.55)(react@18.2.0) + '@types/react': 18.2.55 + '@types/react-dom': 18.2.19 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==} peerDependencies: @@ -5340,7 +5391,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@types/react': 18.2.55 react: 18.2.0 dev: false @@ -5367,7 +5418,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 react: 18.2.0 @@ -5396,7 +5447,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 react: 18.2.0 @@ -5411,7 +5462,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@types/react': 18.2.55 react: 18.2.0 dev: false @@ -5438,7 +5489,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/rect': 1.0.1 '@types/react': 18.2.55 react: 18.2.0 @@ -5453,7 +5504,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 react: 18.2.0 @@ -5472,7 +5523,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@types/react': 18.2.55 '@types/react-dom': 18.2.19 @@ -5483,7 +5534,7 @@ packages: /@radix-ui/rect@1.0.1: resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 dev: false /@rainbow-me/rainbowkit@2.1.2(@tanstack/react-query@5.20.2)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)(viem@2.9.32)(wagmi@2.9.11): @@ -9089,7 +9140,7 @@ packages: resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} engines: {node: '>=0.11'} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.25.6 /dayjs@1.11.11: resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==} @@ -12082,7 +12133,7 @@ packages: /media-query-parser@2.0.2: resolution: {integrity: sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==} dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.25.6 dev: false /media-typer@0.3.0: @@ -13822,6 +13873,22 @@ packages: tslib: 2.6.2 dev: false + /react-remove-scroll-bar@2.3.6(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.2.55 + react: 18.2.0 + react-style-singleton: 2.2.1(@types/react@18.2.55)(react@18.2.0) + tslib: 2.6.2 + dev: false + /react-remove-scroll@2.5.5(@types/react@18.2.55)(react@18.2.0): resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==} engines: {node: '>=10'} @@ -13834,7 +13901,7 @@ packages: dependencies: '@types/react': 18.2.55 react: 18.2.0 - react-remove-scroll-bar: 2.3.4(@types/react@18.2.55)(react@18.2.0) + react-remove-scroll-bar: 2.3.6(@types/react@18.2.55)(react@18.2.0) react-style-singleton: 2.2.1(@types/react@18.2.55)(react@18.2.0) tslib: 2.6.2 use-callback-ref: 1.3.1(@types/react@18.2.55)(react@18.2.0)