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 { useEffect } from 'react'
import { useTokens } from '../../hooks/useTokens'
import { useAccount, useNetwork } from 'wagmi'
import { $selectedToken, $setSelectedToken } from '../../stores/selectedToken'
import { useStore } from '@nanostores/react'
export function TokenSelect() {
const { data: tokens, isLoading } = useTokens()
const selectedToken = useStore($selectedToken)
const { chain } = useNetwork()
const { address } = useAccount()
const items = tokens?.map((token) => (
))
function handleValueChange(value: `0x${string}`) {
const token = tokens?.find((token) => token.address === value)
if (!token) return
$setSelectedToken(token)
}
// Set default token data to first item,
// which most of time is native token
useEffect(() => {
if (!chain?.id || !address || !tokens) return
if (!selectedToken || !selectedToken?.address)
handleValueChange(tokens[0].address)
}, [chain?.id, address, tokens, selectedToken])
return (
handleValueChange(value)}
disabled={!tokens || isLoading}
value={selectedToken?.address}
>
{isLoading ? : }
In Your Wallet
{items}
)
}