87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
import { Popover } from '@headlessui/react'
|
|
import Image from 'next/image'
|
|
import React, { useState } from 'react'
|
|
import { toast } from 'react-toastify'
|
|
|
|
import useTokenBalance from 'hooks/useTokenBalance'
|
|
import useWalletStore from 'stores/useWalletStore'
|
|
import { chain } from 'utils/chains'
|
|
import { formatWalletAddress } from 'utils/formatters'
|
|
import Button from 'components/Button'
|
|
import ConnectModal from 'components/ConnectModal'
|
|
|
|
const WalletPopover = ({ children }: { children: React.ReactNode }) => {
|
|
const address = useWalletStore((s) => s.address)
|
|
const actions = useWalletStore((s) => s.actions)
|
|
|
|
const { data } = useTokenBalance()
|
|
|
|
return (
|
|
<Popover className='relative'>
|
|
<Popover.Button as={Button} className='w-[200px] !rounded-3xl !bg-green-500'>
|
|
{children}
|
|
</Popover.Button>
|
|
|
|
<Popover.Panel className='absolute right-0 z-10 pt-2'>
|
|
<div className='rounded-2xl bg-white p-6 text-gray-900'>
|
|
<div className='mb-4 flex items-center justify-between'>
|
|
<div className='flex items-center'>
|
|
<Image src={chain.stakeCurrency.coinImageUrl} alt='token' width={24} height={24} />
|
|
<p className='ml-2'>
|
|
{chain.stakeCurrency.coinDenom}{' '}
|
|
<span className='ml-1 text-lg font-semibold'>{data?.toFixed(2)}</span>
|
|
</p>
|
|
</div>
|
|
<Button onClick={() => actions.disconnect()}>Disconnect</Button>
|
|
</div>
|
|
<p className='color-primary mb-6 text-sm'>{address}</p>
|
|
<button
|
|
className='flex items-center text-sm text-slate-500 hover:text-slate-700'
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(address).then(() => {
|
|
toast.success('Address copied to your clipboard')
|
|
})
|
|
}}
|
|
>
|
|
<svg
|
|
fill='none'
|
|
viewBox='0 0 24 24'
|
|
strokeWidth={1.5}
|
|
stroke='currentColor'
|
|
className='mr-1 h-5 w-5'
|
|
>
|
|
<path
|
|
strokeLinecap='round'
|
|
strokeLinejoin='round'
|
|
d='M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z'
|
|
/>
|
|
</svg>
|
|
Copy Address
|
|
</button>
|
|
</div>
|
|
</Popover.Panel>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
const Wallet = () => {
|
|
const [showConnectModal, setShowConnectModal] = useState(false)
|
|
|
|
const address = useWalletStore((s) => s.address)
|
|
|
|
return (
|
|
<>
|
|
{address ? (
|
|
<WalletPopover>{formatWalletAddress(address)}</WalletPopover>
|
|
) : (
|
|
<Button className='w-[200px]' color='primary' onClick={() => setShowConnectModal(true)}>
|
|
Connect Wallet
|
|
</Button>
|
|
)}
|
|
<ConnectModal isOpen={showConnectModal} onClose={() => setShowConnectModal(false)} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Wallet
|