wallet selection
This commit is contained in:
saml33
parent
0da8d34a7d
commit
a3e497f410
|
|
@ -13,7 +13,7 @@ const DropMenu = ({ button, buttonClassName, value, onChange, options }) => {
|
|||
</Listbox.Button>
|
||||
{open ? (
|
||||
<Listbox.Options
|
||||
className={`z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-44`}
|
||||
className={`z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<Listbox.Option key={option.name} value={option.name}>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ import UiLock from './UiLock'
|
|||
import DropMenu from './DropMenu'
|
||||
import { useRouter } from 'next/router'
|
||||
import WalletSelect from './WalletSelect'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import { WALLET_PROVIDERS } from '../hooks/useWallet'
|
||||
|
||||
const Code = styled.code`
|
||||
border: 1px solid hsla(0, 0%, 39.2%, 0.2);
|
||||
|
|
@ -26,6 +28,9 @@ const TopBar = () => {
|
|||
const { connected, wallet } = useWallet()
|
||||
const [showMenu, setShowMenu] = useState(false)
|
||||
const [isCopied, setIsCopied] = useState(false)
|
||||
const { providerUrl } = useMangoStore((s) => s.wallet)
|
||||
|
||||
console.log('provider', providerUrl)
|
||||
|
||||
useEffect(() => {
|
||||
if (isCopied) {
|
||||
|
|
@ -104,18 +109,25 @@ const TopBar = () => {
|
|||
buttonClassName="w-44 h-10 border border-th-primary hover:border-th-fgd-1 rounded-md text-th-primary hover:text-th-fgd-1"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex">
|
||||
<div className="flex border border-th-primary rounded-md h-11">
|
||||
<button
|
||||
onClick={handleConnectDisconnect}
|
||||
className="border border-th-primary hover:border-th-fgd-1 rounded-md py-2 w-44 text-th-primary hover:text-th-fgd-1 font-semibold text-bas"
|
||||
className="text-th-primary hover:text-th-fgd-1 font-semibold"
|
||||
>
|
||||
<div className="flex flex-row items-center justify-center">
|
||||
<WalletIcon className="w-5 h-5 mr-2 fill-current" />
|
||||
Connect Wallet
|
||||
<div className="flex flex-row items-center justify-center px-3 h-full rounded-l hover:bg-th-primary hover:text-th-fgd-1">
|
||||
<WalletIcon className="w-5 h-5 mr-3 fill-current" />
|
||||
<div>
|
||||
Connect Wallet
|
||||
<div className="text-xxs font-normal text-th-fgd-1 text-left leading-3">
|
||||
{WALLET_PROVIDERS.filter(
|
||||
(p) => p.url === providerUrl
|
||||
).map(({ name }) => name)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{!connected && (
|
||||
<div className="relative h-full ml-2">
|
||||
<div className="relative h-full">
|
||||
<WalletSelect />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
import { Menu, Transition } from '@headlessui/react'
|
||||
import { DotsHorizontalIcon, CheckCircleIcon } from '@heroicons/react/outline'
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
CheckCircleIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import { WALLET_PROVIDERS } from '../hooks/useWallet'
|
||||
|
||||
|
|
@ -17,8 +21,12 @@ export default function WalletSelect() {
|
|||
<Menu>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Menu.Button className="p-2 h-full rounded focus:outline-none text-th-primary hover:text-th-fgd-1 hover:bg-th-primary cursor-pointer">
|
||||
<DotsHorizontalIcon className="h-5 w-5" />
|
||||
<Menu.Button className="p-2 w-10 flex justify-center items-center h-full rounded-r focus:outline-none text-th-primary hover:text-th-fgd-1 hover:bg-th-primary cursor-pointer">
|
||||
{open ? (
|
||||
<ChevronUpIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<ChevronDownIcon className="h-5 w-5" />
|
||||
)}
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
show={open}
|
||||
|
|
@ -31,18 +39,21 @@ export default function WalletSelect() {
|
|||
>
|
||||
<Menu.Items
|
||||
static
|
||||
className="z-40 absolute right-0 w-48 mt-2 origin-top-right border border-th-primary bg-th-bkg-2 divide-y divide-th-fgd-1 rounded-md shadow-lg outline-none"
|
||||
className="z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-48"
|
||||
>
|
||||
{WALLET_PROVIDERS.map(({ name, url }) => (
|
||||
{WALLET_PROVIDERS.map(({ name, url, icon }) => (
|
||||
<Menu.Item key={name}>
|
||||
<button
|
||||
className="p-4 w-full text-left flex items-center hover:text-th-primary"
|
||||
className="flex flex-row items-center justify-between w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer tracking-wider"
|
||||
onClick={() => handleSelectProvider(url)}
|
||||
>
|
||||
<div className="flex">
|
||||
<img src={icon} className="w-5 h-5 mr-2" />
|
||||
{name}
|
||||
</div>
|
||||
{providerUrl === url ? (
|
||||
<CheckCircleIcon className="h-4 w-4 mr-2" />
|
||||
<CheckCircleIcon className="h-4 w-4 text-th-green" />
|
||||
) : null}{' '}
|
||||
{name}
|
||||
</button>
|
||||
</Menu.Item>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -94,6 +94,20 @@ module.exports = {
|
|||
'th-green': 'var(--green)',
|
||||
},
|
||||
},
|
||||
fontSize: {
|
||||
xxs: '.6rem',
|
||||
// 'sm': '.875rem',
|
||||
// 'tiny': '.875rem',
|
||||
// 'base': '1rem',
|
||||
// 'lg': '1.125rem',
|
||||
// 'xl': '1.25rem',
|
||||
// '2xl': '1.5rem',
|
||||
// '3xl': '1.875rem',
|
||||
// '4xl': '2.25rem',
|
||||
// '5xl': '3rem',
|
||||
// '6xl': '4rem',
|
||||
// '7xl': '5rem',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue