connect wallet button
This commit is contained in:
saml33
parent
d89b56bca1
commit
d7c2bfa489
|
|
@ -1,4 +1,4 @@
|
|||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ExclamationTriangleIcon,
|
||||
|
|
@ -11,8 +11,6 @@ import { useRouter } from 'next/router'
|
|||
import useOnlineStatus from 'hooks/useOnlineStatus'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
|
||||
const set = mangoStore.getState().set
|
||||
|
||||
const TopBar = () => {
|
||||
const { connected } = useWallet()
|
||||
const themeData = mangoStore((s) => s.themeData)
|
||||
|
|
@ -23,21 +21,12 @@ const TopBar = () => {
|
|||
const router = useRouter()
|
||||
const { query } = router
|
||||
|
||||
const handleShowSetup = useCallback(() => {
|
||||
set((s) => {
|
||||
s.showUserSetup = true
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => setCopied(''), 2000)
|
||||
}, [copied])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex h-16 items-center justify-between`}
|
||||
style={{ backgroundImage: `url(${themeData.topTilePath})` }}
|
||||
>
|
||||
<div className="mb-8 flex h-16 items-center justify-between px-6 shadow">
|
||||
<div className="flex w-full items-center justify-between md:space-x-4">
|
||||
<span className="mb-0 flex items-center">
|
||||
{query.token || query.market ? (
|
||||
|
|
@ -48,7 +37,7 @@ const TopBar = () => {
|
|||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
) : null}
|
||||
<div className="flex h-[63px] w-16 items-center justify-center bg-th-bkg-1 md:hidden">
|
||||
<div className="flex items-center justify-center bg-th-bkg-1 md:hidden">
|
||||
<img
|
||||
className="h-9 w-9 flex-shrink-0"
|
||||
src={themeData.logoPath}
|
||||
|
|
@ -65,13 +54,7 @@ const TopBar = () => {
|
|||
</div>
|
||||
) : null}
|
||||
<div className="flex items-center">
|
||||
{connected ? (
|
||||
<div className="flex h-[63px] items-center rounded-full bg-th-bkg-1">
|
||||
<ConnectedMenu />
|
||||
</div>
|
||||
) : (
|
||||
<ConnectWalletButton handleShowSetup={handleShowSetup} />
|
||||
)}
|
||||
{connected ? <ConnectedMenu /> : <ConnectWalletButton />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,16 @@
|
|||
import React, { Fragment, useMemo } from 'react'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import WalletIcon from '@components/icons/WalletIcon'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { LAST_WALLET_NAME } from 'utils/constants'
|
||||
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||||
import { Popover, Transition } from '@headlessui/react'
|
||||
// import Loading from '@components/shared/Loading'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { WalletName, WalletReadyState } from '@solana/wallet-adapter-base'
|
||||
|
||||
export default function ConnectWalletButton({
|
||||
handleShowSetup,
|
||||
}: {
|
||||
handleShowSetup: () => void
|
||||
}) {
|
||||
export default function ConnectWalletButton() {
|
||||
const { t } = useTranslation('common')
|
||||
const { wallet, wallets, select, connected, connect } = useWallet()
|
||||
const isOnboarded = true
|
||||
const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
|
||||
const [lastWalletName] = useLocalStorageState<WalletName | null>(
|
||||
LAST_WALLET_NAME,
|
||||
|
|
@ -38,9 +31,7 @@ export default function ConnectWalletButton({
|
|||
}, [wallets, lastWalletName])
|
||||
|
||||
return (
|
||||
<>
|
||||
{isOnboarded && walletIcon ? (
|
||||
<div className="flex">
|
||||
<div className="flex w-48 items-center justify-between rounded-full bg-th-bkg-3 pr-1.5">
|
||||
<button
|
||||
onClick={() => {
|
||||
if (wallet) {
|
||||
|
|
@ -49,9 +40,9 @@ export default function ConnectWalletButton({
|
|||
select(lastWalletName)
|
||||
}
|
||||
}}
|
||||
className="relative flex h-16 rounded-full bg-th-bkg-3 py-2"
|
||||
className="relative flex h-12 rounded-full bg-th-bkg-3"
|
||||
>
|
||||
<div className="relative z-10 flex h-full items-center justify-center space-x-3 px-4">
|
||||
<div className="relative z-10 flex h-full items-center justify-center space-x-3 pl-4 pr-2">
|
||||
{connected && mangoAccountLoading ? (
|
||||
<div></div>
|
||||
) : (
|
||||
|
|
@ -73,7 +64,7 @@ export default function ConnectWalletButton({
|
|||
</div>
|
||||
)}
|
||||
<div className="text-left">
|
||||
<div className="mb-1.5 flex font-display text-sm leading-none text-th-fgd-1">
|
||||
<div className=" mb-1 flex font-display text-sm leading-none text-th-fgd-1">
|
||||
{t('connect')}
|
||||
</div>
|
||||
|
||||
|
|
@ -87,7 +78,7 @@ export default function ConnectWalletButton({
|
|||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`flex h-16 w-10 items-center justify-center rounded-none border-l border-th-bkg-4 bg-th-bkg-3 text-th-fgd-3 hover:brightness-[1.1] focus:outline-none focus-visible:bg-th-bkg-4`}
|
||||
className={`flex h-9 w-9 items-center justify-center rounded-full bg-th-bkg-3 text-th-fgd-3 hover:brightness-[1.1] focus:outline-none focus-visible:bg-th-bkg-4`}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
className={`h-6 w-6 flex-shrink-0 ${
|
||||
|
|
@ -104,10 +95,10 @@ export default function ConnectWalletButton({
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Popover.Panel className="absolute right-0 top-16 z-20 w-48 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 outline-none">
|
||||
<Popover.Panel className="absolute right-6 top-16 z-20 w-48 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 outline-none">
|
||||
{detectedWallets.map((wallet, index) => (
|
||||
<button
|
||||
className="flex w-full flex-row items-center justify-between rounded-none py-2 font-normal focus:outline-none focus-visible:text-th-active md:hover:cursor-pointer md:hover:text-th-active"
|
||||
className="flex w-full flex-row items-center justify-between rounded-none py-2 text-sm font-normal focus:outline-none focus-visible:text-th-active md:hover:cursor-pointer md:hover:text-th-active"
|
||||
onClick={() => {
|
||||
select(wallet.adapter.name)
|
||||
}}
|
||||
|
|
@ -129,17 +120,5 @@ export default function ConnectWalletButton({
|
|||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
className="relative h-16 rounded-none px-6 font-display text-base text-th-fgd-1"
|
||||
onClick={handleShowSetup}
|
||||
>
|
||||
<div className="relative z-10 flex items-center justify-center">
|
||||
<WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
||||
{t('connect')}
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@ import { notify } from '../../utils/notifications'
|
|||
import ProfileImage from '../profile/ProfileImage'
|
||||
import { abbreviateAddress } from '../../utils/formatting'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { TV_USER_ID_KEY } from 'utils/constants'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import Loading from '@components/shared/Loading'
|
||||
|
||||
const set = mangoStore.getState().set
|
||||
|
|
@ -19,9 +17,6 @@ const ConnectedMenu = () => {
|
|||
const { t } = useTranslation('common')
|
||||
const { publicKey, disconnect, wallet } = useWallet()
|
||||
const { isDesktop } = useViewport()
|
||||
const [tvUserId, setTvUserId] = useLocalStorageState(TV_USER_ID_KEY, '')
|
||||
|
||||
// const profileDetails = mangoStore((s) => s.profile.details)
|
||||
const loadProfileDetails = mangoStore((s) => s.profile.loadDetails)
|
||||
const groupLoaded = mangoStore((s) => s.groupLoaded)
|
||||
const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
|
||||
|
|
@ -32,8 +27,6 @@ const ConnectedMenu = () => {
|
|||
state.mangoAccount.current = undefined
|
||||
state.mangoAccounts = []
|
||||
state.mangoAccount.initialLoad = true
|
||||
state.mangoAccount.openOrders = {}
|
||||
state.mangoAccount.interestTotals = { data: [], loading: false }
|
||||
})
|
||||
disconnect()
|
||||
notify({
|
||||
|
|
@ -46,22 +39,18 @@ const ConnectedMenu = () => {
|
|||
if (publicKey && wallet && groupLoaded) {
|
||||
actions.connectMangoClientWithWallet(wallet)
|
||||
actions.fetchMangoAccounts(publicKey)
|
||||
// actions.fetchTourSettings(publicKey?.toString() as string)
|
||||
actions.fetchProfileDetails(publicKey.toString())
|
||||
actions.fetchWalletTokens(publicKey)
|
||||
if (!tvUserId) {
|
||||
setTvUserId(publicKey.toString())
|
||||
}
|
||||
}
|
||||
}, [publicKey, wallet, groupLoaded, tvUserId, setTvUserId])
|
||||
}, [publicKey, wallet, groupLoaded])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popover>
|
||||
<div className="relative">
|
||||
<Popover.Button
|
||||
className={`default-transition h-16 rounded-full ${
|
||||
isDesktop ? 'w-48 px-4' : 'w-16'
|
||||
className={`default-transition h-12 rounded-full ${
|
||||
isDesktop ? 'w-48 pl-1.5' : 'w-12'
|
||||
} hover:bg-th-bkg-2 focus:outline-none focus-visible:bg-th-bkg-3`}
|
||||
>
|
||||
<div
|
||||
|
|
@ -75,7 +64,9 @@ const ConnectedMenu = () => {
|
|||
isOwnerProfile
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-th-bkg-2">
|
||||
<Loading className="h-6 w-6" />
|
||||
</div>
|
||||
)}
|
||||
{!loadProfileDetails && isDesktop ? (
|
||||
<div className="ml-2.5 overflow-hidden text-left">
|
||||
|
|
@ -103,9 +94,9 @@ const ConnectedMenu = () => {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Popover.Panel className="absolute right-0 top-[61px] z-20 mt-1 w-48 space-y-1.5 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 focus:outline-none md:rounded-r-none">
|
||||
<Popover.Panel className="absolute right-0 top-[52px] z-20 mt-1 w-48 space-y-1.5 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 focus:outline-none">
|
||||
<button
|
||||
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:outline-none focus-visible:text-th-active md:hover:cursor-pointer md:hover:text-th-fgd-1"
|
||||
className="flex w-full flex-row items-center rounded-none py-0.5 text-sm font-normal focus:outline-none focus-visible:text-th-active md:hover:cursor-pointer md:hover:text-th-fgd-1"
|
||||
onClick={handleDisconnect}
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="h-4 w-4" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue