2022-08-26 12:15:50 -07:00
|
|
|
import { useCallback, useState } from 'react'
|
2022-11-19 10:33:12 -08:00
|
|
|
import {
|
|
|
|
ArrowLeftIcon,
|
|
|
|
ArrowRightIcon,
|
|
|
|
ExclamationTriangleIcon,
|
|
|
|
} from '@heroicons/react/20/solid'
|
2022-11-15 20:12:51 -08:00
|
|
|
import { useWallet } from '@solana/wallet-adapter-react'
|
2022-08-26 12:15:50 -07:00
|
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
import WalletIcon from './icons/WalletIcon'
|
2022-11-19 11:20:36 -08:00
|
|
|
import { IconButton } from './shared/Button'
|
2022-08-26 12:15:50 -07:00
|
|
|
import ConnectedMenu from './wallet/ConnectedMenu'
|
|
|
|
import { ConnectWalletButton } from './wallet/ConnectWalletButton'
|
|
|
|
import { IS_ONBOARDED_KEY } from '../utils/constants'
|
|
|
|
import useLocalStorageState from '../hooks/useLocalStorageState'
|
|
|
|
import CreateAccountModal from './modals/CreateAccountModal'
|
2022-10-07 04:47:15 -07:00
|
|
|
import MangoAccountsListModal from './modals/MangoAccountsListModal'
|
2022-10-25 02:42:51 -07:00
|
|
|
import { useRouter } from 'next/router'
|
2022-11-01 21:41:12 -07:00
|
|
|
import UserSetup from './UserSetup'
|
2022-11-04 10:29:21 -07:00
|
|
|
import SolanaTps from './SolanaTps'
|
2022-11-18 09:09:39 -08:00
|
|
|
import useMangoAccount from 'hooks/useMangoAccount'
|
2022-11-19 10:33:12 -08:00
|
|
|
import useOnlineStatus from 'hooks/useOnlineStatus'
|
2022-08-26 12:15:50 -07:00
|
|
|
|
|
|
|
const TopBar = () => {
|
|
|
|
const { t } = useTranslation('common')
|
2022-11-18 09:09:39 -08:00
|
|
|
const { mangoAccount } = useMangoAccount()
|
2022-11-15 20:12:51 -08:00
|
|
|
const { connected } = useWallet()
|
2022-11-11 03:24:24 -08:00
|
|
|
const [isOnboarded, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
|
|
|
const [showUserSetup, setShowUserSetup] = useState(false)
|
2022-08-26 12:15:50 -07:00
|
|
|
const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
|
2022-10-07 04:47:15 -07:00
|
|
|
const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
|
2022-11-19 10:33:12 -08:00
|
|
|
const isOnline = useOnlineStatus()
|
2022-10-25 02:42:51 -07:00
|
|
|
const router = useRouter()
|
|
|
|
const { query } = router
|
2022-08-26 12:15:50 -07:00
|
|
|
|
2022-11-11 03:24:24 -08:00
|
|
|
const handleCloseSetup = useCallback(() => {
|
|
|
|
setShowUserSetup(false)
|
|
|
|
setIsOnboarded(true)
|
2022-08-26 12:15:50 -07:00
|
|
|
}, [])
|
|
|
|
|
2022-11-11 03:24:24 -08:00
|
|
|
const handleShowSetup = useCallback(() => {
|
|
|
|
setShowUserSetup(true)
|
2022-08-26 12:15:50 -07:00
|
|
|
}, [])
|
|
|
|
|
2022-10-30 05:02:59 -07:00
|
|
|
const handleShowAccounts = useCallback(() => {
|
|
|
|
if (mangoAccount) {
|
|
|
|
setShowMangoAccountsModal(true)
|
|
|
|
} else {
|
|
|
|
setShowCreateAccountModal(true)
|
|
|
|
}
|
|
|
|
}, [mangoAccount])
|
|
|
|
|
2022-08-26 12:15:50 -07:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="flex w-full items-center justify-between space-x-4">
|
2022-10-25 02:42:51 -07:00
|
|
|
<span className="mb-0 flex items-center">
|
|
|
|
{query.token ? (
|
2022-11-19 02:03:39 -08:00
|
|
|
<div className="mr-2 flex h-16 items-center border-r border-th-bkg-3 pr-4 md:mr-4 md:pr-6">
|
2022-10-25 02:42:51 -07:00
|
|
|
<IconButton onClick={() => router.back()} hideBg size="small">
|
|
|
|
<ArrowLeftIcon className="h-6 w-6" />
|
|
|
|
</IconButton>
|
|
|
|
</div>
|
|
|
|
) : null}
|
2022-11-19 02:03:39 -08:00
|
|
|
{connected ? (
|
|
|
|
<div className="hidden md:block">
|
|
|
|
<SolanaTps />
|
|
|
|
</div>
|
|
|
|
) : null}
|
2022-10-25 04:09:36 -07:00
|
|
|
<img
|
|
|
|
className="mr-4 ml-2 h-8 w-auto md:hidden"
|
|
|
|
src="/logos/logo-mark.svg"
|
|
|
|
alt="next"
|
|
|
|
/>
|
2022-08-26 12:15:50 -07:00
|
|
|
{!connected ? (
|
|
|
|
<span className="hidden items-center md:flex">
|
2022-09-07 17:47:59 -07:00
|
|
|
<WalletIcon className="h-5 w-5 text-th-fgd-3" />
|
|
|
|
<span className="ml-2">{t('connect-helper')}</span>
|
2022-08-26 12:15:50 -07:00
|
|
|
<ArrowRightIcon className="sideways-bounce ml-2 h-5 w-5 text-th-fgd-1" />
|
|
|
|
</span>
|
|
|
|
) : null}
|
|
|
|
</span>
|
2022-11-19 10:33:12 -08:00
|
|
|
{!isOnline ? (
|
|
|
|
<div className="flex items-center rounded-full bg-th-red py-2 px-4">
|
|
|
|
<ExclamationTriangleIcon className="h-5 w-5" />
|
|
|
|
<div className="ml-2">
|
|
|
|
Your network connection appears to be offline!
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
) : null}
|
2022-08-26 12:15:50 -07:00
|
|
|
{connected ? (
|
2022-09-20 18:03:59 -07:00
|
|
|
<div className="flex items-center space-x-4 pr-4 md:pr-0">
|
2022-10-07 04:47:15 -07:00
|
|
|
<button
|
2022-10-25 04:09:36 -07:00
|
|
|
className="mr-2 hidden md:block"
|
2022-11-13 19:21:45 -08:00
|
|
|
id="account-step-two"
|
2022-10-30 05:02:59 -07:00
|
|
|
onClick={handleShowAccounts}
|
2022-10-07 04:47:15 -07:00
|
|
|
>
|
|
|
|
<p className="text-right text-xs">{t('accounts')}</p>
|
|
|
|
<p className="text-left text-sm font-bold text-th-fgd-1">
|
2022-10-30 05:02:59 -07:00
|
|
|
{mangoAccount ? (
|
|
|
|
mangoAccount.name
|
|
|
|
) : (
|
|
|
|
<span>
|
|
|
|
<span className="mr-1.5">🥭</span>
|
|
|
|
{t('create-account')}
|
|
|
|
</span>
|
|
|
|
)}
|
2022-10-07 04:47:15 -07:00
|
|
|
</p>
|
|
|
|
</button>
|
2022-08-26 12:15:50 -07:00
|
|
|
<ConnectedMenu />
|
|
|
|
</div>
|
|
|
|
) : isOnboarded ? (
|
|
|
|
<ConnectWalletButton />
|
|
|
|
) : (
|
|
|
|
<button
|
|
|
|
className="relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark px-6 text-base font-bold text-white 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"
|
2022-11-11 03:24:24 -08:00
|
|
|
onClick={handleShowSetup}
|
2022-08-26 12:15:50 -07:00
|
|
|
>
|
|
|
|
<WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
|
|
|
{t('connect')}
|
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
</div>
|
2022-10-07 04:47:15 -07:00
|
|
|
{showMangoAccountsModal ? (
|
|
|
|
<MangoAccountsListModal
|
|
|
|
isOpen={showMangoAccountsModal}
|
|
|
|
onClose={() => setShowMangoAccountsModal(false)}
|
|
|
|
/>
|
|
|
|
) : null}
|
2022-11-11 03:24:24 -08:00
|
|
|
{showUserSetup ? <UserSetup onClose={handleCloseSetup} /> : null}
|
2022-08-26 12:15:50 -07:00
|
|
|
{showCreateAccountModal ? (
|
|
|
|
<CreateAccountModal
|
|
|
|
isOpen={showCreateAccountModal}
|
|
|
|
onClose={() => setShowCreateAccountModal(false)}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TopBar
|