merge

13 files changed, 387 insertions, 213 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 147ba834..0f3d0366 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,6 +1,6 @@
 <script>
   import OutClick from "svelte-outclick";
-  import { banner, newPayment, colorTheme } from "$lib/store";
+  import { banner, newPayment } from "$lib/store";
   import { goto } from "$app/navigation";
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
@@ -41,7 +41,7 @@
 
 {#if !$loading}
   <header
-    class="bg-gradient-to-r {$colorTheme} dark:!from-violet-600 dark:!to-swapee-purple h-[175px] w-full relative bg-cover mb-20"
+    class="bg-gradient-to-r dark:!from-violet-600 dark:!to-swapee-purple h-[175px] w-full relative bg-cover mb-20"
     style:background-image={bg}
   >
     <nav class="flex justify-end items-center gap-x-2 xs:gap-x-4 p-5">
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index f13404bd..227200d7 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { avatar, banner, colorTheme } from "$lib/store";
+  import { avatar, banner } from "$lib/store";
   import Icon from "$comp/Icon.svelte";
   import { punk } from "$lib/utils";
 
@@ -20,7 +20,7 @@
 
 <a href={link} class:pointer-events-none={disabled}>
   <div
-    class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r {$colorTheme} flex justify-center items-center"
+    class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r from-primary to-gradient flex justify-center items-center"
   >
     <img
       {src}
diff --git a/src/components/ItemForm.svelte b/src/components/ItemForm.svelte
new file mode 100644
index 00000000..044020b7
--- /dev/null
+++ b/src/components/ItemForm.svelte
@@ -0,0 +1,108 @@
+<script>
+  import { t } from "$lib/translations";
+  import { upload } from "$lib/upload";
+  export let item, token;
+
+  let fileInput, formElement, file;
+  let select = () => fileInput.click();
+  let src;
+
+  let tooLarge = {};
+  let handleFile = async ({ target }, type) => {
+    tooLarge[type] = false;
+    file = target.files[0];
+    if (!file) return;
+
+    if (file.size > 10000000) return (tooLarge[type] = true);
+
+    var reader = new FileReader();
+    reader.onload = async (e) => {
+      src = e.target.result;
+    };
+
+    reader.readAsDataURL(file);
+  };
+
+  async function handleSubmit() {
+    try {
+      submitting = true;
+      let data = new FormData(formElement);
+
+      if (src) {
+        try {
+          let { hash } = JSON.parse(
+            await upload(file, "item", progress, token)
+          );
+
+          data.set("image", hash);
+
+          await fetch(`/api/public/${hash}.webp`, {
+              cache: "reload",
+            mode: "no-cors",
+          });
+        } catch (e) {
+          console.log("problem upsubmitting avatar", e);
+        }
+      }
+
+      const response = await fetch(formElement.action, {
+        method: "POST",
+        body: data,
+      });
+
+      const result = deserialize(await response.text());
+
+      applyAction(result);
+    } catch (e) {
+      console.log(e);
+      fail("Something went wrong");
+    }
+
+    submitting = false;
+  }
+</script>
+
+<form
+  method="POST"
+  class="space-y-5"
+  on:submit|preventDefault={handleSubmit}
+  bind:this={formElement}
+>
+  <div>
+    <label for="name" class="font-bold mb-1 block">{$t("items.name")}</label>
+    <input name="name" bind:value={item.name} />
+  </div>
+  <div>
+    <label for="img" class="font-bold mb-1 block">{$t("items.image")}</label>
+    <div class="relative w-full h-64">
+      {#if item.hash}
+        <img
+          src={`/api/public/${item.hash}.webp`}
+          alt={item.name}
+          class="mx-auto object-cover h-full w-full"
+        />
+      {:else if src}
+        <img {src} alt={item.name} class="mx-auto object-cover h-full w-full" />
+      {:else}
+        <div
+          class="bg-gradient-to-r from-primary to-gradient w-full h-48 mb-4 cursor-pointer hover:opacity-80"
+          on:click={select}
+          on:keydown={select}
+          alt="Banner"
+        />
+      {/if}
+      <input
+        type="file"
+        class="hidden"
+        bind:this={fileInput}
+        on:change={(e) => handleFile(e, "item")}
+      />
+    </div>
+  </div>
+
+  <button
+    class="rounded-full py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white text-2xl"
+  >
+    {$t("items.submit")}
+  </button>
+</form>
diff --git a/src/lib/store.js b/src/lib/store.js
index ee60058c..c27e7f6c 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -40,7 +40,6 @@ const persistLocal = (key, defaultValue) => {
 
 export const avatar = writable();
 export const banner = writable();
-export const colorTheme = writable("from-primary to-gradient");
 export const event = writable();
 export const events = writable({});
 export const invoice = writable();
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 434ca268..8448e3c6 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -167,6 +167,7 @@ export let auth = (cookies) => ({
   authorization: `Bearer ${cookies.get("token")}`,
 });
 
+export let btc = (fiat, rate) => Math.round((fiat * sats) / rate);
 export let fiat = (amount, rate) => (amount * rate) / sats;
 export let fd = async (req) => {
   let obj = Object.fromEntries(await req.formData());
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 6ca59e8a..670c2a2d 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -5,7 +5,7 @@
   import Balance from "$comp/Balance.svelte";
   import Feed from "$comp/Feed.svelte";
   import { t } from "$lib/translations";
-  import { ease, f, sat, sats } from "$lib/utils";
+  import { btc, ease, f, sat, sats } from "$lib/utils";
   import { sign, send, encrypt, decrypt } from "$lib/nostr";
   import { event as e, password } from "$lib/store";
   import { browser } from "$app/environment";
@@ -23,213 +23,260 @@
     rates,
   } = data;
   $: refresh(data);
-  let refresh = (d) =>
-    ({ messages, notes, invoices, sent, received, subject, user, rate, rates } =
-      d);
+  let refresh = (d) => ({ subject, user, rates } = d);
 
-  let keys = new Set();
-  let latest = [];
-  let ready;
+  let items = [
+    {
+      id: 1,
+      name: "Full Pour",
+      price: 9,
+      quantity: 0,
+      hash: "fa3a9d22eb24b33ae2dee8d7566c1ce25d1c76e18b46d54437621d3e34a3fbc9",
+    },
+    {
+      id: 2,
+      name: "Half Pour",
+      price: 6,
+      quantity: 0,
+      hash: "a79c7b921a0dde39076201ae5f24505d5faa5f12f0cfd3b9d86cbc9c77ab0bd1",
+    },
+    {
+      id: 3,
+      name: "Taster",
+      price: 3,
+      quantity: 0,
+      hash: "9d8fe68d068f7271cf08d4cb9b033966984549c1bcd827f7516e66e5b537f502",
+    },
+    {
+      id: 4,
+      name: "4-packs",
+      price: 18,
+      quantity: 0,
+      hash: "13cf773ae51607e670c2a7c640aa5a1dc8b288554026de08370ed3da44e59493",
+    },
+  ];
 
-  e.subscribe(async (event) => {
-    if (!(event && ready)) return;
-    if (
-      event.recipient?.id === user.id &&
-      !~latest.findIndex((m) => m.id === event.id)
-    ) {
-      event.content = await decrypt({ event, user });
-
-      let i = latest.findIndex((m) => m.pubkey === event.pubkey);
-      let popped;
-      if (~i) popped = latest.splice(i, 1);
-      else popped = latest.pop();
-
-      latest.unshift(event);
-      latest = latest;
-    }
-  });
+  $: total = items.reduce((a, b) => a + b.price * b.quantity, 0);
+  let del = () => {};
+</script>
 
-  $: initialize($password);
-  let initialize = async (p) => {
-    let i = 0;
-    ready = false;
-    if (!p || !user) return;
-    while (i < messages.length) {
-      let event = messages[i];
-      i++;
+<div class="space-y-8">
+  <div class="flex justify-center lg:justify-start mb-8">
+    <Balance {user} {rate} />
+  </div>
+  <div class="space-y-8 mt-8">
+    {#if !user.balance}
+      <p
+        class="text-secondary dark:text-gray-300 text-lg max-w-2xl text-center lg:text-start mx-auto"
+      >
+        {$t("user.welcome")}
+      </p>
+    {/if}
 
-      if (!(event.author && event.recipient)) continue;
+    <div class="flex flex-wrap gap-4 justify-center w-full">
+      <a href={`/send`} class="w-full md:w-40">
+        <button
+          class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
+        >
+          <div class="mx-auto my-auto flex">
+            <Icon
+              icon="send"
+              style="my-auto h-6 mr-2 text-red-300 dark:invert"
+            />
+            <div class="my-auto">{$t("user.dashboard.send")}</div>
+          </div>
+        </button>
+      </a>
 
-      let k =
-        event.author.id === user.id
-          ? event.recipient?.pubkey
-          : event.author.pubkey;
-      if (!keys.has(k)) {
-        keys.add(k);
-        event.content = await decrypt({ event, user });
-        if (event.content) latest.push(event);
-      }
-    }
+      <a href={`/${user.username}/receive`} class="w-full md:w-40 my-auto">
+        <button
+          class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
+        >
+          <div class="mx-auto flex">
+            <Icon icon="numpad" style="my-auto h-6 mr-2 dark:invert" />
+            <div class="my-auto mt-1">{$t("user.dashboard.receive")}</div>
+          </div>
+        </button>
+      </a>
 
-    latest = latest;
-    ready = true;
-  };
-</script>
+      <a href={`/buy`} class="w-full md:w-52">
+        <button
+          class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
+        >
+          <div class="mx-auto flex">
+            <!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
 
-<div class="space-y-8">
-  {#if user?.id === subject.id}
-    <div>
-      <div class="flex justify-center lg:justify-start mb-8">
-        <Balance {user} {rate} />
-      </div>
-      <div class="space-y-8 mt-8">
-        {#if !user.balance}
-          <p class="text-secondary dark:text-gray-300 text-lg max-w-2xl text-center lg:text-start mx-auto">
-            {$t("user.welcome")} 
-          </p>
-        {/if}
+            <img
+              src="/images/bitcoin.svg"
+              class="w-8 border-4 border-transparent mr-2"
+              alt="Bitcoin"
+            />
+            <div class="my-auto mt-1">Buy Bitcoin</div>
+          </div>
+        </button>
+      </a>
+    </div>
 
+    <div class="grid grid-cols-2 gap-4">
+      {#each items as i}
         <div
-          class="flex flex-wrap gap-4 justify-center w-full"
+          class="w-full text-center cursor-pointer hover:opacity-80"
+          on:click={() => i.quantity++}
         >
-          <a href={`/send`} class="w-full md:w-40">
-            <button
-              class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full "
-            >
-              <div class="mx-auto my-auto flex">
-                <Icon icon="send" style="my-auto h-6 mr-2 text-red-300 dark:invert" />
-                <div class="my-auto">{$t("user.dashboard.send")}</div>
-              </div>
-            </button>
-          </a>
-
-          <a href={`/${user.username}/receive`} class="w-full md:w-40 my-auto">
-            <button
-              class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
-            >
-              <div class="mx-auto flex">
-                <Icon icon="numpad" style="my-auto h-6 mr-2 dark:invert" />
-                <div class="my-auto mt-1">{$t("user.dashboard.receive")}</div>
+          <div class="relative w-full h-64 overflow-hidden rounded-xl">
+            <img
+              src={`/api/public/${i.hash}.webp`}
+              alt={i.name}
+              class="mx-auto object-cover h-full w-full"
+            />
+            {#if user?.username === subject.username}
+              <div class="flex gap-2 justify-center absolute top-2 right-2">
+                <div
+                  on:click|stopPropagation={() =>
+                    i.quantity > 0 && i.quantity--}
+                >
+                  <a href={`/${user.username}/items/${i.id}`}>
+                    <button class="bg-white rounded-xl">
+                      <Icon icon="edit" style="w-10" />
+                    </button>
+                  </a>
+                </div>
+                <button class="bg-white rounded-xl">
+                  <Icon icon="trash" style="w-10" on:click={() => del(i)} />
+                </button>
               </div>
-            </button>
-          </a>
-
-          <a href={`/buy`} class="w-full md:w-52">
-            <button
-              class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
-            >
-              <div class="mx-auto flex">
-                <!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
-
-                <img
-                  src="/images/bitcoin.svg"
-                  class="w-8 border-4 border-transparent mr-2"
-                  alt="Bitcoin"
-                />
-                <div class="my-auto mt-1">Buy Bitcoin</div>
+            {/if}
+          </div>
+          <div class="bg-white rounded-xl p-2">
+            <div class="text-2xl">
+              {i.name} &mdash; {f(i.price, subject.currency)}
+            </div>
+            <div class="flex gap-2 justify-center">
+              <div
+                on:click|stopPropagation={() => i.quantity > 0 && i.quantity--}
+              >
+                <Icon icon="minus" style="w-10" />
               </div>
-            </button>
-          </a>
+              <div class="text-2xl my-auto">{i.quantity}</div>
+              <Icon icon="plus" style="w-10" />
+            </div>
+          </div>
         </div>
-      </div>
+      {/each}
     </div>
-  {/if}
 
-  {#if invoices.length}
-    <div>
-      <h1 class="text-secondary text-xl">Invoices</h1>
-      {#each invoices as { amount, currency, rate, request: { requester, recipient }, hash }}
-        {@const requested = user.username === requester?.username}
+    {#if total > 0}
+      <div>
         <a
-          href={`/${recipient.username}/invoice/${hash}` +
-            (requested ? "/tip" : "")}
+          href={`/send/${subject.username}/${total}/${subject.currency}`}
+          class="w-full"
         >
-          <div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
-            <div class="flex gap-2">
-              <div>
-                {#if requested}
-                  <div class="flex">
-                    <Avatar user={recipient} size={20} />
-                    <div class="my-auto text-left">
-                      <p class="text-secondary">{$t("payments.invoiceFrom")}</p>
-                      <p class="ml-1 text-lg break-words">
-                        {recipient.username}
-                      </p>
-                    </div>
-                  </div>
-                {:else}
-                  <div class="flex">
-                    <Avatar user={requester} size={20} />
-                    <div class="my-auto text-left">
-                      <p class="text-secondary">{$t("payments.awaiting")}</p>
-                      <p class="ml-1 text-lg break-words">
-                        {requester.username}
-                      </p>
-                    </div>
-                  </div>
-                {/if}
+          <button
+            class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-full bg-black text-white"
+          >
+            <div class="mx-auto flex">
+              <div class="my-auto text-2xl">
+                {f(total, subject.currency)}
+                {$t("user.dashboard.checkout")}
               </div>
-              <div class="whitespace-nowrap my-auto ml-auto flex gap-2">
-                <div class="font-bold">
-                  {f(amount * (rate / sats), currency)}
-                </div>
-
-                <div class="text-secondary">{sat(amount)}</div>
+            </div>
+          </button>
+        </a>
+      </div>
+    {/if}
+    {#if user?.username === subject.username}
+      <div>
+        <a href={`/${user.username}/items/create`} class="w-full">
+          <button
+            class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-full bg-black text-white"
+          >
+            <div class="mx-auto flex">
+              <div class="my-auto text-2xl">
+                {$t("items.add")}
               </div>
             </div>
-          </div>
+          </button>
         </a>
-      {/each}
-    </div>
-  {/if}
-  {#if received.length}
-    <div>
-      <h1 class="text-secondary text-xl">Requests</h1>
+      </div>
+    {/if}
 
-      {#each received as { id, invoice, memo, requester: r }}
-        <a href={`/${user.username}/receive/${id}`}>
-          <div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
-            <div class="flex">
-              <div>
-                <div class="flex">
-                  <Avatar user={r} size={20} />
-                  <div class="my-auto text-left">
-                    <p class="ml-1 text-lg break-words">{r.username}</p>
-                    <p class="ml-1 text-secondary">{memo}</p>
+    {#if invoices.length}
+      <div>
+        <h1 class="text-secondary text-xl">Invoices</h1>
+        {#each invoices as { amount, currency, rate, request: { requester, recipient }, hash }}
+          {@const requested = user.username === requester?.username}
+          <a
+            href={`/${recipient.username}/invoice/${hash}` +
+              (requested ? "/tip" : "")}
+          >
+            <div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
+              <div class="flex gap-2">
+                <div>
+                  {#if requested}
+                    <div class="flex">
+                      <Avatar user={recipient} size={20} />
+                      <div class="my-auto text-left">
+                        <p class="text-secondary">
+                          {$t("payments.invoiceFrom")}
+                        </p>
+                        <p class="ml-1 text-lg break-words">
+                          {recipient.username}
+                        </p>
+                      </div>
+                    </div>
+                  {:else}
+                    <div class="flex">
+                      <Avatar user={requester} size={20} />
+                      <div class="my-auto text-left">
+                        <p class="text-secondary">{$t("payments.awaiting")}</p>
+                        <p class="ml-1 text-lg break-words">
+                          {requester.username}
+                        </p>
+                      </div>
+                    </div>
+                  {/if}
+                </div>
+                <div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+                  <div class="font-bold">
+                    {f(amount * (rate / sats), currency)}
                   </div>
+
+                  <div class="text-secondary">{sat(amount)}</div>
                 </div>
               </div>
-              <div class="whitespace-nowrap my-auto ml-auto flex gap-2">
-                <button
-                  class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
-                  >Invoice</button
-                >
-              </div>
             </div>
-          </div>
-        </a>
-      {/each}
-    </div>
-  {/if}
+          </a>
+        {/each}
+      </div>
+    {/if}
+    {#if received.length}
+      <div>
+        <h1 class="text-secondary text-xl">Requests</h1>
 
-  {#if latest.length && user?.id === subject.id}
-    <div class="relative">
-      {#each latest as { content, pubkey, author, recipient }}
-        {@const user = author.id === user.id ? recipient : author}
-        <a href={`/${user.username}/messages`}>
-          <div class="flex hover:bg-gray-100 p-4 rounded-2xl">
-            <div class="my-auto">
-              <Avatar {user} size={"20"} disabled={true} />
-            </div>
-            <div class="my-auto truncate">
-              <div class="my-auto ml-1 text-lg font-bold">{user.username}</div>
-              <div class="my-auto ml-1 text-secondary text-lg truncate">
-                {content}
+        {#each received as { id, invoice, memo, requester: r }}
+          <a href={`/${user.username}/receive/${id}`}>
+            <div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
+              <div class="flex">
+                <div>
+                  <div class="flex">
+                    <Avatar user={r} size={20} />
+                    <div class="my-auto text-left">
+                      <p class="ml-1 text-lg break-words">{r.username}</p>
+                      <p class="ml-1 text-secondary">{memo}</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+                  <button
+                    class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+                    >Invoice</button
+                  >
+                </div>
               </div>
             </div>
-          </div>
-        </a>
-      {/each}
-    </div>
-  {/if}
+          </a>
+        {/each}
+      </div>
+    {/if}
+  </div>
 </div>
diff --git a/src/routes/(app)/[username]/items/[id]/+page.server.js b/src/routes/(app)/[username]/items/[id]/+page.server.js
new file mode 100644
index 00000000..e1fe2efd
--- /dev/null
+++ b/src/routes/(app)/[username]/items/[id]/+page.server.js
@@ -0,0 +1,6 @@
+import { get } from "$lib/utils";
+export let load = async ({ cookies, params: { id } }) => {
+  let item = await get(`/item/${id}`);
+  console.log("item", item)
+  return { item };
+};
diff --git a/src/routes/(app)/[username]/items/[id]/+page.svelte b/src/routes/(app)/[username]/items/[id]/+page.svelte
new file mode 100644
index 00000000..5a19e892
--- /dev/null
+++ b/src/routes/(app)/[username]/items/[id]/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+  import ItemForm from "$comp/ItemForm.svelte";
+  export let data;
+  let { item } = data;
+</script>
+
+<ItemForm {item} />
diff --git a/src/routes/(app)/[username]/items/create/+page.svelte b/src/routes/(app)/[username]/items/create/+page.svelte
new file mode 100644
index 00000000..c9aeae1d
--- /dev/null
+++ b/src/routes/(app)/[username]/items/create/+page.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { t } from "$lib/translations";
+  import ItemForm from "$comp/ItemForm.svelte";
+  export let data;
+  let { token } = data;
+  let item = {};
+</script>
+
+<div class="container max-w-xl mx-auto">
+  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+    {$t("items.add")}
+  </h1>
+  <ItemForm {item} {token} />
+</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index a4bb2b68..85892622 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -1,6 +1,6 @@
 <script>
   import { tick } from "svelte";
-  import { colorTheme, avatar, banner } from "$lib/store";
+  import { avatar, banner } from "$lib/store";
   import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
   import { page } from "$app/stores";
@@ -9,27 +9,8 @@
 
   let { id } = user;
 
-  let selectedTheme = 1;
   let avatarFile, avatarInput, bannerFile, bannerInput;
 
-  let colorThemes = [
-    { theme: 1, color1: "from-[#F5F7FA]", color2: "to-[#C3CFE2]" },
-    { theme: 2, color1: "from-[#FDFCFB]", color2: "to-[#E2D1C3]" },
-    { theme: 3, color1: "from-[#E6E9F0]", color2: "to-[#EEF1F5]" },
-    { theme: 4, color1: "from-[#D5D4D0]", color2: "to-[#EEEEEC]" },
-    { theme: 5, color1: "from-[#F3E7E9]", color2: "to-[#E3EEFF]" },
-    {
-      theme: 6,
-      color1: "from-[#F5F7FA]",
-      color2: "via-[#EAF2FF] to-[#DEDFFF]",
-    },
-  ];
-
-  let handleThemeClick = (colors) => {
-    selectedTheme = colors.theme;
-    $colorTheme = colors.color1 + " " + colors.color2;
-  };
-
   let selectAvatar = () => avatarInput.click();
   let selectBanner = () => bannerInput.click();
 
@@ -129,7 +110,7 @@
     {:else}
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
-        class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto hover:opacity-80 cursor-pointer"
+        class="rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 my-auto hover:opacity-80 cursor-pointer"
         on:click={selectAvatar}
         on:keydown={selectAvatar}
       >
@@ -175,7 +156,7 @@
   {:else}
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      class="bg-gradient-to-r {$colorTheme} dark:!from-stone-800 dark:!to-stone-800 w-full h-48 mb-4 cursor-pointer hover:opacity-80"
+      class="bg-gradient-to-r dark:!from-stone-800 dark:!to-stone-800 w-full h-48 mb-4 cursor-pointer hover:opacity-80"
       on:click={selectBanner}
       on:keydown={selectBanner}
       alt="Banner"
diff --git a/src/routes/(app)/payment/[id]/bump/+server.js b/src/routes/(app)/payment/[id]/bump/+server.js
new file mode 100644
index 00000000..513198b0
--- /dev/null
+++ b/src/routes/(app)/payment/[id]/bump/+server.js
@@ -0,0 +1,12 @@
+import { auth, post } from "$lib/utils";
+import { json, error } from "@sveltejs/kit";
+
+export async function POST({ cookies, request }) {
+  let body = await request.json();
+  try {
+    let res = await post("/replace", body, auth(cookies));
+    return json(res);
+  } catch (e) {
+    error(400, e.message);
+  }
+}
diff --git a/src/routes/(app)/register/+page.svelte b/src/routes/(app)/register/+page.svelte
index 82bfbde4..a2fff349 100644
--- a/src/routes/(app)/register/+page.svelte
+++ b/src/routes/(app)/register/+page.svelte
@@ -84,6 +84,7 @@
 
   let loading;
   async function handleSubmit(e) {
+    console.log("HERE")
     loading = true;
 
     let data = new FormData(this);
@@ -212,6 +213,7 @@
         </div>
       {/if}
 
+      OHH
       <form
         class="space-y-5"
         on:submit|preventDefault={handleSubmit}
diff --git a/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js b/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js
index fe004408..884e3eee 100644
--- a/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js
+++ b/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js
@@ -8,16 +8,13 @@ export async function load({ cookies, params, parent }) {
   let { username } = params;
   let [amount, currency] = params.amount.split("/");
 
-  if (subject.username === user?.username)
-    error(500, { message: "Cannot send to self" });
-
   let rate;
   if (amount) {
     rate = rates[currency ? currency.toUpperCase() : subject.currency];
     if (!rate) error(500, "Invalid currency symbol");
     if (currency) amount = (amount * sats) / rate;
 
-    let { hash } = await post(
+    let { id } = await post(
       "/invoice",
       {
         invoice: {
@@ -32,7 +29,7 @@ export async function load({ cookies, params, parent }) {
       auth(cookies)
     );
 
-    redirect(307, `/${username}/invoice/${hash}`);
+    redirect(307, `/${username}/invoice/${id}`);
   }
 
   return { amount, rate, subject };