105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import { Menu } from '@headlessui/react'
|
|
import { LinkIcon } from '@heroicons/react/solid'
|
|
import { useMemo } from 'react'
|
|
import useWalletStore from '../stores/useWalletStore'
|
|
import {
|
|
getWalletProviderByUrl,
|
|
WALLET_PROVIDERS,
|
|
} from '../utils/wallet-adapters'
|
|
import Button from './Button'
|
|
|
|
const ChevronDownIcon = (props) => (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
{...props}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M19 9l-7 7-7-7"
|
|
></path>
|
|
</svg>
|
|
)
|
|
|
|
const CheckIcon = (props) => (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
{...props}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M5 13l4 4L19 7"
|
|
></path>
|
|
</svg>
|
|
)
|
|
|
|
const ConnectWalletButton = (props) => {
|
|
const { connected, providerUrl, set: setWalletStore } = useWalletStore(
|
|
(s) => s
|
|
)
|
|
|
|
const provider = useMemo(() => getWalletProviderByUrl(providerUrl), [
|
|
providerUrl,
|
|
])
|
|
|
|
return (
|
|
<div className="flex">
|
|
<Button
|
|
className={`h-9 z-30 px-8 flex items-center`}
|
|
gray={connected}
|
|
{...props}
|
|
>
|
|
<LinkIcon className="h-4 w-4 mr-2" />
|
|
{connected ? 'Disconnect' : 'Connect Wallet'}
|
|
</Button>
|
|
|
|
<div className="relative pl-2">
|
|
<Menu>
|
|
{({ open }) => (
|
|
<>
|
|
<Menu.Button className="cursor-pointer rounded-full h-9 w-9 py-2 px-2 bg-bkg-4 hover:bg-bkg-3 focus:outline-none">
|
|
{open ? (
|
|
<ChevronDownIcon className="w-4 h-4 m-auto stroke-3" />
|
|
) : (
|
|
<img src={provider?.icon} className="w-4 h-4 m-auto" />
|
|
)}
|
|
</Menu.Button>
|
|
<Menu.Items className="z-20 w-auto p-2 absolute right-0 top-12 bg-bkg-2 border border-bkg-3 shadow-md outline-none rounded-xl">
|
|
{WALLET_PROVIDERS.map(({ name, url, icon }) => (
|
|
<Menu.Item key={name}>
|
|
<button
|
|
className="flex p-2 h-9 hover:bg-bkg-3 hover:cursor-pointer hover:rounded-lg font-normal focus:outline-none"
|
|
onClick={() =>
|
|
setWalletStore((s) => {
|
|
s.providerUrl = url
|
|
})
|
|
}
|
|
style={{ width: '14rem' }}
|
|
>
|
|
<img src={icon} className="h-4 w-4 mr-2" />
|
|
<span className="text-sm">{name}</span>
|
|
|
|
{provider?.url === url ? (
|
|
<CheckIcon className="h-4 w-4 stroke-3" />
|
|
) : null}
|
|
</button>
|
|
</Menu.Item>
|
|
))}
|
|
</Menu.Items>
|
|
</>
|
|
)}
|
|
</Menu>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ConnectWalletButton
|