import Link from 'next/link' import { Button, Dropdown, Nav, Navbar } from 'react-bootstrap' import styles from '../header.module.css' import { useRouter } from 'next/router' import BackArrow from '../../svgs/arrow-left-line.svg' import { useCallback, useEffect, useState } from 'react' import Price from '../price' import SubSelect from '../sub-select' import { USER_ID } from '../../lib/constants' import NoteIcon from '../../svgs/notification-4-fill.svg' import { useMe } from '../me' import { abbrNum } from '../../lib/format' import { useServiceWorker } from '../serviceworker' import { signOut } from 'next-auth/react' import Badges from '../badge' import LightningIcon from '../../svgs/bolt.svg' import SearchIcon from '../../svgs/search-line.svg' import classNames from 'classnames' import SnIcon from '@/svgs/sn.svg' import { useHasNewNotes } from '../use-has-new-notes' // import { useWallets } from '@/wallets/client/hooks' import { useWalletIndicator } from '@/wallets/client/hooks' import SwitchAccountList, { nextAccount, useAccounts } from '@/components/account' import { useShowModal } from '@/components/modal' import { numWithUnits } from '@/lib/format' import Head from 'next/head' export function Brand ({ className }) { return ( ) } export function hasNavSelect ({ path, pathname }) { return ( pathname.startsWith('/~') && !path.endsWith('/post') && !path.endsWith('/edit') ) } export function Back () { const router = useRouter() const [back, setBack] = useState(router.asPath !== '/') useEffect(() => { setBack(router.asPath !== '/' && (typeof window.navigation === 'undefined' || window.navigation.canGoBack === undefined || window?.navigation.canGoBack)) }, [router.asPath]) if (!back) return null return ( { if (back) { router.back() } else { router.push('/') } }} > ) } export function BackOrBrand ({ className }) { const router = useRouter() const [back, setBack] = useState(router.asPath !== '/') useEffect(() => { setBack(router.asPath !== '/' && (typeof window.navigation === 'undefined' || window.navigation.canGoBack === undefined || window?.navigation.canGoBack)) }, [router.asPath]) return (
{back ? : }
) } export function SearchItem ({ prefix, className }) { return ( ) } export function NavPrice ({ className }) { return ( ) } const PREPEND_SUBS = ['home'] const APPEND_SUBS = [{ label: '--------', items: ['create'] }] export function NavSelect ({ sub: subName, className, size }) { const sub = subName || 'home' return ( ) } export function NavNotifications ({ className }) { const hasNewNotes = useHasNewNotes() return ( <> {hasNewNotes && {' '} } ) } export function WalletSummary () { const { me } = useMe() if (!me || me.privates?.sats === 0) return null return ( {`${abbrNum(me.privates?.sats)}`} ) } export function NavWalletSummary ({ className }) { const { me } = useMe() return ( ) } export const Indicator = ({ superscript }) => { if (superscript) { return ( {' '} ) } return (
{' '}
) } export function MeDropdown ({ me, dropNavKey }) { if (!me) return null const profileIndicator = !me.bioId const walletIndicator = useWalletIndicator() const indicator = profileIndicator || walletIndicator return (
{`@${me.name}`} {indicator && }
profile {profileIndicator && } bookmarks wallets {walletIndicator && } credits satistics referrals
settings
) } // this is the width of the 'switch account' button if no width is given const SWITCH_ACCOUNT_BUTTON_WIDTH = '162px' export function SignUpButton ({ className = 'py-0', width }) { const router = useRouter() const handleLogin = useCallback(async pathname => await router.push({ pathname, query: { callbackUrl: window.location.origin + router.asPath } }), [router]) return ( ) } export default function LoginButton () { const router = useRouter() const handleLogin = useCallback(async pathname => await router.push({ pathname, query: { callbackUrl: window.location.origin + router.asPath } }), [router]) return ( ) } function LogoutObstacle ({ onClose }) { const { registration: swRegistration, togglePushSubscription } = useServiceWorker() // const { removeLocalWallets } = useWallets() const router = useRouter() return (

I reckon you want to logout?

) } export function LogoutDropdownItem ({ handleClose }) { const showModal = useShowModal() return ( <> { handleClose?.() showModal(onClose => ) }} >switch account { handleClose?.() showModal(onClose => ()) }} >logout ) } function SwitchAccountButton ({ handleClose }) { const showModal = useShowModal() const accounts = useAccounts() if (accounts.length === 0) return null return ( ) } export function LoginButtons ({ handleClose }) { return ( <> ) } export function AnonDropdown ({ path }) { return (
@anon
) } export function Sorts ({ sub, prefix, className }) { return ( <> hot recent {sub !== 'jobs' && <> random top } ) } export function PostItem ({ className, prefix }) { return ( post ) } export function MeCorner ({ dropNavKey, me, className }) { return (
) } export function AnonCorner ({ dropNavKey, className }) { return (
) }