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
clams-tech · Dec 2, 2023 · e5fc845 · e5fc845
1 parent 4241822
commit e5fc845
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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,20 +258,19 @@
     </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)}
         >
           <div class="absolute top-0 right-0 w-full h-full rounded-full overflow-hidden opacity-70">
             <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
@@ -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
@@ -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
@@ -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>