[frontend] Refactor YouTube channel and Donator pages

extensions/src/webln.js

@@ -1,4 +1,5 @@
 import cLog from "$lib/log.js";
+import { sendPayment } from "$lib/utils.js";
 
 if (!window.donate4funPageScriptLoaded) {
   window.donate4funPageScriptLoaded = true;
@@ -26,17 +27,6 @@ if (!window.donate4funPageScriptLoaded) {
     window.postMessage(message);
   });
 
-  async function sendPayment(request) {
-    if (!window.webln)
-      throw new Error("No webln found");
-    if (!webln.enabled) {
-      // Show connect dialog
-      await webln.enable();
-    }
-    const result = await webln.sendPayment(request);
-    cLog("webln.sendPayment result", result);
-  }
-
   async function emulateKeypresses(selector, content) {
     const element = selector === ':focus' ? document.activeElement : document.querySelector(selector);
     // Thanks to https://github.com/keepassxreboot/keepassxc-browser/blob/d7e34662637b869500e8bb6344cdd642c2fb079b/keepassxc-browser/content/keepassxc-browser.js#L659-L663

frontend/src/lib/AmountSelection.svelte

@@ -1,6 +1,4 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-
   import Input from "$lib/Input.svelte";
   import FiatAmount from "$lib/FiatAmount.svelte";
   import Button from "$lib/Button.svelte";
@@ -13,7 +11,6 @@
   const amounts = [100, 1000, 10000];
   const amountMin = 10;
   const amountMax = 1000000;
-  const dispatch = createEventDispatcher();
 </script>
 
 <div class="container">
@@ -35,9 +32,9 @@
   </div>
   {#await $me then me}
     {#if amount <= me.donator.balance}
-      <Button --width=100% on:click={donate} --padding="9px" --border-width="0">Donate</Button>
+      <Button --width=100% on:click={() => donate(amount)} --padding="9px" --border-width="0">Donate</Button>
     {:else}
-      <Button --width=100% on:click={donate} --padding="9px" --border-width="0">Donate with WebLN</Button>
+      <Button --width=100% on:click={() => donate(amount)} --padding="9px" --border-width="0">Donate with WebLN</Button>
     {/if}
   {/await}
 </div>
@@ -47,6 +44,7 @@
   display: flex;
   flex-direction: column;
   gap: 32px;
+  width: 300px;
 }
 .input {
   font-weight: 400;

frontend/src/lib/Claim.svelte

@@ -7,7 +7,7 @@
   import Spinner from "$lib/Spinner.svelte";
   import YoutubeChannel from "$lib/YoutubeChannel.svelte";
   import ChannelLogo from "$lib/ChannelLogo.svelte";
-  import LinkedYoutubeChannels from "$lib/LinkedYoutubeChannels.svelte";
+  import LinkedItems from "$lib/LinkedItems.svelte";
   import api from "$lib/api.js";
   import { me } from "$lib/session.js";
 
@@ -38,7 +38,8 @@
       {#if $me.youtube_channels.length > 0}
         <h2>Linked YouTube channels:</h2>
       {/if}
-      <LinkedYoutubeChannels youtube_channels={$me.youtube_channels} />
+      <LinkedItems items={$me.youtube_channels}>
+      </LinkedItems>
     {/await}
     <div class="link"><Button link={resolve("/prove/youtube")}>Link your Youtube channel</Button></div>
     <form on:submit|preventDefault={claim}>

frontend/src/lib/DonationsTable.svelte

@@ -0,0 +1,49 @@
+<script>
+  import Donator from "$lib/Donator.svelte";
+  import Datetime from "$lib/Datetime.svelte";
+  import Amount from "$lib/Amount.svelte";
+
+  export let donations;
+</script>
+
+<div class="table">
+  <h1 class="title">Latest donations</h1>
+  <div class="head">
+    <div>Name</div><div>Date</div><div>Amount</div>
+  </div>
+  <div class="body">
+    {#each donations as donation}
+      <Donator user={donation.donator} ellipsis />
+      <Datetime dt={donation.paid_at} />
+      <Amount amount={donation.amount} />
+    {/each}
+  </div>
+</div>
+
+<style>
+.head {
+  color:  rgba(0, 0, 0, 0.6);
+  text-align: left;
+}
+.body {
+  font-weight: 500;
+  padding: 0 1em 1em 1em;
+}
+.table .head,.table .body {
+  color: rgba(0, 0, 0, 0.6);
+  text-align: left;
+  display: contents;
+}
+.table .title {
+  grid-column: 1 / span 3;
+  text-align: center;
+}
+.table {
+  font-size: 12px;
+  display: grid;
+  grid-template-columns: 200px 120px 99px;
+  column-gap: 20px;
+  row-gap: 26px;
+  align-items: center;
+}
+</style>

frontend/src/lib/Invoice.svelte

@@ -8,13 +8,14 @@
   import YoutubeChannel from "$lib/YoutubeChannel.svelte";
   import Donator from "$lib/Donator.svelte";
   import NeedHelp from "$lib/NeedHelp.svelte";
-  import { partial } from "$lib/utils.js";
+  import { partial, sendPayment } from "$lib/utils.js";
   import api from "$lib/api.js";
   import { me } from "$lib/session.js";
 
   export let donation;
-  export let payment_request;
+  export let paymentRequest;
 
+  let showQR = false;
   let ws;
   onDestroy(async () => {
     await ws?.close();
@@ -23,41 +24,48 @@
 	const dispatch = createEventDispatcher();
 
   async function subscribe() {
-    ws = api.subscribe(`donation:${donation.id}`);
+    ws = api.subscribe(`donation:${donation.id}`, { autoReconnect: false });
     ws.on("notification", async (notification) => {
       if (notification.status === 'OK') {
         await ws.close();
         const response = await api.get(`donation/${donation.id}`);
         dispatch('paid', response.donation);
       }
     });
-    await ws.ready();
+    await ws.ready(3000);
+  }
+
+  async function payWithWebLN() {
+    // Show payment dialog (or pay silently if budget allows)
+    try {
+      await sendPayment(paymentRequest);
+      return true;
+    } catch (err) {
+      // If WebLN fails show QR code
+      return false;
+    }
   }
 </script>
 
 <main>
   {#await subscribe()}
     <Loading />
   {:then}
-    {#if donation.youtube_channel}
-      <h1>Donate <Amount amount={donation.amount} /> to</h1>
-      <YoutubeChannel channel={donation.youtube_channel} />
-    {:else if donation.receiver}
-      {#await $me then me}
-        {#if donation.receiver.id === me.donator.id}
-          <h1>Fulfill <Amount amount={donation.amount} /> to your wallet</h1>
-        {:else}
-          <h1>Donate <Amount amount={donation.amount} /> to <Donator user={donation.receiver} /></h1>
-        {/if}
-      {/await}
-    {/if}
-    <a href="lightning:{payment_request}"><QRCode value={payment_request} /></a>
-    <div class="buttons flex-column gap-20">
-      <Button link="lightning:{payment_request}" --width=100%>Open in Wallet</Button>
-      <Lnurl lnurl={payment_request} --width=100% />
-      <Button on:click={partial(dispatch, "cancel")} class="grey" --width=100%>Back</Button>
-      <div class="need-help"><NeedHelp /></div>
-    </div>
+    {#await payWithWebLN()}
+      Trying to pay using WebLN
+    {:then waitWebLN}
+      {#if waitWebLN}
+        <Loading />
+      {:else}
+        <a href="lightning:{paymentRequest}"><QRCode value={paymentRequest} /></a>
+        <div class="buttons">
+          <Button link="lightning:{paymentRequest}" --width=100%>Open in Wallet</Button>
+          <Lnurl lnurl={paymentRequest} --width=100% />
+          <Button on:click={() => dispatch("cancel")} class="grey" --width=100%>Back</Button>
+          <div class="need-help"><NeedHelp /></div>
+        </div>
+      {/if}
+    {/await}
   {/await}
 </main>
 
@@ -67,13 +75,7 @@ main {
   flex-direction: column;
   align-items: center;
   gap: 20px;
-  padding: 58px 16px 56px;
-}
-h1 {
-  font-weight: 900;
-  margin-top: 0;
-  margin-bottom: 20px;
-  text-align: center;
+  width: 300px;
 }
 .need-help {
   width: 100%;
@@ -83,6 +85,10 @@ h1 {
   justify-content: center;
 }
 .buttons {
-  width: 295px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
 }
 </style>

frontend/src/lib/LinkedTwitterAccounts.svelte → frontend/src/lib/LinkedItems.svelte

@@ -1,53 +1,59 @@
 <script>
-  import TwitterAccount from "$lib/TwitterAccount.svelte";
-  import ChannelLogo from "$lib/ChannelLogo.svelte";
   import Button from "$lib/Button.svelte";
   import Amount from "$lib/Amount.svelte";
   import api from "$lib/api.js";
 
-  export let accounts;
+  export let items;
+  export let basePath;
+  export let transferPath;
 
-  async function take(account) {
-    await api.post(`/twitter/account/${account.id}/transfer`);
+  async function collect(item) {
+    await api.post(`${basePath}/${transferPath}/${item.id}/transfer`);
     await load();
   }
 
   async function load() {
-    accounts = await api.get("twitter/linked-accounts");
+    items = await api.get(`${basePath}/linked`);
   }
 </script>
 
 <div class="container">
   <div class="header">
-    <h2>Linked Twitter accounts</h2>
-    <Button --width=70px link="/twitter/prove">Add</Button>
+    <h2>Linked <b>Twitter</b> accounts:</h2>
   </div>
   {#await load() then}
     <ul>
-      {#each accounts as account}
+      {#each items as item}
       <li>
-        <div class="channel-name">
-          <TwitterAccount linkto=withdraw account={account} />
-        </div>
-        <Amount amount={account.balance} />
+        <slot {item} />
+        <Amount amount={item.balance} />
         <div class="withdraw-button">
-          <Button disabled={account.balance === 0} on:click={() => take(account)} --border-width=0>Take</Button>
+          <Button disabled={item.balance === 0} on:click={() => collect(item)} --border-width=0>Collect</Button>
         </div>
       </li>
       {/each}
+      <li class="add">
+        <Button --width=170px class="white" link="/{basePath}/prove">Add more</Button>
+      </li>
     </ul>
   {/await}
 </div>
 
 <style>
 .container {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+h2 {
+  font-size: 20px;
+}
 ul {
   display: flex;
   flex-direction: column;
@@ -65,12 +71,13 @@ li {
   background: linear-gradient(90deg, rgba(157, 237, 162, 0.15) 0%, rgba(157, 237, 162, 0) 100%);
   border-radius: 8px;
 }
+li.add {
+  justify-content: center;
+  background: none;
+  height: 48px;
+}
 .withdraw-button {
-  width: 136px;
   height: 44px;
   justify-self: end;
 }
-.channel-name {
-  width: 100%;
-}
 </style>