Build better onboarding

src/app/components/SignUpProfile.svelte

@@ -1,33 +1,36 @@
 <script lang="ts">
   import type {Profile} from "@welshman/util"
-  import {PROFILE, createProfile, makeProfile, makeEvent} from "@welshman/util"
-  import {loginWithNip01, publishThunk} from "@welshman/app"
+  import {makeProfile} from "@welshman/util"
+  import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
-  import {INDEXER_RELAYS} from "@app/state"
-
-  type Props = {
-    secret: string
-  }
-
-  const {secret}: Props = $props()
+  import SignUpKey from "@app/components/SignUpKey.svelte"
+  import {pushModal} from "@app/modal"
 
   const initialValues = {
     profile: makeProfile(),
-    shouldBroadcast: true,
+    shouldBroadcast: false,
   }
 
-  const onsubmit = ({profile, shouldBroadcast}: {profile: Profile; shouldBroadcast: boolean}) => {
-    const event = makeEvent(PROFILE, createProfile(profile))
-    const relays = shouldBroadcast ? INDEXER_RELAYS : []
+  const back = () => history.back()
 
-    loginWithNip01(secret)
-    publishThunk({event, relays})
-  }
+  const onsubmit = (values: {profile: Profile}) => pushModal(SignUpKey, values)
 </script>
 
-<ProfileEditForm hideAddress {initialValues} {onsubmit}>
-  {#snippet footer()}
-    <Button type="submit" class="btn btn-primary">Create Account</Button>
-  {/snippet}
-</ProfileEditForm>
+<div class="flex flex-col gap-4">
+  <ProfileEditForm isSignup {initialValues} {onsubmit}>
+    {#snippet footer()}
+      <ModalFooter>
+        <Button class="btn btn-link" onclick={back}>
+          <Icon icon="alt-arrow-left" />
+          Go back
+        </Button>
+        <Button class="btn btn-primary" type="submit">
+          Create Account
+          <Icon icon="alt-arrow-right" />
+        </Button>
+      </ModalFooter>
+    {/snippet}
+  </ProfileEditForm>
+</div>