import * as Select from '@radix-ui/react-select'
import './TokenSelect.css'
import { Token } from './Token'
import { ChevronDown, ChevronsDown, ChevronsUp } from '@images/components/react'
import { TokenLoading } from './TokenLoading'
import { useTokens } from '@features/Web3/hooks/useTokens'
import { useStore } from '@nanostores/react'
import {
$selectedToken,
$setSelectedToken
} from '@features/Web3/stores/selectedToken'
export function TokenSelect() {
const { data: tokens, isLoading } = useTokens()
const selectedToken = useStore($selectedToken)
const items = tokens?.map((token) => (
))
function handleValueChange(value: `0x${string}`) {
const token = tokens?.find((token) => token.address === value)
if (!token) return
$setSelectedToken(token)
}
return (
handleValueChange(value)}
disabled={!tokens || isLoading}
value={selectedToken?.address}
>
{isLoading ? : }
In Your Wallet
{items}
)
}