src/app/components/KeyDownload.svelte

@@ -15,6 +15,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast} from "@app/util/toast"
   import {PLATFORM_NAME} from "@app/core/state"
 
@@ -22,9 +23,11 @@
     secret: string
     next: () => unknown
     submitText?: string
+    step?: number
+    totalSteps?: number
   }
 
-  const {secret, next, submitText = "Continue"}: Props = $props()
+  const {secret, next, submitText = "Continue", step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 
@@ -109,6 +112,9 @@
 
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
     <ModalHeader>
       <ModalTitle>Your Keys are Ready!</ModalTitle>
     </ModalHeader>

src/app/components/ProgressBar.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  const {current, total}: {current: number; total: number} = $props()
+</script>
+
+<div class="flex gap-2 w-full px-4 pt-2">
+  {#each Array(total) as _, i}
+    <div
+      class="h-1 flex-1 rounded-full transition-colors {i < current
+        ? 'bg-primary'
+        : 'bg-base-300'}">
+    </div>
+  {/each}
+</div>

src/app/components/SignUp.svelte

@@ -62,9 +62,10 @@
 
   const flows = {
     email: {
-      start: () => pushModal(SignUpEmail, {next: flows.email.profile}),
-      profile: () => pushModal(SignUpProfile, {next: flows.email.complete}),
-      complete: () => pushModal(SignUpComplete, {next: flows.email.finalize}),
+      start: () => pushModal(SignUpEmail, {next: flows.email.profile, step: 1, totalSteps: 3}),
+      profile: () => pushModal(SignUpProfile, {next: flows.email.complete, step: 2, totalSteps: 3}),
+      complete: () =>
+        pushModal(SignUpComplete, {next: flows.email.finalize, step: 3, totalSteps: 3}),
       finalize: () => {
         const email = getKey<string>("signup.email")!
         const clientOptions = getKey<ClientOptions>("signup.clientOptions")!
@@ -74,9 +75,10 @@
       },
     },
     nostr: {
-      start: () => pushModal(SignUpProfile, {next: flows.nostr.key}),
-      key: () => pushModal(SignUpKey, {next: flows.nostr.complete}),
-      complete: () => pushModal(SignUpComplete, {next: flows.nostr.finalize}),
+      start: () => pushModal(SignUpProfile, {next: flows.nostr.key, step: 1, totalSteps: 3}),
+      key: () => pushModal(SignUpKey, {next: flows.nostr.complete, step: 2, totalSteps: 3}),
+      complete: () =>
+        pushModal(SignUpComplete, {next: flows.nostr.finalize, step: 3, totalSteps: 3}),
       finalize: () => {
         const secret = getKey<string>("signup.secret")!
 

src/app/components/SignUpComplete.svelte

@@ -9,18 +9,24 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
     <ModalHeader>
       <ModalTitle>You're all set!</ModalTitle>
     </ModalHeader>

src/app/components/SignUpEmail.svelte

@@ -18,14 +18,17 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SignUpEmailConfirm from "@app/components/SignUpEmailConfirm.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast, popToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 
@@ -81,7 +84,7 @@
       setKey("signup.clientOptions", clientOptions)
 
       popToast(toastId)
-      pushModal(SignUpEmailConfirm, {next})
+      pushModal(SignUpEmailConfirm, {next, step, totalSteps})
     } catch (e) {
       console.error(e)
 
@@ -101,6 +104,9 @@
 
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
     <ModalHeader>
       <ModalTitle>Sign up with Email</ModalTitle>
       <ModalSubtitle>Keep your keys safe using multi-signer key sharing</ModalSubtitle>

src/app/components/SignUpEmailConfirm.svelte

@@ -15,12 +15,15 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const email = getKey<string>("signup.email")
 
@@ -41,6 +44,9 @@
 
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
     <ModalHeader>
       <ModalTitle>Verify your Email Address</ModalTitle>
       <ModalSubtitle>Enter the one-time confirmation code sent to your email</ModalSubtitle>

src/app/components/SignUpKey.svelte

@@ -4,11 +4,13 @@
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const secret = getKey<string>("signup.secret")!
 </script>
 
-<KeyDownload {secret} {next} />
+<KeyDownload {secret} {next} {step} {totalSteps} />

src/app/components/SignUpProfile.svelte

@@ -8,12 +8,15 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const profile = getKey<Profile>("signup.profile")!
 
@@ -29,6 +32,9 @@
 
 <Modal>
   <ModalBody>
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
     <ProfileEditForm isSignup {initialValues} {onsubmit}>
       {#snippet footer()}
         <Button class="btn btn-link" onclick={back}>