connect wallet button styling
This commit is contained in:
saml33
parent
4b3ab3970e
commit
c779be1422
|
|
@ -0,0 +1,177 @@
|
|||
require('@solana/wallet-adapter-react-ui/styles.css')
|
||||
import SideNav from './shared/SideNav'
|
||||
import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react'
|
||||
import {
|
||||
ArrowRightIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
} from '@heroicons/react/solid'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import { useViewport } from '../hooks/useViewport'
|
||||
import { breakpoints } from '../utils/theme'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { Popover, Transition } from '@headlessui/react'
|
||||
import MangoAccountSummary from './account/MangoAccountSummary'
|
||||
import { HealthType, MangoAccount } from '@blockworks-foundation/mango-v4'
|
||||
import mangoStore from '../store/state'
|
||||
import HealthHeart from './account/HealthHeart'
|
||||
import BottomBar from './mobile/BottomBar'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
import UserSetupModal from './modals/UserSetupModal'
|
||||
import { ConnectWalletButton } from './wallet/ConnectWalletButton'
|
||||
|
||||
export const IS_ONBOARDED_KEY = 'isOnboarded'
|
||||
|
||||
const Layout = ({ children }: { children: ReactNode }) => {
|
||||
const mangoAccount = mangoStore((s) => s.mangoAccount)
|
||||
const { t } = useTranslation('common')
|
||||
const { connected } = useWallet()
|
||||
const [isCollapsed, setIsCollapsed] = useState(false)
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.md : false
|
||||
const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
||||
const [showUserSetupModal, setShowUserSetupModal] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const collapsed = width ? width < breakpoints.xl : false
|
||||
setIsCollapsed(collapsed)
|
||||
}, [width])
|
||||
|
||||
useEffect(() => {
|
||||
if (width < breakpoints.lg) {
|
||||
setIsCollapsed(true)
|
||||
}
|
||||
}, [width])
|
||||
|
||||
const handleCloseModal = useCallback(() => {
|
||||
setShowUserSetupModal(false)
|
||||
}, [])
|
||||
|
||||
const handleShowModal = useCallback(() => {
|
||||
setShowUserSetupModal(true)
|
||||
}, [])
|
||||
|
||||
const handleToggleSidebar = () => {
|
||||
setIsCollapsed(!isCollapsed)
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
}, 100)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flex-grow bg-th-bkg-1 text-th-fgd-1 transition-all`}>
|
||||
<div className="flex">
|
||||
{isMobile ? (
|
||||
<div className="fixed bottom-0 left-0 z-20 w-full md:hidden">
|
||||
<BottomBar />
|
||||
</div>
|
||||
) : (
|
||||
<div className={`fixed z-20 h-screen`}>
|
||||
<button
|
||||
className="absolute -right-4 top-1/2 z-20 hidden h-10 w-4 -translate-y-1/2 transform rounded-none rounded-r bg-th-bkg-4 focus:outline-none lg:block"
|
||||
onClick={handleToggleSidebar}
|
||||
>
|
||||
<ChevronRightIcon
|
||||
className={`default-transition h-full w-full ${
|
||||
!isCollapsed ? 'rotate-180' : 'rotate-360'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<div className={`h-full ${!isCollapsed ? 'overflow-y-auto' : ''}`}>
|
||||
<SideNav collapsed={isCollapsed} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`w-full overflow-hidden transition-all duration-500 ease-in-out ${
|
||||
isMobile ? '' : isCollapsed ? 'pl-[72px]' : 'pl-44 lg:pl-56'
|
||||
}`}
|
||||
>
|
||||
<div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 px-6">
|
||||
<div className="flex items-center text-th-fgd-3">
|
||||
<span className="mb-0 mr-2">
|
||||
{mangoAccount ? (
|
||||
<MangoAccountSummaryDropdown mangoAccount={mangoAccount} />
|
||||
) : (
|
||||
<span className="flex items-center">
|
||||
🔗<span className="ml-2">{t('connect-helper')}</span>
|
||||
<ArrowRightIcon className="sideways-bounce ml-2 h-5 w-5 text-th-fgd-1" />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* {isOnboarded ? (
|
||||
connected ? (
|
||||
<WalletDisconnectButton />
|
||||
) : (
|
||||
<WalletMultiButton />
|
||||
)
|
||||
) : (
|
||||
<Button highlightButton onClick={handleShowModal}>
|
||||
Join Mango
|
||||
</Button>
|
||||
)} */}
|
||||
<ConnectWalletButton />
|
||||
</div>
|
||||
</div>
|
||||
<div className={`min-h-screen p-8 ${isMobile ? 'pb-20' : ''}`}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showUserSetupModal ? (
|
||||
<UserSetupModal
|
||||
isOpen={showUserSetupModal}
|
||||
onClose={handleCloseModal}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout
|
||||
|
||||
const MangoAccountSummaryDropdown = ({
|
||||
mangoAccount,
|
||||
}: {
|
||||
mangoAccount: MangoAccount
|
||||
}) => {
|
||||
return (
|
||||
<Popover>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button className="flex w-full items-center justify-between rounded-none text-th-fgd-1 hover:text-th-primary">
|
||||
<div className="flex items-center">
|
||||
<HealthHeart
|
||||
health={mangoAccount.getHealthRatio(HealthType.init).toNumber()}
|
||||
size={20}
|
||||
/>
|
||||
<span className="ml-1 mr-0.5 font-bold">{mangoAccount.name}</span>
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180 transform' : 'rotate-360 transform'
|
||||
} mt-0.5 h-5 w-5 flex-shrink-0`}
|
||||
/>
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
appear={true}
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition-all ease-in duration-200"
|
||||
enterFrom="opacity-0 transform scale-75"
|
||||
enterTo="opacity-100 transform scale-100"
|
||||
leave="transition ease-out duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Popover.Panel className="absolute top-[63px] z-10 mr-4 w-56 rounded-md rounded-t-none border border-th-bkg-3 bg-th-bkg-1 p-4">
|
||||
<MangoAccountSummary />
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@ import WalletSelect from '../wallet/WalletSelect'
|
|||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import { handleWalletConnect } from '../../utils/wallet'
|
||||
import mangoStore from '../../store/state'
|
||||
import { IS_ONBOARDED_KEY } from '../shared/Layout'
|
||||
import { IS_ONBOARDED_KEY } from '../Layout'
|
||||
import DepositTokenList from '../shared/DepositTokenList'
|
||||
import { EnterRightExitLeft } from '../shared/Transitions'
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import { useRouter } from 'next/router'
|
|||
import mangoStore from '../../store/state'
|
||||
import { notify } from '../../utils/notifications'
|
||||
import { abbreviateAddress } from '../../utils/formatting'
|
||||
import WalletSelect from './WalletSelect'
|
||||
|
||||
export const handleWalletConnect = (wallet: Wallet) => {
|
||||
if (!wallet) {
|
||||
|
|
@ -149,28 +150,44 @@ export const ConnectWalletButton: React.FC = () => {
|
|||
)}
|
||||
</Menu>
|
||||
) : (
|
||||
<div className="flex divide-x divide-th-bkg-3" id="connect-wallet-tip">
|
||||
<div className="relative">
|
||||
<div className="relative flex h-16 w-44 divide-x divide-th-bkg-3 bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
disabled={!group}
|
||||
className="rounded-xl bg-th-primary-dark p-2 text-th-bkg-1 focus:outline-none disabled:cursor-wait disabled:text-th-bkg-2"
|
||||
// disabled={!mangoGroup}
|
||||
className="bg-transparent text-white focus:outline-none disabled:cursor-wait disabled:text-th-bkg-2"
|
||||
>
|
||||
<div className="flex flex-row items-center justify-center px-3">
|
||||
{/* <WalletIcon className="mr-2 h-4 w-4 fill-current" /> */}
|
||||
<div className="default-transition flex h-full flex-row items-center justify-center space-x-3 px-4">
|
||||
<div
|
||||
className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
|
||||
wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={wallet?.adapter.icon}
|
||||
className={
|
||||
wallet?.adapter.name === 'Solflare'
|
||||
? 'h-auto w-[20px]'
|
||||
: 'h-auto w-[28px]'
|
||||
}
|
||||
alt={`${wallet?.adapter.name} icon`}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="mb-1 whitespace-nowrap font-bold leading-none">
|
||||
Connect Wallet
|
||||
<div className="mb-1.5 text-base font-bold leading-none">
|
||||
{t('connect')}
|
||||
</div>
|
||||
{wallet?.adapter?.name && (
|
||||
<div className="text-xxs font-normal leading-3 tracking-wider text-th-bkg-2">
|
||||
<div className="text-xxs font-normal leading-3 tracking-wider text-white">
|
||||
{wallet.adapter.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<div className="relative">
|
||||
{/* <WalletSelect wallets={displayedWallets} /> */}
|
||||
</div>
|
||||
<div className="absolute top-1/2 right-0 z-10 h-full -translate-y-1/2">
|
||||
<WalletSelect />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React from 'react'
|
||||
import React, { Fragment } from 'react'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
// import { WalletReadyState } from '@solana/wallet-adapter-base'
|
||||
// import uniqBy from 'lodash/uniqBy'
|
||||
import { CheckCircleIcon } from '@heroicons/react/solid'
|
||||
import { CheckCircleIcon, ChevronDownIcon } from '@heroicons/react/solid'
|
||||
import { Menu, Transition } from '@headlessui/react'
|
||||
|
||||
const WalletSelect = () => {
|
||||
const { wallet, wallets, select } = useWallet()
|
||||
|
|
@ -30,31 +31,54 @@ const WalletSelect = () => {
|
|||
// }
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{wallets?.map((w) => (
|
||||
<Menu>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Menu.Button
|
||||
className={`flex h-full w-14 cursor-pointer items-center justify-center rounded-none bg-transparent text-white hover:brightness-[1.1] focus:outline-none`}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
className={`default-transition h-6 w-6 ${
|
||||
open ? 'rotate-180 transform' : 'rotate-360 transform'
|
||||
}`}
|
||||
/>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
appear={true}
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition-all ease-in duration-200"
|
||||
enterFrom="opacity-0 transform scale-75"
|
||||
enterTo="opacity-100 transform scale-100"
|
||||
leave="transition ease-out duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Menu.Items className="absolute top-[68px] right-0 z-20 w-44 rounded-md border border-th-bkg-3 bg-th-bkg-1 px-4 py-2.5 outline-none">
|
||||
{wallets?.map((wallet, index) => (
|
||||
<Menu.Item key={index}>
|
||||
<button
|
||||
key={w.adapter.name}
|
||||
className={`flex w-full items-center justify-between rounded-md border ${
|
||||
wallet?.adapter.name === w.adapter.name
|
||||
? 'border-th-primary md:hover:border-th-primary'
|
||||
: 'border-th-bkg-4 md:hover:border-th-fgd-4'
|
||||
} py-3 px-4 text-base focus:outline-none md:hover:cursor-pointer`}
|
||||
onClick={() => select(w.adapter.name)}
|
||||
className="flex w-full flex-row items-center justify-between rounded-none py-1.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-primary"
|
||||
onClick={() => {
|
||||
select(wallet.adapter.name)
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={w.adapter.icon}
|
||||
className="mr-2 h-6 w-6"
|
||||
alt={`${w.adapter.name} icon`}
|
||||
src={wallet.adapter.icon}
|
||||
className="mr-2 h-5 w-5"
|
||||
alt={`${wallet.adapter.name} icon`}
|
||||
/>
|
||||
{w.adapter.name}
|
||||
{wallet.adapter.name}
|
||||
</div>
|
||||
{wallet?.adapter.name === w.adapter.name ? (
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-primary" />
|
||||
) : null}
|
||||
</button>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import Notifications from '../components/shared/Notification'
|
|||
import { ThemeProvider } from 'next-themes'
|
||||
import { TOKEN_LIST_URL } from '@jup-ag/core'
|
||||
import { appWithTranslation } from 'next-i18next'
|
||||
import Layout from '../components/shared/Layout'
|
||||
import Layout from '../components/Layout'
|
||||
import { ViewportProvider } from '../hooks/useViewport'
|
||||
import { WalletProvider } from '../components/wallet/WalletProvider'
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue