Add help text for bunker

src/app/components/InfoBunker.svelte

@@ -16,8 +16,8 @@
   </p>
   <p>
     A good way to manage your keys is to use a remote signing application. These apps can hold
-    your keys and log you in remotely to as many applications as you like, without increasing
-    the risk of your keys being stolen.
+    your keys and log you in remotely to as many applications as you like, without risking
+    loss or theft of your keys.
   </p>
   <p>
     One way to log in with a remote signer is using a "bunker link" which is more secure and
@@ -26,7 +26,7 @@
   </p>
   <p>
     If you don't have a signer yet, <Link external class="link" href="https://nsec.app/">nsec.app</Link>
-    is an easy way to get started.
+    is a great way to get started.
   </p>
   <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/app/components/InfoNostr.svelte

@@ -10,14 +10,17 @@
     <div slot="title">What is nostr?</div>
   </ModalHeader>
   <p>
-    <Link external href="https://nostr.com/">Nostr</Link> is way to build social apps that talk to eachother.
-    Users own their social identity instead of renting it from a tech company, and can bring it with
-    them from app to app.
+    <Link external href="https://nostr.com/" class="link">Nostr</Link> is way to build
+    social apps that talk to each other. Users own their social identity instead of
+    renting it from a tech company, and can take it with them.
   </p>
   <p>
-    This can be a little confusing when you're just getting started, but as long as you're using
-    {PLATFORM_NAME}, it will work just like a normal app. When you're ready to start exploring
-    nostr, visit your settings page to learn more.
+    If you'd like to learn more about what other apps exist in the nostr ecosystem, please
+    visit <Link external class="link" href="https://nostrapps.com/">nostrapps.com</Link>.
+  </p>
+  <p>
+    To learn more about how to manage your keys, or to set up an account, try
+    <Link external class="link" href="https://nosta.me/">nosta.me</Link>.
   </p>
   <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/app/components/LogInBunker.svelte

@@ -68,7 +68,7 @@
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || !bunker}>
       <Spinner {loading}>Next</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>

src/app/components/SignUp.svelte

@@ -3,20 +3,18 @@
   import {addSession, nip46Perms, loadHandle} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import LogIn from "@app/components/LogIn.svelte"
   import InfoNostr from "@app/components/InfoNostr.svelte"
-  import SignUpKey from "@app/components/SignUpKey.svelte"
   import {pushModal, clearModals} from "@app/modal"
   import {PLATFORM_NAME} from "@app/state"
   import {pushToast} from "@app/toast"
 
   const login = () => pushModal(LogIn)
 
-  const signUpWithKey = () => pushModal(SignUpKey)
-
   const trySignup = async () => {
     const secret = makeSecret()
     const handle = await loadHandle(`${username}@${handler.domain}`)
@@ -94,10 +92,10 @@
     <Icon icon="alt-arrow-right" />
   </Button>
   <Divider>Or</Divider>
-  <Button disabled={loading} on:click={signUpWithKey} class="btn btn-neutral">
-    <Icon icon="key" />
-    Sign up with Key
-  </Button>
+  <Link external href="https://nosta.me" class="btn {username ? 'btn-neutral' : 'btn-primary'}">
+    <Icon icon="square-share-line" />
+    Get started on Nosta.me
+  </Link>
   <div class="text-sm">
     Already have an account?
     <Button class="link" on:click={login}>Log in instead</Button>

src/app/components/SignUpKey.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import {nip19} from "nostr-tools"
-  import {goto} from "$app/navigation"
-  import {hexToBytes} from "@noble/hashes/utils"
-  import {getPubkey, makeSecret} from "@welshman/signer"
-  import {addSession} from "@welshman/app"
-  import Button from "@lib/components/Button.svelte"
-  import Field from "@lib/components/Field.svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import InfoKeys from "@app/components/InfoKeys.svelte"
-  import {pushModal, clearModals} from "@app/modal"
-  import {clip} from "@app/toast"
-
-  const secret = makeSecret()
-  const nsec = nip19.nsecEncode(hexToBytes(secret))
-
-  const back = () => history.back()
-
-  const copyNsec = () => clip(nsec)
-
-  const onSubmit = async () => {
-    const pubkey = getPubkey(secret)
-
-    addSession({method: "nip01", pubkey, secret})
-    clearModals()
-    goto("/settings/profile")
-  }
-</script>
-
-<form class="column gap-4" on:submit|preventDefault={onSubmit}>
-  <ModalHeader>
-    <div slot="title">Sign Up</div>
-    <div slot="info">With a freshly generated private key</div>
-  </ModalHeader>
-  <Field>
-    <p slot="label">Private Key</p>
-    <label class="input input-bordered flex w-full items-center gap-2" slot="input">
-      <Icon icon="key" />
-      <input value={nsec} class="grow" type="password" />
-      <Button on:click={copyNsec}>
-        <Icon icon="copy" />
-      </Button>
-    </label>
-    <p slot="info">
-      Make sure to save your private key somewhere safe, like in a password manager.
-      <Button class="link" on:click={() => pushModal(InfoKeys)}>What is a private key?</Button>
-    </p>
-  </Field>
-  <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
-      <Icon icon="alt-arrow-left" />
-      Go back
-    </Button>
-    <Button type="submit" class="btn btn-primary">
-      Next
-      <Icon icon="alt-arrow-right" />
-    </Button>
-  </ModalFooter>
-</form>

src/assets/icons/Question Square.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M10.125 8.875C10.125 7.83947 10.9645 7 12 7C13.0355 7 13.875 7.83947 13.875 8.875C13.875 9.56245 13.505 10.1635 12.9534 10.4899C12.478 10.7711 12 11.1977 12 11.75V13" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="12" cy="16" r="1" fill="#1C274C"/>
+</svg>

src/lib/components/Icon.svelte

@@ -61,7 +61,9 @@
   import Pallete2 from "@assets/icons/Pallete 2.svg?dataurl"
   import Paperclip from "@assets/icons/Paperclip.svg?dataurl"
   import Plain from "@assets/icons/Plain.svg?dataurl"
+  import QuestionSquare from "@assets/icons/Question Square.svg?dataurl"
   import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl"
+  import Rocket2 from "@assets/icons/Rocket 2.svg?dataurl"
   import Reply from "@assets/icons/Reply.svg?dataurl"
   import Server from "@assets/icons/Server.svg?dataurl"
   import Settings from "@assets/icons/Settings.svg?dataurl"
@@ -139,8 +141,10 @@
     "pallete-2": Pallete2,
     paperclip: Paperclip,
     plain: Plain,
+    "question-square": QuestionSquare,
     reply: Reply,
     "remote-controller-minimalistic": RemoteControllerMinimalistic,
+    "rocket-2": Rocket2,
     "share-circle": ShareCircle,
     "shop-minimalistic": ShopMinimalistic,
     "smile-circle": SmileCircle,