index.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { Separator } from '@/components/ui/separator'
   3  import { isDevEnv } from '@/lib/utils'
   4  import { useNostr } from '@/providers/NostrProvider'
   5  import { useState } from 'react'
   6  import { useTranslation } from 'react-i18next'
   7  import AccountList from '../AccountList'
   8  import BunkerLogin from './BunkerLogin'
   9  import NpubLogin from './NpubLogin'
  10  import PrivateKeyLogin from './PrivateKeyLogin'
  11  import Signup from './Signup'
  12  
  13  type TAccountManagerPage = 'nsec' | 'npub' | 'signup' | 'bunker' | null
  14  
  15  export default function AccountManager({ close }: { close?: () => void }) {
  16    const [page, setPage] = useState<TAccountManagerPage>(null)
  17  
  18    return (
  19      <>
  20        {page === 'nsec' ? (
  21          <PrivateKeyLogin back={() => setPage(null)} onLoginSuccess={() => close?.()} />
  22        ) : page === 'npub' ? (
  23          <NpubLogin back={() => setPage(null)} onLoginSuccess={() => close?.()} />
  24        ) : page === 'signup' ? (
  25          <Signup back={() => setPage(null)} onSignupSuccess={() => close?.()} />
  26        ) : page === 'bunker' ? (
  27          <BunkerLogin back={() => setPage(null)} onLoginSuccess={() => close?.()} />
  28        ) : (
  29          <AccountManagerNav setPage={setPage} close={close} />
  30        )}
  31      </>
  32    )
  33  }
  34  
  35  function AccountManagerNav({
  36    setPage,
  37    close
  38  }: {
  39    setPage: (page: TAccountManagerPage) => void
  40    close?: () => void
  41  }) {
  42    const { t } = useTranslation()
  43    const { nip07Login, accounts } = useNostr()
  44  
  45    return (
  46      <div onClick={(e) => e.stopPropagation()} className="flex flex-col gap-8">
  47        <div>
  48          <div className="text-center text-muted-foreground text-sm font-semibold">
  49            {t('Add an Account')}
  50          </div>
  51          <div className="space-y-2 mt-4">
  52            {!!window.nostr && (
  53              <Button onClick={() => nip07Login().then(() => close?.())} className="w-full">
  54                {t('Login with Browser Extension')}
  55              </Button>
  56            )}
  57            <Button variant="secondary" onClick={() => setPage('nsec')} className="w-full">
  58              {t('Login with Private Key')}
  59            </Button>
  60            <Button variant="secondary" onClick={() => setPage('bunker')} className="w-full">
  61              {t('Login with Bunker')}
  62            </Button>
  63            {isDevEnv() && (
  64              <Button variant="secondary" onClick={() => setPage('npub')} className="w-full">
  65                Login with Public key (for development)
  66              </Button>
  67            )}
  68          </div>
  69        </div>
  70        <Separator />
  71        <div>
  72          <div className="text-center text-muted-foreground text-sm font-semibold">
  73            {t("Don't have an account yet?")}
  74          </div>
  75          <Button onClick={() => setPage('signup')} className="w-full mt-4">
  76            {t('Create New Account')}
  77          </Button>
  78        </div>
  79        {accounts.length > 0 && (
  80          <>
  81            <Separator />
  82            <div>
  83              <div className="text-center text-muted-foreground text-sm font-semibold">
  84                {t('Logged in Accounts')}
  85              </div>
  86              <AccountList className="mt-4" afterSwitch={() => close?.()} />
  87            </div>
  88          </>
  89        )}
  90      </div>
  91    )
  92  }
  93