139 lines
4.9 KiB
TypeScript
139 lines
4.9 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import styled from '@emotion/styled'
|
|
import useMangoStore from '../stores/useMangoStore'
|
|
import { Menu } from '@headlessui/react'
|
|
import { DuplicateIcon, LogoutIcon } from '@heroicons/react/outline'
|
|
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/solid'
|
|
import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
|
|
import useLocalStorageState from '../hooks/useLocalStorageState'
|
|
import { abbreviateAddress, copyToClipboard } from '../utils'
|
|
import WalletSelect from './WalletSelect'
|
|
import { WalletIcon } from './icons'
|
|
|
|
const StyledWalletTypeLabel = styled.div`
|
|
font-size: 0.65rem;
|
|
`
|
|
|
|
const StyledWalletButtonWrapper = styled.div`
|
|
width: 196px;
|
|
`
|
|
|
|
const Code = styled.code`
|
|
border: 1px solid hsla(0, 0%, 39.2%, 0.2);
|
|
border-radius: 3px;
|
|
background: hsla(0, 0%, 58.8%, 0.1);
|
|
font-size: 0.75rem;
|
|
`
|
|
|
|
const WALLET_OPTIONS = [
|
|
{ name: 'Copy address', icon: <DuplicateIcon /> },
|
|
{ name: 'Disconnect', icon: <LogoutIcon /> },
|
|
]
|
|
|
|
const ConnectWalletButton = () => {
|
|
const wallet = useMangoStore((s) => s.wallet.current)
|
|
const connected = useMangoStore((s) => s.wallet.connected)
|
|
const set = useMangoStore((s) => s.set)
|
|
const [isCopied, setIsCopied] = useState(false)
|
|
const [savedProviderUrl] = useLocalStorageState(
|
|
'walletProvider',
|
|
DEFAULT_PROVIDER.url
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (isCopied) {
|
|
const timer = setTimeout(() => {
|
|
setIsCopied(false)
|
|
}, 2000)
|
|
return () => clearTimeout(timer)
|
|
}
|
|
}, [isCopied])
|
|
|
|
const handleWalletMenu = (option) => {
|
|
if (option === 'Copy address') {
|
|
copyToClipboard(wallet.publicKey)
|
|
setIsCopied(true)
|
|
} else {
|
|
wallet.disconnect()
|
|
}
|
|
}
|
|
|
|
const handleWalletConect = () => {
|
|
wallet.connect()
|
|
set((state) => {
|
|
state.selectedMarginAccount.initialLoad = true
|
|
})
|
|
}
|
|
|
|
return (
|
|
<StyledWalletButtonWrapper className="h-14">
|
|
{connected && wallet?.publicKey ? (
|
|
<Menu>
|
|
{({ open }) => (
|
|
<div className="relative h-full">
|
|
<Menu.Button className="h-full w-full px-3 bg-th-bkg-1 rounded-none focus:outline-none text-th-primary hover:bg-th-bkg-3 hover:text-th-fgd-1">
|
|
<div className="flex flex-row items-center justify-between">
|
|
<div className="flex items-center">
|
|
<WalletIcon className="w-4 h-4 mr-3 text-th-green fill-current" />
|
|
<Code className="p-1 text-th-fgd-3 font-light">
|
|
{isCopied
|
|
? 'Copied!'
|
|
: abbreviateAddress(wallet.publicKey)}
|
|
</Code>
|
|
</div>
|
|
<div className="pl-2">
|
|
{open ? (
|
|
<ChevronUpIcon className="h-4 w-4" />
|
|
) : (
|
|
<ChevronDownIcon className="h-4 w-4" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Menu.Button>
|
|
<Menu.Items className="z-20 mt-1 p-1 absolute right-0 md:transform md:-translate-x-1/2 md:left-1/2 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-48">
|
|
{WALLET_OPTIONS.map(({ name, icon }) => (
|
|
<Menu.Item key={name}>
|
|
<button
|
|
className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
|
|
onClick={() => handleWalletMenu(name)}
|
|
>
|
|
<div className="w-4 h-4 mr-2">{icon}</div>
|
|
{name}
|
|
</button>
|
|
</Menu.Item>
|
|
))}
|
|
</Menu.Items>
|
|
</div>
|
|
)}
|
|
</Menu>
|
|
) : (
|
|
<div className="bg-th-bkg-1 h-full flex divide-x divide-th-bkg-3 justify-between">
|
|
<button
|
|
onClick={handleWalletConect}
|
|
disabled={!wallet}
|
|
className="rounded-none text-th-primary hover:bg-th-bkg-3 focus:outline-none disabled:text-th-fgd-4 disabled:cursor-wait"
|
|
>
|
|
<div className="flex flex-row items-center px-3 justify-center h-full default-transition hover:text-th-fgd-1">
|
|
<WalletIcon className="w-4 h-4 mr-2 fill-current" />
|
|
<div>
|
|
<div className="mb-0.5 whitespace-nowrap">Connect Wallet</div>
|
|
<StyledWalletTypeLabel className="font-normal text-th-fgd-3 text-left leading-3 tracking-wider">
|
|
{
|
|
WALLET_PROVIDERS.find((p) => p.url === savedProviderUrl)
|
|
?.name
|
|
}
|
|
</StyledWalletTypeLabel>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
<div className="relative h-full">
|
|
<WalletSelect isPrimary />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</StyledWalletButtonWrapper>
|
|
)
|
|
}
|
|
|
|
export default ConnectWalletButton
|