Handle profile update errors

package.json

@@ -11,7 +11,7 @@
     "tauri:info": "tauri info",
     "tauri:icons": "tauri icon assets/logo.png --output src-tauri/icons",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "./check.sh",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check src && eslint src",
     "format": "git diff head --name-only --diff-filter d | grep -E '(js|ts|svelte|css)$' | xargs -r prettier --write",
     "format:all": "prettier --write src",

src/app/components/ProfileEdit.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import type {Profile} from "@welshman/util"
   import {getTag, makeProfile} from "@welshman/util"
-  import {pubkey, profilesByPubkey} from "@welshman/app"
+  import {pubkey, profilesByPubkey, waitForThunkError} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import {errorMessage} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
   import {clearModals} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
@@ -17,11 +19,33 @@
 
   const back = () => history.back()
 
-  const onsubmit = ({profile, shouldBroadcast}: {profile: Profile; shouldBroadcast: boolean}) => {
-    updateProfile({profile, shouldBroadcast})
-    pushToast({message: "Your profile has been updated!"})
-    clearModals()
+  const onsubmit = async ({
+    profile,
+    shouldBroadcast,
+  }: {
+    profile: Profile
+    shouldBroadcast: boolean
+  }) => {
+    loading = true
+
+    try {
+      const error = await waitForThunkError(updateProfile({profile, shouldBroadcast}))
+
+      if (error) {
+        pushToast({
+          theme: "error",
+          message: `Failed to update your profile: ${errorMessage(error)}`,
+        })
+      } else {
+        pushToast({message: "Your profile has been updated!"})
+        clearModals()
+      }
+    } finally {
+      loading = false
+    }
   }
+
+  let loading = $state(false)
 </script>
 
 <ProfileEditForm {initialValues} {onsubmit}>
@@ -30,6 +54,9 @@
       <Icon icon={AltArrowLeft} />
       Go Back
     </Button>
-    <Button type="submit" class="btn btn-primary">Save Changes</Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading} />
+      Save Changes
+    </Button>
   {/snippet}
 </ProfileEditForm>

src/app/components/WalletAsReceivingAddress.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import {makeProfile} from "@welshman/util"
   import {getWalletAddress} from "@welshman/util"
+  import {userProfile, waitForThunkError, session} from "@welshman/app"
+  import {errorMessage} from "@lib/util"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Modal from "@lib/components/Modal.svelte"
@@ -9,8 +12,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {updateProfile} from "@app/core/commands"
   import {clearModals} from "@app/util/modal"
-  import {userProfile, session} from "@welshman/app"
-  import {makeProfile} from "@welshman/util"
+  import {pushToast} from "@app/util/toast"
 
   const lud16 = getWalletAddress($session!.wallet!)
 
@@ -20,9 +22,13 @@
     loading = true
 
     try {
-      await updateProfile({profile: {...profile, lud16}})
+      const error = await waitForThunkError(updateProfile({profile: {...profile, lud16}}))
 
-      clearModals()
+      if (error) {
+        pushToast({theme: "error", message: `Failed to update profile: ${errorMessage(error)}`})
+      } else {
+        clearModals()
+      }
     } finally {
       loading = false
     }

src/app/components/WalletUpdateReceivingAddress.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {getWalletAddress} from "@welshman/util"
-  import {session, userProfile} from "@welshman/app"
+  import {session, waitForThunkError, userProfile} from "@welshman/app"
+  import {errorMessage} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -17,7 +18,7 @@
   const back = () => history.back()
 
   let address = $state($userProfile?.lud16 || "")
-  let isLoading = $state(false)
+  let loading = $state(false)
 
   const walletLud16 = $derived($session?.wallet ? getWalletAddress($session.wallet) : undefined)
 
@@ -28,20 +29,28 @@
   }
 
   const save = async () => {
-    isLoading = true
+    loading = true
+
     try {
-      await updateProfile({
-        profile: {
-          ...$userProfile,
-          lud06: undefined,
-          lud16: address.trim() || undefined,
-        },
-      })
-      back()
+      const error = await waitForThunkError(
+        updateProfile({
+          profile: {
+            ...$userProfile,
+            lud06: undefined,
+            lud16: address.trim() || undefined,
+          },
+        }),
+      )
+
+      if (error) {
+        pushToast({theme: "error", message: `Failed to update profile: ${errorMessage(error)}`})
+      } else {
+        back()
+      }
     } catch (error) {
       pushToast({theme: "error", message: "Failed to update profile"})
     } finally {
-      isLoading = false
+      loading = false
     }
   }
 </script>
@@ -61,7 +70,7 @@
           placeholder="user@domain.com"
           bind:value={address}
           class="input input-bordered flex w-full"
-          disabled={isLoading} />
+          disabled={loading} />
         <p class="text-xs opacity-75">
           You can enter one manually or use your connected wallet's address (if available). Leave
           empty to remove your lightning address
@@ -78,7 +87,7 @@
               </div>
               <p class="text-xs opacity-75">{walletLud16}</p>
             </div>
-            <Button class="btn btn-outline btn-sm" onclick={useWalletAddress} disabled={isLoading}>
+            <Button class="btn btn-outline btn-sm" onclick={useWalletAddress} disabled={loading}>
               Use This
             </Button>
           </div>
@@ -87,9 +96,9 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-neutral" onclick={back} disabled={isLoading}>Cancel</Button>
-    <Button class="btn btn-primary" onclick={save} disabled={isLoading}>
-      {#if isLoading}
+    <Button class="btn btn-neutral" onclick={back} disabled={loading}>Cancel</Button>
+    <Button class="btn btn-primary" onclick={save} disabled={loading}>
+      {#if loading}
         <span class="loading loading-spinner loading-sm"></span>
       {:else}
         <Icon icon={CheckCircle} />

src/app/core/commands.ts

@@ -676,7 +676,7 @@ export const initProfile = (profile: Profile) => {
   return publishThunk({event, relays: []})
 }
 
-export const updateProfile = async ({
+export const updateProfile = ({
   profile,
   shouldBroadcast = !getTag(PROTECTED, profile.event?.tags || []),
 }: {
@@ -697,5 +697,5 @@ export const updateProfile = async ({
   const event = makeEvent(template.kind, template)
   const relays = router.merge(scenarios).getUrls()
 
-  await publishThunk({event, relays}).complete
+  return publishThunk({event, relays})
 }