fix: replace zap slider with common amount pills

.env

@@ -1,5 +1,6 @@
 VITE_DEFAULT_PUBKEYS=06639a386c9c1014217622ccbcf40908c4f1a0c33e23f8d6d68f4abf655f8f71,266815e0c9210dfa324c6cba3573b14bee49da4209a9456f9484e5106cd408a5,391819e2f2f13b90cac7209419eb574ef7c0d1f4e81867fc24c47a3ce5e8a248,3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d,3f770d65d3a764a9c5cb503ae123e62ec7598ad035d836e2a810f3877a745b24,55f04590674f3648f4cdc9dc8ce32da2a282074cd0b020596ee033d12d385185,58c741aa630c2da35a56a77c1d05381908bd10504fdd2d8b43f725efa6d23196,61066504617ee79387021e18c89fb79d1ddbc3e7bff19cf2298f40466f8715e9,6389be6491e7b693e9f368ece88fcd145f07c068d2c1bbae4247b9b5ef439d32,63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed,6e75f7972397ca3295e0f4ca0fbc6eb9cc79be85bafdd56bd378220ca8eee74e,76c71aae3a491f1d9eec47cba17e229cda4113a0bbb6e6ae1776d7643e29cafa,7fa56f5d6962ab1e3cd424e758c3002b8665f7b0d8dcee9fe9e288d7751ac194,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240,97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322,b676ded7c768d66a757aa3967b1243d90bf57afb09d1044d3219d8d424e4aea0,dace63b00c42e6e017d00dd190a9328386002ff597b841eb5ef91de4f1ce8491,eeb11961b25442b16389fe6c7ebea9adf0ac36dd596816ea7119e521b8821b9e,fe7f6bc6f7338b76bbf80db402ade65953e20b2f23e66e898204b63cc42539a3
 VITE_DEFAULT_BLOSSOM_SERVERS=https://blossom.primal.net/
+VITE_DEFAULT_SPACES=https://chat.flotilla.social/
 VITE_POMADE_SIGNERS=https://pomade.coracle.social,https://pomade.fiatjaf.com,https://pomade.nostrver.se,https://pomade.scuttle.works
 VITE_PLATFORM_URL=https://app.flotilla.social
 VITE_PLATFORM_TERMS=https://flotilla.social/terms

README.md

@@ -8,13 +8,34 @@ If you would like to be interoperable with Flotilla, please check out this guide
 
 You can also optionally create an `.env.local` file and populate it with the following environment variables (see `.env.template` for examples):
 
-- `VITE_DEFAULT_PUBKEYS` - A comma-separated list of hex pubkeys for bootstrapping web of trust
+**Platform branding**
 - `VITE_PLATFORM_URL` - The url where the app will be hosted
 - `VITE_PLATFORM_NAME` - The name of the app
 - `VITE_PLATFORM_LOGO` - A logo url for the app. Can be a local path or https link. Must be a PNG file.
-- `VITE_PLATFORM_RELAYS` - A list of comma-separated relay urls that will make flotilla operate in "platform mode". Disables all space browse/add/select functionality and makes the first platform relay the home page.
 - `VITE_PLATFORM_ACCENT` - A hex color for the app's accent color
 - `VITE_PLATFORM_DESCRIPTION` - A description of the app
+- `VITE_PLATFORM_TERMS` - URL to your terms of service page
+- `VITE_PLATFORM_PRIVACY` - URL to your privacy policy page
+
+**Platform mode**
+- `VITE_PLATFORM_RELAYS` - A comma-separated list of relay urls that will make flotilla operate in "platform mode". Disables all space browse/add/select functionality and makes the first platform relay the home page.
+
+**Defaults**
+- `VITE_DEFAULT_PUBKEYS` - A comma-separated list of hex pubkeys for bootstrapping web of trust
+- `VITE_DEFAULT_SPACES` - A comma-separated list of relay urls that new users will be automatically joined to on signup
+- `VITE_DEFAULT_RELAYS` - A comma-separated list of relay urls used as default outbox/inbox relays
+- `VITE_DEFAULT_MESSAGING_RELAYS` - A comma-separated list of relay urls used for encrypted direct messages
+- `VITE_DEFAULT_BLOSSOM_SERVERS` - A comma-separated list of blossom server urls used for file uploads
+
+**Infrastructure**
+- `VITE_INDEXER_RELAYS` - A comma-separated list of relay urls used for user profile/key lookup
+- `VITE_SIGNER_RELAYS` - A comma-separated list of relay urls used for NIP-55 remote signers
+- `VITE_BLOCKED_RELAYS` - A comma-separated list of relay urls that will be blocked
+- `VITE_PUSH_SERVER` - URL of the push notification server
+- `VITE_PUSH_BRIDGE` - WebSocket URL of the push notification relay bridge
+- `VITE_VAPID_PUBLIC_KEY` - VAPID public key for web push notifications
+- `VITE_POMADE_SIGNERS` - A comma-separated list of Pomade signer server URLs (3+ required to enable email signup)
+- `VITE_THUMBNAIL_URL` - URL of the image thumbnail service
 
 These values **won't** be used for a built version. Instead, env variables should be provided to `build.sh` directly or to the built container.
 

src/app/components/SignUp.svelte

@@ -22,8 +22,10 @@
     INDEXER_RELAYS,
     DEFAULT_RELAYS,
     DEFAULT_MESSAGING_RELAYS,
+    DEFAULT_SPACES,
   } from "@app/env"
   import {setChecked} from "@app/notifications"
+  import {setSpaces} from "@app/groups"
   import {loginWithPomade} from "@app/pomade"
   import {pushModal, clearModals} from "@app/modal"
 
@@ -52,6 +54,9 @@
     // Save the user's profile
     initProfile(getKey<Profile>("signup.profile")!)
 
+    // Auto-join default spaces
+    setSpaces(DEFAULT_SPACES)
+
     // Don't show any notifications for old content
     setChecked("*")
 

src/app/components/Zap.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import cx from "classnames"
+  import {first} from "@welshman/lib"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {signer, deriveZapperForPubkey} from "@welshman/app"
   import {load} from "@welshman/net"
@@ -20,6 +22,7 @@
   import {errorMessage} from "@lib/util"
   import ProfileLink from "@app/components/ProfileLink.svelte"
   import {payInvoice} from "@app/lightning"
+  import {zapAmounts} from "@app/settings"
   import {pushToast} from "@app/toast"
 
   type Props = {
@@ -30,31 +33,14 @@
 
   const {url, pubkey, eventId}: Props = $props()
 
-  const minPos = 1
-  const maxPos = 1000
-  const minVal = 21
-  const maxVal = 1000000
   const zapperStore = deriveZapperForPubkey(pubkey)
 
-  const posToAmount = (pos: number) => {
-    const normalizedPos = (pos - minPos) / (maxPos - minPos)
-    const logMin = Math.log(minVal)
-    const logMax = Math.log(maxVal)
-    const logValue = logMin + normalizedPos * (logMax - logMin)
-    return Math.round(Math.exp(logValue))
-  }
-
-  const amountToPos = (amount: number) => {
-    const clampedAmount = Math.max(minVal, Math.min(maxVal, amount))
-    const logMin = Math.log(minVal)
-    const logMax = Math.log(maxVal)
-    const logValue = Math.log(clampedAmount)
-    const normalizedPos = (logValue - logMin) / (logMax - logMin)
-    return Math.round(minPos + normalizedPos * (maxPos - minPos))
-  }
-
   const back = () => history.back()
 
+  const selectAmount = (preset: number) => {
+    amount = preset
+  }
+
   const onEmoji = (emoji: NativeEmoji) => {
     content = emoji.unicode
   }
@@ -97,21 +83,9 @@
     }
   }
 
-  let pos = $state(minPos)
-  let amount = $state(minVal)
+  let amount = $state<number>(first($zapAmounts) ?? 21)
   let content = $state("⚡️")
   let loading = $state(false)
-
-  $effect(() => {
-    amount = posToAmount(pos)
-  })
-
-  $effect(() => {
-    const newPos = amountToPos(amount)
-    if (newPos !== pos) {
-      pos = newPos
-    }
-  })
 </script>
 
 <Modal>
@@ -145,12 +119,15 @@
         </div>
       {/snippet}
     </FieldInline>
-    <input
-      class="range range-primary -mt-2"
-      type="range"
-      min={minPos}
-      max={maxPos}
-      bind:value={pos} />
+    <div class="flex flex-wrap justify-end gap-2">
+      {#each $zapAmounts as preset}
+        <Button
+          class={cx("btn btn-sm rounded-full", preset === amount ? "btn-primary" : "btn-neutral")}
+          onclick={() => selectAmount(preset)}>
+          {preset}
+        </Button>
+      {/each}
+    </div>
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>

src/app/components/ZapInvoice.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import {onDestroy} from "svelte"
+  import cx from "classnames"
+  import {first} from "@welshman/lib"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {signer, deriveZapperForPubkey} from "@welshman/app"
   import {request} from "@welshman/net"
@@ -24,6 +26,7 @@
   import QRCode from "@app/components/QRCode.svelte"
   import WalletConnect from "@app/components/WalletConnect.svelte"
   import {pushModal} from "@app/modal"
+  import {zapAmounts} from "@app/settings"
   import {clip, pushToast} from "@app/toast"
 
   type Props = {
@@ -34,31 +37,14 @@
 
   const {url, pubkey, eventId}: Props = $props()
 
-  const minPos = 1
-  const maxPos = 1000
-  const minVal = 21
-  const maxVal = 1000000
   const zapperStore = deriveZapperForPubkey(pubkey)
 
-  const posToAmount = (pos: number) => {
-    const normalizedPos = (pos - minPos) / (maxPos - minPos)
-    const logMin = Math.log(minVal)
-    const logMax = Math.log(maxVal)
-    const logValue = logMin + normalizedPos * (logMax - logMin)
-    return Math.round(Math.exp(logValue))
-  }
-
-  const amountToPos = (amount: number) => {
-    const clampedAmount = Math.max(minVal, Math.min(maxVal, amount))
-    const logMin = Math.log(minVal)
-    const logMax = Math.log(maxVal)
-    const logValue = Math.log(clampedAmount)
-    const normalizedPos = (logValue - logMin) / (logMax - logMin)
-    return Math.round(minPos + normalizedPos * (maxPos - minPos))
-  }
-
   const back = () => history.back()
 
+  const selectAmount = (preset: number) => {
+    amount = preset
+  }
+
   const onEmoji = (emoji: NativeEmoji) => {
     content = emoji.unicode
   }
@@ -120,8 +106,7 @@
     }
   }
 
-  let pos = $state(minPos)
-  let amount = $state(minVal)
+  let amount = $state<number>(first($zapAmounts) ?? 21)
   let content = $state("⚡️")
   let loading = $state(false)
   let invoice = $state<string>()
@@ -130,17 +115,6 @@
   onDestroy(() => {
     paymentController?.abort()
   })
-
-  $effect(() => {
-    amount = posToAmount(pos)
-  })
-
-  $effect(() => {
-    const newPos = amountToPos(amount)
-    if (newPos !== pos) {
-      pos = newPos
-    }
-  })
 </script>
 
 <Modal>
@@ -189,12 +163,15 @@
           </div>
         {/snippet}
       </FieldInline>
-      <input
-        class="range range-primary -mt-2"
-        type="range"
-        min={minPos}
-        max={maxPos}
-        bind:value={pos} />
+      <div class="flex flex-wrap justify-end gap-2">
+        {#each $zapAmounts as preset}
+          <Button
+            class={cx("btn btn-sm rounded-full", preset === amount ? "btn-primary" : "btn-neutral")}
+            onclick={() => selectAmount(preset)}>
+            {preset}
+          </Button>
+        {/each}
+      </div>
       <p class="card2 card-sm bg-alt text-center flex justify-between items-center">
         Want to zap directly?
         <Button class="btn btn-neutral btn-sm" onclick={connectWallet}>

src/app/env.ts

@@ -46,6 +46,8 @@ export const POMADE_SIGNERS = fromCsv(import.meta.env.VITE_POMADE_SIGNERS)
 
 export const DEFAULT_BLOSSOM_SERVERS = fromCsv(import.meta.env.VITE_DEFAULT_BLOSSOM_SERVERS)
 
+export const DEFAULT_SPACES = fromCsv(import.meta.env.VITE_DEFAULT_SPACES).map(normalizeRelayUrl)
+
 export const DEFAULT_PUBKEYS = import.meta.env.VITE_DEFAULT_PUBKEYS
 
 export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"

src/app/groups.ts

@@ -311,7 +311,7 @@ export const removeSpace = async (url: string) => {
   return publishThunk({event, relays})
 }
 
-export const setSpaceOrder = async (urls: string[]) => {
+export const setSpaces = async (urls: string[]) => {
   const list = get(userGroupList) || makeList({kind: ROOMS})
   const orderedUrls = uniq(urls.map(normalizeRelayUrl))
   const relayTags = list.publicTags.filter(t => t[0] === "r")

src/app/routes.ts

@@ -6,7 +6,7 @@ import {page} from "$app/stores"
 import {nthEq} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {getAddress} from "@welshman/util"
-import {tracker, userMessagingRelayList} from "@welshman/app"
+import {tracker, userMessagingRelayList, getRelay} from "@welshman/app"
 import {identity} from "@welshman/lib"
 import {
   getTagValue,
@@ -21,7 +21,7 @@ import {
 } from "@welshman/util"
 import {makeChatId} from "@app/chats"
 import {entityLink} from "@app/env"
-import {encodeRelay} from "@app/relays"
+import {encodeRelay, hasNip29} from "@app/relays"
 import {DM_KINDS} from "@app/content"
 import {ROOM} from "@app/groups"
 import {pushModal} from "@app/modal"
@@ -84,6 +84,8 @@ export const goToSpace = async (url: string) => {
 
   if (prevPath && prevPath !== makeSpacePath(url)) {
     goto(prevPath, {replaceState: true})
+  } else if (!hasNip29(getRelay(url))) {
+    goto(makeSpaceChatPath(url), {replaceState: true})
   } else if (window.matchMedia(`(min-width: ${theme.screens.md})`).matches) {
     goto(makeSpacePath(url, "recent"), {replaceState: true})
   } else {

src/app/settings.ts

@@ -37,6 +37,7 @@ export type SettingsValues = {
   send_delay: number
   font_size: number
   alerts: SpaceNotificationSettings[]
+  zap_amounts: number[]
 }
 
 export type Settings = {
@@ -54,6 +55,7 @@ export const defaultSettings: SettingsValues = {
   send_delay: 0,
   font_size: 1.1,
   alerts: [],
+  zap_amounts: [21, 210, 2100, 21000],
 }
 
 export const settingsByPubkey = deriveItemsByKey({
@@ -80,6 +82,8 @@ export const loadUserSettings = makeUserLoader(loadSettings)
 
 export const userSettingsValues = derived(userSettings, $s => $s?.values || defaultSettings)
 
+export const zapAmounts = derived(userSettingsValues, $settings => $settings.zap_amounts)
+
 export const getSettings = getter(userSettingsValues)
 
 export const getSetting = <T>(key: keyof Settings["values"]) => getSettings()[key] as T

src/routes/settings/wallet/+page.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
   import cx from "classnames"
-  import {LOCALE, always, call, sleep} from "@welshman/lib"
+  import {LOCALE, always, call, removeAt, replaceAt, sleep} from "@welshman/lib"
   import {WalletType, displayRelayUrl, isNWCWallet, fromMsats} from "@welshman/util"
   import {session, pubkey, profilesByPubkey} from "@welshman/app"
   import DownloadMinimalistic from "@assets/icons/download-minimalistic.svg?dataurl"
   import UploadMinimalistic from "@assets/icons/upload-minimalistic.svg?dataurl"
+  import Bolt from "@assets/icons/bolt.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import WalletPay from "@app/components/WalletPay.svelte"
   import WalletReceive from "@app/components/WalletReceive.svelte"
   import WalletConnect from "@app/components/WalletConnect.svelte"
@@ -14,9 +19,10 @@
   import WalletUpdateReceivingAddress from "@app/components/WalletUpdateReceivingAddress.svelte"
   import {pushModal} from "@app/modal"
   import {getNwcClient, getWebLn} from "@app/lightning"
+  import {userSettingsValues, publishSettings} from "@app/settings"
+  import {pushToast} from "@app/toast"
   import Wallet2 from "@assets/icons/wallet.svg?dataurl"
   import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
-  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
 
@@ -78,6 +84,56 @@
   $effect(() => {
     startWalletStatusCheck($session?.wallet)
   })
+
+  const resetZapAmounts = () => {
+    zapAmountDraft = [...$userSettingsValues.zap_amounts]
+  }
+
+  const addZapAmount = () => {
+    zapAmountDraft = [...zapAmountDraft, zapAmountDraft.at(-1) || 21]
+  }
+
+  const removeZapAmount = (index: number) => {
+    if (zapAmountDraft.length > 1) {
+      zapAmountDraft = removeAt(index, zapAmountDraft)
+    }
+  }
+
+  const onZapAmountInput = (e: Event) => {
+    const target = e.currentTarget as HTMLInputElement
+    const index = Number(target.dataset.index)
+
+    zapAmountDraft = replaceAt(index, Number(target.value), zapAmountDraft)
+  }
+
+  const onZapAmountsSubmit = preventDefault(async () => {
+    zapAmountsLoading = true
+
+    try {
+      if (zapAmountDraft.length === 0) {
+        return pushToast({
+          theme: "error",
+          message: "Add at least one zap amount.",
+        })
+      }
+
+      if (zapAmountDraft.some(amount => amount <= 0)) {
+        return pushToast({
+          theme: "error",
+          message: "Zap amounts must be greater than zero.",
+        })
+      }
+
+      await publishSettings({zap_amounts: zapAmountDraft})
+
+      pushToast({message: "Your zap amounts have been saved!"})
+    } finally {
+      zapAmountsLoading = false
+    }
+  })
+
+  let zapAmountDraft = $state([...$userSettingsValues.zap_amounts])
+  let zapAmountsLoading = $state(false)
 </script>
 
 <div class="content column gap-4">
@@ -206,4 +262,50 @@
       </div>
     {/if}
   </div>
+  <form class="card2 bg-alt flex flex-col gap-6 shadow-md" onsubmit={onZapAmountsSubmit}>
+    <strong class="flex items-center gap-3 text-lg">
+      <Icon icon={Bolt} />
+      Zap Amounts
+    </strong>
+    <p class="text-sm opacity-75">Preset amounts shown when sending a zap.</p>
+    <div class="flex flex-col gap-2">
+      {#each zapAmountDraft as amount, index}
+        <div class="flex items-center gap-2">
+          <Button
+            class="btn btn-ghost btn-sm"
+            type="button"
+            onclick={() => removeZapAmount(index)}
+            disabled={zapAmountDraft.length === 1}>
+            <Icon icon={TrashBin2} />
+          </Button>
+          <label class="input input-bordered flex grow items-center gap-2">
+            <Icon icon={Bolt} />
+            <input
+              type="number"
+              class="grow"
+              min="1"
+              data-index={index}
+              value={amount}
+              oninput={onZapAmountInput} />
+          </label>
+        </div>
+      {/each}
+      <Button class="btn btn-link w-fit px-0" type="button" onclick={addZapAmount}>
+        <Icon icon={AddCircle} size={5} />
+        Add amount
+      </Button>
+    </div>
+    <div class="flex flex-row items-center justify-between gap-4">
+      <Button
+        class="btn btn-neutral"
+        type="button"
+        onclick={resetZapAmounts}
+        disabled={zapAmountsLoading}>
+        Discard Changes
+      </Button>
+      <Button type="submit" class="btn btn-primary" disabled={zapAmountsLoading}>
+        <Spinner loading={zapAmountsLoading}>Save Changes</Spinner>
+      </Button>
+    </div>
+  </form>
 </div>

src/routes/spaces/+page.svelte

@@ -26,7 +26,7 @@
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
-  import {userSpaceUrls, loadUserGroupList, groupListPubkeysByUrl, setSpaceOrder} from "@app/groups"
+  import {userSpaceUrls, loadUserGroupList, groupListPubkeysByUrl, setSpaces} from "@app/groups"
   import {PLATFORM_RELAYS, DEFAULT_RELAYS} from "@app/env"
   import {bootstrapPubkeys} from "@app/social"
   import {parseInviteLink} from "@app/invites"
@@ -128,7 +128,7 @@
     lastDragTarget = undefined
 
     if (dragStartOrder && !isSameOrder(dragStartOrder, orderedSpaceUrls)) {
-      void setSpaceOrder(orderedSpaceUrls).catch(console.error)
+      void setSpaces(orderedSpaceUrls).catch(console.error)
     }
 
     dragStartOrder = undefined