From 51fae2567833419f5ba9ef26adf04efd43795e0d Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 22 Feb 2025 01:06:06 +0100
Subject: [PATCH 01/30] styling: add missing reactive border color to clickable
 chips

---
 packages/curve-ui-kit/src/themes/chip/mui-chip.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/curve-ui-kit/src/themes/chip/mui-chip.ts b/packages/curve-ui-kit/src/themes/chip/mui-chip.ts
index 33d396001..7c1c68240 100644
--- a/packages/curve-ui-kit/src/themes/chip/mui-chip.ts
+++ b/packages/curve-ui-kit/src/themes/chip/mui-chip.ts
@@ -107,6 +107,7 @@ export const defineMuiChip = (
       props: { clickable: true },
       style: {
         borderRadius: Chips.BorderRadius.Clickable,
+        borderColor: Chips.Default.Stroke,
         cursor: 'pointer',
         '&:has(.MuiChip-icon)': { ...handleBreakpoints({ paddingInline: Spacing.sm }) },
         '&:hover': {

From 536017b96fcca3453b6c50df5df2a265a68b4961 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 22 Feb 2025 01:06:40 +0100
Subject: [PATCH 02/30] styling: change color of divider according to design
 system

---
 packages/curve-ui-kit/src/themes/components.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/curve-ui-kit/src/themes/components.ts b/packages/curve-ui-kit/src/themes/components.ts
index 2959f93f9..b26d0d79c 100644
--- a/packages/curve-ui-kit/src/themes/components.ts
+++ b/packages/curve-ui-kit/src/themes/components.ts
@@ -46,6 +46,13 @@ export const createComponents = (design: DesignSystem, typography: TypographyOpt
       paper: { maxHeight: '100dvh', [basicMuiTheme.breakpoints.down('tablet')]: { margin: 0 } },
     },
   },
+  MuiDivider: {
+    styleOverrides: {
+      root: {
+        borderColor: design.Layer[2].Outline,
+      },
+    },
+  },
   MuiFormControlLabel: {
     styleOverrides: {
       root: { margin: '0' }, // by default there is a negative margin 🤦

From ce0c9c6c2851b1318e30e5c3adb06dd97348a773 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Wed, 26 Feb 2025 17:03:52 +0100
Subject: [PATCH 03/30] styling: remove focus outline on lists

---
 packages/curve-ui-kit/src/themes/components.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/curve-ui-kit/src/themes/components.ts b/packages/curve-ui-kit/src/themes/components.ts
index b26d0d79c..94be0ddf4 100644
--- a/packages/curve-ui-kit/src/themes/components.ts
+++ b/packages/curve-ui-kit/src/themes/components.ts
@@ -104,6 +104,15 @@ export const createComponents = (design: DesignSystem, typography: TypographyOpt
       },
     },
   },
+  MuiList: {
+    styleOverrides: {
+      root: {
+        '&:focus': {
+          outline: 'none',
+        },
+      },
+    },
+  },
   MuiMenuItem: defineMuiMenuItem(design),
   MuiSelect: defineMuiSelect(design, typography),
   MuiSlider: {

From 129e292ee911df357437034311258d36c455ea45 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Wed, 26 Feb 2025 21:05:50 +0100
Subject: [PATCH 04/30] styling: fix card header being aligned to bottom

---
 packages/curve-ui-kit/src/themes/card-header/mui-card-header.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/curve-ui-kit/src/themes/card-header/mui-card-header.ts b/packages/curve-ui-kit/src/themes/card-header/mui-card-header.ts
index 701b458ab..18eb18832 100644
--- a/packages/curve-ui-kit/src/themes/card-header/mui-card-header.ts
+++ b/packages/curve-ui-kit/src/themes/card-header/mui-card-header.ts
@@ -12,7 +12,6 @@ export const defineMuiCardHeader = (
   styleOverrides: {
     root: {
       padding: `${Spacing.lg.desktop} ${Spacing.md.desktop} ${Spacing.sm.desktop}`,
-      alignItems: 'flex-end',
       borderBottom: `1px solid ${design.Layer[3].Outline}`,
       minHeight: `calc(${ButtonSize.lg} + 1px)`, // 1px to account for border
       variants: [

From 9671b4954142ae8cd80868556474c12f0624f6e7 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Thu, 6 Feb 2025 01:12:32 +0100
Subject: [PATCH 05/30] feat: add token select feature

---
 .../select-token/SelectToken.stories.tsx      | 196 ++++++++++++++++++
 .../src/features/select-token/index.ts        |   2 +
 .../src/features/select-token/types.ts        |   8 +
 .../select-token/ui/TokenSelectButton.tsx     |  95 +++++++++
 .../select-token/ui/TokenSelector.tsx         |  66 ++++++
 .../select-token/ui/modal/FavoriteTokens.tsx  |  40 ++++
 .../select-token/ui/modal/TokenList.tsx       | 157 ++++++++++++++
 .../select-token/ui/modal/TokenOption.tsx     |  61 ++++++
 .../ui/modal/TokenSelectorModal.tsx           |  58 ++++++
 .../select-token/ui/modal/TokenSettings.tsx   |  45 ++++
 .../switch-chain/ui/ChainSwitcher.tsx         |   4 +-
 .../user-profile/settings/Settings.tsx        |   2 +
 .../hide-small-pools/HideSmallPools.tsx       |  22 ++
 .../settings/hide-small-pools/index.ts        |   1 +
 .../src/features/user-profile/store.ts        |   4 +
 .../src/shared/ui/ModalDialog.tsx             |   6 +-
 .../ui/ModalSettingsButton.tsx}               |   2 +-
 .../curve-ui-kit/src/shared/ui/TokenIcon.tsx  |   3 +-
 .../src/themes/design/1_sizes_spaces.ts       |   1 +
 19 files changed, 767 insertions(+), 6 deletions(-)
 create mode 100644 packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx
 create mode 100644 packages/curve-ui-kit/src/features/select-token/index.ts
 create mode 100644 packages/curve-ui-kit/src/features/select-token/types.ts
 create mode 100644 packages/curve-ui-kit/src/features/select-token/ui/TokenSelectButton.tsx
 create mode 100644 packages/curve-ui-kit/src/features/select-token/ui/TokenSelector.tsx
 create mode 100644 packages/curve-ui-kit/src/features/select-token/ui/modal/FavoriteTokens.tsx
 create mode 100644 packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
 create mode 100644 packages/curve-ui-kit/src/features/select-token/ui/modal/TokenOption.tsx
 create mode 100644 packages/curve-ui-kit/src/features/select-token/ui/modal/TokenSelectorModal.tsx
 create mode 100644 packages/curve-ui-kit/src/features/select-token/ui/modal/TokenSettings.tsx
 create mode 100644 packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/HideSmallPools.tsx
 create mode 100644 packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts
 rename packages/curve-ui-kit/src/{features/switch-chain/ui/SettingsButton.tsx => shared/ui/ModalSettingsButton.tsx} (82%)

diff --git a/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx b/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx
new file mode 100644
index 000000000..5c5fa12e2
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx
@@ -0,0 +1,196 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button, Stack, Typography } from '@mui/material'
+import { TokenSelector } from './'
+import type { TokenOption } from './types'
+
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { Spacing } = SizesAndSpaces
+
+const defaultTokens: TokenOption[] = [
+  {
+    chain: 'ethereum',
+    address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
+    symbol: 'ETH',
+    label: 'Ethereum',
+  },
+  {
+    chain: 'ethereum',
+    address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+    symbol: 'USDC',
+    label: 'Circle Dollar',
+  },
+  {
+    chain: 'ethereum',
+    address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
+    symbol: 'USDT',
+    label: 'Tether Dollar',
+  },
+  {
+    chain: 'ethereum',
+    address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+    symbol: 'DAI',
+    label: 'Maker DAI',
+  },
+]
+
+const defaultBalances = {
+  [defaultTokens[0].address]: '32',
+  [defaultTokens[1].address]: '1000.00',
+  [defaultTokens[3].address]: '2000.00',
+}
+
+const defaultTokenPrices = {
+  [defaultTokens[0].address]: 2600,
+  [defaultTokens[1].address]: 0.996,
+  [defaultTokens[2].address]: 1.01,
+}
+
+const defaultFavorites = [defaultTokens[0], defaultTokens[1]]
+
+const defaultDisabledTokens = [defaultTokens[2].address]
+
+const TokenSelectorComponent = ({
+  selectedToken: selectedTokenInit,
+  ...props
+}: React.ComponentProps<typeof TokenSelector>) => {
+  const [selectedToken, setSelectedToken] = useState(selectedTokenInit)
+
+  return <TokenSelector {...props} selectedToken={selectedToken} onToken={setSelectedToken} />
+}
+
+const meta: Meta<typeof TokenSelector> = {
+  title: 'UI Kit/Features/TokenSelector',
+  component: TokenSelectorComponent,
+  args: {
+    selectedToken: defaultTokens[0],
+    tokens: defaultTokens,
+    favorites: defaultFavorites,
+    balances: defaultBalances,
+    tokenPrices: defaultTokenPrices,
+    disabled: false,
+    showSearch: true,
+    showSettings: true,
+    compact: false,
+    error: '',
+    disabledTokens: defaultDisabledTokens,
+    onToken: (token) => console.log('Selected token:', token),
+  },
+  argTypes: {
+    tokens: {
+      control: 'object',
+      description: 'Array of token options to display in selector',
+    },
+    favorites: {
+      control: 'object',
+      description: 'Array of favorite token options to display in selector',
+    },
+    balances: {
+      control: 'object',
+      description: 'Record of token balances by address',
+    },
+    tokenPrices: {
+      control: 'object',
+      description: 'Record of token prices in USD by address',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the token selector button and modal',
+    },
+    showSearch: {
+      control: 'boolean',
+      description: 'Shows search input in token selector modal',
+    },
+    showSettings: {
+      control: 'boolean',
+      description: 'Shows settings button in token selector modal footer',
+    },
+    compact: {
+      control: 'boolean',
+      description: 'Renders the modal in a compact size',
+    },
+    selectedToken: {
+      control: 'object',
+      description: 'Currently selected token',
+    },
+    error: {
+      control: 'text',
+      description: 'Custom error message to display in the token selector modal',
+    },
+    disabledTokens: {
+      control: 'object',
+      description: 'Array of token addresses that should be disabled in the selector',
+    },
+    customOptions: {
+      control: false,
+      description: 'Adds extra custom options to the modal, below the favorites',
+    },
+    onToken: {
+      action: 'token selected',
+      description: 'Callback when a token is selected',
+    },
+  },
+}
+
+type Story = StoryObj<typeof TokenSelector>
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        component: 'TokenSelector allows selecting a token from a list with search, favorites and balances',
+        story: 'Default view showing token selector button that opens modal',
+      },
+    },
+  },
+}
+
+export const NoSelectedToken: Story = {
+  args: {
+    selectedToken: undefined,
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Token selector with no token selected initially',
+      },
+    },
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    error: 'Failed to load tokens. Please try again later.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Token selector displaying an error message',
+      },
+    },
+  },
+}
+
+export const WithCustomOptions: Story = {
+  args: {
+    customOptions: (
+      <Stack gap={Spacing.xs}>
+        <Typography variant="headingXsBold">Custom Options</Typography>
+        <Button variant="outlined" fullWidth onClick={() => console.log('Custom option clicked')}>
+          Add Custom Token
+        </Button>
+      </Stack>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Token selector with custom options displayed below favorites',
+      },
+    },
+  },
+}
+
+export default meta
diff --git a/packages/curve-ui-kit/src/features/select-token/index.ts b/packages/curve-ui-kit/src/features/select-token/index.ts
new file mode 100644
index 000000000..5f1acf4f0
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/select-token/index.ts
@@ -0,0 +1,2 @@
+export { TokenSelector } from './ui/TokenSelector'
+export * from './types'
diff --git a/packages/curve-ui-kit/src/features/select-token/types.ts b/packages/curve-ui-kit/src/features/select-token/types.ts
new file mode 100644
index 000000000..197e60098
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/select-token/types.ts
@@ -0,0 +1,8 @@
+import { Address } from '@ui-kit/utils'
+
+export type TokenOption = {
+  chain: string
+  address: Address
+  symbol: string
+  label: string
+}
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/TokenSelectButton.tsx b/packages/curve-ui-kit/src/features/select-token/ui/TokenSelectButton.tsx
new file mode 100644
index 000000000..ad0892e29
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/select-token/ui/TokenSelectButton.tsx
@@ -0,0 +1,95 @@
+import CircularProgress from '@mui/material/CircularProgress'
+import Select from '@mui/material/Select'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import type { SxProps } from '@mui/system'
+
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { TokenIcon } from '@ui-kit/shared/ui/TokenIcon'
+
+const { Spacing, ButtonSize, MinWidth } = SizesAndSpaces
+
+import type { TokenOption } from '../types'
+
+const ButtonContent = ({ token, disabled }: { token: TokenOption; disabled: boolean }) => (
+  <Stack direction="row" gap={Spacing.xxs} alignItems="center">
+    <TokenIcon
+      blockchainId={token.chain}
+      symbol="" // No need for tooltip of symbol as it's displayed right next to it
+      address={token.address}
+      size="mui-md"
+      sx={{
+        opacity: disabled ? 0.5 : 1,
+        filter: disabled ? 'saturate(0)' : 'none',
+      }}
+    />
+    <Typography variant="bodyMBold">{token.symbol}</Typography>
+  </Stack>
+)
+
+const Spinner = () => (
+  <CircularProgress
+    size={20}
+    sx={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      margin: '0 auto',
+      color: (theme) => theme.palette.text.secondary,
+    }}
+  />
+)
+
+export type TokenSelectButtonCallbacks = {
+  onClick: () => void
+}
+
+export type TokenSelectButtonProps = {
+  token?: TokenOption
+  disabled: boolean
+}
+
+export type Props = TokenSelectButtonProps &
+  TokenSelectButtonCallbacks & {
+    sx?: SxProps
+  }
+
+/** The token selector is Select but acts like a button, so it's a bit unique */
+export const TokenSelectButton = ({ token, disabled, onClick, sx }: Props) => (
+  <Select
+    value={token?.address ?? ''}
+    onClick={disabled ? undefined : onClick}
+    open={false}
+    disabled={disabled}
+    displayEmpty
+    renderValue={() => (!!token ? <ButtonContent token={token} disabled={disabled} /> : <Spinner />)}
+    IconComponent={KeyboardArrowDownIcon}
+    sx={{
+      minHeight: ButtonSize.sm,
+      minWidth: MinWidth.select,
+      backgroundColor: (t) => t.design.Layer[1].Fill,
+      border: 'none',
+      borderBottom: (t) => `2px solid ${t.design.Layer[1].Outline}`,
+      ...(!disabled && {
+        '&:hover': {
+          border: 'none',
+          borderBottom: (t) => `2px solid ${t.design.Layer[2].Outline}`,
+        },
+        '&:active': {
+          border: 'none',
+          borderBottom: (t) => `2px solid ${t.design.Layer[3].Outline}`,
+        },
+      }),
+      '& .MuiOutlinedInput-notchedOutline': {
+        border: 'none',
+      },
+      '& .MuiSelect-select': {
+        padding: 0,
+        paddingInlineStart: Spacing.sm,
+        paddingInlineEnd: Spacing.xs,
+      },
+      ...sx,
+    }}
+  />
+)
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/TokenSelector.tsx b/packages/curve-ui-kit/src/features/select-token/ui/TokenSelector.tsx
new file mode 100644
index 000000000..90349ce43
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/select-token/ui/TokenSelector.tsx
@@ -0,0 +1,66 @@
+import { SxProps } from '@mui/material'
+import { useSwitch } from '@ui-kit/hooks/useSwitch'
+
+import type { TokenOption } from '../types'
+import { TokenSelectorModal, type TokenSelectorModalProps } from './modal/TokenSelectorModal'
+import type { TokenListProps, TokenListCallbacks } from './modal/TokenList'
+import { TokenSelectButton } from './TokenSelectButton'
+
+type Props = Partial<TokenListProps> &
+  Partial<TokenListCallbacks> &
+  Partial<TokenSelectorModalProps> & {
+    /** Currently selected token */
+    selectedToken: TokenOption | undefined
+    /** Disables the token selector button and modal */
+    disabled?: boolean
+    /** Custom styles to apply to the TokenSelectButton */
+    sx?: SxProps
+  }
+
+export const TokenSelector = ({
+  selectedToken,
+  tokens = [],
+  favorites = [],
+  balances = {},
+  tokenPrices = {},
+  disabled = false,
+  showSearch = true,
+  showSettings = true,
+  compact = false,
+  error = '',
+  disabledTokens = [],
+  customOptions,
+  onToken,
+  onSearch,
+  sx,
+}: Props) => {
+  const [isOpen, , closeModal, toggleModal] = useSwitch()
+
+  return (
+    <>
+      <TokenSelectButton token={selectedToken} disabled={disabled} onClick={toggleModal} sx={sx} />
+
+      {isOpen && (
+        <TokenSelectorModal
+          tokens={tokens}
+          balances={balances}
+          tokenPrices={tokenPrices}
+          favorites={favorites}
+          showSearch={showSearch}
+          showSettings={showSettings}
+          isOpen={isOpen}
+          compact={compact}
+          error={error}
+          disabledTokens={disabledTokens}
+          customOptions={customOptions}
+          onClose={closeModal}
+          onToken={(token) => {
+            toggleModal()
+            onToken?.(token)
+          }}
+          onSearch={(search) => onSearch?.(search)}
+        />
+      )}
+    </>
+  )
+}
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/FavoriteTokens.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/FavoriteTokens.tsx
new file mode 100644
index 000000000..233bdf1b0
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/FavoriteTokens.tsx
@@ -0,0 +1,40 @@
+import Chip from '@mui/material/Chip'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+
+import { t } from '@ui-kit/lib/i18n'
+import { TokenIcon } from '@ui-kit/shared/ui/TokenIcon'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { Spacing } = SizesAndSpaces
+
+import type { TokenOption } from '../../types'
+
+export type FavoriteTokenCallbacks = {
+  onToken: (token: TokenOption) => void
+}
+
+export type FavoriteTokenProps = {
+  tokens: TokenOption[]
+}
+
+export type Props = FavoriteTokenCallbacks & FavoriteTokenProps
+
+export const FavoriteTokens = ({ tokens, onToken }: Props) => (
+  <Stack gap={Spacing.xs} sx={{ paddingBlock: Spacing.xs }}>
+    <Typography variant="headingXsBold">{t`Favorite tokens`}</Typography>
+
+    <Stack direction="row" gap={Spacing.xs} flexWrap="wrap">
+      {tokens.map((token) => (
+        <Chip
+          key={token.address}
+          size="small"
+          icon={<TokenIcon blockchainId={token.chain} symbol={token.symbol} address={token.address} size="mui-md" />}
+          clickable={true}
+          label={token.symbol}
+          onClick={() => onToken(token)}
+        />
+      ))}
+    </Stack>
+  </Stack>
+)
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
new file mode 100644
index 000000000..a261c583a
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
@@ -0,0 +1,157 @@
+import { useState, useMemo, useEffect, memo, type ReactNode } from 'react'
+import Alert from '@mui/material/Alert'
+import AlertTitle from '@mui/material/AlertTitle'
+import Divider from '@mui/material/Divider'
+import MenuList from '@mui/material/MenuList'
+import Stack from '@mui/material/Stack'
+import TextField from '@mui/material/TextField'
+import SearchIcon from '@mui/icons-material/Search'
+
+import { t } from '@ui-kit/lib/i18n'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { Spacing } = SizesAndSpaces
+
+import type { TokenOption as Option } from '../../types'
+import { FavoriteTokens } from './FavoriteTokens'
+import { TokenOption } from './TokenOption'
+
+// Prevent all the token options from re-rendering if only the balance of a single one has changed.
+const MemoizedTokenOption = memo(TokenOption)
+
+export type TokenListCallbacks = {
+  /** Callback when a token is selected */
+  onToken: (token: Option) => void
+  /** Callback when user enters text in the search input (debounced) */
+  onSearch: (search: string) => void
+}
+
+export type TokenListProps = {
+  /** List of token options to display */
+  tokens: Option[]
+  /** List of favorite token options to display at the top */
+  favorites: Option[]
+  /** Token balances mapped by token address */
+  balances: Record<string, string | undefined>
+  /** Token prices in USD mapped by token address */
+  tokenPrices: Record<string, number | undefined>
+  /** Whether to show the search input field */
+  showSearch: boolean
+  /** Custom error message to display (e.g., when tokens failed to load) */
+  error: string
+  /** List of token addresses that should be disabled/unselectable */
+  disabledTokens: string[]
+  /** Custom React nodes to render below favorites section */
+  customOptions: ReactNode
+}
+
+export type Props = TokenListProps & TokenListCallbacks
+
+export const TokenList = ({
+  tokens,
+  favorites,
+  balances,
+  tokenPrices,
+  showSearch,
+  error,
+  disabledTokens,
+  customOptions,
+  onToken,
+  onSearch,
+}: Props) => {
+  const [search, setSearch] = useState('')
+  const [debouncedSearch, setDebouncedSearch] = useState('')
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(search)
+      onSearch(search)
+    }, 200)
+    return () => clearTimeout(timer)
+  }, [onSearch, search])
+
+  const showFavorites = favorites.length > 0 && !debouncedSearch
+
+  // List of all token options
+  const options = useMemo(
+    () =>
+      [...tokens]
+        .filter((token) =>
+          `${token.symbol}${token.address}`.toLocaleLowerCase().includes(debouncedSearch.toLocaleLowerCase()),
+        )
+        .sort((a, b) => {
+          const aBalance = +(balances[a.address] ?? 0)
+          const bBalance = +(balances[b.address] ?? 0)
+
+          // Compare USD balances first (including existence check)
+          const aBalanceUsd = (tokenPrices[a.address] ?? 0) * aBalance
+          const bBalanceUsd = (tokenPrices[b.address] ?? 0) * bBalance
+          if (aBalanceUsd !== bBalanceUsd) return bBalanceUsd - aBalanceUsd
+
+          // If USD balances are equal, compare raw balances
+          if (aBalance !== bBalance) return bBalance - aBalance
+
+          // Finally sort by label
+          return a.symbol.localeCompare(b.symbol)
+        }),
+    [tokens, debouncedSearch, balances, tokenPrices],
+  )
+
+  return (
+    <Stack gap={Spacing.sm} sx={{ overflowY: 'auto' }}>
+      {showSearch && (
+        <TextField
+          fullWidth
+          placeholder={t`Search name or paste address`}
+          onChange={(e) => setSearch(e.target.value)}
+          slotProps={{ input: { startAdornment: <SearchIcon /> } }}
+          variant="outlined"
+          value={search}
+          name="tokenName"
+          autoFocus
+        />
+      )}
+
+      {showFavorites && (
+        <>
+          <FavoriteTokens tokens={favorites} onToken={onToken} />
+          <Divider />
+        </>
+      )}
+
+      {customOptions && (
+        <>
+          {customOptions}
+          <Divider />
+        </>
+      )}
+
+      {error ? (
+        <Alert variant="filled" severity="error">
+          <AlertTitle>{t`${error}`}</AlertTitle>
+        </Alert>
+      ) : (
+        <Stack sx={{ overflowY: 'auto' }}>
+          {options.length ? (
+            <MenuList autoFocusItem autoFocus variant="menu" sx={{ paddingBlock: 0 }}>
+              {options.map((token) => (
+                <MemoizedTokenOption
+                  key={token.address}
+                  {...token}
+                  balance={balances[token.address]}
+                  tokenPrice={tokenPrices[token.address]}
+                  onToken={() => onToken(token)}
+                  disabled={disabledTokens.includes(token.address)}
+                />
+              ))}
+            </MenuList>
+          ) : (
+            <Alert variant="filled" severity="info">
+              <AlertTitle>{t`No tokens found`}</AlertTitle>
+            </Alert>
+          )}
+        </Stack>
+      )}
+    </Stack>
+  )
+}
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenOption.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenOption.tsx
new file mode 100644
index 000000000..569af2027
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenOption.tsx
@@ -0,0 +1,61 @@
+import MenuItem from '@mui/material/MenuItem'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+
+import { TokenIcon } from '@ui-kit/shared/ui/TokenIcon'
+import { formatNumber, FORMAT_OPTIONS } from '@ui/utils'
+
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { IconSize } = SizesAndSpaces
+
+import type { TokenOption as Option } from '../../types'
+
+export type TokenOptionCallbacks = {
+  onToken: () => void
+}
+
+export type TokenOptionsProps = {
+  balance?: string
+  tokenPrice?: number
+  disabled?: boolean
+}
+
+export type Props = Option & TokenOptionCallbacks & TokenOptionsProps
+
+export const TokenOption = ({ chain, symbol, label, address, balance, tokenPrice, disabled, onToken }: Props) => {
+  const hasBalance = +(balance ?? '0') > 0
+  const hasBalanceUsd = hasBalance && (tokenPrice ?? 0 > 0)
+
+  return (
+    <MenuItem
+      onClick={disabled ? undefined : onToken}
+      sx={{
+        minHeight: IconSize.xxl,
+        ...(disabled && {
+          opacity: 0.5,
+          cursor: 'not-allowed',
+        }),
+      }}
+    >
+      {/* I'm abusing the symbol here to deliberately show a tooltip for the address instead */}
+      <TokenIcon blockchainId={chain} symbol={address} address={address} size="xl" />
+
+      <Stack flexGrow={1}>
+        <Typography variant="bodyMBold">{symbol}</Typography>
+        <Typography variant="bodyXsRegular" color="textSecondary">
+          {label}
+        </Typography>
+      </Stack>
+
+      <Stack direction="column" alignItems="end">
+        {hasBalance && <Typography variant="bodyMBold">{formatNumber(balance)}</Typography>}
+        {hasBalanceUsd && (
+          <Typography variant="bodyXsRegular" color="textSecondary">
+            {formatNumber(tokenPrice! * +balance!, FORMAT_OPTIONS.USD)}
+          </Typography>
+        )}
+      </Stack>
+    </MenuItem>
+  )
+}
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenSelectorModal.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenSelectorModal.tsx
new file mode 100644
index 000000000..2a2f5490c
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenSelectorModal.tsx
@@ -0,0 +1,58 @@
+import IconButton from '@mui/material/IconButton'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+
+import { t } from '@ui-kit/lib/i18n'
+import { useSwitch } from '@ui-kit/hooks/useSwitch'
+import { ModalDialog } from '@ui-kit/shared/ui/ModalDialog'
+import { ModalSettingsButton } from '@ui-kit/shared/ui/ModalSettingsButton'
+
+import { TokenSettings } from './TokenSettings'
+import { TokenList, type Props as TokenListProps } from './TokenList'
+
+export type TokenSelectorModalCallbacks = {
+  /** Callback when modal is closed */
+  onClose: () => void
+}
+
+export type TokenSelectorModalProps = {
+  /** Controls visibility of the modal */
+  isOpen: boolean
+  /** Shows settings button in token selector modal footer */
+  showSettings: boolean
+  /** In compact mode the modal doesn't grow into its maximum height */
+  compact: boolean
+}
+
+export type Props = TokenListProps & TokenSelectorModalCallbacks & TokenSelectorModalProps
+
+export const TokenSelectorModal = ({ isOpen, showSettings, compact, onClose, ...tokenListProps }: Props) => {
+  const [isSettingsOpen, openSettings, closeSettings] = useSwitch()
+
+  return (
+    isOpen != null && (
+      <ModalDialog
+        open={isOpen}
+        onClose={onClose}
+        title={isSettingsOpen ? t`Select Token Settings` : t`Select Token`}
+        titleAction={
+          isSettingsOpen && (
+            <IconButton onClick={closeSettings}>
+              <ArrowBackIcon />
+            </IconButton>
+          )
+        }
+        footer={showSettings && !isSettingsOpen && <ModalSettingsButton onClick={openSettings} />}
+        sx={{
+          ...(compact && {
+            '& .MuiPaper-root': {
+              height: 'auto',
+              minHeight: 'auto',
+            },
+          }),
+        }}
+      >
+        {isSettingsOpen ? <TokenSettings /> : <TokenList {...tokenListProps} />}
+      </ModalDialog>
+    )
+  )
+}
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenSettings.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenSettings.tsx
new file mode 100644
index 000000000..9b991a464
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenSettings.tsx
@@ -0,0 +1,45 @@
+import { ReactNode } from 'react'
+import Stack from '@mui/material/Stack'
+import Switch from '@mui/material/Switch'
+import Typography from '@mui/material/Typography'
+
+import { t } from '@ui-kit/lib/i18n'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
+
+const { Spacing } = SizesAndSpaces
+
+const SettingLabel = ({ children }: { children?: ReactNode }) => (
+  <Typography variant="headingXsBold" display="inline-block" sx={{ marginLeft: 4, marginRight: 2 }}>
+    {children}
+  </Typography>
+)
+
+const Setting = ({ children }: { children?: ReactNode }) => (
+  <Stack direction="row" gap={Spacing.sm} justifyContent="space-between" alignItems="center">
+    {children}
+  </Stack>
+)
+
+const LABEL_HIDE_SMALL_POOLS = 'Hide tokens with very small pools'
+
+export const TokenSettings = () => {
+  const hideSmallPools = useUserProfileStore((state) => state.hideSmallPools)
+  const setHideSmallPools = useUserProfileStore((state) => state.setHideSmallPools)
+
+  return (
+    <Stack gap={Spacing.md}>
+      <Setting>
+        <SettingLabel>{t`${LABEL_HIDE_SMALL_POOLS}`}</SettingLabel>
+
+        <Switch
+          checked={hideSmallPools}
+          onChange={() => setHideSmallPools(!hideSmallPools)}
+          color="primary"
+          inputProps={{ 'aria-label': t`${LABEL_HIDE_SMALL_POOLS}` }}
+          size="small"
+        />
+      </Setting>
+    </Stack>
+  )
+}
diff --git a/packages/curve-ui-kit/src/features/switch-chain/ui/ChainSwitcher.tsx b/packages/curve-ui-kit/src/features/switch-chain/ui/ChainSwitcher.tsx
index 2ad8e8399..612c609dc 100644
--- a/packages/curve-ui-kit/src/features/switch-chain/ui/ChainSwitcher.tsx
+++ b/packages/curve-ui-kit/src/features/switch-chain/ui/ChainSwitcher.tsx
@@ -5,7 +5,7 @@ import { useEffect, useMemo } from 'react'
 import { useSwitch } from '@ui-kit/hooks/useSwitch'
 import { ModalDialog } from '@ui-kit/shared/ui/ModalDialog'
 import { t } from '@ui-kit/lib/i18n'
-import { SettingsButton } from './SettingsButton'
+import { ModalSettingsButton } from '@ui-kit/shared/ui/ModalSettingsButton'
 import { ChainSwitcherIcon } from './ChainSwitcherIcon'
 import { ChainList } from './ChainList'
 import { ChainSettings } from './ChainSettings'
@@ -81,7 +81,7 @@ export const ChainSwitcher = <TChainId extends number>({
               </IconButton>
             )
           }
-          footer={!isSettingsOpen && <SettingsButton onClick={openSettings} />}
+          footer={!isSettingsOpen && <ModalSettingsButton onClick={openSettings} />}
         >
           {isSettingsOpen ? (
             <ChainSettings showTestnets={showTestnets} setShowTestnets={setShowTestnets} />
diff --git a/packages/curve-ui-kit/src/features/user-profile/settings/Settings.tsx b/packages/curve-ui-kit/src/features/user-profile/settings/Settings.tsx
index 533f28494..a17747544 100644
--- a/packages/curve-ui-kit/src/features/user-profile/settings/Settings.tsx
+++ b/packages/curve-ui-kit/src/features/user-profile/settings/Settings.tsx
@@ -4,6 +4,7 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 import { AdvancedMode } from './advanced-mode/AdvancedMode'
 import { ThemeSelector } from './theme-selector/ThemeSelector'
+import { HideSmallPools } from './hide-small-pools/HideSmallPools'
 
 const { Spacing } = SizesAndSpaces
 
@@ -11,5 +12,6 @@ export const Settings = () => (
   <Stack gap={Spacing.md}>
     <ThemeSelector />
     <AdvancedMode />
+    <HideSmallPools />
   </Stack>
 )
diff --git a/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/HideSmallPools.tsx b/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/HideSmallPools.tsx
new file mode 100644
index 000000000..2cbd623be
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/HideSmallPools.tsx
@@ -0,0 +1,22 @@
+import { t } from '@ui-kit/lib/i18n'
+import Switch from '@mui/material/Switch'
+
+import { SettingLabel, Setting } from '../Setting'
+import useUserProfileStore from '../../store'
+
+export const HideSmallPools = () => {
+  const hideSmallPools = useUserProfileStore((state) => state.hideSmallPools)
+  const setHideSmallPools = useUserProfileStore((state) => state.setHideSmallPools)
+
+  return (
+    <Setting>
+      <SettingLabel>{t`Hide Small Pools`}</SettingLabel>
+      <Switch
+        checked={hideSmallPools}
+        onChange={() => setHideSmallPools(!hideSmallPools)}
+        color="primary"
+        size="small"
+      />
+    </Setting>
+  )
+}
diff --git a/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts b/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts
new file mode 100644
index 000000000..3404f204f
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts
@@ -0,0 +1 @@
+export { AdvancedMode } from './AdvancedMode'
diff --git a/packages/curve-ui-kit/src/features/user-profile/store.ts b/packages/curve-ui-kit/src/features/user-profile/store.ts
index 713227b43..3465e1e31 100644
--- a/packages/curve-ui-kit/src/features/user-profile/store.ts
+++ b/packages/curve-ui-kit/src/features/user-profile/store.ts
@@ -10,6 +10,7 @@ type State = {
   /** Key is either 'global' or a chainIdPoolId from getChainPoolIdActiveKey. */
   maxSlippage: { global: string } & Partial<Record<string, string>>
   isAdvancedMode: boolean
+  hideSmallPools: boolean
 }
 
 type Action = {
@@ -29,6 +30,7 @@ type Action = {
    */
   setMaxSlippage: (slippage: string | null, key?: string) => boolean
   setAdvancedMode: (isAdvanced: boolean) => void
+  setHideSmallPools: (hideSmallPools: boolean) => void
 }
 
 type Store = State & Action
@@ -44,6 +46,7 @@ const INITIAL_STATE: State = {
   theme: INITIAL_THEME,
   maxSlippage: { global: '0.1' },
   isAdvancedMode: false,
+  hideSmallPools: true,
 }
 
 const store: StateCreator<Store> = (set) => ({
@@ -86,6 +89,7 @@ const store: StateCreator<Store> = (set) => ({
   },
 
   setAdvancedMode: (isAdvancedMode) => set((state) => ({ ...state, isAdvancedMode })),
+  setHideSmallPools: (hideSmallPools) => set((state) => ({ ...state, hideSmallPools })),
 })
 
 const cache: PersistOptions<Store> = {
diff --git a/packages/curve-ui-kit/src/shared/ui/ModalDialog.tsx b/packages/curve-ui-kit/src/shared/ui/ModalDialog.tsx
index 228fdb2e2..2bdc1068b 100644
--- a/packages/curve-ui-kit/src/shared/ui/ModalDialog.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/ModalDialog.tsx
@@ -8,6 +8,7 @@ import Typography from '@mui/material/Typography'
 import CloseIcon from '@mui/icons-material/Close'
 import IconButton from '@mui/material/IconButton'
 import { SizesAndSpaces } from '../../themes/design/1_sizes_spaces'
+import { SxProps, Theme } from '@mui/material'
 
 export type ModalDialogProps = {
   children: ReactNode
@@ -16,10 +17,11 @@ export type ModalDialogProps = {
   onClose: () => void
   titleAction?: ReactNode
   footer?: ReactNode
+  sx?: SxProps<Theme>
 }
 
-export const ModalDialog = ({ children, open, onClose, title, titleAction, footer }: ModalDialogProps) => (
-  <Dialog open={open} onClose={onClose}>
+export const ModalDialog = ({ children, open, onClose, title, titleAction, footer, sx }: ModalDialogProps) => (
+  <Dialog open={open} onClose={onClose} sx={sx}>
     <Card
       sx={{
         ...SizesAndSpaces.ModalHeight.sm,
diff --git a/packages/curve-ui-kit/src/features/switch-chain/ui/SettingsButton.tsx b/packages/curve-ui-kit/src/shared/ui/ModalSettingsButton.tsx
similarity index 82%
rename from packages/curve-ui-kit/src/features/switch-chain/ui/SettingsButton.tsx
rename to packages/curve-ui-kit/src/shared/ui/ModalSettingsButton.tsx
index 461ee21d0..98a241bd4 100644
--- a/packages/curve-ui-kit/src/features/switch-chain/ui/SettingsButton.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/ModalSettingsButton.tsx
@@ -2,7 +2,7 @@ import Button from '@mui/material/Button'
 import { t } from '@ui-kit/lib/i18n'
 import { GearIcon } from '@ui-kit/shared/icons/GearIcon'
 
-export const SettingsButton = (props: { onClick: () => void }) => (
+export const ModalSettingsButton = (props: { onClick: () => void }) => (
   <Button
     color="ghost"
     size="small"
diff --git a/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx b/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx
index c772d68c5..dc489109f 100644
--- a/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx
@@ -15,7 +15,7 @@ export interface TokenIconProps extends ImgHTMLAttributes<HTMLImageElement> {
   blockchainId: string
   symbol: string
   address?: string | null
-  size?: 'sm' | 'mui-sm' | 'mui-md'
+  size?: 'sm' | 'mui-sm' | 'mui-md' | 'xl'
   sx?: SystemStyleObject<Theme>
 }
 
@@ -57,6 +57,7 @@ export const TokenIcon = ({ className = '', blockchainId, symbol, size = 'sm', a
         }),
         ...(size === 'mui-sm' && handleBreakpoints({ width: IconSize['sm'], height: IconSize['sm'] })),
         ...(size === 'mui-md' && handleBreakpoints({ width: IconSize['md'], height: IconSize['md'] })),
+        ...(size === 'xl' && handleBreakpoints({ width: IconSize['xl'], height: IconSize['xl'] })),
         ...sx,
       })}
     />
diff --git a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts
index 5e44f0dee..62e7b44ee 100644
--- a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts
+++ b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts
@@ -268,6 +268,7 @@ export const SizesAndSpaces = {
   MinWidth: {
     table: '60rem', // 960px
     tableHeader: '50rem', // 800px
+    select: '5rem', // 80px
   },
   MaxWidth: {
     disclaimer: '43rem', // 688px

From 0ca3e308d4d53dc4737fd221ad0769f10542fa74 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 22 Feb 2025 01:07:03 +0100
Subject: [PATCH 06/30] refactor: use token select feature

---
 .../ComboBoxSelectToken/ComboBox.tsx          | 208 --------
 .../ComboBoxSelectToken/ComboBoxListChunk.tsx |  78 ---
 .../ComboBoxSelectToken/ComboBoxListItem.tsx  |  87 ----
 .../ComboBoxSelectedToken.tsx                 |  61 ---
 .../ComboBoxSelectedTokenButton.tsx           |  51 --
 .../ComboBoxTokenUserBalance.tsx              |  31 --
 .../components/ComboBoxSelectToken/index.tsx  | 135 ------
 .../components/ComboBoxSelectToken/types.ts   |  15 -
 .../SelectTokenModal/ComboBox.tsx             | 173 -------
 .../SelectTokenModal/ComboBoxTokenPicker.tsx  | 457 ------------------
 .../TokensInPool/SelectToken.tsx              |   4 +-
 .../TokensInPool/SelectTokenButton.tsx        | 290 +++++++++++
 .../dex/components/PageCreatePool/types.ts    |   2 +-
 .../dex/components/PagePool/Swap/index.tsx    |  60 ++-
 .../src/dex/components/PagePool/index.tsx     |   1 -
 .../TableCheckboxHideSmallPools.tsx           |  17 +-
 .../dex/components/PageRouterSwap/index.tsx   | 104 ++--
 apps/main/src/dex/entities/token/index.ts     |   1 -
 apps/main/src/dex/entities/token/lib.ts       |  35 --
 .../ui/TokenSelector.tsx                      |  51 +-
 .../add-gauge-reward-token/ui/styled.tsx      |   5 -
 .../ui/AmountTokenInput.tsx                   |  62 +--
 .../deposit-gauge-reward/ui/HelperFields.tsx  |  15 +-
 .../deposit-gauge-reward/ui/styled.tsx        |   5 -
 apps/main/src/dex/store/createGlobalSlice.ts  |   3 -
 .../main/src/dex/store/createNetworksSlice.ts |   1 -
 .../main/src/dex/store/createPoolListSlice.ts |   5 +-
 .../src/dex/store/createQuickSwapSlice.ts     |   5 -
 .../src/dex/store/createSelectTokenSlice.tsx  |  71 ---
 apps/main/src/dex/store/useStore.ts           |   3 -
 30 files changed, 482 insertions(+), 1554 deletions(-)
 delete mode 100644 apps/main/src/dex/components/ComboBoxSelectToken/ComboBox.tsx
 delete mode 100644 apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxListChunk.tsx
 delete mode 100644 apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxListItem.tsx
 delete mode 100644 apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxSelectedToken.tsx
 delete mode 100644 apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxSelectedTokenButton.tsx
 delete mode 100644 apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxTokenUserBalance.tsx
 delete mode 100644 apps/main/src/dex/components/ComboBoxSelectToken/index.tsx
 delete mode 100644 apps/main/src/dex/components/ComboBoxSelectToken/types.ts
 delete mode 100644 apps/main/src/dex/components/PageCreatePool/SelectTokenModal/ComboBox.tsx
 delete mode 100644 apps/main/src/dex/components/PageCreatePool/SelectTokenModal/ComboBoxTokenPicker.tsx
 create mode 100644 apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
 delete mode 100644 apps/main/src/dex/entities/token/index.ts
 delete mode 100644 apps/main/src/dex/entities/token/lib.ts
 delete mode 100644 apps/main/src/dex/store/createSelectTokenSlice.tsx

diff --git a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBox.tsx b/apps/main/src/dex/components/ComboBoxSelectToken/ComboBox.tsx
deleted file mode 100644
index 8efef82a2..000000000
--- a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBox.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import type { ComboBoxSelectTokenProps } from '@/dex/components/ComboBoxSelectToken/types'
-
-import React, { useEffect, useRef, useState } from 'react'
-import { t } from '@ui-kit/lib/i18n'
-import chunk from 'lodash/chunk'
-import styled from 'styled-components'
-
-import { breakpoints } from '@ui/utils/responsive'
-import useStore from '@/dex/store/useStore'
-
-import { RCEditClear } from '@ui/images'
-import { StyledInput } from '@ui/InputComp/styles'
-import Box from '@ui/Box/Box'
-import Checkbox from '@ui/Checkbox'
-import ComboBoxListChunk from '@/dex/components/ComboBoxSelectToken/ComboBoxListChunk'
-import Icon from '@ui/Icon'
-import IconButton from '@ui/IconButton/IconButton'
-import InputProvider from '@ui/InputComp/InputProvider'
-import Popover from '@ui/Popover/Popover'
-import Spinner from '@ui/Spinner'
-import SpinnerWrapper from '@ui/Spinner/SpinnerWrapper'
-import { Token } from '@/dex/types/main.types'
-
-const ComboBox = ({
-  testId,
-  dialogClose,
-  blockchainId,
-  listBoxHeight,
-  showBalances,
-  result,
-  selectedToken,
-  showCheckboxHideSmallPools,
-  showInpSearch,
-  tokens,
-  handleInpChange,
-  handleOnSelectChange,
-}: Pick<
-  ComboBoxSelectTokenProps,
-  | 'testId'
-  | 'blockchainId'
-  | 'listBoxHeight'
-  | 'showBalances'
-  | 'showCheckboxHideSmallPools'
-  | 'showInpSearch'
-  | 'tokens'
-> & {
-  dialogClose: () => void
-  result: Token[] | undefined
-  selectedToken: string
-  handleInpChange(filterValue: string, tokens: Token[] | undefined): void
-  handleOnSelectChange(selectedAddress: string): void
-}) => {
-  const topContentRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const listRef = useRef<HTMLDivElement>(null)
-  const popoverRef = useRef<HTMLDivElement>(null)
-
-  const [topContentHeight, setTopContentHeight] = useState<number | undefined>()
-
-  const filterValue = useStore((state) => state.selectToken.filterValue)
-  const hideSmallPools = useStore((state) => state.poolList.formValues.hideSmallPools)
-  const setPoolListFormValues = useStore((state) => state.quickSwap.setPoolListFormValues)
-
-  useEffect(() => {
-    if (topContentRef?.current) {
-      setTopContentHeight(topContentRef.current.getBoundingClientRect().height)
-    }
-  }, [topContentRef])
-
-  return (
-    <>
-      <Popover data-testid={`modal-${testId}`} popoverRef={popoverRef} isOpen onClose={() => {}}>
-        <Box grid gridGap={3}>
-          {(showInpSearch || showCheckboxHideSmallPools) && (
-            <Box ref={topContentRef} grid gridTemplateRows="auto 1fr" gridRowGap={3}>
-              {showInpSearch && (
-                <Box grid gridColumnGap={1} gridTemplateColumns="1fr auto" margin="1.5rem 0.5rem 0 1rem">
-                  <ComboBoxSearchInpWrapper id="inp-search">
-                    <Icon name="Search" size={24} aria-label="search icon" />
-                    <StyledInput
-                      ref={inputRef}
-                      id="select-inp"
-                      data-testid={`inp-search-${testId}`}
-                      aria-label={t`Search by token name or address`}
-                      placeholder={t`Search by token name or address`}
-                      type="search"
-                      value={filterValue}
-                      onChange={({ target: { value } }: React.ChangeEvent<HTMLInputElement>) =>
-                        handleInpChange(value, tokens)
-                      }
-                      onKeyDown={(evt) => {
-                        // scroll to first item on list
-                        if (evt.key === 'ArrowDown' && result && result.length > 0 && listRef.current) {
-                          const visibleList = listRef.current.querySelector('.visible')
-                          const firstButton = visibleList?.querySelector?.('button')
-
-                          if (firstButton) {
-                            firstButton.focus()
-                            // setTimeout needed or else it over scroll element
-                            setTimeout(() => firstButton.scrollIntoView(), 200)
-                          }
-                        } else if (evt.key === 'Escape') {
-                          dialogClose()
-                        }
-                      }}
-                    />
-                    <ComboBoxSearchInpClearBtn
-                      testId="search-clear"
-                      padding={2}
-                      onClick={() => handleOnSelectChange('')}
-                    >
-                      <RCEditClear className="svg-tooltip" />
-                    </ComboBoxSearchInpClearBtn>
-                  </ComboBoxSearchInpWrapper>
-                  <IconButton testId="search-close" opacity={1} padding={2} onClick={dialogClose}>
-                    <Icon name="Close" size={32} aria-label="Close" />
-                  </IconButton>
-                </Box>
-              )}
-
-              {/* CHECKBOX */}
-              {showCheckboxHideSmallPools && (
-                <ComboBoxCheckbox isSelected={hideSmallPools} onChange={setPoolListFormValues}>
-                  {t`Hide tokens from very small pools`}
-                </ComboBoxCheckbox>
-              )}
-            </Box>
-          )}
-
-          {/* LIST */}
-          <ComboBoxListWrapper ref={listRef} boxHeight={listBoxHeight ?? '50vh'} topContentHeight={topContentHeight}>
-            {Array.isArray(result) && result.length > 0 ? (
-              chunk(result, 30).map((tokens, idx) => (
-                <ComboBoxListChunk
-                  key={`tokens-${idx}`}
-                  testId={testId}
-                  blockchainId={blockchainId}
-                  inputRef={inputRef}
-                  showBalances={showBalances}
-                  selectedToken={selectedToken}
-                  tokens={tokens}
-                  dialogClose={dialogClose}
-                  handleOnSelectChange={handleOnSelectChange}
-                />
-              ))
-            ) : !!filterValue ? (
-              <ComboBoxListNoResult>{t`No token found for "${filterValue}"`}</ComboBoxListNoResult>
-            ) : (
-              <SpinnerWrapper vSpacing={5}>
-                <Spinner />
-              </SpinnerWrapper>
-            )}
-          </ComboBoxListWrapper>
-        </Box>
-      </Popover>
-    </>
-  )
-}
-
-const ComboBoxSearchInpWrapper = styled(InputProvider)`
-  align-items: center;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-column-gap: var(--spacing-2);
-  position: relative;
-  transition: 3s;
-`
-
-const ComboBoxSearchInpClearBtn = styled(IconButton)`
-  display: none;
-  min-width: 1.5625rem; //25px
-  opacity: 1;
-  padding: 0;
-
-  &.show {
-    display: inline-block;
-  }
-
-  .svg-tooltip {
-    position: relative;
-    top: 2px;
-  }
-`
-
-const ComboBoxCheckbox = styled(Checkbox)`
-  margin-left: var(--spacing-3);
-`
-
-const ComboBoxListWrapper = styled.div<{ boxHeight: string; topContentHeight: number | undefined }>`
-  overflow-x: hidden;
-  overflow-y: scroll;
-  ${({ topContentHeight }) => {
-    if (topContentHeight) {
-      return `height: calc(100vh - ${topContentHeight}px);`
-    }
-  }};
-
-  @media (min-width: ${breakpoints.sm}rem) {
-    height: ${({ boxHeight }) => boxHeight};
-  }
-`
-
-const ComboBoxListNoResult = styled.li`
-  text-align: center;
-  padding: var(--spacing-wide) var(--spacing-2);
-`
-
-export default ComboBox
diff --git a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxListChunk.tsx b/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxListChunk.tsx
deleted file mode 100644
index 7db5c528a..000000000
--- a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxListChunk.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { ComboBoxSelectTokenProps } from '@/dex/components/ComboBoxSelectToken/types'
-
-import React, { useRef } from 'react'
-import styled from 'styled-components'
-
-import useIntersectionObserver from 'ui/src/hooks/useIntersectionObserver'
-
-import SelectTokenListItem from '@/dex/components/ComboBoxSelectToken/ComboBoxListItem'
-import { Token } from '@/dex/types/main.types'
-
-const SelectTokenListChunk = ({
-  testId,
-  blockchainId,
-  inputRef,
-  showBalances,
-  selectedToken,
-  tokens,
-  dialogClose,
-  handleOnSelectChange,
-}: Pick<ComboBoxSelectTokenProps, 'testId' | 'blockchainId' | 'showBalances'> & {
-  inputRef?: React.RefObject<HTMLInputElement | null>
-  selectedToken: string
-  tokens: Token[]
-  dialogClose: () => void
-  handleOnSelectChange(selectedToken: string): void
-}) => {
-  const ref = useRef<HTMLUListElement>(null)
-  const entry = useIntersectionObserver(ref, { freezeOnceVisible: false })
-
-  const isVisible = !!entry?.isIntersecting
-
-  return (
-    <ItemsWrapper
-      ref={ref}
-      count={tokens.length}
-      className={isVisible ? 'visible' : ''}
-      onKeyDown={(evt) => {
-        // scroll up/down list
-        const activeElement = document.activeElement
-
-        if (evt.key === 'ArrowUp') {
-          const previousButton = activeElement?.parentElement?.previousElementSibling
-          if (previousButton) {
-            previousButton.querySelector('button')?.focus()
-          } else if (inputRef?.current) {
-            inputRef.current.focus()
-          }
-        } else if (evt.key === 'ArrowDown') {
-          const nextButton = activeElement?.parentElement?.nextElementSibling
-          if (nextButton) {
-            nextButton.querySelector('button')?.focus()
-          }
-        } else if (evt.key === 'Escape') {
-          dialogClose()
-        }
-      }}
-    >
-      {isVisible &&
-        tokens.map((item) => (
-          <SelectTokenListItem
-            key={item.address}
-            testId={testId}
-            blockchainId={blockchainId}
-            showBalances={showBalances}
-            selectedToken={selectedToken}
-            {...item}
-            handleOnSelectChange={handleOnSelectChange}
-          />
-        ))}
-    </ItemsWrapper>
-  )
-}
-
-const ItemsWrapper = styled.ul<{ count: number }>`
-  height: ${({ count }) => `${count * 50}px`};
-`
-
-export default SelectTokenListChunk
diff --git a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxListItem.tsx b/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxListItem.tsx
deleted file mode 100644
index 5e57c4279..000000000
--- a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxListItem.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import type { ComboBoxSelectTokenProps } from '@/dex/components/ComboBoxSelectToken/types'
-
-import React from 'react'
-import styled from 'styled-components'
-
-import { focusVisible } from '@ui/utils'
-import { shortenTokenAddress } from '@/dex/utils'
-
-import Box from '@ui/Box'
-import Button from '@ui/Button'
-import Chip from '@ui/Typography/Chip'
-import SelectTokenListItemUserBalance from '@/dex/components/ComboBoxSelectToken/ComboBoxTokenUserBalance'
-import { TokenIcon } from '@ui-kit/shared/ui/TokenIcon'
-import { Token } from '@/dex/types/main.types'
-
-const ComboBoxListItem = ({
-  blockchainId,
-  testId,
-  showBalances,
-  selectedToken,
-  handleOnSelectChange,
-  ...item
-}: Pick<ComboBoxSelectTokenProps, 'testId' | 'blockchainId' | 'showBalances'> &
-  Token & {
-    selectedToken: string
-    handleOnSelectChange(selectedToken: string): void
-  }) => (
-  <li>
-    <ItemButton
-      variant="outlined"
-      className={selectedToken === item.address ? 'active' : ''}
-      onClick={() => handleOnSelectChange(item.address)}
-    >
-      <IconWrapper>
-        <TokenIcon blockchainId={blockchainId} symbol={item.symbol} address={item.ethAddress || item.address} />
-      </IconWrapper>
-      <LabelTextWrapper flex flexDirection="column" flexAlignItems="flex-start">
-        <LabelText data-testid={`li-${testId}`}>{item.symbol}</LabelText>
-        <Chip isMono opacity={0.5}>
-          {shortenTokenAddress(item.address)}
-        </Chip>
-      </LabelTextWrapper>
-      {showBalances && <SelectTokenListItemUserBalance tokenAddress={item.address} />}
-    </ItemButton>
-  </li>
-)
-
-const ItemButton = styled(Button)`
-  ${focusVisible};
-
-  &.focus-visible,
-  &.active {
-    color: var(--box--primary--color);
-    background-color: var(--table_detail_row--active--background-color);
-  }
-  align-items: center;
-  border: none;
-  display: grid;
-  font-family: inherit;
-  padding: 0 var(--spacing-3);
-  grid-column-gap: var(--spacing-2);
-  grid-template-columns: auto 1fr auto;
-  height: 50px;
-  width: 100%;
-`
-
-const IconWrapper = styled.div`
-  min-width: 1.875rem; // 30px;
-  text-align: left;
-`
-
-const LabelText = styled.div`
-  overflow: hidden;
-
-  font-size: var(--font-size-4);
-  font-weight: var(--font-weight--bold);
-  line-height: 1;
-  text-overflow: ellipsis;
-  text-transform: initial;
-`
-
-const LabelTextWrapper = styled(Box)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-`
-
-export default ComboBoxListItem
diff --git a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxSelectedToken.tsx b/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxSelectedToken.tsx
deleted file mode 100644
index c41c3bdfe..000000000
--- a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxSelectedToken.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { shortenTokenAddress } from '@/dex/utils'
-
-import { Chip } from '@ui/Typography'
-import Box from '@ui/Box'
-import { TokenIcon } from '@ui-kit/shared/ui/TokenIcon'
-import { Token } from '@/dex/types/main.types'
-
-const ComboBoxSelectedToken = ({
-  blockchainId,
-  selected,
-  testId,
-}: {
-  blockchainId: string
-  selected: Token
-  testId: string | undefined
-}) => (
-  <>
-    <TokenIconWrapper>
-      <TokenIcon
-        blockchainId={blockchainId}
-        symbol={selected.symbol}
-        size="sm"
-        address={selected.ethAddress || selected.address}
-      />
-    </TokenIconWrapper>
-    <LabelTextWrapper grid>
-      <SelectedLabelText data-testid={`label-${testId}`} title={selected.symbol}>
-        {selected.symbol}
-      </SelectedLabelText>{' '}
-      {selected?.haveSameTokenName && <AddressChip size="xs">{shortenTokenAddress(selected.address)}</AddressChip>}
-    </LabelTextWrapper>
-  </>
-)
-
-const AddressChip = styled(Chip)`
-  margin-top: var(--spacing-1);
-`
-
-const SelectedLabelText = styled.span`
-  overflow: hidden;
-
-  font-size: var(--input_button--font-size);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const TokenIconWrapper = styled.div`
-  display: inline-block;
-  min-height: 1.25rem; // 20px
-  min-width: 1.25rem; // 20px
-`
-
-const LabelTextWrapper = styled(Box)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-`
-
-export default ComboBoxSelectedToken
diff --git a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxSelectedTokenButton.tsx b/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxSelectedTokenButton.tsx
deleted file mode 100644
index 654cd7d87..000000000
--- a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxSelectedTokenButton.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { AriaButtonProps } from 'react-aria'
-import type { ButtonProps } from '@ui/Button/types'
-
-import { useButton } from 'react-aria'
-import React, { useRef } from 'react'
-import styled from 'styled-components'
-
-import ButtonComp from '@ui/Button'
-
-const ComboBoxSelectedTokenButton = (props: React.PropsWithChildren<AriaButtonProps<'button'> & ButtonProps>) => {
-  const ref = useRef<HTMLButtonElement>(null)
-  const { buttonProps } = useButton(props, ref)
-  const { children, onPress, ...rest } = props
-
-  return (
-    <StyledComboBoxButton {...buttonProps} {...rest} ref={ref}>
-      {children}
-    </StyledComboBoxButton>
-  )
-}
-
-const StyledComboBoxButton = styled(ButtonComp)`
-  align-items: center;
-  display: grid;
-  padding-right: var(--spacing-2);
-  height: 100%;
-
-  text-transform: var(--input_button--text-transform);
-
-  color: var(--input_button--color);
-  background-color: var(--input--background-color);
-  border: 0.5px solid var(--input_button--border-color);
-  box-shadow: inset -2px -2px 0px 0.25px var(--box--primary--shadow-color);
-
-  grid-template-columns: auto 1fr auto;
-
-  transition:
-    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-
-  &:disabled {
-    opacity: 0.7;
-  }
-
-  &:hover:not(:disabled) {
-    color: var(--input_button--hover--color);
-    background-color: var(--input_button--hover--background-color);
-  }
-`
-
-export default ComboBoxSelectedTokenButton
diff --git a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxTokenUserBalance.tsx b/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxTokenUserBalance.tsx
deleted file mode 100644
index 40179dc7a..000000000
--- a/apps/main/src/dex/components/ComboBoxSelectToken/ComboBoxTokenUserBalance.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-
-import { FORMAT_OPTIONS, formatNumber } from '@ui/utils'
-import useStore from '@/dex/store/useStore'
-
-import Box from '@ui/Box'
-import Spinner from '@ui/Spinner'
-import TextCaption from '@ui/TextCaption'
-
-const ComboBoxTokenUserBalance = ({ tokenAddress }: { tokenAddress: string }) => {
-  const userBalancesMapper = useStore((state) => state.userBalances.userBalancesMapper)
-  const usdRatesMapper = useStore((state) => state.usdRates.usdRatesMapper)
-  const userBalance = userBalancesMapper[tokenAddress]
-  const userBalanceUsdRate = usdRatesMapper[tokenAddress]
-  const userBalanceUsd = +(userBalance ?? '0') * +(userBalanceUsdRate ?? '0')
-
-  return (
-    <>
-      {typeof userBalance === 'undefined' ? (
-        <Spinner size={15} />
-      ) : (
-        <Box flex flexDirection="column" flexAlignItems="flex-end">
-          <div>{formatNumber(userBalance)}</div>
-          {userBalanceUsd > 0 ? <TextCaption>{formatNumber(userBalanceUsd, FORMAT_OPTIONS.USD)}</TextCaption> : null}
-        </Box>
-      )}
-    </>
-  )
-}
-
-export default ComboBoxTokenUserBalance
diff --git a/apps/main/src/dex/components/ComboBoxSelectToken/index.tsx b/apps/main/src/dex/components/ComboBoxSelectToken/index.tsx
deleted file mode 100644
index b6acbb558..000000000
--- a/apps/main/src/dex/components/ComboBoxSelectToken/index.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { useFilter } from 'react-aria'
-import { useOverlayTriggerState } from 'react-stately'
-import styled from 'styled-components'
-import { delayAction } from '@/dex/utils'
-import useStore from '@/dex/store/useStore'
-import ComboBox from '@/dex/components/ComboBoxSelectToken/ComboBox'
-import ComboBoxSelectedToken from '@/dex/components/ComboBoxSelectToken/ComboBoxSelectedToken'
-import ComboBoxSelectedTokenButton from '@/dex/components/ComboBoxSelectToken/ComboBoxSelectedTokenButton'
-import ModalDialog from '@ui/Dialog'
-import Spinner, { SpinnerWrapper } from '@ui/Spinner'
-import { Token } from '@/dex/types/main.types'
-import { filterTokens } from '@ui-kit/utils'
-
-const ComboBoxTokens = ({
-  disabled,
-  blockchainId,
-  listBoxHeight,
-  selectedToken,
-  showBalances,
-  showCheckboxHideSmallPools,
-  showSearch,
-  testId,
-  title,
-  tokens = [],
-  onOpen,
-  onSelectionChange,
-}: {
-  disabled?: boolean
-  blockchainId: string
-  listBoxHeight?: string
-  selectedToken: Token | undefined
-  showBalances?: boolean
-  showCheckboxHideSmallPools?: boolean
-  showSearch?: boolean
-  testId?: string
-  title: string
-  tokens: Token[] | undefined
-  onOpen?: () => void
-  onSelectionChange: (selectedAddress: React.Key) => void
-}) => {
-  const { endsWith } = useFilter({ sensitivity: 'base' })
-  const overlayTriggerState = useOverlayTriggerState({})
-
-  const filterValue = useStore((state) => state.selectToken.filterValue)
-  const isMobile = useStore((state) => state.isMobile)
-  const setStateByKey = useStore((state) => state.selectToken.setStateByKey)
-
-  const [result, setResult] = useState<Token[] | undefined>()
-
-  const handleInpChange = useCallback(
-    (filterValue: string, tokens: Token[] | undefined) => {
-      setStateByKey('filterValue', filterValue)
-      const result = filterValue && tokens && tokens.length > 0 ? filterTokens(filterValue, tokens, endsWith) : tokens
-      setResult(result)
-    },
-    [endsWith, setStateByKey],
-  )
-
-  const handleOnSelectChange = (tokenAddress: React.Key) => {
-    onSelectionChange(tokenAddress)
-    handleClose()
-  }
-
-  const handleOpen = () => {
-    if (typeof onOpen === 'function') onOpen()
-
-    setResult(tokens)
-    setStateByKey('filterValue', '')
-    overlayTriggerState.open()
-  }
-
-  const handleClose = () => {
-    if (isMobile) {
-      delayAction(overlayTriggerState.close)
-    } else {
-      overlayTriggerState.close()
-    }
-  }
-
-  // update result if tokens list changed.
-  useEffect(() => {
-    if (Array.isArray(tokens) && tokens.length > 0) {
-      if (filterValue) {
-        handleInpChange(filterValue, tokens)
-      } else {
-        setResult(tokens)
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tokens])
-
-  return selectedToken ? (
-    <>
-      <ComboBoxSelectedTokenButton isDisabled={disabled} testId={testId} onPress={handleOpen} fillWidth>
-        <ComboBoxSelectedToken blockchainId={blockchainId} selected={selectedToken} testId={testId} />
-      </ComboBoxSelectedTokenButton>
-      {overlayTriggerState.isOpen && (
-        <ModalDialog
-          testId={testId}
-          title={title}
-          noContentPadding
-          state={{ ...overlayTriggerState, close: handleClose }}
-        >
-          <ComboBox
-            testId={testId}
-            dialogClose={handleClose}
-            blockchainId={blockchainId}
-            listBoxHeight={listBoxHeight}
-            result={result}
-            selectedToken={selectedToken.address}
-            showBalances={showBalances}
-            showCheckboxHideSmallPools={showCheckboxHideSmallPools}
-            showInpSearch={showSearch}
-            tokens={tokens}
-            handleInpChange={handleInpChange}
-            handleOnSelectChange={handleOnSelectChange}
-          />
-        </ModalDialog>
-      )}
-    </>
-  ) : (
-    <StyledSpinnerWrapper vSpacing={1}>
-      <Spinner size={15} />
-    </StyledSpinnerWrapper>
-  )
-}
-
-const StyledSpinnerWrapper = styled(SpinnerWrapper)`
-  height: 100%;
-  border: 0.5px solid var(--input_button--border-color);
-  box-shadow: inset -2px -2px 0 0.25px var(--box--primary--shadow-color);
-`
-
-export default ComboBoxTokens
diff --git a/apps/main/src/dex/components/ComboBoxSelectToken/types.ts b/apps/main/src/dex/components/ComboBoxSelectToken/types.ts
deleted file mode 100644
index da05ab064..000000000
--- a/apps/main/src/dex/components/ComboBoxSelectToken/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Token } from '@/dex/types/main.types'
-
-export type ComboBoxSelectTokenProps = {
-  disabled?: boolean
-  blockchainId: string
-  listBoxHeight?: string
-  selectedToken: Token | undefined
-  showBalances?: boolean
-  showCheckboxHideSmallPools?: boolean
-  showInpSearch?: boolean
-  testId?: string
-  title: string
-  tokens: Token[] | undefined
-  onSelectionChange(selectedAddress: string): void
-}
diff --git a/apps/main/src/dex/components/PageCreatePool/SelectTokenModal/ComboBox.tsx b/apps/main/src/dex/components/PageCreatePool/SelectTokenModal/ComboBox.tsx
deleted file mode 100644
index 9ce8b939c..000000000
--- a/apps/main/src/dex/components/PageCreatePool/SelectTokenModal/ComboBox.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import type { ComboBoxStateOptions } from 'react-stately'
-
-import { useButton, useComboBox, useFocusRing } from 'react-aria'
-import { useComboBoxState } from '@react-stately/combobox'
-import React, { ChangeEvent, useCallback, useMemo, useRef } from 'react'
-import styled from 'styled-components'
-import { t } from '@ui-kit/lib/i18n'
-
-import debounce from 'lodash/debounce'
-
-import Icon from '@ui/Icon'
-import InputWrapper from '@ui/InputComp'
-import { ListBox } from '@ui/DialogComboBox'
-import { StyledInput } from '@ui/InputComp/styles'
-import { ReactComponent as EditClearSymbolic } from '@ui/images/edit-clear-symbolic.svg'
-import IconButton from '@ui/IconButton'
-import Box from '@ui/Box'
-import Popover from '@ui/Popover'
-
-type Props = {
-  activeKey: string
-  onClose?: () => void
-  quickList?: React.ReactNode
-  listBoxHeight?: string
-  isListboxOpenPermanently: boolean
-  showSearch: boolean
-}
-
-function ComboBox<T extends object>({ listBoxHeight, onClose, showSearch, ...props }: ComboBoxStateOptions<T> & Props) {
-  const { focusProps } = useFocusRing()
-  const state = useComboBoxState(props)
-  const closeButtonRef = useRef<HTMLButtonElement>(null)
-  const topContentRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const listBoxRef = useRef<HTMLUListElement>(null)
-  const popoverRef = useRef<HTMLDivElement>(null)
-
-  const topContentHeight = topContentRef?.current?.getBoundingClientRect()?.height
-
-  const { listBoxProps } = useComboBox(
-    {
-      ...props,
-      inputRef,
-      listBoxRef,
-      popoverRef,
-    },
-    state,
-  )
-
-  const handleBtnClickClear = () => {
-    if (inputRef.current) {
-      inputRef.current.value = ''
-      if (typeof props.onInputChange === 'function') props.onInputChange('')
-    }
-  }
-
-  const handleInpChange = useCallback(
-    (evt: ChangeEvent<HTMLInputElement>) => {
-      if (typeof props.onInputChange === 'function') {
-        props.onInputChange(evt.target.value)
-      }
-    },
-    [props],
-  )
-
-  const debounceInpChange = useMemo(() => debounce(handleInpChange, 700), [handleInpChange])
-
-  const { buttonProps: closeButtonProps } = useButton(
-    {
-      onPress: () => {
-        if (typeof onClose === 'function') onClose()
-      },
-    },
-    closeButtonRef,
-  )
-
-  return (
-    <Popover popoverRef={popoverRef} isOpen={props.isListboxOpenPermanently || state.isOpen} onClose={state.close}>
-      {showSearch && (
-        <StyledBox ref={topContentRef} grid gridTemplateRows="auto 1fr" gridRowGap={0}>
-          <Header grid gridColumnGap={1} gridTemplateColumns="1fr auto">
-            <StyledInputWrapper id="inp-search">
-              <Icon name={'Search'} size={24} aria-label="search icon" />
-
-              <StyledInput
-                placeholder={props.placeholder}
-                ref={inputRef}
-                type="search"
-                onChange={debounceInpChange}
-                defaultValue={props.defaultInputValue}
-              />
-              <StyledIconButton
-                className={!!inputRef?.current?.value ? 'show' : ''}
-                padding={2}
-                onClick={handleBtnClickClear}
-              >
-                <EditClearSymbolic className="svg-tooltip" />
-              </StyledIconButton>
-            </StyledInputWrapper>
-            <IconButton opacity={1} {...closeButtonProps} {...focusProps} ref={closeButtonRef} padding={2}>
-              <Icon name={'Close'} size={32} aria-label="Close" />
-            </IconButton>
-            <p>{t`Type the full token address to add a new token`}</p>
-          </Header>
-          {props.quickList}
-        </StyledBox>
-      )}
-      <ListBoxWrapper boxHeight={listBoxHeight ?? '50vh'} topContentHeight={topContentHeight}>
-        <ListBox
-          {...listBoxProps}
-          activeKey={props.activeKey}
-          shouldUseVirtualFocus
-          listBoxRef={listBoxRef}
-          state={state}
-        />
-      </ListBoxWrapper>
-    </Popover>
-  )
-}
-
-const ListBoxWrapper = styled.div<{ boxHeight: string; topContentHeight: number | undefined }>`
-  padding-top: var(--spacing-3);
-
-  ${({ topContentHeight }) => {
-    if (topContentHeight) {
-      return `height: calc(100vh - ${topContentHeight}px - 1px);`
-    }
-  }};
-
-  @media (min-width: 28.125rem) {
-    height: ${({ boxHeight }) => boxHeight};
-  }
-`
-
-const StyledBox = styled(Box)`
-  padding-top: var(--spacing-narrow);
-  p {
-    font-style: italic;
-    font-size: var(--font-size-1);
-    margin: var(--spacing-2) auto var(--spacing-2);
-  }
-`
-
-const Header = styled(Box)`
-  margin: 1rem 0.5rem 0 1rem;
-`
-
-const StyledIconButton = styled(IconButton)`
-  display: none;
-  min-width: 1.5625rem; //25px
-  opacity: 1;
-  padding: 0;
-
-  &.show {
-    display: inline-block;
-  }
-
-  .svg-tooltip {
-    position: relative;
-    top: 2px;
-  }
-`
-
-const StyledInputWrapper = styled(InputWrapper)`
-  align-items: center;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-column-gap: var(--spacing-2);
-  position: relative;
-  transition: 3s;
-`
-
-export default ComboBox
diff --git a/apps/main/src/dex/components/PageCreatePool/SelectTokenModal/ComboBoxTokenPicker.tsx b/apps/main/src/dex/components/PageCreatePool/SelectTokenModal/ComboBoxTokenPicker.tsx
deleted file mode 100644
index f84104798..000000000
--- a/apps/main/src/dex/components/PageCreatePool/SelectTokenModal/ComboBoxTokenPicker.tsx
+++ /dev/null
@@ -1,457 +0,0 @@
-import { CreateQuickListToken, CreateToken } from '@/dex/components/PageCreatePool/types'
-import { t } from '@ui-kit/lib/i18n'
-import { useButton } from '@react-aria/button'
-import { useFilter } from '@react-aria/i18n'
-import { Key, useMemo, useRef, useState } from 'react'
-import { useOverlayTriggerState } from '@react-stately/overlays'
-import { Item } from '@react-stately/collections'
-import styled from 'styled-components'
-import { breakpoints } from '@ui/utils/responsive'
-import { delayAction, shortenTokenAddress } from '@/dex/utils'
-import useStore from '@/dex/store/useStore'
-import { STABLESWAP } from '@/dex/components/PageCreatePool/constants'
-import ComboBox from '@/dex/components/PageCreatePool/SelectTokenModal/ComboBox'
-import Box from '@ui/Box'
-import Button from '@ui/Button'
-import ModalDialog from '@/dex/components/PageCreatePool/ConfirmModal/ModalDialog'
-import Spinner, { SpinnerWrapper } from '@ui/Spinner'
-import { TokenIcon } from '@ui-kit/shared/ui/TokenIcon'
-import { Chip } from '@ui/Typography'
-import LazyItem from '@ui/LazyItem'
-import Checkbox from '@ui/Checkbox'
-import { ChainId, CurveApi } from '@/dex/types/main.types'
-import { filterTokens } from '@ui-kit/utils'
-
-type Props = {
-  curve: CurveApi
-  chainId: ChainId
-  disabledKeys?: string[]
-  haveSigner: boolean
-  blockchainId: string
-  selectedAddress: string
-  tokens: CreateToken[]
-  onSelectionChange: (selectedAddress: React.Key) => void
-}
-
-type TokenQueryType = '' | 'LOADING' | 'ERROR' | 'DISABLED'
-
-const ComboBoxTokenPicker = ({
-  curve,
-  disabledKeys,
-  chainId,
-  blockchainId,
-  selectedAddress,
-  tokens = [],
-  onSelectionChange,
-}: Props) => {
-  const networks = useStore((state) => state.networks.networks)
-  const visibleTokens = useRef<{ [k: string]: boolean }>({})
-  const overlayTriggerState = useOverlayTriggerState({})
-  const openButtonRef = useRef<HTMLButtonElement>(null)
-  const { buttonProps: openButtonProps } = useButton({ onPress: () => overlayTriggerState.open() }, openButtonRef)
-  const { endsWith } = useFilter({ sensitivity: 'base' })
-
-  const isMobile = useStore((state) => state.isMobile)
-  const isMdUp = useStore((state) => state.isMdUp)
-  const nativeToken = useStore((state) => state.networks.nativeToken[chainId])
-  const updateUserAddedTokens = useStore((state) => state.createPool.updateUserAddedTokens)
-  const { loading } = useStore((state) => state.tokens)
-  const { basePools, basePoolsLoading } = useStore((state) => state.pools)
-  const { swapType } = useStore((state) => state.createPool)
-
-  const [filterValue, setFilterValue] = useState('')
-  const [filterBasepools, setFilterBasepools] = useState(false)
-  const [tokenQueryStatus, setTokenQueryStatus] = useState<TokenQueryType>('')
-
-  const quickList = [
-    {
-      address: nativeToken?.wrappedAddress ?? '',
-      haveSameTokenName: false,
-      symbol: nativeToken?.wrappedSymbol ?? '',
-    },
-    ...networks[chainId].createQuickList,
-  ]
-
-  if (!overlayTriggerState.isOpen) {
-    visibleTokens.current = {}
-  }
-
-  const verifyTokens = async () => {
-    if (disabledKeys?.some((item) => item.toLowerCase() === filterValue.toLowerCase())) {
-      setTokenQueryStatus('DISABLED')
-      return
-    }
-
-    setTokenQueryStatus('LOADING')
-
-    try {
-      const token = await curve.getCoinsData([filterValue])
-      const isBasePool = basePools[chainId].some(
-        (basepool) => basepool.token.toLowerCase() === filterValue.toLowerCase(),
-      )
-      updateUserAddedTokens(filterValue, token[0].symbol, false, isBasePool)
-    } catch (error) {
-      console.log(error)
-      setTokenQueryStatus('ERROR')
-    }
-  }
-
-  // handles search/filtering
-  const items = useMemo(() => {
-    const basePoolsFilteredTokens = filterBasepools
-      ? tokens.filter((item) =>
-          basePools[chainId].some((basepool) => basepool.token.toLowerCase() === item.address.toLowerCase()),
-        )
-      : tokens
-    const enabledTokens = disabledKeys
-      ? basePoolsFilteredTokens.filter(
-          (item) => !disabledKeys.some((i) => i.toLowerCase() === item.address.toLowerCase()),
-        )
-      : basePoolsFilteredTokens
-
-    const filteredResults = filterTokens(filterValue, enabledTokens, endsWith)
-    setTokenQueryStatus('')
-    if (filterValue.length === 42 && filteredResults.length === 0) {
-      verifyTokens()
-    }
-
-    return filteredResults
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterValue, tokens, disabledKeys, filterBasepools])
-
-  const selectedToken = useMemo(
-    () => (selectedAddress ? tokens.find((userToken) => userToken.address === selectedAddress) : null),
-    [selectedAddress, tokens],
-  )
-
-  const handleClose = () => {
-    setFilterValue('')
-    isMobile ? delayAction(overlayTriggerState.close) : overlayTriggerState.close()
-  }
-
-  const handleOnSelectChange = (tokenAddress: Key | null) => {
-    if (tokenAddress) {
-      onSelectionChange(tokenAddress)
-      setFilterBasepools(false)
-    }
-    handleClose()
-  }
-
-  return chainId || basePoolsLoading ? (
-    <>
-      <ComboBoxButton {...openButtonProps} ref={openButtonRef} variant={'filled'} fillWidth>
-        {selectedToken ? (
-          <>
-            <ButtonTokenIcon
-              blockchainId={blockchainId}
-              symbol={selectedToken.symbol}
-              address={selectedToken.address}
-            />
-            <LabelTextWrapper>
-              <SelectedLabelText>
-                {selectedToken.symbol}{' '}
-                {selectedToken.basePool && swapType === STABLESWAP && <BasepoolLabel>{t`BASE`}</BasepoolLabel>}
-              </SelectedLabelText>
-            </LabelTextWrapper>
-            <SelectedLabelAddress>{shortenTokenAddress(selectedToken.address)}</SelectedLabelAddress>
-          </>
-        ) : (
-          <LabelTextWrapper>
-            <PlaceholderSelectedLabelText>{t`Select a token`}</PlaceholderSelectedLabelText>
-          </LabelTextWrapper>
-        )}
-      </ComboBoxButton>
-      {overlayTriggerState.isOpen && (
-        <StyledModalDialog
-          title=""
-          isOpen
-          isDismissable
-          maxWidth="29rem"
-          state={{ ...overlayTriggerState, close: handleClose }}
-        >
-          <ComboBox
-            // quick fix: pass a key prop so the component rerenders when the items change.
-            // there seems to be a bug in react-stately that ignores changes to the items prop.
-            // this component should be replaced soon by MUI, so I won't spend time fixing it.
-            key={items?.length}
-            label=""
-            showSearch
-            aria-label={t`Search by name or paste address`}
-            activeKey={selectedAddress}
-            allowsCustomValue={!isMdUp}
-            disabledKeys={disabledKeys}
-            items={items}
-            isListboxOpenPermanently
-            listBoxHeight="500px"
-            menuTrigger="focus"
-            onClose={handleClose}
-            defaultInputValue={filterValue}
-            onInputChange={setFilterValue}
-            placeholder={t`Search by token name or address`}
-            quickList={
-              <QuickListWrapper>
-                {quickList.map(({ address, symbol }: CreateQuickListToken) => (
-                  <QuickListButton
-                    key={address}
-                    disabled={disabledKeys?.some((item) => item.toLowerCase() === address.toLowerCase())}
-                    variant="icon-outlined"
-                    onClick={() => handleOnSelectChange(address)}
-                  >
-                    <StyledQuickListTokenIcon address={address} blockchainId={blockchainId} symbol={symbol} size="sm" />{' '}
-                    {symbol}
-                  </QuickListButton>
-                ))}
-                <StyledCheckbox
-                  key={'filter-basepools'}
-                  isDisabled={basePools[chainId]?.length === 0}
-                  className={filterBasepools ? 'active' : ''}
-                  isSelected={filterBasepools}
-                  onChange={() => setFilterBasepools(!filterBasepools)}
-                >
-                  View Basepools
-                </StyledCheckbox>
-              </QuickListWrapper>
-            }
-            onSelectionChange={handleOnSelectChange}
-          >
-            {tokenQueryStatus === '' ? (
-              items.length > 0 ? (
-                (item: CreateToken) => (
-                  <Item key={item.address} textValue={item.symbol}>
-                    <ItemWrapper defaultHeight="50px">
-                      <TokenIcon
-                        blockchainId={blockchainId}
-                        symbol={item.symbol}
-                        address={item.ethAddress || item.address}
-                      />
-                      <LabelTextWrapper>
-                        <LabelText>
-                          {item.symbol}{' '}
-                          {item.basePool && swapType === STABLESWAP && <BasepoolLabel>{t`BASE`}</BasepoolLabel>}
-                        </LabelText>
-                        {item.userAddedToken && <UserAddedText>User added</UserAddedText>}
-                      </LabelTextWrapper>
-                      <SelectedLabelAddress>{shortenTokenAddress(item.address)}</SelectedLabelAddress>
-                    </ItemWrapper>
-                  </Item>
-                )
-              ) : loading || basePoolsLoading ? (
-                <Item key={'LOADING'} textValue={'LOADING'}>
-                  <StyledSearchSpinnerWrapper vSpacing={1}>
-                    <Spinner size={15} />
-                  </StyledSearchSpinnerWrapper>
-                </Item>
-              ) : (
-                <Item key={'no-results'} textValue={'No Results'}>
-                  <ItemWrapper defaultHeight="50px">
-                    <LabelTextWrapper>
-                      <ErrorText>{t`Search generated no results`}</ErrorText>
-                    </LabelTextWrapper>
-                  </ItemWrapper>
-                </Item>
-              ) // loading
-            ) : tokenQueryStatus === 'LOADING' ? (
-              <Item key={'LOADING'} textValue={'LOADING'}>
-                <StyledSearchSpinnerWrapper vSpacing={1}>
-                  <Spinner size={15} />
-                </StyledSearchSpinnerWrapper>
-              </Item>
-            ) : tokenQueryStatus === 'ERROR' ? (
-              // no search resuslts
-
-              <Item key={'ERROR'} textValue={'ERROR'}>
-                <ItemWrapper defaultHeight="50px">
-                  <LabelTextWrapper>
-                    <ErrorText>{t`No token found for address ${shortenTokenAddress(filterValue)}`}</ErrorText>
-                  </LabelTextWrapper>
-                </ItemWrapper>
-              </Item>
-            ) : (
-              // disabled token
-
-              <Item key={'disabled-token'} textValue={'Disabled Token'}>
-                <ItemWrapper defaultHeight="50px">
-                  <LabelTextWrapper>
-                    {networks[chainId].createDisabledTokens.some(
-                      (token) => token.toLowerCase() === filterValue.toLowerCase(),
-                    ) ? (
-                      <ErrorText>{t`${filterValue} is a disabled token in Pool Creation`}</ErrorText>
-                    ) : (
-                      <ErrorText>{t`${filterValue} is a disabled token in this pool configuration.`}</ErrorText>
-                    )}
-                  </LabelTextWrapper>
-                </ItemWrapper>
-              </Item>
-            )}
-          </ComboBox>
-        </StyledModalDialog>
-      )}
-    </>
-  ) : (
-    <StyledSpinnerWrapper vSpacing={1}>
-      <Spinner size={15} />
-    </StyledSpinnerWrapper>
-  )
-}
-
-const ItemWrapper = styled(LazyItem)`
-  align-items: center;
-  display: grid;
-  grid-column-gap: var(--spacing-2);
-  grid-template-columns: auto 1fr auto;
-  width: 100%;
-`
-
-const StyledQuickListTokenIcon = styled(TokenIcon)`
-  margin-right: 0.25rem;
-`
-
-const ButtonTokenIcon = styled(TokenIcon)`
-  margin-right: 0.25rem;
-`
-
-const QuickListButton = styled(Button)`
-  margin: 0.25rem;
-  padding: 0.5rem 1rem 0.5rem 1rem;
-  text-transform: none;
-`
-
-const StyledCheckbox = styled(Checkbox)`
-  margin: auto 1.25rem auto auto;
-`
-
-const QuickListWrapper = styled.div`
-  display: none;
-  @media (min-width: 28.125rem) {
-    display: flex;
-    margin: 0 0.75rem;
-    flex-wrap: wrap;
-  }
-`
-
-const StyledSpinnerWrapper = styled(SpinnerWrapper)`
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-2) var(--spacing-narrow);
-  height: 100%;
-
-  text-transform: var(--input_button--text-transform);
-
-  background: var(--layout--home--background-color);
-  color: var(--page--text-color);
-  border: 1px solid var(--nav_button--border-color);
-  box-shadow: 3px 3px 0 var(--box--primary--shadow-color);
-`
-
-const StyledSearchSpinnerWrapper = styled(SpinnerWrapper)`
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-2) var(--spacing-narrow);
-  height: 100%;
-
-  text-transform: var(--input_button--text-transform);
-
-  color: var(--page--text-color);
-`
-
-const SelectedLabelText = styled.span`
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-
-  font-size: var(--font-size-3);
-  font-weight: var(--semi-bold);
-  line-height: 1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const SelectedLabelAddress = styled.span`
-  font-size: var(--font-size-2);
-  font-weight: var(--semi-bold);
-  line-height: 1;
-  margin-left: auto;
-`
-
-const PlaceholderSelectedLabelText = styled(SelectedLabelText)`
-  font-weight: var(--semi-bold);
-  font-size: var(--font-size-2);
-`
-
-const LabelText = styled.div`
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-
-  font-size: var(--font-size-4);
-  font-weight: var(--font-weight--bold);
-  line-height: 1;
-  text-overflow: ellipsis;
-`
-
-const UserAddedText = styled.div`
-  font-size: var(--font-size-1);
-`
-
-const ErrorText = styled.div`
-  font-size: var(--font-size-2);
-  text-align: center;
-  margin: auto;
-`
-
-const LabelTextWrapper = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-top: var(--spacing-1);
-  padding-bottom: var(--spacing-1);
-`
-
-const ComboBoxButton = styled(Button)`
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-2) var(--spacing-narrow);
-  height: 100%;
-  min-height: 2.75rem;
-
-  text-transform: var(--input_button--text-transform);
-
-  background: var(--dialog--background-color);
-  color: var(--page--text-color);
-  border: 1px solid var(--nav_button--border-color);
-  box-shadow: 3px 3px 0 var(--box--primary--shadow-color);
-
-  grid-template-columns: auto 1fr auto;
-
-  transition:
-    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-
-  &:hover {
-    color: var(--button--color);
-    border: 1px solid var(--button--background-color);
-  }
-`
-
-const StyledModalDialog = styled(ModalDialog)`
-  position: fixed;
-  width: 100%;
-
-  @media (min-width: ${breakpoints.lg}rem) {
-    position: relative;
-  }
-`
-
-const BasepoolLabel = styled(Chip)`
-  margin: auto 0 auto var(--spacing-1);
-  font-weight: var(--bold);
-  font-size: var(--font-size-1);
-  padding: 2px;
-  background-color: var(--warning-400);
-  color: var(--black);
-  letter-spacing: 0;
-  height: 15px;
-`
-
-export default ComboBoxTokenPicker
diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectToken.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectToken.tsx
index ab46da811..e405cbc9e 100644
--- a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectToken.tsx
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectToken.tsx
@@ -20,7 +20,7 @@ import {
   TOKEN_G,
   TOKEN_H,
 } from '@/dex/components/PageCreatePool/constants'
-import ComboBoxTokenPicker from '@/dex/components/PageCreatePool/SelectTokenModal/ComboBoxTokenPicker'
+import SelectTokenButton from './SelectTokenButton'
 import Box from '@ui/Box'
 import Checkbox from '@ui/Checkbox'
 import Icon from '@ui/Icon'
@@ -101,7 +101,7 @@ const SelectToken = ({
             </Box>
           </LabelRow>
         )}
-      <ComboBoxTokenPicker
+      <SelectTokenButton
         curve={curve}
         haveSigner={haveSigner}
         disabledKeys={disabledTokens}
diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
new file mode 100644
index 000000000..3e5ab7724
--- /dev/null
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
@@ -0,0 +1,290 @@
+import { CreateToken } from '@/dex/components/PageCreatePool/types'
+import { t } from '@ui-kit/lib/i18n'
+import { useButton } from '@react-aria/button'
+import { useFilter } from '@react-aria/i18n'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useOverlayTriggerState } from '@react-stately/overlays'
+import styled from 'styled-components'
+import { delayAction, shortenTokenAddress } from '@/dex/utils'
+import useStore from '@/dex/store/useStore'
+import { STABLESWAP } from '@/dex/components/PageCreatePool/constants'
+import Box from '@ui/Box'
+import Button from '@ui/Button'
+import Spinner, { SpinnerWrapper } from '@ui/Spinner'
+import { TokenIcon } from '@ui-kit/shared/ui/TokenIcon'
+import { Chip } from '@ui/Typography'
+import Checkbox from '@ui/Checkbox'
+import { ChainId, CurveApi } from '@/dex/types/main.types'
+import { filterTokens } from '@ui-kit/utils'
+import { TokenSelectorModal } from '@ui-kit/features/select-token/ui/modal/TokenSelectorModal'
+
+type Props = {
+  curve: CurveApi
+  chainId: ChainId
+  disabledKeys?: string[]
+  haveSigner: boolean
+  blockchainId: string
+  selectedAddress: string
+  tokens: CreateToken[]
+  onSelectionChange: (selectedAddress: React.Key) => void
+}
+
+const ComboBoxTokenPicker = ({
+  curve,
+  disabledKeys,
+  chainId,
+  blockchainId,
+  selectedAddress,
+  tokens = [],
+  onSelectionChange,
+}: Props) => {
+  const networks = useStore((state) => state.networks.networks)
+  const visibleTokens = useRef<{ [k: string]: boolean }>({})
+  const overlayTriggerState = useOverlayTriggerState({})
+  const openButtonRef = useRef<HTMLButtonElement>(null)
+  const { buttonProps: openButtonProps } = useButton({ onPress: () => overlayTriggerState.open() }, openButtonRef)
+  const { endsWith } = useFilter({ sensitivity: 'base' })
+
+  const isMobile = useStore((state) => state.isMobile)
+  const nativeToken = useStore((state) => state.networks.nativeToken[chainId])
+
+  const userAddedTokens = useStore((state) => state.createPool.userAddedTokens)
+  const updateUserAddedTokens = useStore((state) => state.createPool.updateUserAddedTokens)
+
+  const { basePools, basePoolsLoading } = useStore((state) => state.pools)
+  const { swapType } = useStore((state) => state.createPool)
+
+  const [error, setError] = useState('')
+  const [filterValue, setFilterValue] = useState('')
+  const [filterBasepools, setFilterBasepools] = useState(false)
+
+  const favorites = [
+    {
+      address: nativeToken?.wrappedAddress ?? '',
+      symbol: nativeToken?.wrappedSymbol ?? '',
+    },
+    ...networks[chainId].createQuickList,
+  ].map(({ address, symbol }) => ({
+    chain: blockchainId,
+    address: address as `0x${string}`,
+    symbol,
+    label: '',
+  }))
+
+  if (!overlayTriggerState.isOpen) {
+    visibleTokens.current = {}
+  }
+
+  // handles search/filtering
+  const options = useMemo(() => {
+    const allTokens = filterBasepools
+      ? tokens.filter((item) =>
+          basePools[chainId].some((basepool) => basepool.token.toLowerCase() === item.address.toLowerCase()),
+        )
+      : tokens
+
+    const filteredResults = filterTokens(filterValue, allTokens, endsWith)
+
+    return filteredResults.map((token) => ({
+      chain: blockchainId,
+      address: token.address as `0x${string}`,
+      symbol: token.symbol,
+      label: [token.basePool ? 'Base pool' : '', token.userAddedToken ? 'User added' : '']
+        .filter((x) => x !== '')
+        .join(' - '),
+    }))
+  }, [filterBasepools, tokens, filterValue, endsWith, basePools, chainId, blockchainId])
+
+  useEffect(() => {
+    async function updateUserAddedToken() {
+      const filterValueLowerCase = filterValue.toLocaleLowerCase()
+
+      // If user input is an address and there's 0 results, add user token
+      if (
+        filterValueLowerCase.length === 42 &&
+        options.length === 0 &&
+        !(userAddedTokens ?? []).some((x) => x.address.toLocaleLowerCase() === filterValueLowerCase)
+      ) {
+        try {
+          const token = await curve.getCoinsData([filterValueLowerCase])
+          const isBasePool = basePools[chainId].some(
+            (basepool) => basepool.token.toLowerCase() === filterValueLowerCase,
+          )
+
+          updateUserAddedTokens(filterValueLowerCase, token[0].symbol, false, isBasePool)
+        } catch (error) {
+          console.log(error)
+          setError(error)
+        }
+      }
+    }
+    updateUserAddedToken()
+  }, [basePools, chainId, curve, filterValue, options, updateUserAddedTokens, userAddedTokens])
+
+  const selectedToken = useMemo(
+    () => (selectedAddress ? tokens.find((userToken) => userToken.address === selectedAddress) : null),
+    [selectedAddress, tokens],
+  )
+
+  const handleClose = () => {
+    setFilterValue('')
+    isMobile ? delayAction(overlayTriggerState.close) : overlayTriggerState.close()
+  }
+
+  return chainId || basePoolsLoading ? (
+    <>
+      <ComboBoxButton {...openButtonProps} ref={openButtonRef} variant={'filled'} fillWidth>
+        {selectedToken ? (
+          <>
+            <ButtonTokenIcon
+              blockchainId={blockchainId}
+              symbol={selectedToken.symbol}
+              address={selectedToken.address}
+            />
+            <LabelTextWrapper>
+              <SelectedLabelText>
+                {selectedToken.symbol}{' '}
+                {selectedToken.basePool && swapType === STABLESWAP && <BasepoolLabel>{t`BASE`}</BasepoolLabel>}
+              </SelectedLabelText>
+            </LabelTextWrapper>
+            <SelectedLabelAddress>{shortenTokenAddress(selectedToken.address)}</SelectedLabelAddress>
+          </>
+        ) : (
+          <LabelTextWrapper>
+            <PlaceholderSelectedLabelText>{t`Select a token`}</PlaceholderSelectedLabelText>
+          </LabelTextWrapper>
+        )}
+      </ComboBoxButton>
+      {overlayTriggerState.isOpen && (
+        <TokenSelectorModal
+          tokens={options}
+          favorites={favorites}
+          balances={{}}
+          tokenPrices={{}}
+          showSearch={true}
+          showSettings={true}
+          isOpen={true}
+          compact={false}
+          error={error}
+          disabledTokens={disabledKeys ?? []}
+          customOptions={
+            <StyledCheckbox
+              key={'filter-basepools'}
+              isDisabled={basePools[chainId]?.length === 0}
+              className={filterBasepools ? 'active' : ''}
+              isSelected={filterBasepools}
+              onChange={() => setFilterBasepools(!filterBasepools)}
+            >
+              View Basepools
+            </StyledCheckbox>
+          }
+          onClose={handleClose}
+          onToken={({ address }) => {
+            onSelectionChange(address)
+            setFilterBasepools(false)
+            handleClose()
+          }}
+          onSearch={setFilterValue}
+        />
+      )}
+    </>
+  ) : (
+    <StyledSpinnerWrapper vSpacing={1}>
+      <Spinner size={15} />
+    </StyledSpinnerWrapper>
+  )
+}
+
+const ButtonTokenIcon = styled(TokenIcon)`
+  margin-right: 0.25rem;
+`
+
+const StyledCheckbox = styled(Checkbox)`
+  margin: auto 1.25rem auto auto;
+`
+
+const StyledSpinnerWrapper = styled(SpinnerWrapper)`
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-2) var(--spacing-narrow);
+  height: 100%;
+
+  text-transform: var(--input_button--text-transform);
+
+  background: var(--layout--home--background-color);
+  color: var(--page--text-color);
+  border: 1px solid var(--nav_button--border-color);
+  box-shadow: 3px 3px 0 var(--box--primary--shadow-color);
+`
+
+const SelectedLabelText = styled.span`
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+
+  font-size: var(--font-size-3);
+  font-weight: var(--semi-bold);
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const SelectedLabelAddress = styled.span`
+  font-size: var(--font-size-2);
+  font-weight: var(--semi-bold);
+  line-height: 1;
+  margin-left: auto;
+`
+
+const PlaceholderSelectedLabelText = styled(SelectedLabelText)`
+  font-weight: var(--semi-bold);
+  font-size: var(--font-size-2);
+`
+
+const LabelTextWrapper = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+`
+
+const ComboBoxButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-2) var(--spacing-narrow);
+  height: 100%;
+  min-height: 2.75rem;
+
+  text-transform: var(--input_button--text-transform);
+
+  background: var(--dialog--background-color);
+  color: var(--page--text-color);
+  border: 1px solid var(--nav_button--border-color);
+  box-shadow: 3px 3px 0 var(--box--primary--shadow-color);
+
+  grid-template-columns: auto 1fr auto;
+
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+  &:hover {
+    color: var(--button--color);
+    border: 1px solid var(--button--background-color);
+  }
+`
+
+const BasepoolLabel = styled(Chip)`
+  margin: auto 0 auto var(--spacing-1);
+  font-weight: var(--bold);
+  font-size: var(--font-size-1);
+  padding: 2px;
+  background-color: var(--warning-400);
+  color: var(--black);
+  letter-spacing: 0;
+  height: 15px;
+`
+
+export default ComboBoxTokenPicker
diff --git a/apps/main/src/dex/components/PageCreatePool/types.ts b/apps/main/src/dex/components/PageCreatePool/types.ts
index f14f02f3f..4db67a538 100644
--- a/apps/main/src/dex/components/PageCreatePool/types.ts
+++ b/apps/main/src/dex/components/PageCreatePool/types.ts
@@ -35,7 +35,7 @@ export type CreateQuickListToken = {
 }
 
 export type BasePoolToken = {
-  namne: string
+  name: string
   token: string
   pool: string
 }
diff --git a/apps/main/src/dex/components/PagePool/Swap/index.tsx b/apps/main/src/dex/components/PagePool/Swap/index.tsx
index 2cc67ffc1..fc8275bb8 100644
--- a/apps/main/src/dex/components/PagePool/Swap/index.tsx
+++ b/apps/main/src/dex/components/PagePool/Swap/index.tsx
@@ -30,17 +30,16 @@ import Icon from '@ui/Icon'
 import IconButton from '@ui/IconButton'
 import InputProvider, { InputDebounced, InputMaxBtn } from '@ui/InputComp'
 import Stepper from '@ui/Stepper'
-import TokenComboBox from '@/dex/components/ComboBoxSelectToken'
 import TransferActions from '@/dex/components/PagePool/components/TransferActions'
 import TxInfoBar from '@ui/TxInfoBar'
 import WarningModal from '@/dex/components/PagePool/components/WarningModal'
 import { Balances, CurveApi, PoolAlert, PoolData, TokensMapper } from '@/dex/types/main.types'
 import { notify } from '@ui-kit/features/connect-wallet'
+import { TokenSelector } from '@ui-kit/features/select-token'
 
 const Swap = ({
   chainIdPoolId,
   curve,
-  blockchainId,
   maxSlippage,
   poolAlert,
   poolData,
@@ -52,7 +51,6 @@ const Swap = ({
   userPoolBalancesLoading,
 }: Pick<PageTransferProps, 'curve' | 'params' | 'poolData' | 'poolDataCacheOrApi' | 'routerParams'> & {
   chainIdPoolId: string
-  blockchainId: string
   poolAlert: PoolAlert | null
   maxSlippage: string
   seed: Seed
@@ -88,15 +86,31 @@ const Swap = ({
 
   const poolId = poolData?.pool?.id
   const haveSigner = !!signerAddress
+
   const userFromBalance = userPoolBalances?.[formValues.fromAddress]
   const userToBalance = userPoolBalances?.[formValues.toAddress]
+
   const fromUsdRate = usdRatesMapper[formValues.fromAddress]
   const toUsdRate = usdRatesMapper[formValues.toAddress]
 
-  const { selectList, swapTokensMapper } = useMemo(
-    () => getSwapTokens(tokensMapper, poolDataCacheOrApi),
-    [poolDataCacheOrApi, tokensMapper],
-  )
+  const { selectList, swapTokensMapper } = useMemo(() => {
+    const { selectList, swapTokensMapper } = getSwapTokens(tokensMapper, poolDataCacheOrApi)
+
+    return {
+      selectList: selectList
+        .filter((token) => !!token)
+        .map((token) => ({
+          chain: network?.networkId ?? '',
+          address: token?.address as `0x${string}`,
+          symbol: token?.symbol,
+          label: '',
+        })),
+      swapTokensMapper,
+    }
+  }, [poolDataCacheOrApi, tokensMapper, network?.networkId])
+
+  const fromToken = selectList.find((x) => x.address.toLocaleLowerCase() == formValues.fromAddress)
+  const toToken = selectList.find((x) => x.address.toLocaleLowerCase() == formValues.toAddress)
 
   const updateFormValues = useCallback(
     (updatedFormValues: Partial<FormValues>, isGetMaxFrom: boolean | null, updatedMaxSlippage: string | null) => {
@@ -365,16 +379,16 @@ const Swap = ({
                   updateFormValues({ isFrom: true, fromAmount: '', toAmount: '' }, true, null)
                 }}
               />
-              <TokenComboBox
-                title={t`Select a Token`}
+
+              <TokenSelector
+                selectedToken={fromToken}
+                tokens={selectList}
                 disabled={isDisabled || selectList.length === 0}
-                blockchainId={blockchainId}
-                listBoxHeight="400px"
-                selectedToken={swapTokensMapper[formValues.fromAddress]}
                 showSearch={false}
-                tokens={selectList}
-                onSelectionChange={(value) => {
-                  const val = value as string
+                showSettings={false}
+                compact
+                onToken={(token) => {
+                  const val = token.address
                   const cFormValues = cloneDeep(formValues)
                   if (val === formValues.toAddress) {
                     cFormValues.toAddress = formValues.fromAddress
@@ -448,16 +462,16 @@ const Swap = ({
                 updateFormValues({ isFrom: false, toAmount, fromAmount: '' }, null, '')
               }}
             />
-            <TokenComboBox
-              title={t`Select a Token`}
+
+            <TokenSelector
+              selectedToken={toToken}
+              tokens={selectList}
               disabled={isDisabled || selectList.length === 0}
-              blockchainId={blockchainId}
-              listBoxHeight="400px"
-              selectedToken={swapTokensMapper[formValues.toAddress]}
               showSearch={false}
-              tokens={selectList}
-              onSelectionChange={(value) => {
-                const val = value as string
+              showSettings={false}
+              compact
+              onToken={(token) => {
+                const val = token.address
                 const cFormValues = cloneDeep(formValues)
                 if (val === formValues.fromAddress) {
                   cFormValues.fromAddress = formValues.toAddress
diff --git a/apps/main/src/dex/components/PagePool/index.tsx b/apps/main/src/dex/components/PagePool/index.tsx
index 710b6f551..c6194ff1a 100644
--- a/apps/main/src/dex/components/PagePool/index.tsx
+++ b/apps/main/src/dex/components/PagePool/index.tsx
@@ -252,7 +252,6 @@ const Transfer = (pageTransferProps: PageTransferProps) => {
                     <Swap
                       {...pageTransferProps}
                       chainIdPoolId={chainIdPoolId}
-                      blockchainId={networkId}
                       poolAlert={poolAlert}
                       maxSlippage={maxSlippage}
                       seed={seed}
diff --git a/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableCheckboxHideSmallPools.tsx b/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableCheckboxHideSmallPools.tsx
index cb4ed0784..81fe1809d 100644
--- a/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableCheckboxHideSmallPools.tsx
+++ b/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableCheckboxHideSmallPools.tsx
@@ -1,10 +1,11 @@
 import type { SearchParams } from '@/dex/components/PagePoolList/types'
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import { t } from '@ui-kit/lib/i18n'
 
 import Checkbox from '@ui/Checkbox'
 import { PoolData } from '@/dex/types/main.types'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
 
 const TableCheckboxHideSmallPools = ({
   searchParams,
@@ -16,6 +17,20 @@ const TableCheckboxHideSmallPools = ({
   updatePath(updatedSearchParams: Partial<SearchParams>): void
 }) => {
   const isDisabled = searchParams.filterKey === 'user' || poolDatasCachedOrApi.length < 10
+
+  const hideSmallPools = useUserProfileStore((state) => state.hideSmallPools)
+  const setHideSmallPools = useUserProfileStore((state) => state.setHideSmallPools)
+
+  // If search params change, update user profile setting
+  useEffect(() => {
+    setHideSmallPools(searchParams.hideSmallPools)
+  }, [searchParams, setHideSmallPools])
+
+  // If user profile setting changes, update search params
+  useEffect(() => {
+    updatePath({ hideSmallPools })
+  }, [hideSmallPools, updatePath])
+
   return (
     <Checkbox
       isDisabled={isDisabled}
diff --git a/apps/main/src/dex/components/PageRouterSwap/index.tsx b/apps/main/src/dex/components/PageRouterSwap/index.tsx
index 0415c8185..f8dd4944a 100644
--- a/apps/main/src/dex/components/PageRouterSwap/index.tsx
+++ b/apps/main/src/dex/components/PageRouterSwap/index.tsx
@@ -13,7 +13,6 @@ import { NETWORK_TOKEN, REFRESH_INTERVAL } from '@/dex/constants'
 import { formatNumber } from '@ui/utils'
 import { getActiveStep, getStepStatus } from '@ui/Stepper/helpers'
 import { getTokensMapperStr } from '@/dex/store/createTokensSlice'
-import { getTokensObjList } from '@/dex/store/createQuickSwapSlice'
 import { getChainSignerActiveKey } from '@/dex/utils'
 import usePageVisibleInterval from '@/dex/hooks/usePageVisibleInterval'
 import useSelectToList from '@/dex/components/PageRouterSwap/components/useSelectToList'
@@ -34,12 +33,12 @@ import InputProvider, { InputDebounced, InputMaxBtn } from '@ui/InputComp'
 import FormConnectWallet from '@/dex/components/FormConnectWallet'
 import RouterSwapAlerts from '@/dex/components/PageRouterSwap/components/RouterSwapAlerts'
 import Stepper from '@ui/Stepper'
-import TokenComboBox from '@/dex/components/ComboBoxSelectToken'
 import TxInfoBar from '@ui/TxInfoBar'
 import WarningModal from '@/dex/components/PagePool/components/WarningModal'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
-import { ChainId, CurveApi, Token, TokensMapper } from '@/dex/types/main.types'
+import { ChainId, CurveApi, TokensMapper } from '@/dex/types/main.types'
 import { notify } from '@ui-kit/features/connect-wallet'
+import { TokenSelector } from '@ui-kit/features/select-token'
 
 const QuickSwap = ({
   pageLoaded,
@@ -63,7 +62,8 @@ const QuickSwap = ({
   const curve = useStore((state) => state.curve)
   const { chainId, signerAddress } = curve ?? {}
   const { tokensNameMapper } = useTokensNameMapper(rChainId)
-  const { selectToList, selectToListStr } = useSelectToList(rChainId)
+  const { selectToList } = useSelectToList(rChainId)
+  const selectFromList = useStore((state) => state.quickSwap.selectFromList[chainSignerActiveKey])
   const chainSignerActiveKey = getChainSignerActiveKey(rChainId, signerAddress)
   const activeKey = useStore((state) => state.quickSwap.activeKey)
   const formEstGas = useStore((state) => state.quickSwap.formEstGas[activeKey])
@@ -72,9 +72,8 @@ const QuickSwap = ({
   const isLoadingApi = useStore((state) => state.isLoadingApi)
   const isPageVisible = useStore((state) => state.isPageVisible)
   const routesAndOutput = useStore((state) => state.quickSwap.routesAndOutput[activeKey])
-  const isHideSmallPools = useStore((state) => state.poolList.formValues.hideSmallPools)
+  const hideSmallPools = useUserProfileStore((state) => state.hideSmallPools)
   const isMaxLoading = useStore((state) => state.quickSwap.isMaxLoading)
-  const selectFromList = useStore((state) => state.quickSwap.selectFromList[chainSignerActiveKey])
   const tokensMapperNonSmallTvl = useStore((state) => state.tokens.tokensMapperNonSmallTvl[rChainId] ?? {})
   const userBalancesMapper = useStore((state) => state.userBalances.userBalancesMapper)
   const userBalancesLoading = useStore((state) => state.userBalances.loading)
@@ -98,30 +97,52 @@ const QuickSwap = ({
 
   const isReady = pageLoaded && !isLoadingApi && isPageVisible
   const haveSigner = !!signerAddress
+
   const userFromBalance = userBalancesMapper[fromAddress]
   const userToBalance = userBalancesMapper[toAddress]
+
   const fromUsdRate = usdRatesMapper[fromAddress]
   const toUsdRate = usdRatesMapper[toAddress]
-  const fromToken = tokensNameMapper[fromAddress] ?? ''
-  const toToken = tokensNameMapper[toAddress] ?? ''
 
   const tokensMapperNonSmallTvlStr = useMemo(
     () => getTokensMapperStr(tokensMapperNonSmallTvl),
     [tokensMapperNonSmallTvl],
   )
 
-  const selectFromTokensList = useMemo(
-    () => getTokensObjList(selectFromList ?? selectToList, tokensMapper),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectFromList, selectToListStr, tokensMapperStr],
+  function getTokensObjList(tokensList: string[] | undefined, tokensMapper: TokensMapper | undefined) {
+    if (!tokensList || tokensList.length === 0 || !tokensMapper || Object.keys(tokensMapper).length === 0) return []
+    return tokensList.map((address) => tokensMapper[address])
+  }
+
+  const tokensFrom = useMemo(
+    () =>
+      getTokensObjList(selectFromList ?? selectToList, tokensMapper)
+        .filter((token) => !!token)
+        .map((token) => ({
+          chain: network?.networkId ?? '',
+          address: token?.address as `0x${string}`,
+          symbol: token?.symbol,
+          label: '',
+        })),
+    [selectFromList, selectToList, tokensMapper, network?.networkId],
   )
 
-  const selectToTokensList = useMemo(
-    () => getTokensObjList(selectToList, tokensMapper),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectToListStr, tokensMapperStr],
+  const tokensTo = useMemo(
+    () =>
+      getTokensObjList(selectToList, tokensMapper)
+        .filter((token) => !!token)
+        .map((token) => ({
+          chain: network?.networkId ?? '',
+          address: token?.address as `0x${string}`,
+          symbol: token?.symbol,
+          label: '',
+        })),
+    [selectToList, tokensMapper, network?.networkId],
   )
 
+  const fromToken = tokensFrom.find((x) => x.address.toLocaleLowerCase() == fromAddress)
+  const toToken = tokensTo.find((x) => x.address.toLocaleLowerCase() == toAddress)
+
   const updateFormValues = useCallback(
     (
       updatedFormValues: Partial<FormValues>,
@@ -346,9 +367,9 @@ const QuickSwap = ({
 
   // toToken list
   useEffect(() => {
-    setSelectToList(isReady ? curve : null, isHideSmallPools ? tokensMapperNonSmallTvl : tokensMapper)
+    setSelectToList(isReady ? curve : null, hideSmallPools ? tokensMapperNonSmallTvl : tokensMapper)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isHideSmallPools, isReady, tokensMapperStr, tokensMapperNonSmallTvlStr, volumesMapper])
+  }, [hideSmallPools, isReady, tokensMapperStr, tokensMapperNonSmallTvlStr, volumesMapper])
 
   // re-fetch data
   usePageVisibleInterval(() => fetchData(), REFRESH_INTERVAL['15s'], isPageVisible)
@@ -362,8 +383,8 @@ const QuickSwap = ({
       isReady ? formStatus : { ...formStatus, formProcessing: true },
       formValues,
       searchedParams,
-      toToken,
-      fromToken,
+      toToken?.address ?? '',
+      fromToken?.address ?? '',
     )
     setSteps(updatedSteps)
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -407,20 +428,15 @@ const QuickSwap = ({
                 testId="max"
                 onClick={() => updateFormValues({ isFrom: true, toAmount: '' }, true)}
               />
-              <TokenComboBox
-                title=""
-                disabled={isDisable}
-                blockchainId={network?.networkId ?? ''}
-                listBoxHeight="500px"
-                selectedToken={tokensMapper[searchedParams.fromAddress]}
-                showCheckboxHideSmallPools
-                showSearch
-                showBalances={haveSigner}
-                testId="from-token"
-                tokens={selectFromTokensList as Token[]}
-                onOpen={() => setSelectFromList(curve, selectToList)}
-                onSelectionChange={(value) => {
-                  const fromAddress = value as string
+
+              <TokenSelector
+                selectedToken={fromToken}
+                tokens={tokensFrom}
+                balances={userBalancesMapper}
+                disabled={isDisable || !fromToken}
+                tokenPrices={usdRatesMapper}
+                onToken={(token) => {
+                  const fromAddress = token.address
                   const toAddress =
                     fromAddress === searchedParams.toAddress ? searchedParams.fromAddress : searchedParams.toAddress
                   resetFormErrors()
@@ -466,18 +482,14 @@ const QuickSwap = ({
               value={formValues.toAmount}
               onChange={(toAmount) => updateFormValues({ isFrom: false, toAmount, fromAmount: '' })}
             />
-            <TokenComboBox
-              title=""
-              disabled={isDisable}
-              blockchainId={network?.networkId ?? ''}
-              listBoxHeight="500px"
-              selectedToken={tokensMapper[searchedParams.toAddress]}
-              showCheckboxHideSmallPools
-              showSearch
-              testId="to-token"
-              tokens={selectToTokensList as Token[]}
-              onSelectionChange={(value) => {
-                const toAddress = value as string
+            <TokenSelector
+              selectedToken={toToken}
+              tokens={tokensTo}
+              balances={userBalancesMapper}
+              disabled={isDisable || !toToken}
+              tokenPrices={usdRatesMapper}
+              onToken={(token) => {
+                const toAddress = token.address
                 const fromAddress =
                   toAddress === searchedParams.fromAddress ? searchedParams.toAddress : searchedParams.fromAddress
                 resetFormErrors()
diff --git a/apps/main/src/dex/entities/token/index.ts b/apps/main/src/dex/entities/token/index.ts
deleted file mode 100644
index 99b409687..000000000
--- a/apps/main/src/dex/entities/token/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './lib'
diff --git a/apps/main/src/dex/entities/token/lib.ts b/apps/main/src/dex/entities/token/lib.ts
deleted file mode 100644
index c32af8149..000000000
--- a/apps/main/src/dex/entities/token/lib.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useMemo } from 'react'
-import type { Address } from 'viem'
-import useTokensMapper from '@/dex/hooks/useTokensMapper'
-import useStore from '@/dex/store/useStore'
-import { Token } from '@/dex/types/main.types'
-import { ChainId } from '@/dex/types/main.types'
-
-export const useTokens = (addresses: (Address | undefined)[]): { data: (Token | undefined)[] } => {
-  const chainId = useStore((state) => state.curve?.chainId ?? (0 as ChainId))
-  const { tokensMapper } = useTokensMapper(chainId)
-
-  const tokensKey = JSON.stringify(addresses)
-
-  const tokens = useMemo(
-    () => addresses.map((address) => (address ? tokensMapper[address] : undefined)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [tokensKey, tokensMapper],
-  )
-
-  return { data: tokens }
-}
-
-export const useTokensUSDRates = (tokens: (Address | undefined)[]): { data: (number | undefined)[] } => {
-  const usdRatesMapper = useStore((state) => state.usdRates.usdRatesMapper)
-
-  const tokensKey = JSON.stringify(tokens)
-
-  const usdRates = useMemo(
-    () => tokens.map((token) => (token ? usdRatesMapper[token] : undefined)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [tokensKey, usdRatesMapper],
-  )
-
-  return { data: usdRates }
-}
diff --git a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
index a65d5f816..d202133d4 100644
--- a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
+++ b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
@@ -3,12 +3,13 @@ import React, { useEffect, useMemo } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { type Address, isAddressEqual, zeroAddress } from 'viem'
 import type { AddRewardFormValues } from '@/dex/features/add-gauge-reward-token/types'
-import { FlexItemToken, StyledTokenComboBox, SubTitle } from '@/dex/features/add-gauge-reward-token/ui'
+import { FlexItemToken, SubTitle } from '@/dex/features/add-gauge-reward-token/ui'
 import { useGaugeRewardsDistributors } from '@/dex/entities/gauge'
 import { NETWORK_TOKEN } from '@/dex/constants'
 import useTokensMapper from '@/dex/hooks/useTokensMapper'
 import useStore from '@/dex/store/useStore'
 import { ChainId, Token } from '@/dex/types/main.types'
+import { TokenSelector as TokenSelectorUIKit } from '@ui-kit/features/select-token'
 
 export const TokenSelector: React.FC<{ chainId: ChainId; poolId: string; disabled: boolean }> = ({
   chainId,
@@ -20,6 +21,7 @@ export const TokenSelector: React.FC<{ chainId: ChainId; poolId: string; disable
   const network = useStore((state) => state.networks.networks[chainId])
   const rewardTokenId = watch('rewardTokenId')
   const { tokensMapper } = useTokensMapper(chainId)
+
   const { data: gaugeRewardsDistributors, isSuccess: isGaugeRewardsDistributorsSuccess } = useGaugeRewardsDistributors({
     chainId,
     poolId,
@@ -27,16 +29,25 @@ export const TokenSelector: React.FC<{ chainId: ChainId; poolId: string; disable
 
   const filteredTokens = useMemo(() => {
     const gaugeRewardTokens = Object.keys(gaugeRewardsDistributors || {})
-    return Object.values(tokensMapper).filter(
-      (token): token is Token =>
-        token !== undefined &&
-        token.decimals === 18 &&
-        !aliasesCrv &&
-        ![...gaugeRewardTokens, zeroAddress, NETWORK_TOKEN, aliasesCrv].some((rewardToken) =>
-          isAddressEqual(rewardToken as Address, token.address as Address),
-        ),
-    )
-  }, [gaugeRewardsDistributors, tokensMapper, aliasesCrv])
+    return Object.values(tokensMapper)
+      .filter(
+        (token): token is Token =>
+          token !== undefined &&
+          token.decimals === 18 &&
+          !aliasesCrv &&
+          ![...gaugeRewardTokens, zeroAddress, NETWORK_TOKEN, aliasesCrv].some((rewardToken) =>
+            isAddressEqual(rewardToken as Address, token.address as Address),
+          ),
+      )
+      .map((token) => ({
+        chain: network?.networkId ?? '',
+        address: token?.address as `0x${string}`,
+        symbol: token?.symbol,
+        label: '',
+      }))
+  }, [gaugeRewardsDistributors, tokensMapper, aliasesCrv, network.networkId])
+
+  const selectedToken = filteredTokens.find((x) => x.address === rewardTokenId)
 
   useEffect(() => {
     if (!isGaugeRewardsDistributorsSuccess) return
@@ -54,17 +65,17 @@ export const TokenSelector: React.FC<{ chainId: ChainId; poolId: string; disable
   return (
     <FlexItemToken>
       <SubTitle>{t`Token`}</SubTitle>
-      <StyledTokenComboBox
-        title={t`Select a Token`}
-        blockchainId={network?.networkId}
-        listBoxHeight="400px"
-        selectedToken={rewardTokenId ? tokensMapper[rewardTokenId] : undefined}
-        showSearch={true}
+      <TokenSelectorUIKit
+        selectedToken={selectedToken}
         tokens={filteredTokens}
-        onSelectionChange={(value) => {
-          setValue('rewardTokenId', value as Address, { shouldValidate: true })
+        disabled={disabled || filteredTokens.length === 0}
+        onToken={(token) => {
+          setValue('rewardTokenId', token.address, { shouldValidate: true })
+        }}
+        sx={{
+          width: '100%',
+          height: '100%',
         }}
-        disabled={disabled}
       />
     </FlexItemToken>
   )
diff --git a/apps/main/src/dex/features/add-gauge-reward-token/ui/styled.tsx b/apps/main/src/dex/features/add-gauge-reward-token/ui/styled.tsx
index 298025075..b16e9de8c 100644
--- a/apps/main/src/dex/features/add-gauge-reward-token/ui/styled.tsx
+++ b/apps/main/src/dex/features/add-gauge-reward-token/ui/styled.tsx
@@ -1,6 +1,5 @@
 import Button from '@ui/Button'
 import styled from 'styled-components'
-import TokenComboBox from '@/dex/components/ComboBoxSelectToken'
 
 export const FlexItemToken = styled.div`
   flex: 0 0 auto;
@@ -22,7 +21,3 @@ export const StyledButton = styled(Button)`
   max-width: 100%;
   box-sizing: border-box;
 `
-
-export const StyledTokenComboBox = styled(TokenComboBox)`
-  height: var(--height-medium);
-`
diff --git a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
index 786fd93fc..eb158dc1c 100644
--- a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
+++ b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
@@ -1,6 +1,6 @@
 import { InputDebounced, InputMaxBtn } from '@ui/InputComp'
 import { t } from '@ui-kit/lib/i18n'
-import { useCallback, useMemo, type Key } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { Address, isAddressEqual } from 'viem'
 import { NETWORK_TOKEN } from '@/dex/constants'
@@ -12,7 +12,6 @@ import {
   FlexItemMaxBtn,
   FlexItemToken,
   StyledInputProvider,
-  StyledTokenComboBox,
 } from '@/dex/features/deposit-gauge-reward/ui/styled'
 import {
   useDepositRewardApproveIsMutating,
@@ -20,16 +19,16 @@ import {
   useGaugeRewardsDistributors,
 } from '@/dex/entities/gauge'
 import { useIsSignerConnected, useSignerAddress, useTokensBalances } from '@/dex/entities/signer'
-import { useTokens } from '@/dex/entities/token'
 import { FlexContainer } from '@ui/styled-containers'
 import { ChainId, Token } from '@/dex/types/main.types'
 import { formatNumber } from '@ui/utils'
+import { type TokenOption, TokenSelector } from '@ui-kit/features/select-token'
 
 export const AmountTokenInput: React.FC<{
   chainId: ChainId
   poolId: string
 }> = ({ chainId, poolId }) => {
-  const { setValue, getValues, formState, watch, setError, clearErrors } = useFormContext<DepositRewardFormValues>()
+  const { setValue, getValues, formState, watch } = useFormContext<DepositRewardFormValues>()
   const rewardTokenId = watch('rewardTokenId')
   const amount = watch('amount')
   const epoch = watch('epoch')
@@ -39,10 +38,10 @@ export const AmountTokenInput: React.FC<{
   const isMaxLoading = useStore((state) => state.quickSwap.isMaxLoading)
   const { networkId } = useStore((state) => state.networks.networks[chainId])
 
+  const userBalancesMapper = useStore((state) => state.userBalances.userBalancesMapper)
+  const tokenPrices = useStore((state) => state.usdRates.usdRatesMapper)
+
   const { tokensMapper } = useTokensMapper(chainId)
-  const {
-    data: [token],
-  } = useTokens([rewardTokenId])
 
   const { data: rewardDistributors, isPending: isPendingRewardDistributors } = useGaugeRewardsDistributors({
     chainId,
@@ -57,30 +56,39 @@ export const AmountTokenInput: React.FC<{
     isLoading: isTokenBalancesLoading,
   } = useTokensBalances([rewardTokenId])
 
-  const filteredTokens = useMemo<Token[]>(() => {
+  const filteredTokens = useMemo<TokenOption[]>(() => {
     if (isPendingRewardDistributors || !rewardDistributors || !signerAddress) return []
 
     const activeRewardTokens = Object.entries(rewardDistributors)
       .filter(([_, distributor]) => isAddressEqual(distributor as Address, signerAddress))
       .map(([tokenId]) => tokenId)
 
-    const filteredTokens = Object.values(tokensMapper).filter(
-      (token): token is Token =>
-        token !== undefined &&
-        activeRewardTokens.some((rewardToken) => isAddressEqual(rewardToken as Address, token.address as Address)),
-    )
+    const filteredTokens = Object.values(tokensMapper)
+      .filter(
+        (token): token is Token =>
+          token !== undefined &&
+          activeRewardTokens.some((rewardToken) => isAddressEqual(rewardToken as Address, token.address as Address)),
+      )
+      .map((token) => ({
+        chain: networkId ?? '',
+        address: token?.address as `0x${string}`,
+        symbol: token?.symbol,
+        label: '',
+      }))
 
     const rewardTokenId = getValues('rewardTokenId')
     if (
       rewardTokenId &&
       filteredTokens.length > 0 &&
-      !filteredTokens.some((token) => isAddressEqual(token.address as Address, rewardTokenId))
+      !filteredTokens.some((token) => isAddressEqual(token.address, rewardTokenId))
     ) {
-      setValue('rewardTokenId', filteredTokens[0].address as Address, { shouldValidate: true })
+      setValue('rewardTokenId', filteredTokens[0].address, { shouldValidate: true })
     }
 
     return filteredTokens
-  }, [isPendingRewardDistributors, rewardDistributors, signerAddress, tokensMapper, getValues, setValue])
+  }, [isPendingRewardDistributors, rewardDistributors, signerAddress, tokensMapper, getValues, networkId, setValue])
+
+  const token = filteredTokens.find((x) => x.address === rewardTokenId)
 
   const onChangeAmount = useCallback(
     (amount: string) => {
@@ -90,9 +98,9 @@ export const AmountTokenInput: React.FC<{
   )
 
   const onChangeToken = useCallback(
-    (value: Key) => {
-      if (rewardTokenId && isAddressEqual(value as Address, rewardTokenId)) return
-      setValue('rewardTokenId', value as Address, { shouldValidate: true })
+    (value: TokenOption) => {
+      if (rewardTokenId && isAddressEqual(value.address, rewardTokenId)) return
+      setValue('rewardTokenId', value.address, { shouldValidate: true })
       setValue('step', DepositRewardStep.APPROVAL, { shouldValidate: true })
     },
     [rewardTokenId, setValue],
@@ -142,19 +150,13 @@ export const AmountTokenInput: React.FC<{
           />
         </FlexItemMaxBtn>
         <FlexItemToken>
-          <StyledTokenComboBox
-            title=""
-            disabled={isDisabled}
-            blockchainId={networkId}
-            listBoxHeight="500px"
+          <TokenSelector
             selectedToken={token}
-            showCheckboxHideSmallPools
-            showSearch
-            showBalances={haveSigner}
-            testId="deposit-token"
             tokens={filteredTokens}
-            onOpen={undefined}
-            onSelectionChange={onChangeToken}
+            disabled={isDisabled}
+            balances={userBalancesMapper}
+            tokenPrices={tokenPrices}
+            onToken={onChangeToken}
           />
         </FlexItemToken>
       </StyledInputProvider>
diff --git a/apps/main/src/dex/features/deposit-gauge-reward/ui/HelperFields.tsx b/apps/main/src/dex/features/deposit-gauge-reward/ui/HelperFields.tsx
index c876f7a99..ab5b9d888 100644
--- a/apps/main/src/dex/features/deposit-gauge-reward/ui/HelperFields.tsx
+++ b/apps/main/src/dex/features/deposit-gauge-reward/ui/HelperFields.tsx
@@ -1,18 +1,25 @@
+import { useMemo } from 'react'
 import { useFormContext } from 'react-hook-form'
 import FieldHelperUsdRate from '@/dex/components/FieldHelperUsdRate'
 import { type DepositRewardFormValues } from '@/dex/features/deposit-gauge-reward/types'
-import { useTokensUSDRates } from '@/dex/entities/token'
 import { FlexContainer } from '@ui/styled-containers'
 import { ChainId } from '@/dex/types/main.types'
+import useStore from '@/dex/store/useStore'
 
 export const HelperFields: React.FC<{ chainId: ChainId; poolId: string }> = ({ chainId, poolId }) => {
   const { watch } = useFormContext<DepositRewardFormValues>()
   const rewardTokenId = watch('rewardTokenId')
   const amount = watch('amount')
 
-  const {
-    data: [tokenUsdRate],
-  } = useTokensUSDRates([rewardTokenId])
+  const usdRatesMapper = useStore((state) => state.usdRates.usdRatesMapper)
+  const tokens = [rewardTokenId]
+  const tokensKey = JSON.stringify(tokens)
+
+  const [tokenUsdRate] = useMemo(
+    () => tokens.map((token) => (token ? usdRatesMapper[token] : undefined)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [tokensKey, usdRatesMapper],
+  )
 
   return (
     <FlexContainer>
diff --git a/apps/main/src/dex/features/deposit-gauge-reward/ui/styled.tsx b/apps/main/src/dex/features/deposit-gauge-reward/ui/styled.tsx
index ded92772a..f6de191d1 100644
--- a/apps/main/src/dex/features/deposit-gauge-reward/ui/styled.tsx
+++ b/apps/main/src/dex/features/deposit-gauge-reward/ui/styled.tsx
@@ -1,6 +1,5 @@
 import InputProvider from '@ui/InputComp'
 import styled from 'styled-components'
-import TokenComboBox from '@/dex/components/ComboBoxSelectToken'
 
 export const StyledInputProvider = styled(InputProvider)`
   width: 100%;
@@ -21,10 +20,6 @@ export const FlexItemToken = styled.div`
   flex: 0 0 120px;
 `
 
-export const StyledTokenComboBox = styled(TokenComboBox)`
-  height: var(--height-x-large);
-`
-
 export const EpochLabel = styled.label`
   align-self: center;
   font-size: var(--font-size-2);
diff --git a/apps/main/src/dex/store/createGlobalSlice.ts b/apps/main/src/dex/store/createGlobalSlice.ts
index e178f6b6f..a4f34a73b 100644
--- a/apps/main/src/dex/store/createGlobalSlice.ts
+++ b/apps/main/src/dex/store/createGlobalSlice.ts
@@ -202,9 +202,6 @@ const createGlobalSlice = (set: SetState<State>, get: GetState<State>): GlobalSl
       return
     }
 
-    // default hideSmallPools to false if poolIds length < 10
-    state.poolList.setStateByKey('formValues', { ...state.poolList.formValues, hideSmallPools: poolIds.length > 10 })
-
     // TODO: Temporary code to determine if there is an issue with getting base APY from  Kava Api (https://api.curve.fi/api/getFactoryAPYs-kava)
     const failedFetching24hOldVprice: { [poolAddress: string]: boolean } =
       chainId === 2222 ? await curvejsApi.network.getFailedFetching24hOldVprice() : {}
diff --git a/apps/main/src/dex/store/createNetworksSlice.ts b/apps/main/src/dex/store/createNetworksSlice.ts
index 359b38f14..f4be5341a 100644
--- a/apps/main/src/dex/store/createNetworksSlice.ts
+++ b/apps/main/src/dex/store/createNetworksSlice.ts
@@ -175,7 +175,6 @@ const defaultNetworks = Object.entries({
   },
   [Chain.Kava]: {
     poolFilters: ['all', 'usd', 'btc', 'kava', 'crypto', 'tricrypto', 'stableng', 'others', 'user'],
-    poolListFormValuesDefault: { hideSmallPools: false }, // remove if Kava have > 10 pools
     swap: {
       fromAddress: '0x765277eebeca2e31912c9946eae1021199b39c61',
       toAddress: '0xb44a9b6905af7c801311e8f4e76932ee959c663c',
diff --git a/apps/main/src/dex/store/createPoolListSlice.ts b/apps/main/src/dex/store/createPoolListSlice.ts
index 6a29eb1e7..fd7ee2346 100644
--- a/apps/main/src/dex/store/createPoolListSlice.ts
+++ b/apps/main/src/dex/store/createPoolListSlice.ts
@@ -159,7 +159,10 @@ const createPoolListSlice = (set: SetState<State>, get: GetState<State>): PoolLi
         networks: { networks },
       } = get()
       const { hideSmallPoolsTvl } = networks[chainId]
-      return poolDatas.filter(({ pool }) => +(tvlMapper?.[pool.id]?.value || '0') > hideSmallPoolsTvl)
+
+      return poolDatas.length < 10
+        ? poolDatas
+        : poolDatas.filter(({ pool }) => +(tvlMapper?.[pool.id]?.value || '0') > hideSmallPoolsTvl)
     },
     sortFn: (sortKey, order, poolDatas, rewardsApyMapper, tvlMapper, volumeMapper, campaignRewardsMapper) => {
       if (poolDatas.length === 0) {
diff --git a/apps/main/src/dex/store/createQuickSwapSlice.ts b/apps/main/src/dex/store/createQuickSwapSlice.ts
index d7cf1856b..f1dbd2211 100644
--- a/apps/main/src/dex/store/createQuickSwapSlice.ts
+++ b/apps/main/src/dex/store/createQuickSwapSlice.ts
@@ -641,9 +641,4 @@ function getRouterWarningModal(
   return null
 }
 
-export function getTokensObjList(tokensList: string[] | undefined, tokensMapper: TokensMapper | undefined) {
-  if (!tokensList || tokensList.length === 0 || !tokensMapper || Object.keys(tokensMapper).length === 0) return []
-  return tokensList.map((address) => tokensMapper[address])
-}
-
 export default createQuickSwapSlice
diff --git a/apps/main/src/dex/store/createSelectTokenSlice.tsx b/apps/main/src/dex/store/createSelectTokenSlice.tsx
deleted file mode 100644
index 2af60b9ba..000000000
--- a/apps/main/src/dex/store/createSelectTokenSlice.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { GetState, SetState } from 'zustand'
-import type { State } from '@/dex/store/useStore'
-import cloneDeep from 'lodash/cloneDeep'
-import { Token } from '@/dex/types/main.types'
-import { filterTokens } from '@ui-kit/utils'
-
-type StateKey = keyof typeof DEFAULT_STATE
-
-type SliceState = {
-  filterValue: string
-  selectTokensResult: Token[]
-}
-
-type FilterOptions = {
-  showSearch?: boolean
-  endsWith(string: string, substring: string): boolean
-}
-
-const sliceKey = 'selectToken'
-
-export type SelectTokenSlice = {
-  [sliceKey]: SliceState & {
-    filterFn(filterValue: string, tokens: Token[], filterOptions: FilterOptions): Token[]
-    setFilterValue(filterValue: string, tokens: Token[], filterOptions: FilterOptions): void
-
-    setStateByActiveKey<T>(key: StateKey, activeKey: string, value: T): void
-    setStateByKey<T>(key: StateKey, value: T): void
-    setStateByKeys(SliceState: Partial<SliceState>): void
-    resetState(): void
-  }
-}
-
-const DEFAULT_STATE: SliceState = {
-  filterValue: '',
-  selectTokensResult: [],
-}
-
-const createSelectTokenSlice = (set: SetState<State>, get: GetState<State>): SelectTokenSlice => ({
-  [sliceKey]: {
-    ...DEFAULT_STATE,
-
-    filterFn: (filterValue, tokens, { endsWith }) => filterTokens(filterValue, tokens, endsWith),
-    setFilterValue: (filterValue, tokens, filterOptions) => {
-      get()[sliceKey].setStateByKey('filterValue', filterValue)
-
-      // filter result
-      let result = tokens
-
-      if (filterValue && filterOptions.showSearch) {
-        result = get()[sliceKey].filterFn(filterValue, tokens, filterOptions)
-      }
-      get()[sliceKey].setStateByKey('selectTokensResult', result)
-    },
-
-    // slice helpers
-    setStateByActiveKey: (key, activeKey, value) => {
-      get().setAppStateByActiveKey(sliceKey, key, activeKey, value)
-    },
-    setStateByKey: (key, value) => {
-      get().setAppStateByKey(sliceKey, key, value)
-    },
-    setStateByKeys: (sliceState) => {
-      get().setAppStateByKeys(sliceKey, sliceState)
-    },
-    resetState: () => {
-      get().resetAppState(sliceKey, cloneDeep(DEFAULT_STATE))
-    },
-  },
-})
-
-export default createSelectTokenSlice
diff --git a/apps/main/src/dex/store/useStore.ts b/apps/main/src/dex/store/useStore.ts
index aad305f4a..adb1f566a 100644
--- a/apps/main/src/dex/store/useStore.ts
+++ b/apps/main/src/dex/store/useStore.ts
@@ -21,7 +21,6 @@ import createLockedCrvSlice, { LockedCrvSlice } from '@/dex/store/createLockedCr
 import createPoolSwapSlice, { PoolSwapSlice } from '@/dex/store/createPoolSwapSlice'
 import createCreatePoolSlice, { CreatePoolSlice } from '@/dex/store/createCreatePoolSlice'
 import createIntegrationsSlice, { IntegrationsSlice } from '@/dex/store/createIntegrationsSlice'
-import createSelectTokenSlice, { SelectTokenSlice } from '@/dex/store/createSelectTokenSlice'
 import createDeployGaugeSlice, { DeployGaugeSlice } from '@/dex/store/createDeployGaugeSlice'
 import createPoolDepositSlice, { PoolDepositSlice } from '@/dex/store/createPoolDepositSlice'
 import createPoolWithdrawSlice, { PoolWithdrawSlice } from '@/dex/store/createPoolWithdrawSlice'
@@ -45,7 +44,6 @@ export type State = GlobalSlice &
   LockedCrvSlice &
   CreatePoolSlice &
   IntegrationsSlice &
-  SelectTokenSlice &
   DeployGaugeSlice &
   CampaignRewardsSlice
 
@@ -68,7 +66,6 @@ const store = (set: SetState<State>, get: GetState<State>): State => ({
   ...createLockedCrvSlice(set, get),
   ...createCreatePoolSlice(set, get),
   ...createIntegrationsSlice(set, get),
-  ...createSelectTokenSlice(set, get),
   ...createDeployGaugeSlice(set, get),
   ...createCampaignRewardsSlice(set, get),
 })

From d1273b7354dabe8776340daf556488ad5d898030 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Wed, 26 Feb 2025 21:20:07 +0100
Subject: [PATCH 07/30] styling: remove unnecessary checkbox horizontal
 aligment to end

---
 .../PageCreatePool/TokensInPool/SelectTokenButton.tsx     | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
index 3e5ab7724..ec55a2051 100644
--- a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
@@ -168,7 +168,7 @@ const ComboBoxTokenPicker = ({
           error={error}
           disabledTokens={disabledKeys ?? []}
           customOptions={
-            <StyledCheckbox
+            <Checkbox
               key={'filter-basepools'}
               isDisabled={basePools[chainId]?.length === 0}
               className={filterBasepools ? 'active' : ''}
@@ -176,7 +176,7 @@ const ComboBoxTokenPicker = ({
               onChange={() => setFilterBasepools(!filterBasepools)}
             >
               View Basepools
-            </StyledCheckbox>
+            </Checkbox>
           }
           onClose={handleClose}
           onToken={({ address }) => {
@@ -199,10 +199,6 @@ const ButtonTokenIcon = styled(TokenIcon)`
   margin-right: 0.25rem;
 `
 
-const StyledCheckbox = styled(Checkbox)`
-  margin: auto 1.25rem auto auto;
-`
-
 const StyledSpinnerWrapper = styled(SpinnerWrapper)`
   display: flex;
   align-items: center;

From 9065bd5a4d0f7a9377ae54837f340f46a5456e05 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Wed, 26 Feb 2025 21:52:28 +0100
Subject: [PATCH 08/30] styling: fix misaligned modal close button icon

---
 packages/curve-ui-kit/src/shared/ui/ModalDialog.tsx             | 2 +-
 packages/curve-ui-kit/src/themes/card-header/mui-card-header.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/curve-ui-kit/src/shared/ui/ModalDialog.tsx b/packages/curve-ui-kit/src/shared/ui/ModalDialog.tsx
index 2bdc1068b..ef04876b9 100644
--- a/packages/curve-ui-kit/src/shared/ui/ModalDialog.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/ModalDialog.tsx
@@ -38,7 +38,7 @@ export const ModalDialog = ({ children, open, onClose, title, titleAction, foote
     >
       <CardHeader
         action={
-          <IconButton onClick={onClose}>
+          <IconButton onClick={onClose} size="extraSmall">
             <CloseIcon />
           </IconButton>
         }
diff --git a/packages/curve-ui-kit/src/themes/card-header/mui-card-header.ts b/packages/curve-ui-kit/src/themes/card-header/mui-card-header.ts
index 18eb18832..c92e8835f 100644
--- a/packages/curve-ui-kit/src/themes/card-header/mui-card-header.ts
+++ b/packages/curve-ui-kit/src/themes/card-header/mui-card-header.ts
@@ -24,7 +24,7 @@ export const defineMuiCardHeader = (
         },
       ],
     },
-    action: { alignContent: 'center', margin: 0 },
+    action: { alignContent: 'center', alignSelf: 'center', margin: 0 },
     title: {
       ...typography.headingSBold,
       variants: [

From ba11f7f29b2ca470efd5125f6c3ffe90446a55e2 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Wed, 26 Feb 2025 22:23:16 +0100
Subject: [PATCH 09/30] fix: recursive url query toggling by removng
 hidesmallpools from search params

---
 .../src/dex/components/PagePoolList/Page.tsx  |  7 +----
 .../TableCheckboxHideSmallPools.tsx           | 30 ++++---------------
 .../TableSettings/TableSettings.tsx           | 12 ++------
 .../src/dex/components/PagePoolList/index.tsx | 16 ++++++----
 .../src/dex/components/PagePoolList/types.ts  |  1 -
 .../main/src/dex/store/createPoolListSlice.ts | 22 +++++++-------
 6 files changed, 28 insertions(+), 60 deletions(-)

diff --git a/apps/main/src/dex/components/PagePoolList/Page.tsx b/apps/main/src/dex/components/PagePoolList/Page.tsx
index fc26cf3de..2a708473f 100644
--- a/apps/main/src/dex/components/PagePoolList/Page.tsx
+++ b/apps/main/src/dex/components/PagePoolList/Page.tsx
@@ -20,7 +20,6 @@ import Settings from '@/dex/layout/default/Settings'
 
 enum SEARCH {
   filter = 'filter',
-  hideSmallPools = 'hideSmallPools',
   sortBy = 'sortBy',
   order = 'order',
   search = 'search',
@@ -68,14 +67,13 @@ const Page: NextPage = () => {
 
   const updatePath = useCallback(
     (updatedSearchParams: Partial<SearchParams>) => {
-      const { filterKey, hideSmallPools, searchText, sortBy, sortByOrder } = {
+      const { filterKey, searchText, sortBy, sortByOrder } = {
         ...parsedSearchParams,
         ...updatedSearchParams,
       }
       const searchPath = new URLSearchParams(
         [
           [SEARCH.filter, filterKey && filterKey !== 'all' ? filterKey : ''],
-          [SEARCH.hideSmallPools, hideSmallPools ? '' : 'false'],
           [SEARCH.sortBy, sortBy && sortBy !== defaultSortBy ? sortBy : ''],
           [SEARCH.order, sortByOrder && sortByOrder !== 'desc' ? sortByOrder : ''],
           [SEARCH.search, searchText ? encodeURIComponent(searchText) : ''],
@@ -93,7 +91,6 @@ const Page: NextPage = () => {
       const paramFilterKey = (searchParams.get(SEARCH.filter) || 'all').toLowerCase()
       const paramSortBy = (searchParams.get(SEARCH.sortBy) || defaultSortBy).toLowerCase()
       const paramOrder = (searchParams.get(SEARCH.order) || 'desc').toLowerCase()
-      const paramHideSmallPools = searchParams.get(SEARCH.hideSmallPools) || 'true'
       const searchText = decodeURIComponent(searchParams.get(SEARCH.search) || '')
 
       // validate filter key
@@ -101,7 +98,6 @@ const Page: NextPage = () => {
       if ((paramFilterKey === 'user' && !!curve && !curve?.signerAddress) || !foundFilterKey) {
         updatePath({
           filterKey: 'all',
-          hideSmallPools: paramHideSmallPools === 'true',
           sortBy: paramSortBy as SortKey,
           sortByOrder: paramOrder as Order,
           searchText: searchText,
@@ -109,7 +105,6 @@ const Page: NextPage = () => {
       } else {
         setParsedSearchParams({
           filterKey: paramFilterKey as FilterKey,
-          hideSmallPools: paramHideSmallPools === 'true',
           searchText,
           sortBy: (Object.keys(TABLE_LABEL).find((k) => k.toLowerCase() === paramSortBy) ?? defaultSortBy) as SortKey,
           sortByOrder: (['desc', 'asc'].find((k) => k.toLowerCase() === paramOrder) ?? 'desc') as Order,
diff --git a/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableCheckboxHideSmallPools.tsx b/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableCheckboxHideSmallPools.tsx
index 81fe1809d..c4e6b4e46 100644
--- a/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableCheckboxHideSmallPools.tsx
+++ b/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableCheckboxHideSmallPools.tsx
@@ -1,41 +1,21 @@
-import type { SearchParams } from '@/dex/components/PagePoolList/types'
-
-import React, { useEffect } from 'react'
+import React from 'react'
 import { t } from '@ui-kit/lib/i18n'
 
 import Checkbox from '@ui/Checkbox'
 import { PoolData } from '@/dex/types/main.types'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
 
-const TableCheckboxHideSmallPools = ({
-  searchParams,
-  poolDatasCachedOrApi,
-  updatePath,
-}: {
-  searchParams: SearchParams
-  poolDatasCachedOrApi: PoolData[]
-  updatePath(updatedSearchParams: Partial<SearchParams>): void
-}) => {
-  const isDisabled = searchParams.filterKey === 'user' || poolDatasCachedOrApi.length < 10
+const TableCheckboxHideSmallPools = ({ poolDatasCachedOrApi }: { poolDatasCachedOrApi: PoolData[] }) => {
+  const isDisabled = poolDatasCachedOrApi.length < 10
 
   const hideSmallPools = useUserProfileStore((state) => state.hideSmallPools)
   const setHideSmallPools = useUserProfileStore((state) => state.setHideSmallPools)
 
-  // If search params change, update user profile setting
-  useEffect(() => {
-    setHideSmallPools(searchParams.hideSmallPools)
-  }, [searchParams, setHideSmallPools])
-
-  // If user profile setting changes, update search params
-  useEffect(() => {
-    updatePath({ hideSmallPools })
-  }, [hideSmallPools, updatePath])
-
   return (
     <Checkbox
       isDisabled={isDisabled}
-      isSelected={isDisabled ? false : searchParams.hideSmallPools}
-      onChange={(val) => updatePath({ hideSmallPools: val })}
+      isSelected={isDisabled ? false : hideSmallPools}
+      onChange={(val) => setHideSmallPools(val)}
     >
       {t`Hide very small pools`}
     </Checkbox>
diff --git a/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableSettings.tsx b/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableSettings.tsx
index 33f7ef115..5eb305a8b 100644
--- a/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableSettings.tsx
+++ b/apps/main/src/dex/components/PagePoolList/components/TableSettings/TableSettings.tsx
@@ -101,11 +101,7 @@ const TableSettings = ({
             />
             <Box flex gridGap={2}>
               <TableSortSelect searchParams={searchParams} labelsMapper={tableLabels} updatePath={updatePath} />
-              <TableCheckboxHideSmallPools
-                searchParams={searchParams}
-                poolDatasCachedOrApi={poolDatasCachedOrApi}
-                updatePath={updatePath}
-              />
+              <TableCheckboxHideSmallPools poolDatasCachedOrApi={poolDatasCachedOrApi} />
             </Box>
           </>
         ) : (
@@ -116,11 +112,7 @@ const TableSettings = ({
               updateRouteFilterKey={(filterKey) => updatePath({ filterKey: filterKey as FilterKey })}
             />
             <TableSortSelectMobile searchParams={searchParams} labelsMapper={tableLabels} updatePath={updatePath} />
-            <TableCheckboxHideSmallPools
-              searchParams={searchParams}
-              poolDatasCachedOrApi={poolDatasCachedOrApi}
-              updatePath={updatePath}
-            />
+            <TableCheckboxHideSmallPools poolDatasCachedOrApi={poolDatasCachedOrApi} />
           </>
         )}
       </FiltersWrapper>
diff --git a/apps/main/src/dex/components/PagePoolList/index.tsx b/apps/main/src/dex/components/PagePoolList/index.tsx
index 67618ece7..ec04642c4 100644
--- a/apps/main/src/dex/components/PagePoolList/index.tsx
+++ b/apps/main/src/dex/components/PagePoolList/index.tsx
@@ -15,6 +15,7 @@ import TableHeadMobile from '@/dex/components/PagePoolList/components/TableHeadM
 import TableSettings from '@/dex/components/PagePoolList/components/TableSettings/TableSettings'
 import TableRowNoResult from '@/dex/components/PagePoolList/components/TableRowNoResult'
 import { PoolRow } from '@/dex/components/PagePoolList/components/PoolRow'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
 
 const PoolList = ({
   rChainId,
@@ -46,6 +47,7 @@ const PoolList = ({
   const fetchPoolsRewardsApy = useStore((state) => state.pools.fetchPoolsRewardsApy)
   const setFormValues = useStore((state) => state.poolList.setFormValues)
   const { initCampaignRewards, initiated } = useStore((state) => state.campaigns)
+  const hideSmallPools = useUserProfileStore((state) => state.hideSmallPools)
 
   const [showDetail, setShowDetail] = useState('')
 
@@ -103,6 +105,7 @@ const PoolList = ({
         rChainId,
         isLite,
         searchParams,
+        hideSmallPools,
         typeof poolDataMapper !== 'undefined' ? poolDatas : undefined,
         poolDatasCached,
         rewardsApyMapper ?? {},
@@ -115,19 +118,20 @@ const PoolList = ({
       )
     },
     [
+      setFormValues,
+      rChainId,
       isLite,
-      campaignRewardsMapper,
+      hideSmallPools,
       poolDataMapper,
       poolDatas,
       poolDatasCached,
-      rChainId,
       rewardsApyMapper,
-      setFormValues,
+      volumeMapper,
+      volumeMapperCached,
       tvlMapper,
       tvlMapperCached,
       userPoolList,
-      volumeMapper,
-      volumeMapperCached,
+      campaignRewardsMapper,
     ],
   )
 
@@ -147,7 +151,7 @@ const PoolList = ({
 
     updateFormValues(searchParams)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isReady, isReadyWithApiData, chainId, signerAddress, searchParams])
+  }, [isReady, isReadyWithApiData, chainId, signerAddress, searchParams, hideSmallPools])
 
   // init campaignRewardsMapper
   useEffect(() => {
diff --git a/apps/main/src/dex/components/PagePoolList/types.ts b/apps/main/src/dex/components/PagePoolList/types.ts
index 76286f161..d93a69429 100644
--- a/apps/main/src/dex/components/PagePoolList/types.ts
+++ b/apps/main/src/dex/components/PagePoolList/types.ts
@@ -56,7 +56,6 @@ export type PoolListTableLabel = {
 
 export type SearchParams = {
   filterKey: FilterKey
-  hideSmallPools: boolean
   searchText: string
   sortBy: SortKey
   sortByOrder: Order
diff --git a/apps/main/src/dex/store/createPoolListSlice.ts b/apps/main/src/dex/store/createPoolListSlice.ts
index fd7ee2346..126cfec0e 100644
--- a/apps/main/src/dex/store/createPoolListSlice.ts
+++ b/apps/main/src/dex/store/createPoolListSlice.ts
@@ -67,9 +67,9 @@ export type PoolListSlice = {
     filterBySearchText<P extends PartialPoolData>(searchText: string, poolDatas: P[], highlightResult?: boolean): P[]
     filterSmallTvl<P extends PartialPoolData>(poolDatas: P[], tvlMapper: TvlMapper, chainId: ChainId): P[]
     sortFn<P extends PartialPoolData>(sortKey: SortKey, order: Order, poolDatas: P[], rewardsApyMapper: RewardsApyMapper, volumeMapper: VolumeMapper, tvlMapper: TvlMapper, campaignRewardsMapper: CampaignRewardsMapper): P[]
-    setSortAndFilterData(rChainId: ChainId, searchParams: SearchParams, poolDatas: PoolData[], rewardsApyMapper: RewardsApyMapper, volumeMapper: VolumeMapper, tvlMapper: TvlMapper, userPoolList: UserPoolListMapper, campaignRewardsMapper: CampaignRewardsMapper): Promise<void>
+    setSortAndFilterData(rChainId: ChainId, searchParams: SearchParams, hideSmallPools: boolean, poolDatas: PoolData[], rewardsApyMapper: RewardsApyMapper, volumeMapper: VolumeMapper, tvlMapper: TvlMapper, userPoolList: UserPoolListMapper, campaignRewardsMapper: CampaignRewardsMapper): Promise<void>
     setSortAndFilterCachedData(rChainId: ChainId, searchParams: SearchParams, poolDatasCached: PoolDataCache[], volumeMapperCached: { [poolId:string]: { value: string } }, tvlMapperCached: { [poolId:string]: { value: string } }): void
-    setFormValues(rChainId: ChainId, isLite: boolean, searchParams: SearchParams, poolDatas: PoolData[] | undefined, poolDatasCached: PoolDataCache[] | undefined, rewardsApyMapper: RewardsApyMapper | undefined, volumeMapper: VolumeMapper | undefined, volumeMapperCached: ValueMapperCached | undefined, tvlMapper: TvlMapper | undefined, tvlMapperCached: ValueMapperCached | undefined, userPoolList: UserPoolListMapper | undefined, campaignRewardsMapper: CampaignRewardsMapper): void
+    setFormValues(rChainId: ChainId, isLite: boolean, searchParams: SearchParams, hideSmallPools: boolean, poolDatas: PoolData[] | undefined, poolDatasCached: PoolDataCache[] | undefined, rewardsApyMapper: RewardsApyMapper | undefined, volumeMapper: VolumeMapper | undefined, volumeMapperCached: ValueMapperCached | undefined, tvlMapper: TvlMapper | undefined, tvlMapperCached: ValueMapperCached | undefined, userPoolList: UserPoolListMapper | undefined, campaignRewardsMapper: CampaignRewardsMapper): void
 
     setStateByActiveKey<T>(key: StateKey, activeKey: string, value: T): void
     setStateByKey<T>(key: StateKey, value: T): void
@@ -216,6 +216,7 @@ const createPoolListSlice = (set: SetState<State>, get: GetState<State>): PoolLi
     setSortAndFilterData: async (
       rChainId,
       searchParams,
+      hideSmallPools,
       poolDatas,
       rewardsApyMapper,
       volumeMapper,
@@ -227,7 +228,7 @@ const createPoolListSlice = (set: SetState<State>, get: GetState<State>): PoolLi
         pools,
         [sliceKey]: { activeKey, formStatus, result: storedResults, ...sliceState },
       } = get()
-      const { hideSmallPools, searchText, filterKey, sortBy, sortByOrder } = searchParams
+      const { searchText, filterKey, sortBy, sortByOrder } = searchParams
 
       let tablePoolDatas: PoolData[] = [...poolDatas]
 
@@ -319,6 +320,7 @@ const createPoolListSlice = (set: SetState<State>, get: GetState<State>): PoolLi
       rChainId,
       isLite,
       searchParams,
+      hideSmallPools,
       poolDatas,
       poolDatasCached = [],
       rewardsApyMapper = {},
@@ -339,19 +341,14 @@ const createPoolListSlice = (set: SetState<State>, get: GetState<State>): PoolLi
         isLoading: typeof storedResults[activeKey] === 'undefined',
       })
 
-      const { hideSmallPools, searchText, filterKey, sortBy, sortByOrder } = searchParams
+      const { searchText, filterKey, sortBy, sortByOrder } = searchParams
 
       const isDefaultSearchParams =
-        hideSmallPools &&
-        searchText === '' &&
-        filterKey === 'all' &&
-        sortBy === (isLite ? 'tvl' : 'volume') &&
-        sortByOrder === 'desc'
+        searchText === '' && filterKey === 'all' && sortBy === (isLite ? 'tvl' : 'volume') && sortByOrder === 'desc'
 
       // update form values
       formValues = {
         ...formValues,
-        hideSmallPools,
         searchTextByTokensAndAddresses: {},
         searchTextByOther: {},
       }
@@ -380,6 +377,7 @@ const createPoolListSlice = (set: SetState<State>, get: GetState<State>): PoolLi
         sliceState.setSortAndFilterData(
           rChainId,
           searchParams,
+          hideSmallPools,
           poolDatas,
           rewardsApyMapper,
           volumeMapper,
@@ -426,14 +424,14 @@ const createPoolListSlice = (set: SetState<State>, get: GetState<State>): PoolLi
 })
 
 export function getPoolListActiveKey(chainId: ChainId, searchParams: SearchParams) {
-  const { filterKey, hideSmallPools, searchText, sortBy, sortByOrder } = searchParams
+  const { filterKey, searchText, sortBy, sortByOrder } = searchParams
   let parsedSearchText = searchText
   if (searchText && searchText.length > 20) {
     parsedSearchText = chunk(searchText, 5)
       .map((group) => group[0])
       .join('')
   }
-  return `${chainId}-${filterKey}-${hideSmallPools}-${sortBy}-${sortByOrder}-${parsedSearchText}`
+  return `${chainId}-${filterKey}-${sortBy}-${sortByOrder}-${parsedSearchText}`
 }
 
 export default createPoolListSlice

From bfb4f3a2ca1063545c963a17651172f2c6328cd9 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Wed, 26 Feb 2025 23:12:59 +0100
Subject: [PATCH 10/30] fix: create pool token list lost its sorting by volume

---
 .../TokensInPool/SelectTokenButton.tsx        |  1 +
 .../select-token/SelectToken.stories.tsx      |  6 +++++
 .../select-token/ui/TokenSelector.tsx         |  2 ++
 .../select-token/ui/modal/TokenList.tsx       | 23 +++++++++++--------
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
index ec55a2051..f46dd868d 100644
--- a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
@@ -167,6 +167,7 @@ const ComboBoxTokenPicker = ({
           compact={false}
           error={error}
           disabledTokens={disabledKeys ?? []}
+          disableSorting={true}
           customOptions={
             <Checkbox
               key={'filter-basepools'}
diff --git a/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx b/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx
index 5c5fa12e2..69f5af276 100644
--- a/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx
+++ b/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx
@@ -75,6 +75,7 @@ const meta: Meta<typeof TokenSelector> = {
     compact: false,
     error: '',
     disabledTokens: defaultDisabledTokens,
+    disableSorting: false,
     onToken: (token) => console.log('Selected token:', token),
   },
   argTypes: {
@@ -122,10 +123,15 @@ const meta: Meta<typeof TokenSelector> = {
       control: 'object',
       description: 'Array of token addresses that should be disabled in the selector',
     },
+    disableSorting: {
+      control: 'boolean',
+      description: 'Disable automatic sorting so you can apply your own in the tokens property',
+    },
     customOptions: {
       control: false,
       description: 'Adds extra custom options to the modal, below the favorites',
     },
+
     onToken: {
       action: 'token selected',
       description: 'Callback when a token is selected',
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/TokenSelector.tsx b/packages/curve-ui-kit/src/features/select-token/ui/TokenSelector.tsx
index 90349ce43..b727063d4 100644
--- a/packages/curve-ui-kit/src/features/select-token/ui/TokenSelector.tsx
+++ b/packages/curve-ui-kit/src/features/select-token/ui/TokenSelector.tsx
@@ -29,6 +29,7 @@ export const TokenSelector = ({
   compact = false,
   error = '',
   disabledTokens = [],
+  disableSorting = false,
   customOptions,
   onToken,
   onSearch,
@@ -52,6 +53,7 @@ export const TokenSelector = ({
           compact={compact}
           error={error}
           disabledTokens={disabledTokens}
+          disableSorting={disableSorting}
           customOptions={customOptions}
           onClose={closeModal}
           onToken={(token) => {
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
index a261c583a..94586c284 100644
--- a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
@@ -41,6 +41,8 @@ export type TokenListProps = {
   error: string
   /** List of token addresses that should be disabled/unselectable */
   disabledTokens: string[]
+  /** Disable automatic sorting of tokens and apply your own sorting of the tokens property */
+  disableSorting: boolean
   /** Custom React nodes to render below favorites section */
   customOptions: ReactNode
 }
@@ -55,6 +57,7 @@ export const TokenList = ({
   showSearch,
   error,
   disabledTokens,
+  disableSorting,
   customOptions,
   onToken,
   onSearch,
@@ -73,13 +76,14 @@ export const TokenList = ({
   const showFavorites = favorites.length > 0 && !debouncedSearch
 
   // List of all token options
-  const options = useMemo(
-    () =>
-      [...tokens]
-        .filter((token) =>
-          `${token.symbol}${token.address}`.toLocaleLowerCase().includes(debouncedSearch.toLocaleLowerCase()),
-        )
-        .sort((a, b) => {
+  const options = useMemo(() => {
+    const tokensFiltered = [...tokens].filter((token) =>
+      `${token.symbol}${token.address}`.toLocaleLowerCase().includes(debouncedSearch.toLocaleLowerCase()),
+    )
+
+    return disableSorting
+      ? tokensFiltered
+      : tokensFiltered.sort((a, b) => {
           const aBalance = +(balances[a.address] ?? 0)
           const bBalance = +(balances[b.address] ?? 0)
 
@@ -93,9 +97,8 @@ export const TokenList = ({
 
           // Finally sort by label
           return a.symbol.localeCompare(b.symbol)
-        }),
-    [tokens, debouncedSearch, balances, tokenPrices],
-  )
+        })
+  }, [tokens, disableSorting, debouncedSearch, balances, tokenPrices])
 
   return (
     <Stack gap={Spacing.sm} sx={{ overflowY: 'auto' }}>

From 36772eadddce3c09e4983ddffc675a4f528e87ba Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Wed, 26 Feb 2025 23:31:05 +0100
Subject: [PATCH 11/30] feat: add volume sorting to token selector

---
 .../PageCreatePool/TokensInPool/SelectTokenButton.tsx    | 2 ++
 apps/main/src/dex/components/PagePool/Swap/index.tsx     | 1 +
 apps/main/src/dex/components/PageRouterSwap/index.tsx    | 2 ++
 .../features/add-gauge-reward-token/ui/TokenSelector.tsx | 1 +
 .../deposit-gauge-reward/ui/AmountTokenInput.tsx         | 1 +
 apps/main/src/dex/store/createQuickSwapSlice.ts          | 9 +++------
 .../src/features/select-token/SelectToken.stories.tsx    | 4 ++++
 packages/curve-ui-kit/src/features/select-token/types.ts | 1 +
 .../src/features/select-token/ui/modal/TokenList.tsx     | 3 +++
 9 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
index f46dd868d..9e75cb19b 100644
--- a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
@@ -69,6 +69,7 @@ const ComboBoxTokenPicker = ({
     address: address as `0x${string}`,
     symbol,
     label: '',
+    volume: 0,
   }))
 
   if (!overlayTriggerState.isOpen) {
@@ -92,6 +93,7 @@ const ComboBoxTokenPicker = ({
       label: [token.basePool ? 'Base pool' : '', token.userAddedToken ? 'User added' : '']
         .filter((x) => x !== '')
         .join(' - '),
+      volume: token.volume ?? 0,
     }))
   }, [filterBasepools, tokens, filterValue, endsWith, basePools, chainId, blockchainId])
 
diff --git a/apps/main/src/dex/components/PagePool/Swap/index.tsx b/apps/main/src/dex/components/PagePool/Swap/index.tsx
index fc8275bb8..dac6944c9 100644
--- a/apps/main/src/dex/components/PagePool/Swap/index.tsx
+++ b/apps/main/src/dex/components/PagePool/Swap/index.tsx
@@ -104,6 +104,7 @@ const Swap = ({
           address: token?.address as `0x${string}`,
           symbol: token?.symbol,
           label: '',
+          volume: token?.volume ?? 0,
         })),
       swapTokensMapper,
     }
diff --git a/apps/main/src/dex/components/PageRouterSwap/index.tsx b/apps/main/src/dex/components/PageRouterSwap/index.tsx
index f8dd4944a..855218608 100644
--- a/apps/main/src/dex/components/PageRouterSwap/index.tsx
+++ b/apps/main/src/dex/components/PageRouterSwap/index.tsx
@@ -123,6 +123,7 @@ const QuickSwap = ({
           address: token?.address as `0x${string}`,
           symbol: token?.symbol,
           label: '',
+          volume: token?.volume ?? 0,
         })),
     [selectFromList, selectToList, tokensMapper, network?.networkId],
   )
@@ -136,6 +137,7 @@ const QuickSwap = ({
           address: token?.address as `0x${string}`,
           symbol: token?.symbol,
           label: '',
+          volume: token?.volume ?? 0,
         })),
     [selectToList, tokensMapper, network?.networkId],
   )
diff --git a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
index d202133d4..20e16eea8 100644
--- a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
+++ b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
@@ -44,6 +44,7 @@ export const TokenSelector: React.FC<{ chainId: ChainId; poolId: string; disable
         address: token?.address as `0x${string}`,
         symbol: token?.symbol,
         label: '',
+        volume: token?.volume ?? 0,
       }))
   }, [gaugeRewardsDistributors, tokensMapper, aliasesCrv, network.networkId])
 
diff --git a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
index eb158dc1c..79d037657 100644
--- a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
+++ b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
@@ -74,6 +74,7 @@ export const AmountTokenInput: React.FC<{
         address: token?.address as `0x${string}`,
         symbol: token?.symbol,
         label: '',
+        volume: token?.volume ?? 0,
       }))
 
     const rewardTokenId = getValues('rewardTokenId')
diff --git a/apps/main/src/dex/store/createQuickSwapSlice.ts b/apps/main/src/dex/store/createQuickSwapSlice.ts
index f1dbd2211..b89d189c1 100644
--- a/apps/main/src/dex/store/createQuickSwapSlice.ts
+++ b/apps/main/src/dex/store/createQuickSwapSlice.ts
@@ -11,7 +11,6 @@ import type {
 
 import cloneDeep from 'lodash/cloneDeep'
 import isEqual from 'lodash/isEqual'
-import orderBy from 'lodash/orderBy'
 
 import { DEFAULT_FORM_STATUS, DEFAULT_FORM_VALUES, sortTokensByGasFees } from '@/dex/components/PageRouterSwap/utils'
 import { NETWORK_TOKEN } from '@/dex/constants'
@@ -410,11 +409,9 @@ const createQuickSwapSlice = (set: SetState<State>, get: GetState<State>): Quick
 
       const { chainId, signerAddress } = curve
 
-      const selectToList = orderBy(
-        Object.entries(tokensMapper).map(([_, v]) => v!),
-        ({ volume }) => (typeof volume !== 'undefined' ? +volume : 0),
-        ['desc'],
-      ).map(({ address }) => address)
+      const selectToList = Object.entries(tokensMapper)
+        .map(([_, v]) => v!)
+        .map(({ address }) => address)
 
       sliceState.setStateByActiveKey('selectToList', chainId.toString(), selectToList)
 
diff --git a/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx b/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx
index 69f5af276..fd98c1d77 100644
--- a/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx
+++ b/packages/curve-ui-kit/src/features/select-token/SelectToken.stories.tsx
@@ -14,24 +14,28 @@ const defaultTokens: TokenOption[] = [
     address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
     symbol: 'ETH',
     label: 'Ethereum',
+    volume: 1,
   },
   {
     chain: 'ethereum',
     address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
     symbol: 'USDC',
     label: 'Circle Dollar',
+    volume: 2,
   },
   {
     chain: 'ethereum',
     address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
     symbol: 'USDT',
     label: 'Tether Dollar',
+    volume: 3,
   },
   {
     chain: 'ethereum',
     address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
     symbol: 'DAI',
     label: 'Maker DAI',
+    volume: 4,
   },
 ]
 
diff --git a/packages/curve-ui-kit/src/features/select-token/types.ts b/packages/curve-ui-kit/src/features/select-token/types.ts
index 197e60098..7f12fd1f6 100644
--- a/packages/curve-ui-kit/src/features/select-token/types.ts
+++ b/packages/curve-ui-kit/src/features/select-token/types.ts
@@ -5,4 +5,5 @@ export type TokenOption = {
   address: Address
   symbol: string
   label: string
+  volume: number
 }
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
index 94586c284..e73724152 100644
--- a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
@@ -95,6 +95,9 @@ export const TokenList = ({
           // If USD balances are equal, compare raw balances
           if (aBalance !== bBalance) return bBalance - aBalance
 
+          // Sort by volume in descending order
+          if (a.volume !== b.volume) return b.volume - a.volume
+
           // Finally sort by label
           return a.symbol.localeCompare(b.symbol)
         })

From b5c2c9d56e308b8f2aa8ada2a2677d767c06dcc7 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Thu, 27 Feb 2025 18:00:26 +0100
Subject: [PATCH 12/30] fix: incorrect export

---
 .../features/user-profile/settings/hide-small-pools/index.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts b/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts
index 3404f204f..3d855f61c 100644
--- a/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts
+++ b/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts
@@ -1 +1 @@
-export { AdvancedMode } from './AdvancedMode'
+export { HideSmallPools } from './HideSmallPools'

From c168337690bded159bc1c3fa02378e92fbd1bcd6 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 01:31:21 +0100
Subject: [PATCH 13/30] chore: rename component filename

---
 .../src/features/user-profile/settings/Settings.tsx           | 4 ++--
 .../{HideSmallPools.tsx => HideSmallPoolsSetting.tsx}         | 2 +-
 .../features/user-profile/settings/hide-small-pools/index.ts  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/{HideSmallPools.tsx => HideSmallPoolsSetting.tsx} (93%)

diff --git a/packages/curve-ui-kit/src/features/user-profile/settings/Settings.tsx b/packages/curve-ui-kit/src/features/user-profile/settings/Settings.tsx
index a17747544..5be6dff92 100644
--- a/packages/curve-ui-kit/src/features/user-profile/settings/Settings.tsx
+++ b/packages/curve-ui-kit/src/features/user-profile/settings/Settings.tsx
@@ -4,7 +4,7 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 import { AdvancedMode } from './advanced-mode/AdvancedMode'
 import { ThemeSelector } from './theme-selector/ThemeSelector'
-import { HideSmallPools } from './hide-small-pools/HideSmallPools'
+import { HideSmallPoolsSetting } from './hide-small-pools/HideSmallPoolsSetting'
 
 const { Spacing } = SizesAndSpaces
 
@@ -12,6 +12,6 @@ export const Settings = () => (
   <Stack gap={Spacing.md}>
     <ThemeSelector />
     <AdvancedMode />
-    <HideSmallPools />
+    <HideSmallPoolsSetting />
   </Stack>
 )
diff --git a/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/HideSmallPools.tsx b/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/HideSmallPoolsSetting.tsx
similarity index 93%
rename from packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/HideSmallPools.tsx
rename to packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/HideSmallPoolsSetting.tsx
index 2cbd623be..290824459 100644
--- a/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/HideSmallPools.tsx
+++ b/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/HideSmallPoolsSetting.tsx
@@ -4,7 +4,7 @@ import Switch from '@mui/material/Switch'
 import { SettingLabel, Setting } from '../Setting'
 import useUserProfileStore from '../../store'
 
-export const HideSmallPools = () => {
+export const HideSmallPoolsSetting = () => {
   const hideSmallPools = useUserProfileStore((state) => state.hideSmallPools)
   const setHideSmallPools = useUserProfileStore((state) => state.setHideSmallPools)
 
diff --git a/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts b/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts
index 3d855f61c..c623e9fd8 100644
--- a/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts
+++ b/packages/curve-ui-kit/src/features/user-profile/settings/hide-small-pools/index.ts
@@ -1 +1 @@
-export { HideSmallPools } from './HideSmallPools'
+export { HideSmallPoolsSettings as HideSmallPools } from './HideSmallPools'

From 2e6eb62e3a672cfbe038fce87d840a780195fbc3 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 01:34:27 +0100
Subject: [PATCH 14/30] refactor: token icon symbol optional (defaults to empty
 string)

---
 .../src/features/select-token/ui/TokenSelectButton.tsx        | 1 -
 packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx             | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/curve-ui-kit/src/features/select-token/ui/TokenSelectButton.tsx b/packages/curve-ui-kit/src/features/select-token/ui/TokenSelectButton.tsx
index ad0892e29..75ddd4a9b 100644
--- a/packages/curve-ui-kit/src/features/select-token/ui/TokenSelectButton.tsx
+++ b/packages/curve-ui-kit/src/features/select-token/ui/TokenSelectButton.tsx
@@ -16,7 +16,6 @@ const ButtonContent = ({ token, disabled }: { token: TokenOption; disabled: bool
   <Stack direction="row" gap={Spacing.xxs} alignItems="center">
     <TokenIcon
       blockchainId={token.chain}
-      symbol="" // No need for tooltip of symbol as it's displayed right next to it
       address={token.address}
       size="mui-md"
       sx={{
diff --git a/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx b/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx
index dc489109f..8aff1279f 100644
--- a/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx
@@ -13,13 +13,13 @@ const { IconSize } = SizesAndSpaces
 export interface TokenIconProps extends ImgHTMLAttributes<HTMLImageElement> {
   className?: string
   blockchainId: string
-  symbol: string
+  symbol?: string
   address?: string | null
   size?: 'sm' | 'mui-sm' | 'mui-md' | 'xl'
   sx?: SystemStyleObject<Theme>
 }
 
-export const TokenIcon = ({ className = '', blockchainId, symbol, size = 'sm', address, sx }: TokenIconProps) => (
+export const TokenIcon = ({ className = '', blockchainId, symbol = '', size = 'sm', address, sx }: TokenIconProps) => (
   <Tooltip
     title={symbol}
     placement="top"

From 259dec93866a581b87950a5e7cce8a20b1934f4d Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:01:14 +0100
Subject: [PATCH 15/30] styling: error in token modal alert grows in height

---
 .../src/features/select-token/ui/modal/TokenList.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
index e73724152..ab39ab888 100644
--- a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
@@ -134,7 +134,7 @@ export const TokenList = ({
 
       {error ? (
         <Alert variant="filled" severity="error">
-          <AlertTitle>{t`${error}`}</AlertTitle>
+          <AlertTitle sx={{ '&': { height: 'auto' } }}>{t`${error}`}</AlertTitle>
         </Alert>
       ) : (
         <Stack sx={{ overflowY: 'auto' }}>

From 3cddeb009228765e616fb625f78675f426f9e3de Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:05:26 +0100
Subject: [PATCH 16/30] fix: onSearch would be invoked even if search didn't
 change

---
 .../src/features/select-token/ui/modal/TokenList.tsx      | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
index ab39ab888..c09183c9f 100644
--- a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
@@ -67,11 +67,13 @@ export const TokenList = ({
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setDebouncedSearch(search)
-      onSearch(search)
+      if (search !== debouncedSearch) {
+        setDebouncedSearch(search)
+        onSearch(search)
+      }
     }, 200)
     return () => clearTimeout(timer)
-  }, [onSearch, search])
+  }, [debouncedSearch, onSearch, search])
 
   const showFavorites = favorites.length > 0 && !debouncedSearch
 

From 718582fd62206170c18e6259f70415d9fc10168b Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:06:43 +0100
Subject: [PATCH 17/30] fix: error keeps being visible after search has changed

---
 .../PageCreatePool/TokensInPool/SelectTokenButton.tsx        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
index 9e75cb19b..1e8f3c541 100644
--- a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
@@ -187,7 +187,10 @@ const ComboBoxTokenPicker = ({
             setFilterBasepools(false)
             handleClose()
           }}
-          onSearch={setFilterValue}
+          onSearch={(val) => {
+            setFilterValue(val)
+            setError('')
+          }}
         />
       )}
     </>

From e79c5b80448cff91b2c872c3a41cb2aebd0eacf6 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:08:09 +0100
Subject: [PATCH 18/30] fix: error would be visible even after modal closing

---
 .../components/PageCreatePool/TokensInPool/SelectTokenButton.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
index 1e8f3c541..7546a7afb 100644
--- a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
@@ -130,6 +130,7 @@ const ComboBoxTokenPicker = ({
 
   const handleClose = () => {
     setFilterValue('')
+    setError('')
     isMobile ? delayAction(overlayTriggerState.close) : overlayTriggerState.close()
   }
 

From 664557395d7c3f6661361659ef0ccc35c5060dc2 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:32:40 +0100
Subject: [PATCH 19/30] refactor: remove useless memo

---
 .../src/features/select-token/ui/modal/TokenList.tsx        | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
index c09183c9f..a2543d820 100644
--- a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, memo, type ReactNode } from 'react'
+import { useState, useMemo, useEffect, type ReactNode } from 'react'
 import Alert from '@mui/material/Alert'
 import AlertTitle from '@mui/material/AlertTitle'
 import Divider from '@mui/material/Divider'
@@ -17,8 +17,6 @@ import { FavoriteTokens } from './FavoriteTokens'
 import { TokenOption } from './TokenOption'
 
 // Prevent all the token options from re-rendering if only the balance of a single one has changed.
-const MemoizedTokenOption = memo(TokenOption)
-
 export type TokenListCallbacks = {
   /** Callback when a token is selected */
   onToken: (token: Option) => void
@@ -143,7 +141,7 @@ export const TokenList = ({
           {options.length ? (
             <MenuList autoFocusItem autoFocus variant="menu" sx={{ paddingBlock: 0 }}>
               {options.map((token) => (
-                <MemoizedTokenOption
+                <TokenOption
                   key={token.address}
                   {...token}
                   balance={balances[token.address]}

From 972e1e4bd293487d9b64dd04aa97344084bf37ef Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:41:37 +0100
Subject: [PATCH 20/30] chore: fix incorrect variable name

---
 .../PageCreatePool/TokensInPool/SelectTokenButton.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
index 7546a7afb..6cce54818 100644
--- a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
@@ -29,7 +29,7 @@ type Props = {
   onSelectionChange: (selectedAddress: React.Key) => void
 }
 
-const ComboBoxTokenPicker = ({
+const SelectTokenButton = ({
   curve,
   disabledKeys,
   chainId,
@@ -290,4 +290,4 @@ const BasepoolLabel = styled(Chip)`
   height: 15px;
 `
 
-export default ComboBoxTokenPicker
+export default SelectTokenButton

From 8ab8a3d4e61711ea8c309ee23fd06d6f8225efc8 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:45:10 +0100
Subject: [PATCH 21/30] refactor: use Address type

---
 .../PageCreatePool/TokensInPool/SelectTokenButton.tsx       | 6 +++---
 apps/main/src/dex/components/PagePool/Swap/index.tsx        | 3 ++-
 apps/main/src/dex/components/PageRouterSwap/index.tsx       | 5 +++--
 .../features/add-gauge-reward-token/ui/TokenSelector.tsx    | 2 +-
 .../features/deposit-gauge-reward/ui/AmountTokenInput.tsx   | 2 +-
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
index 6cce54818..2eea09d1c 100644
--- a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
@@ -15,7 +15,7 @@ import { TokenIcon } from '@ui-kit/shared/ui/TokenIcon'
 import { Chip } from '@ui/Typography'
 import Checkbox from '@ui/Checkbox'
 import { ChainId, CurveApi } from '@/dex/types/main.types'
-import { filterTokens } from '@ui-kit/utils'
+import { type Address, filterTokens } from '@ui-kit/utils'
 import { TokenSelectorModal } from '@ui-kit/features/select-token/ui/modal/TokenSelectorModal'
 
 type Props = {
@@ -66,7 +66,7 @@ const SelectTokenButton = ({
     ...networks[chainId].createQuickList,
   ].map(({ address, symbol }) => ({
     chain: blockchainId,
-    address: address as `0x${string}`,
+    address: address as Address,
     symbol,
     label: '',
     volume: 0,
@@ -88,7 +88,7 @@ const SelectTokenButton = ({
 
     return filteredResults.map((token) => ({
       chain: blockchainId,
-      address: token.address as `0x${string}`,
+      address: token.address as Address,
       symbol: token.symbol,
       label: [token.basePool ? 'Base pool' : '', token.userAddedToken ? 'User added' : '']
         .filter((x) => x !== '')
diff --git a/apps/main/src/dex/components/PagePool/Swap/index.tsx b/apps/main/src/dex/components/PagePool/Swap/index.tsx
index dac6944c9..bb7511fbf 100644
--- a/apps/main/src/dex/components/PagePool/Swap/index.tsx
+++ b/apps/main/src/dex/components/PagePool/Swap/index.tsx
@@ -36,6 +36,7 @@ import WarningModal from '@/dex/components/PagePool/components/WarningModal'
 import { Balances, CurveApi, PoolAlert, PoolData, TokensMapper } from '@/dex/types/main.types'
 import { notify } from '@ui-kit/features/connect-wallet'
 import { TokenSelector } from '@ui-kit/features/select-token'
+import type { Address } from '@ui-kit/utils'
 
 const Swap = ({
   chainIdPoolId,
@@ -101,7 +102,7 @@ const Swap = ({
         .filter((token) => !!token)
         .map((token) => ({
           chain: network?.networkId ?? '',
-          address: token?.address as `0x${string}`,
+          address: token?.address as Address,
           symbol: token?.symbol,
           label: '',
           volume: token?.volume ?? 0,
diff --git a/apps/main/src/dex/components/PageRouterSwap/index.tsx b/apps/main/src/dex/components/PageRouterSwap/index.tsx
index 855218608..796181a99 100644
--- a/apps/main/src/dex/components/PageRouterSwap/index.tsx
+++ b/apps/main/src/dex/components/PageRouterSwap/index.tsx
@@ -39,6 +39,7 @@ import { useUserProfileStore } from '@ui-kit/features/user-profile'
 import { ChainId, CurveApi, TokensMapper } from '@/dex/types/main.types'
 import { notify } from '@ui-kit/features/connect-wallet'
 import { TokenSelector } from '@ui-kit/features/select-token'
+import type { Address } from '@ui-kit/utils'
 
 const QuickSwap = ({
   pageLoaded,
@@ -120,7 +121,7 @@ const QuickSwap = ({
         .filter((token) => !!token)
         .map((token) => ({
           chain: network?.networkId ?? '',
-          address: token?.address as `0x${string}`,
+          address: token?.address as Address,
           symbol: token?.symbol,
           label: '',
           volume: token?.volume ?? 0,
@@ -134,7 +135,7 @@ const QuickSwap = ({
         .filter((token) => !!token)
         .map((token) => ({
           chain: network?.networkId ?? '',
-          address: token?.address as `0x${string}`,
+          address: token?.address as Address,
           symbol: token?.symbol,
           label: '',
           volume: token?.volume ?? 0,
diff --git a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
index 0c1aa2c25..c1d28d525 100644
--- a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
+++ b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
@@ -45,7 +45,7 @@ export const TokenSelector = ({
       )
       .map((token) => ({
         chain: network?.networkId ?? '',
-        address: token?.address as `0x${string}`,
+        address: token?.address as Address,
         symbol: token?.symbol,
         label: '',
         volume: token?.volume ?? 0,
diff --git a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
index 94ed3a759..88cf98398 100644
--- a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
+++ b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
@@ -68,7 +68,7 @@ export const AmountTokenInput = ({ chainId, poolId }: { chainId: ChainId; poolId
       )
       .map((token) => ({
         chain: networkId ?? '',
-        address: token?.address as `0x${string}`,
+        address: token?.address as Address,
         symbol: token?.symbol,
         label: '',
         volume: token?.volume ?? 0,

From 5b431758d58d7e13e67e9e1b4cf44aa638568f3e Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:49:46 +0100
Subject: [PATCH 22/30] refactor: make token option label optional

---
 .../PageCreatePool/TokensInPool/SelectTokenButton.tsx           | 1 -
 apps/main/src/dex/components/PagePool/Swap/index.tsx            | 1 -
 apps/main/src/dex/components/PageRouterSwap/index.tsx           | 2 --
 .../dex/features/add-gauge-reward-token/ui/TokenSelector.tsx    | 1 -
 .../dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx   | 1 -
 packages/curve-ui-kit/src/features/select-token/types.ts        | 2 +-
 6 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
index 2eea09d1c..1c1e69e02 100644
--- a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
@@ -68,7 +68,6 @@ const SelectTokenButton = ({
     chain: blockchainId,
     address: address as Address,
     symbol,
-    label: '',
     volume: 0,
   }))
 
diff --git a/apps/main/src/dex/components/PagePool/Swap/index.tsx b/apps/main/src/dex/components/PagePool/Swap/index.tsx
index bb7511fbf..eb2d730b1 100644
--- a/apps/main/src/dex/components/PagePool/Swap/index.tsx
+++ b/apps/main/src/dex/components/PagePool/Swap/index.tsx
@@ -104,7 +104,6 @@ const Swap = ({
           chain: network?.networkId ?? '',
           address: token?.address as Address,
           symbol: token?.symbol,
-          label: '',
           volume: token?.volume ?? 0,
         })),
       swapTokensMapper,
diff --git a/apps/main/src/dex/components/PageRouterSwap/index.tsx b/apps/main/src/dex/components/PageRouterSwap/index.tsx
index 796181a99..47e106c3c 100644
--- a/apps/main/src/dex/components/PageRouterSwap/index.tsx
+++ b/apps/main/src/dex/components/PageRouterSwap/index.tsx
@@ -123,7 +123,6 @@ const QuickSwap = ({
           chain: network?.networkId ?? '',
           address: token?.address as Address,
           symbol: token?.symbol,
-          label: '',
           volume: token?.volume ?? 0,
         })),
     [selectFromList, selectToList, tokensMapper, network?.networkId],
@@ -137,7 +136,6 @@ const QuickSwap = ({
           chain: network?.networkId ?? '',
           address: token?.address as Address,
           symbol: token?.symbol,
-          label: '',
           volume: token?.volume ?? 0,
         })),
     [selectToList, tokensMapper, network?.networkId],
diff --git a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
index c1d28d525..a6d7b93c6 100644
--- a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
+++ b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
@@ -47,7 +47,6 @@ export const TokenSelector = ({
         chain: network?.networkId ?? '',
         address: token?.address as Address,
         symbol: token?.symbol,
-        label: '',
         volume: token?.volume ?? 0,
       }))
   }, [gaugeRewardsDistributors, tokensMapper, aliasesCrv, network.networkId])
diff --git a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
index 88cf98398..0cfd3db93 100644
--- a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
+++ b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
@@ -70,7 +70,6 @@ export const AmountTokenInput = ({ chainId, poolId }: { chainId: ChainId; poolId
         chain: networkId ?? '',
         address: token?.address as Address,
         symbol: token?.symbol,
-        label: '',
         volume: token?.volume ?? 0,
       }))
 
diff --git a/packages/curve-ui-kit/src/features/select-token/types.ts b/packages/curve-ui-kit/src/features/select-token/types.ts
index 7f12fd1f6..d85890cf3 100644
--- a/packages/curve-ui-kit/src/features/select-token/types.ts
+++ b/packages/curve-ui-kit/src/features/select-token/types.ts
@@ -4,6 +4,6 @@ export type TokenOption = {
   chain: string
   address: Address
   symbol: string
-  label: string
+  label?: string
   volume: number
 }

From 3e1249c78e44850f8964b0d42bc2133bc5d0af29 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:52:58 +0100
Subject: [PATCH 23/30] refactor: make token option volume optional

---
 .../PageCreatePool/TokensInPool/SelectTokenButton.tsx         | 3 +--
 apps/main/src/dex/components/PagePool/Swap/index.tsx          | 2 +-
 apps/main/src/dex/components/PageRouterSwap/index.tsx         | 4 ++--
 .../dex/features/add-gauge-reward-token/ui/TokenSelector.tsx  | 2 +-
 .../dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx | 2 +-
 packages/curve-ui-kit/src/features/select-token/types.ts      | 2 +-
 .../src/features/select-token/ui/modal/TokenList.tsx          | 2 +-
 7 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
index 1c1e69e02..7dedf25c2 100644
--- a/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
+++ b/apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectTokenButton.tsx
@@ -68,7 +68,6 @@ const SelectTokenButton = ({
     chain: blockchainId,
     address: address as Address,
     symbol,
-    volume: 0,
   }))
 
   if (!overlayTriggerState.isOpen) {
@@ -92,7 +91,7 @@ const SelectTokenButton = ({
       label: [token.basePool ? 'Base pool' : '', token.userAddedToken ? 'User added' : '']
         .filter((x) => x !== '')
         .join(' - '),
-      volume: token.volume ?? 0,
+      volume: token.volume,
     }))
   }, [filterBasepools, tokens, filterValue, endsWith, basePools, chainId, blockchainId])
 
diff --git a/apps/main/src/dex/components/PagePool/Swap/index.tsx b/apps/main/src/dex/components/PagePool/Swap/index.tsx
index eb2d730b1..dea5e0ea7 100644
--- a/apps/main/src/dex/components/PagePool/Swap/index.tsx
+++ b/apps/main/src/dex/components/PagePool/Swap/index.tsx
@@ -104,7 +104,7 @@ const Swap = ({
           chain: network?.networkId ?? '',
           address: token?.address as Address,
           symbol: token?.symbol,
-          volume: token?.volume ?? 0,
+          volume: token?.volume,
         })),
       swapTokensMapper,
     }
diff --git a/apps/main/src/dex/components/PageRouterSwap/index.tsx b/apps/main/src/dex/components/PageRouterSwap/index.tsx
index 47e106c3c..af2ac3147 100644
--- a/apps/main/src/dex/components/PageRouterSwap/index.tsx
+++ b/apps/main/src/dex/components/PageRouterSwap/index.tsx
@@ -123,7 +123,7 @@ const QuickSwap = ({
           chain: network?.networkId ?? '',
           address: token?.address as Address,
           symbol: token?.symbol,
-          volume: token?.volume ?? 0,
+          volume: token?.volume,
         })),
     [selectFromList, selectToList, tokensMapper, network?.networkId],
   )
@@ -136,7 +136,7 @@ const QuickSwap = ({
           chain: network?.networkId ?? '',
           address: token?.address as Address,
           symbol: token?.symbol,
-          volume: token?.volume ?? 0,
+          volume: token?.volume,
         })),
     [selectToList, tokensMapper, network?.networkId],
   )
diff --git a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
index a6d7b93c6..0d4c2128c 100644
--- a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
+++ b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
@@ -47,7 +47,7 @@ export const TokenSelector = ({
         chain: network?.networkId ?? '',
         address: token?.address as Address,
         symbol: token?.symbol,
-        volume: token?.volume ?? 0,
+        volume: token?.volume,
       }))
   }, [gaugeRewardsDistributors, tokensMapper, aliasesCrv, network.networkId])
 
diff --git a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
index 0cfd3db93..1d5dd0aba 100644
--- a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
+++ b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
@@ -70,7 +70,7 @@ export const AmountTokenInput = ({ chainId, poolId }: { chainId: ChainId; poolId
         chain: networkId ?? '',
         address: token?.address as Address,
         symbol: token?.symbol,
-        volume: token?.volume ?? 0,
+        volume: token?.volume,
       }))
 
     const rewardTokenId = getValues('rewardTokenId')
diff --git a/packages/curve-ui-kit/src/features/select-token/types.ts b/packages/curve-ui-kit/src/features/select-token/types.ts
index d85890cf3..3e23ac3cc 100644
--- a/packages/curve-ui-kit/src/features/select-token/types.ts
+++ b/packages/curve-ui-kit/src/features/select-token/types.ts
@@ -5,5 +5,5 @@ export type TokenOption = {
   address: Address
   symbol: string
   label?: string
-  volume: number
+  volume?: number
 }
diff --git a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
index a2543d820..d6b647e60 100644
--- a/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
+++ b/packages/curve-ui-kit/src/features/select-token/ui/modal/TokenList.tsx
@@ -96,7 +96,7 @@ export const TokenList = ({
           if (aBalance !== bBalance) return bBalance - aBalance
 
           // Sort by volume in descending order
-          if (a.volume !== b.volume) return b.volume - a.volume
+          if (a.volume !== b.volume) return (b.volume ?? 0) - (a.volume ?? 0)
 
           // Finally sort by label
           return a.symbol.localeCompare(b.symbol)

From 24881defaab5820620009d72eba441d8eee1a9bd Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:55:20 +0100
Subject: [PATCH 24/30] refactor: convert undefined check to truthy check

---
 .../dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
index 1d5dd0aba..ba28148db 100644
--- a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
+++ b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
@@ -63,7 +63,7 @@ export const AmountTokenInput = ({ chainId, poolId }: { chainId: ChainId; poolId
     const filteredTokens = Object.values(tokensMapper)
       .filter(
         (token): token is Token =>
-          token !== undefined &&
+          !!token &&
           activeRewardTokens.some((rewardToken) => isAddressEqual(rewardToken as Address, token.address as Address)),
       )
       .map((token) => ({

From 4a9eef1f8456dbbc43361a0b0c217ffc0a859dce Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 02:58:25 +0100
Subject: [PATCH 25/30] refactor: TokenIcon chain id is now optional

---
 apps/main/src/dex/components/PagePool/Swap/index.tsx  |  2 +-
 apps/main/src/dex/components/PageRouterSwap/index.tsx |  4 ++--
 .../add-gauge-reward-token/ui/TokenSelector.tsx       |  2 +-
 .../curve-ui-kit/src/features/select-token/types.ts   |  2 +-
 packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx     | 11 +++++++++--
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/main/src/dex/components/PagePool/Swap/index.tsx b/apps/main/src/dex/components/PagePool/Swap/index.tsx
index dea5e0ea7..3d62fc51c 100644
--- a/apps/main/src/dex/components/PagePool/Swap/index.tsx
+++ b/apps/main/src/dex/components/PagePool/Swap/index.tsx
@@ -101,7 +101,7 @@ const Swap = ({
       selectList: selectList
         .filter((token) => !!token)
         .map((token) => ({
-          chain: network?.networkId ?? '',
+          chain: network?.networkId,
           address: token?.address as Address,
           symbol: token?.symbol,
           volume: token?.volume,
diff --git a/apps/main/src/dex/components/PageRouterSwap/index.tsx b/apps/main/src/dex/components/PageRouterSwap/index.tsx
index af2ac3147..7e02b1ca7 100644
--- a/apps/main/src/dex/components/PageRouterSwap/index.tsx
+++ b/apps/main/src/dex/components/PageRouterSwap/index.tsx
@@ -120,7 +120,7 @@ const QuickSwap = ({
       getTokensObjList(selectFromList ?? selectToList, tokensMapper)
         .filter((token) => !!token)
         .map((token) => ({
-          chain: network?.networkId ?? '',
+          chain: network?.networkId,
           address: token?.address as Address,
           symbol: token?.symbol,
           volume: token?.volume,
@@ -133,7 +133,7 @@ const QuickSwap = ({
       getTokensObjList(selectToList, tokensMapper)
         .filter((token) => !!token)
         .map((token) => ({
-          chain: network?.networkId ?? '',
+          chain: network?.networkId,
           address: token?.address as Address,
           symbol: token?.symbol,
           volume: token?.volume,
diff --git a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
index 0d4c2128c..8bbb11b59 100644
--- a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
+++ b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
@@ -44,7 +44,7 @@ export const TokenSelector = ({
           ),
       )
       .map((token) => ({
-        chain: network?.networkId ?? '',
+        chain: network?.networkId,
         address: token?.address as Address,
         symbol: token?.symbol,
         volume: token?.volume,
diff --git a/packages/curve-ui-kit/src/features/select-token/types.ts b/packages/curve-ui-kit/src/features/select-token/types.ts
index 3e23ac3cc..36544ce3e 100644
--- a/packages/curve-ui-kit/src/features/select-token/types.ts
+++ b/packages/curve-ui-kit/src/features/select-token/types.ts
@@ -1,9 +1,9 @@
 import { Address } from '@ui-kit/utils'
 
 export type TokenOption = {
-  chain: string
   address: Address
   symbol: string
+  chain?: string
   label?: string
   volume?: number
 }
diff --git a/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx b/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx
index 8aff1279f..bfd061d49 100644
--- a/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/TokenIcon.tsx
@@ -12,14 +12,21 @@ const { IconSize } = SizesAndSpaces
 
 export interface TokenIconProps extends ImgHTMLAttributes<HTMLImageElement> {
   className?: string
-  blockchainId: string
+  blockchainId?: string
   symbol?: string
   address?: string | null
   size?: 'sm' | 'mui-sm' | 'mui-md' | 'xl'
   sx?: SystemStyleObject<Theme>
 }
 
-export const TokenIcon = ({ className = '', blockchainId, symbol = '', size = 'sm', address, sx }: TokenIconProps) => (
+export const TokenIcon = ({
+  className = '',
+  blockchainId = '',
+  symbol = '',
+  size = 'sm',
+  address,
+  sx,
+}: TokenIconProps) => (
   <Tooltip
     title={symbol}
     placement="top"

From 373fce377f30554a6faf1419138925d28026f95e Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 03:09:12 +0100
Subject: [PATCH 26/30] refactor: use lodash isEmpty

---
 apps/main/src/dex/components/PageRouterSwap/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/main/src/dex/components/PageRouterSwap/index.tsx b/apps/main/src/dex/components/PageRouterSwap/index.tsx
index 7e02b1ca7..338d935cf 100644
--- a/apps/main/src/dex/components/PageRouterSwap/index.tsx
+++ b/apps/main/src/dex/components/PageRouterSwap/index.tsx
@@ -6,6 +6,7 @@ import type {
   StepKey,
 } from '@/dex/components/PageRouterSwap/types'
 import type { Params } from 'react-router'
+import isEmpty from 'lodash/isEmpty'
 import type { Step } from '@ui/Stepper/types'
 import { t } from '@ui-kit/lib/i18n'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -111,8 +112,8 @@ const QuickSwap = ({
   )
 
   function getTokensObjList(tokensList: string[] | undefined, tokensMapper: TokensMapper | undefined) {
-    if (!tokensList || tokensList.length === 0 || !tokensMapper || Object.keys(tokensMapper).length === 0) return []
-    return tokensList.map((address) => tokensMapper[address])
+    if (isEmpty(tokensList) || isEmpty(tokensMapper)) return []
+    return tokensList!.map((address) => tokensMapper[address])
   }
 
   const tokensFrom = useMemo(

From ab117d7a2c47bfe1f80c325d54275dfff340e3d2 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 03:10:22 +0100
Subject: [PATCH 27/30] refactor: move getTokensObjList to global scope

---
 apps/main/src/dex/components/PageRouterSwap/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/main/src/dex/components/PageRouterSwap/index.tsx b/apps/main/src/dex/components/PageRouterSwap/index.tsx
index 338d935cf..f0d2eb5d4 100644
--- a/apps/main/src/dex/components/PageRouterSwap/index.tsx
+++ b/apps/main/src/dex/components/PageRouterSwap/index.tsx
@@ -42,6 +42,11 @@ import { notify } from '@ui-kit/features/connect-wallet'
 import { TokenSelector } from '@ui-kit/features/select-token'
 import type { Address } from '@ui-kit/utils'
 
+function getTokensObjList(tokensList: string[] | undefined, tokensMapper: TokensMapper | undefined) {
+  if (isEmpty(tokensList) || isEmpty(tokensMapper)) return []
+  return tokensList!.map((address) => tokensMapper[address])
+}
+
 const QuickSwap = ({
   pageLoaded,
   params,
@@ -111,11 +116,6 @@ const QuickSwap = ({
     [tokensMapperNonSmallTvl],
   )
 
-  function getTokensObjList(tokensList: string[] | undefined, tokensMapper: TokensMapper | undefined) {
-    if (isEmpty(tokensList) || isEmpty(tokensMapper)) return []
-    return tokensList!.map((address) => tokensMapper[address])
-  }
-
   const tokensFrom = useMemo(
     () =>
       getTokensObjList(selectFromList ?? selectToList, tokensMapper)

From cf99f4bb3a95a2def7ba4028a5d3bfb22ca49554 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 03:12:37 +0100
Subject: [PATCH 28/30] refactor: deduplicate filter and map for
 getTokensObjList

---
 .../dex/components/PageRouterSwap/index.tsx   | 33 ++++++++-----------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/apps/main/src/dex/components/PageRouterSwap/index.tsx b/apps/main/src/dex/components/PageRouterSwap/index.tsx
index f0d2eb5d4..76e0c2208 100644
--- a/apps/main/src/dex/components/PageRouterSwap/index.tsx
+++ b/apps/main/src/dex/components/PageRouterSwap/index.tsx
@@ -42,9 +42,18 @@ import { notify } from '@ui-kit/features/connect-wallet'
 import { TokenSelector } from '@ui-kit/features/select-token'
 import type { Address } from '@ui-kit/utils'
 
-function getTokensObjList(tokensList: string[] | undefined, tokensMapper: TokensMapper | undefined) {
+function getTokensObjList(tokensList: string[] | undefined, tokensMapper: TokensMapper | undefined, chain?: string) {
   if (isEmpty(tokensList) || isEmpty(tokensMapper)) return []
-  return tokensList!.map((address) => tokensMapper[address])
+
+  return tokensList!
+    .map((address) => tokensMapper[address])
+    .filter((token) => !!token)
+    .map((token) => ({
+      chain,
+      address: token?.address as Address,
+      symbol: token?.symbol,
+      volume: token?.volume,
+    }))
 }
 
 const QuickSwap = ({
@@ -117,28 +126,12 @@ const QuickSwap = ({
   )
 
   const tokensFrom = useMemo(
-    () =>
-      getTokensObjList(selectFromList ?? selectToList, tokensMapper)
-        .filter((token) => !!token)
-        .map((token) => ({
-          chain: network?.networkId,
-          address: token?.address as Address,
-          symbol: token?.symbol,
-          volume: token?.volume,
-        })),
+    () => getTokensObjList(selectFromList ?? selectToList, tokensMapper, network?.networkId),
     [selectFromList, selectToList, tokensMapper, network?.networkId],
   )
 
   const tokensTo = useMemo(
-    () =>
-      getTokensObjList(selectToList, tokensMapper)
-        .filter((token) => !!token)
-        .map((token) => ({
-          chain: network?.networkId,
-          address: token?.address as Address,
-          symbol: token?.symbol,
-          volume: token?.volume,
-        })),
+    () => getTokensObjList(selectToList, tokensMapper, network?.networkId),
     [selectToList, tokensMapper, network?.networkId],
   )
 

From 60695c01eed4c99b2dfddd8b0f343914a980e9cf Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 03:13:44 +0100
Subject: [PATCH 29/30] refactor: rely on default value

---
 .../dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
index ba28148db..7850b94f5 100644
--- a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
+++ b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
@@ -67,7 +67,7 @@ export const AmountTokenInput = ({ chainId, poolId }: { chainId: ChainId; poolId
           activeRewardTokens.some((rewardToken) => isAddressEqual(rewardToken as Address, token.address as Address)),
       )
       .map((token) => ({
-        chain: networkId ?? '',
+        chain: networkId,
         address: token?.address as Address,
         symbol: token?.symbol,
         volume: token?.volume,

From fc091331487b1755ae1ad357fc3ad43fc1f13e36 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Sat, 1 Mar 2025 03:26:40 +0100
Subject: [PATCH 30/30] refactor: add toTokenOption util function

---
 .../dex/components/PagePool/Swap/index.tsx    | 10 ++-------
 .../dex/components/PageRouterSwap/index.tsx   |  9 ++------
 .../ui/TokenSelector.tsx                      |  8 ++-----
 .../ui/AmountTokenInput.tsx                   |  8 ++-----
 apps/main/src/dex/utils/index.ts              | 21 ++++++++++++++++++-
 5 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/apps/main/src/dex/components/PagePool/Swap/index.tsx b/apps/main/src/dex/components/PagePool/Swap/index.tsx
index 3d62fc51c..71e84580c 100644
--- a/apps/main/src/dex/components/PagePool/Swap/index.tsx
+++ b/apps/main/src/dex/components/PagePool/Swap/index.tsx
@@ -37,6 +37,7 @@ import { Balances, CurveApi, PoolAlert, PoolData, TokensMapper } from '@/dex/typ
 import { notify } from '@ui-kit/features/connect-wallet'
 import { TokenSelector } from '@ui-kit/features/select-token'
 import type { Address } from '@ui-kit/utils'
+import { toTokenOption } from '@/dex/utils'
 
 const Swap = ({
   chainIdPoolId,
@@ -98,14 +99,7 @@ const Swap = ({
     const { selectList, swapTokensMapper } = getSwapTokens(tokensMapper, poolDataCacheOrApi)
 
     return {
-      selectList: selectList
-        .filter((token) => !!token)
-        .map((token) => ({
-          chain: network?.networkId,
-          address: token?.address as Address,
-          symbol: token?.symbol,
-          volume: token?.volume,
-        })),
+      selectList: selectList.map(toTokenOption(network?.networkId)),
       swapTokensMapper,
     }
   }, [poolDataCacheOrApi, tokensMapper, network?.networkId])
diff --git a/apps/main/src/dex/components/PageRouterSwap/index.tsx b/apps/main/src/dex/components/PageRouterSwap/index.tsx
index 76e0c2208..d2c81336c 100644
--- a/apps/main/src/dex/components/PageRouterSwap/index.tsx
+++ b/apps/main/src/dex/components/PageRouterSwap/index.tsx
@@ -14,7 +14,7 @@ import { NETWORK_TOKEN, REFRESH_INTERVAL } from '@/dex/constants'
 import { formatNumber } from '@ui/utils'
 import { getActiveStep, getStepStatus } from '@ui/Stepper/helpers'
 import { getTokensMapperStr } from '@/dex/store/createTokensSlice'
-import { getChainSignerActiveKey } from '@/dex/utils'
+import { getChainSignerActiveKey, toTokenOption } from '@/dex/utils'
 import usePageVisibleInterval from '@/dex/hooks/usePageVisibleInterval'
 import useSelectToList from '@/dex/components/PageRouterSwap/components/useSelectToList'
 import useStore from '@/dex/store/useStore'
@@ -48,12 +48,7 @@ function getTokensObjList(tokensList: string[] | undefined, tokensMapper: Tokens
   return tokensList!
     .map((address) => tokensMapper[address])
     .filter((token) => !!token)
-    .map((token) => ({
-      chain,
-      address: token?.address as Address,
-      symbol: token?.symbol,
-      volume: token?.volume,
-    }))
+    .map(toTokenOption(chain))
 }
 
 const QuickSwap = ({
diff --git a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
index 8bbb11b59..23a40e128 100644
--- a/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
+++ b/apps/main/src/dex/features/add-gauge-reward-token/ui/TokenSelector.tsx
@@ -10,6 +10,7 @@ import useTokensMapper from '@/dex/hooks/useTokensMapper'
 import useStore from '@/dex/store/useStore'
 import { ChainId, Token } from '@/dex/types/main.types'
 import { TokenSelector as TokenSelectorUIKit } from '@ui-kit/features/select-token'
+import { toTokenOption } from '@/dex/utils'
 
 export const TokenSelector = ({
   chainId,
@@ -43,12 +44,7 @@ export const TokenSelector = ({
             isAddressEqual(rewardToken as Address, token.address as Address),
           ),
       )
-      .map((token) => ({
-        chain: network?.networkId,
-        address: token?.address as Address,
-        symbol: token?.symbol,
-        volume: token?.volume,
-      }))
+      .map(toTokenOption(network?.networkId))
   }, [gaugeRewardsDistributors, tokensMapper, aliasesCrv, network.networkId])
 
   const selectedToken = filteredTokens.find((x) => x.address === rewardTokenId)
diff --git a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
index 7850b94f5..559442d25 100644
--- a/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
+++ b/apps/main/src/dex/features/deposit-gauge-reward/ui/AmountTokenInput.tsx
@@ -23,6 +23,7 @@ import { FlexContainer } from '@ui/styled-containers'
 import { ChainId, Token } from '@/dex/types/main.types'
 import { formatNumber } from '@ui/utils'
 import { type TokenOption, TokenSelector } from '@ui-kit/features/select-token'
+import { toTokenOption } from '@/dex/utils'
 
 export const AmountTokenInput = ({ chainId, poolId }: { chainId: ChainId; poolId: string }) => {
   const { setValue, getValues, formState, watch } = useFormContext<DepositRewardFormValues>()
@@ -66,12 +67,7 @@ export const AmountTokenInput = ({ chainId, poolId }: { chainId: ChainId; poolId
           !!token &&
           activeRewardTokens.some((rewardToken) => isAddressEqual(rewardToken as Address, token.address as Address)),
       )
-      .map((token) => ({
-        chain: networkId,
-        address: token?.address as Address,
-        symbol: token?.symbol,
-        volume: token?.volume,
-      }))
+      .map(toTokenOption(networkId))
 
     const rewardTokenId = getValues('rewardTokenId')
     if (
diff --git a/apps/main/src/dex/utils/index.ts b/apps/main/src/dex/utils/index.ts
index 8599f3ec1..30541cd78 100644
--- a/apps/main/src/dex/utils/index.ts
+++ b/apps/main/src/dex/utils/index.ts
@@ -1,7 +1,9 @@
 import type { AlertFormErrorKey } from '@/dex/components/AlertFormError'
 export { getStorageValue, setStorageValue } from '@/dex/utils/storage'
 import { shortenAccount } from '@ui/utils'
-import { ChainId } from '@/dex/types/main.types'
+import type { ChainId, Token } from '@/dex/types/main.types'
+import type { TokenOption } from '@ui-kit/features/select-token'
+import type { Address } from '@ui-kit/utils'
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile_device_detection
 export function isMobile() {
@@ -119,3 +121,20 @@ export const getChainSignerActiveKey = (chainId: ChainId | null, signerAddress:
   chainId && signerAddress ? `${chainId}-${shortenAccount(signerAddress)}` : ''
 
 export const httpFetcher = (uri: string) => fetch(uri).then((res) => res.json())
+
+/**
+ * Converts a Token object to a TokenOption object
+ *
+ * @param chain - Optional chain identifier
+ * @returns A function that takes a Token and returns a TokenOption with the specified chain
+ * @example
+ * const tokens = tokensList.map(toTokenOption('ethereum'))
+ */
+export const toTokenOption =
+  (chain?: string) =>
+  (token: Token): TokenOption => ({
+    chain,
+    address: token.address as Address,
+    symbol: token.symbol,
+    volume: token.volume,
+  })