feat: integrate nstart (#33)

src/components/AccountManager/index.tsx

@@ -1,12 +1,13 @@
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { useNostr } from '@/providers/NostrProvider'
+import { NstartModal } from 'nstart-modal'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AccountList from '../AccountList'
 import BunkerLogin from './BunkerLogin'
-import PrivateKeyLogin from './PrivateKeyLogin'
 import GenerateNewAccount from './GenerateNewAccount'
+import PrivateKeyLogin from './PrivateKeyLogin'
 
 type TAccountManagerPage = 'nsec' | 'bunker' | 'generate' | null
 
@@ -36,38 +37,74 @@ function AccountManagerNav({
   close?: () => void
 }) {
   const { t } = useTranslation()
-  const { nip07Login, accounts } = useNostr()
+  const { nip07Login, bunkerLogin, nsecLogin, ncryptsecLogin, accounts } = useNostr()
 
   return (
-    <div onClick={(e) => e.stopPropagation()} className="flex flex-col gap-4">
-      <div className="text-center text-muted-foreground text-sm font-semibold">
-        {t('Add an Account')}
+    <div onClick={(e) => e.stopPropagation()} className="flex flex-col gap-8">
+      <div>
+        <div className="text-center text-muted-foreground text-sm font-semibold">
+          {t('Add an Account')}
+        </div>
+        <div className="space-y-2 mt-4">
+          {!!window.nostr && (
+            <Button onClick={() => nip07Login().then(() => close?.())} className="w-full">
+              {t('Login with Browser Extension')}
+            </Button>
+          )}
+          <Button variant="secondary" onClick={() => setPage('bunker')} className="w-full">
+            {t('Login with Bunker')}
+          </Button>
+          <Button variant="secondary" onClick={() => setPage('nsec')} className="w-full">
+            {t('Login with Private Key')}
+          </Button>
+        </div>
       </div>
-      {!!window.nostr && (
-        <Button onClick={() => nip07Login().then(() => close?.())} className="w-full">
-          {t('Login with Browser Extension')}
-        </Button>
-      )}
-      <Button variant="secondary" onClick={() => setPage('bunker')} className="w-full">
-        {t('Login with Bunker')}
-      </Button>
-      <Button variant="secondary" onClick={() => setPage('nsec')} className="w-full">
-        {t('Login with Private Key')}
-      </Button>
       <Separator />
-      <div className="text-center text-muted-foreground text-sm font-semibold">
-        {t("Don't have an account yet?")}
+      <div>
+        <div className="text-center text-muted-foreground text-sm font-semibold">
+          {t("Don't have an account yet?")}
+        </div>
+        <Button
+          onClick={() => {
+            const wizard = new NstartModal({
+              baseUrl: 'https://start.njump.me',
+              an: 'Jumble',
+              onComplete: ({ nostrLogin }) => {
+                if (!nostrLogin) return
+
+                if (nostrLogin.startsWith('bunker://')) {
+                  bunkerLogin(nostrLogin)
+                } else if (nostrLogin.startsWith('ncryptsec')) {
+                  ncryptsecLogin(nostrLogin)
+                } else if (nostrLogin.startsWith('nsec')) {
+                  nsecLogin(nostrLogin)
+                }
+              }
+            })
+            close?.()
+            wizard.open()
+          }}
+          className="w-full mt-4"
+        >
+          {t('Signup with Nstart wizard')}
+        </Button>
+        <Button
+          variant="link"
+          onClick={() => setPage('generate')}
+          className="w-full text-muted-foreground py-0 h-fit mt-1"
+        >
+          {t('or generate your private key here')}
+        </Button>
       </div>
-      <Button variant="secondary" onClick={() => setPage('generate')} className="w-full">
-        {t('Generate New Account')}
-      </Button>
       {accounts.length > 0 && (
         <>
           <Separator />
-          <div className="text-center text-muted-foreground text-sm font-semibold">
-            {t('Logged in Accounts')}
+          <div>
+            <div className="text-center text-muted-foreground text-sm font-semibold">
+              {t('Logged in Accounts')}
+            </div>
+            <AccountList className="mt-4" afterSwitch={() => close?.()} />
           </div>
-          <AccountList afterSwitch={() => close?.()} />
         </>
       )}
     </div>