index.tsx raw

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