feat: Token Picker component

[mykcryptodev]

What changed? Why?
Add a component that composes the , and to give builders an easy way for users to pop a modal for finding and selecting a token

Notes to reviewers
This PR also adds the Token Picker to the playground. I noticed other Token components are not there so I am happy to remove if desired.

The token picker modal allows you to focus, scroll and select tokens with your keyboard.

To test this locally you may have to add this to the TokenPicker for search to work

import { setOnchainKitConfig } from '../../OnchainKitConfig';
import { base } from 'viem/chains';

export function TokenPicker({
  pickedToken,
  onTokenPicked,
  defaultTokens,
  className,
  onError,
}: TokenPickerProps) {
setOnchainKitConfig({
    apiKey: "YOUR_KEY",
    chain: base,
  });
  ...

How has it been tested?
Added unit tests and tested in local playground

tokenpicker.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
onchainkit-coverage	❌ Failed (Inspect)			Nov 28, 2024 3:50pm
onchainkit-routes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2024 3:50pm

[vercel]

Someone is attempting to deploy a commit to the Coinbase Team on Vercel.

A member of the Team first needs to authorize it.

[fakepixels]

This looks so great! Thank you so much for the contribution.

[dgca]

Hey @mykcryptodev, really sorry we haven't reviewed this. We've made some significant changes to the project since this PR was open, and we're currently pushing towards the v1 release.

Do you want to get this PR up to date with the latest state of main and have us review it?

If so, just tag me after you've updated this branch. Otherwise, you could close this PR and we can revisit after v1.

[dgca]

Closing this out since since it's quite out of date. Happy to help get this integrated in the future