From e5fc8458e911796f1ba9c9f773c76baf34e42aba Mon Sep 17 00:00:00 2001
From: Aaron <abarnard@protonmail.com>
Date: Sun, 3 Dec 2023 06:43:01 +1100
Subject: [PATCH] 2.0.0-beta.3: [fix] - Items List Scroll (#217)

* Fix items list rendering

* Fix error handling

* Remove channels summary margin

* Modify button styling

* Inc version

* Fix buttons
---
 package.json                        |  2 +-
 src/lib/components/Button.svelte    | 11 +++++-----
 src/lib/components/ItemsList.svelte | 32 +++++++++++++++++------------
 src/lib/wallets/coreln/error.ts     |  2 +-
 src/lib/wallets/index.ts            | 20 +++++++++---------
 src/routes/channels/+page.svelte    |  2 +-
 6 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index bd90b505..ac3f82e3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clams-app",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "scripts": {
     "dev": "vite dev",
     "dev-https": "vite dev --mode https",
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index cb5cf93d..3c35cea6 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -18,7 +18,7 @@
   <button
     bind:this={button}
     on:click
-    class="no-underline text-center border-2 border-neutral-50 text-current transition-all text-[1em] hover:shadow-md w-full flex items-center justify-center px-[1em] sm:px-[2em] relative rounded-full font-bold whitespace-nowrap"
+    class="no-underline text-center border-2 border-neutral-50 text-current transition-all text-[1em] hover:shadow-md w-full flex items-center justify-center px-[1em] relative rounded-full font-bold whitespace-nowrap"
     class:opacity-70={disabled}
     class:border-utility-error={warning}
     class:bg-purple-700={primary}
@@ -28,9 +28,10 @@
     class:hover:shadow-utility-error={warning && !disabled}
     disabled={disabled || requesting}
   >
-    <div class="absolute top-0 right-0 w-full h-full rounded-full overflow-hidden opacity-70">
-      <img src="/images/shell1.png" class="h-auto w-full" alt="texture" />
-    </div>
+    <div
+      class="absolute top-0 right-0 w-full h-full rounded-full overflow-hidden opacity-70 bg-cover"
+      style="background-image: url(/images/shell1.png);"
+    />
 
     <div class="relative flex items-center justify-center">
       <div class:text-transparent={requesting}>
@@ -43,7 +44,7 @@
         </div>
       {/if}
 
-      <span class:text-transparent={requesting} class="py-[0.25em] sm:py-[0.5em]">
+      <span class:text-transparent={requesting} class="py-[0.375em]">
         {text}
       </span>
 
diff --git a/src/lib/components/ItemsList.svelte b/src/lib/components/ItemsList.svelte
index 19a9f660..daa70aeb 100644
--- a/src/lib/components/ItemsList.svelte
+++ b/src/lib/components/ItemsList.svelte
@@ -38,7 +38,9 @@
   let initialLoad = true
 
   const loadItems = async () => {
-    processing = true
+    if (initialLoad) {
+      processing = true
+    }
 
     const rawItems = (await getSortedFilteredItems({
       filters,
@@ -54,8 +56,10 @@
       items = rawItems
     }
 
-    processing = false
-    initialLoad = false
+    if (initialLoad) {
+      processing = false
+      initialLoad = false
+    }
   }
 
   const getMoreItems = async () => {
@@ -148,9 +152,14 @@
   let virtualList: VirtualList
 
   $: fullHeight = items ? items.length * rowSize : 0
-  $: containerHeight = outerContainerHeight - headerContainerHeight - 32
+  $: containerHeight = outerContainerHeight - headerContainerHeight
   $: listHeight = containerHeight ? Math.min(containerHeight, fullHeight) : 0
-  $: containerScrollable = processing ? false : items.length ? fullHeight > listHeight : false
+
+  $: containerScrollable = processing
+    ? false
+    : items.length
+    ? containerHeight - listHeight <= 76
+    : false
 
   $: if (items.length) {
     setTimeout(() => virtualList && virtualList.recomputeSizes(0), 25)
@@ -207,7 +216,7 @@
       <slot name="summary" />
     </div>
 
-    <div class="w-full flex overflow-hidden">
+    <div class="w-full overflow-hidden">
       {#if processing && initialLoad}
         <div in:fade={{ duration: 250 }} class="my-4 w-full flex justify-center">
           <Spinner />
@@ -223,9 +232,7 @@
           />
         </div>
       {:else}
-        <div
-          class="w-full flex flex-col justify-center items-center rounded h-full overflow-hidden pt-2"
-        >
+        <div class="w-full flex flex-col justify-center items-center rounded h-full">
           <VirtualList
             bind:this={virtualList}
             on:afterScroll={e => handleScroll(e.detail.offset)}
@@ -251,12 +258,11 @@
     </div>
 
     {#if button}
-      <div class="bottom-6 right-6 flex justify-end mt-2" class:absolute={containerScrollable}>
+      <div class="bottom-2 right-2 flex justify-end pt-2" class:absolute={containerScrollable}>
         <a
           href={button.href}
-          class:px-2={containerScrollable}
           class:px-4={!containerScrollable || showFullButton}
-          class="no-underline flex items-center rounded-full bg-neutral-900 border-2 border-neutral-50 py-2 hover:shadow-lg hover:shadow-neutral-50 mt-4 w-min hover:bg-neutral-800 relative"
+          class="no-underline flex items-center rounded-full bg-neutral-900 border-2 px-1.5 border-neutral-50 py-[0.375em] hover:shadow-lg hover:shadow-neutral-50 w-min hover:bg-neutral-800 relative"
           on:mouseenter={() => containerScrollable && (showFullButton = true)}
           on:mouseleave={() => containerScrollable && (showFullButton = false)}
         >
@@ -264,7 +270,7 @@
             <img src="/images/shell1.png" class="h-full w-full" alt="texture" />
           </div>
 
-          <div class="w-6 relative" class:-ml-1={!containerScrollable || showFullButton}>
+          <div class="w-6 relative" class:-ml-2={!containerScrollable || showFullButton}>
             {@html button.icon}
           </div>
 
diff --git a/src/lib/wallets/coreln/error.ts b/src/lib/wallets/coreln/error.ts
index 8268035c..0aedbb92 100644
--- a/src/lib/wallets/coreln/error.ts
+++ b/src/lib/wallets/coreln/error.ts
@@ -4,7 +4,7 @@ import type { CoreLnError } from './types.js'
 
 /** a mapping of Coreln error codes -> i18n string error message */
 const errorToMessageKey = (coreLnError: CoreLnError): string => {
-  switch (coreLnError.code.toString()) {
+  switch (coreLnError?.code?.toString()) {
     /** PAY ERRORS */
     case '205':
     case '210':
diff --git a/src/lib/wallets/index.ts b/src/lib/wallets/index.ts
index 99e779c7..3d45f650 100644
--- a/src/lib/wallets/index.ts
+++ b/src/lib/wallets/index.ts
@@ -134,7 +134,7 @@ export const fetchUtxos = async (connection: Connection) =>
     .then(utxos => {
       return updateTableItems('utxos', utxos)
     })
-    .catch(error => log.error(error.detail.message))
+    .catch(error => log.error(error?.detail?.message || error))
 
 export const fetchInvoices = async (connection: Connection) =>
   connection.invoices &&
@@ -143,7 +143,7 @@ export const fetchInvoices = async (connection: Connection) =>
     .then(invoices => {
       return updateTableItems('payments', invoices)
     })
-    .catch(error => log.error(error.detail.message))
+    .catch(error => log.error(error?.detail?.message || error))
 
 export const fetchChannels = async (connection: Connection) =>
   connection.channels &&
@@ -152,7 +152,7 @@ export const fetchChannels = async (connection: Connection) =>
     .then(channels => {
       return updateChannels(channels)
     })
-    .catch(error => log.error(error.detail.message))
+    .catch(error => log.error(error?.detail?.message || error))
 
 export const fetchTransactions = async (connection: Connection) =>
   connection.transactions &&
@@ -161,7 +161,7 @@ export const fetchTransactions = async (connection: Connection) =>
     .then(transactions => {
       return updateTransactions(transactions)
     })
-    .catch(error => log.error(error.detail.message))
+    .catch(error => log.error(error?.detail?.message || error))
 
 export const fetchForwards = async (connection: Connection) =>
   connection.forwards &&
@@ -170,7 +170,7 @@ export const fetchForwards = async (connection: Connection) =>
     .then(forwards => {
       return updateTableItems('forwards', forwards)
     })
-    .catch(error => log.error(error.detail.message))
+    .catch(error => log.error(error?.detail?.message || error))
 
 export const fetchOffers = async (connection: Connection) =>
   connection.offers &&
@@ -179,7 +179,7 @@ export const fetchOffers = async (connection: Connection) =>
     .then(offers => {
       return updateTableItems('offers', offers)
     })
-    .catch(error => log.error(error.detail.message))
+    .catch(error => log.error(error?.detail?.message || error))
 
 export const fetchTrades = async (connection: Connection) =>
   connection.trades &&
@@ -188,7 +188,7 @@ export const fetchTrades = async (connection: Connection) =>
     .then(async trades => {
       return updateTableItems('trades', trades)
     })
-    .catch(error => log.error(error.detail.message))
+    .catch(error => log.error(error?.detail?.message || error))
 
 export const fetchWithdrawals = async (connection: Connection) =>
   connection.withdrawals &&
@@ -197,7 +197,7 @@ export const fetchWithdrawals = async (connection: Connection) =>
     .then(async withdrawals => {
       return updateTableItems('withdrawals', withdrawals)
     })
-    .catch(error => log.error(error.detail.message))
+    .catch(error => log.error(error?.detail?.message || error))
 
 export const fetchDeposits = async (connection: Connection) =>
   connection.deposits &&
@@ -206,7 +206,7 @@ export const fetchDeposits = async (connection: Connection) =>
     .then(async deposits => {
       return updateTableItems('deposits', deposits)
     })
-    .catch(error => log.error(error.detail.message))
+    .catch(error => log.error(error?.detail?.message || error))
 
 let lastPaidInvoiceIndexNotification: number
 
@@ -290,7 +290,7 @@ export const syncConnectionData = (
 
               await db.payments.put(invoice)
             }, lastPaidInvoice?.data.payIndex)
-            .catch(error => log.error(error.detail.message))
+            .catch(error => log.error(error?.detail?.message || error))
         }
       })
     }
diff --git a/src/routes/channels/+page.svelte b/src/routes/channels/+page.svelte
index 39675b2b..f69ee543 100644
--- a/src/routes/channels/+page.svelte
+++ b/src/routes/channels/+page.svelte
@@ -84,7 +84,7 @@
 >
   <div slot="summary">
     {#if totals}
-      <div class="w-full mb-2">
+      <div class="w-full">
         <SummaryRow>
           <div slot="label">{$translate('app.labels.active')}:</div>
           <div slot="value">{totals.channels} channels</div>