Add amber support

src/app/components/ChatItem.svelte

@@ -10,7 +10,7 @@
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
-  import {makeChatPath} from '@app/routes'
+  import {makeChatPath} from "@app/routes"
 
   export let id: string
   export let pubkeys: string[]

src/app/components/EventInfo.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {nip19} from "nostr-tools"
-  import {ctx} from "@welshman/lib"
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"

src/app/components/LogIn.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import {makeSecret, getNip07, Nip46Broker} from "@welshman/signer"
+  import {onMount} from "svelte"
+  import {makeSecret, getNip07, Nip46Broker, getNip55, Nip55Signer} from "@welshman/signer"
   import {addSession, loadHandle, nip46Perms, type Session} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
@@ -86,11 +87,30 @@
     }
   })
 
+  const loginWithSigner = async (app: any) => {
+    const signer = new Nip55Signer(app.packageName)
+    const pubkey = await signer.getPubkey()
+
+    if (pubkey) {
+      await onSuccess({method: "nip55", pubkey, signer: app.packageName})
+    } else {
+      pushToast({
+        theme: "error",
+        message: "Something went wrong! Please try again.",
+      })
+    }
+  }
+
   const loginWithKey = () => pushModal(LogInKey)
 
   let username = ""
   let domain = "nsec.app"
   let loading = false
+  let signers: any[] = []
+
+  onMount(async () => {
+    signers = await getNip55()
+  })
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={loginWithNip46}>
@@ -136,6 +156,12 @@
       Log in with Extension
     </Button>
   {/if}
+  {#each signers as app}
+    <Button disabled={loading} class="btn btn-neutral" on:click={() => loginWithSigner(app)}>
+      <img src={app.iconUrl} alt={app.name} width="48" height="48" />
+      Log in with {app.name}
+    </Button>
+  {/each}
   <Button disabled={loading} on:click={loginWithKey} class="btn btn-neutral">
     <Icon icon="key" />
     Log in with Key

src/app/components/MenuSpaces.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {page} from "$app/stores"
-  import {goto} from "$app/navigation"
   import {displayRelayUrl} from "@welshman/util"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
@@ -51,8 +50,6 @@
     showSettings = false
   }
 
-  const browseSpaces = () => goto("/discover")
-
   const leaveSpace = () => pushModal(SpaceExit, {url: space})
 
   const joinSpace = () => pushModal(SpaceJoin, {url: space})
@@ -85,16 +82,17 @@
       Go Back
     </Button>
   {:else if space}
-    <p class="mb-4 text-2xl center gap-2">
+    <p class="center mb-4 gap-2 text-2xl">
       <Icon icon="compass-big" size={7} />
       <span class="text-primary">{displayRelayUrl(space)}</span>
     </p>
-    <div class="grid sm:grid-cols-3 gap-2">
+    <div class="grid gap-2 sm:grid-cols-3">
       <Link href={makeSpacePath(space, "threads")} class="btn btn-neutral">
         <Icon icon="notes-minimalistic" /> Threads
       </Link>
       <Link href={makeSpacePath(space)} class="btn btn-neutral">
-        <Icon icon="hashtag" /> {GENERAL}
+        <Icon icon="hashtag" />
+        {GENERAL}
       </Link>
       {#each rooms as room, i (room)}
         <Link href={makeSpacePath(space, room)} class="btn btn-neutral">
@@ -109,7 +107,7 @@
         </Link>
       {/each}
     </div>
-    <div class="grid sm:grid-cols-2 gap-2">
+    <div class="grid gap-2 sm:grid-cols-2">
       <Button on:click={addRoom} class="btn btn-primary">
         <Icon icon="add-circle" />
         Create Room

src/app/components/PeopleItem.svelte

@@ -1,27 +1,12 @@
 <script lang="ts">
-  import {nip19} from "nostr-tools"
   import {onMount} from "svelte"
   import {ago, append, first, sortBy, WEEK, ctx} from "@welshman/lib"
-  import {NOTE, getAncestorTags, getListTags, getPubkeyTagValues} from "@welshman/util"
+  import {NOTE, getAncestorTags} from "@welshman/util"
   import type {Filter} from "@welshman/util"
   import {deriveEvents} from "@welshman/store"
-  import {
+  import {repository, load, loadRelaySelections, formatTimestampRelative} from "@welshman/app"
-    repository,
-    load,
-    loadRelaySelections,
-    userFollows,
-    formatTimestamp,
-    formatTimestampRelative,
-  } from "@welshman/app"
-  import Link from "@lib/components/Link.svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
-  import Content from "@app/components/Content.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
-  import {pushDrawer} from "@app/modal"
-  import {entityLink} from "@app/state"
 
   export let pubkey
 

src/app/components/PrimaryNav.svelte

@@ -46,7 +46,11 @@
       {/if}
     </div>
     <div>
-      <PrimaryNavItem title="Settings" href="/settings/profile" prefix="/settings" class="tooltip-right">
+      <PrimaryNavItem
+        title="Settings"
+        href="/settings/profile"
+        prefix="/settings"
+        class="tooltip-right">
         <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
       </PrimaryNavItem>
       <PrimaryNavItem title="Threads" href="/network" class="tooltip-right">

src/app/components/ProfileDetail.svelte

@@ -3,9 +3,25 @@
   import {nip19} from "nostr-tools"
   import {ctx, sleep, sortBy, flatten} from "@welshman/lib"
   import {feedFromFilter} from "@welshman/feeds"
-  import {NOTE, displayProfile, getListTags, getPubkeyTagValues, displayPubkey, getAncestorTags} from "@welshman/util"
+  import {
+    NOTE,
+    displayProfile,
+    getListTags,
+    getPubkeyTagValues,
+    displayPubkey,
+    getAncestorTags,
+  } from "@welshman/util"
   import {deriveEvents} from "@welshman/store"
-  import {repository, userFollows, tagPubkey, follow, unfollow, deriveProfile, displayNip05, feedLoader} from "@welshman/app"
+  import {
+    repository,
+    userFollows,
+    tagPubkey,
+    follow,
+    unfollow,
+    deriveProfile,
+    displayNip05,
+    feedLoader,
+  } from "@welshman/app"
   import {createScroller} from "@lib/html"
   import {fly} from "@lib/transition"
   import Link from "@lib/components/Link.svelte"
@@ -60,11 +76,17 @@
         </div>
       </div>
       {#if getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)}
-        <button type="button" class="btn btn-neutral" on:click|preventDefault={() => unfollow(pubkey)}>
+        <button
+          type="button"
+          class="btn btn-neutral"
+          on:click|preventDefault={() => unfollow(pubkey)}>
           Unfollow
         </button>
       {:else}
-        <button type="button" class="btn btn-primary" on:click|preventDefault={() => follow(tagPubkey(pubkey))}>
+        <button
+          type="button"
+          class="btn btn-primary"
+          on:click|preventDefault={() => follow(tagPubkey(pubkey))}>
           Follow
         </button>
       {/if}

src/app/routes.ts

@@ -1,4 +1,3 @@
-import {nip19} from "nostr-tools"
 import type {Page} from "@sveltejs/kit"
 import {userMembership, makeChatId, decodeRelay, encodeRelay, getMembershipUrls} from "@app/state"
 

src/app/state.ts

@@ -1,4 +1,3 @@
-import {nip19} from "nostr-tools"
 import twColors from "tailwindcss/colors"
 import {get, derived} from "svelte/store"
 import type {Maybe} from "@welshman/lib"

src/lib/components/CardButton.svelte

@@ -2,13 +2,13 @@
   import Icon from "@lib/components/Icon.svelte"
 </script>
 
-<div class="btn btn-neutral h-[unset] flex flex-nowrap w-full text-left py-4 {$$props.class}">
+<div class="btn btn-neutral flex h-[unset] w-full flex-nowrap py-4 text-left {$$props.class}">
-  <div class="flex flex-row items-start gap-1 flex-grow">
+  <div class="flex flex-grow flex-row items-start gap-1">
-    <div class="w-12 h-14 flex items-center flex-shrink-0">
+    <div class="flex h-14 w-12 flex-shrink-0 items-center">
       <slot name="icon" />
     </div>
     <div class="flex flex-col gap-1">
-      <p class="text-lg text-bold pt-2">
+      <p class="text-bold pt-2 text-lg">
         <slot name="title" />
       </p>
       <p class="text-sm">
@@ -16,7 +16,7 @@
       </p>
     </div>
   </div>
-  <div class="w-14 h-14 flex items-center justify-end">
+  <div class="flex h-14 w-14 items-center justify-end">
     <Icon size={7} icon="alt-arrow-right" />
   </div>
 </div>

src/lib/components/Page.svelte

@@ -1,3 +1,4 @@
-<div class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0 {$$props.class}">
+<div
+  class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0 {$$props.class}">
   <slot />
 </div>

src/lib/html.ts

@@ -34,7 +34,7 @@ export const createScroller = ({
   let done = false
 
   const check = async () => {
-    const container = element.classList.contains('scroll-container')
+    const container = element.classList.contains("scroll-container")
       ? element
       : element.closest(".scroll-container")
 

src/lib/transition.ts

@@ -78,4 +78,3 @@ export function slideAndFade(
 export const conditionalTransition =
   (condition: any, transition: any) => (node: any, args?: any) =>
     condition ? transition(node, args) : null
-

src/routes/chat/+page.svelte

@@ -29,19 +29,21 @@
   })
 </script>
 
-<div class="min-h-screen hidden md:hero">
+<div class="hidden min-h-screen md:hero">
-  <div class="hero-content col-2 text-center">
+  <div class="col-2 hero-content text-center">
     <p class="row-2 text-lg">
       <Icon icon="info-circle" />
       No conversation selected.
     </p>
     <p>
-      Click on a conversation in the sidebar, or <Button class="link" on:click={startChat}>start a new one</Button>.
+      Click on a conversation in the sidebar, or <Button class="link" on:click={startChat}
+        >start a new one</Button
+      >.
     </p>
   </div>
 </div>
 <div class="content col-2">
-  <div class="row-2 min-w-0 items-center flex-grow">
+  <div class="row-2 min-w-0 flex-grow items-center">
     <label class="input input-bordered flex flex-grow items-center gap-2">
       <Icon icon="magnifer" />
       <input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />

src/routes/spaces/[relay]/+layout.svelte

@@ -121,7 +121,8 @@
         </div>
         <div transition:slide={{delay: getDelay()}}>
           <SecondaryNavItem href={makeSpacePath(url)}>
-            <Icon icon="hashtag" /> {GENERAL}
+            <Icon icon="hashtag" />
+            {GENERAL}
           </SecondaryNavItem>
         </div>
         {#each rooms as room, i (room)}