merge

15 files changed, 398 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 };
diff --git a/static/icons/edit.svg b/static/icons/edit.svg
new file mode 100644
index 00000000..6f9ec535
--- /dev/null
+++ b/static/icons/edit.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->

+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

+<g id="Edit / Edit_Pencil_01">

+<path id="Vector" d="M12 8.00012L4 16.0001V20.0001L8 20.0001L16 12.0001M12 8.00012L14.8686 5.13146L14.8704 5.12976C15.2652 4.73488 15.463 4.53709 15.691 4.46301C15.8919 4.39775 16.1082 4.39775 16.3091 4.46301C16.5369 4.53704 16.7345 4.7346 17.1288 5.12892L18.8686 6.86872C19.2646 7.26474 19.4627 7.46284 19.5369 7.69117C19.6022 7.89201 19.6021 8.10835 19.5369 8.3092C19.4628 8.53736 19.265 8.73516 18.8695 9.13061L18.8686 9.13146L16 12.0001M12 8.00012L16 12.0001" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

+</g>

+</svg>
\ No newline at end of file
diff --git a/static/icons/trash.svg b/static/icons/trash.svg
new file mode 100644
index 00000000..8686bc51
--- /dev/null
+++ b/static/icons/trash.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M18 6V16.2C18 17.8802 18 18.7202 17.673 19.362C17.3854 19.9265 16.9265 20.3854 16.362 20.673C15.7202 21 14.8802 21 13.2 21H10.8C9.11984 21 8.27976 21 7.63803 20.673C7.07354 20.3854 6.6146 19.9265 6.32698 19.362C6 18.7202 6 17.8802 6 16.2V6M14 10V17M10 10V17" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file