'yup-live-browser-extension@v1.1.4'

CHANGELOG.MD

@@ -1,5 +1,14 @@
 # Change Log
 
+## [Version 1.1.5]
+
+- improved notification handling and display
+- lowerd coinGecko api calls due to recent changes in free tier limit
+
+## [Version 1.1.4]
+
+- minor fix edge case of no notifications
+
 ## [Version 1.1.3]
 
 - minor fix to prevent console error log on fetch failure

manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "yup live",
     "description": "Light extension helper for yup social platform.",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "manifest_version": 3,
     "icons": {
         "16": "src/assets/icons/yup_ext_16.png",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "yup-live-browser-extension",
   "description": "Yup Live Browser Extension",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "author": "andrei0x309",
   "license": "MIT",

src/background/index.ts

@@ -110,14 +110,15 @@ const alarmHandler = async () => {
         } catch (error) {
             console.error('Error fetching profile', error)
         }
+        const fiveHours = 18e5
+        const isExpiredCoinGecko = store?.settings?.coinGeckoPrice && (new Date().getTime() - store.settings.lastCoinGeckoPriceCheckTimestamp) > fiveHours
 
         try {
             const coinGecko = await requests.coinGecko as Response
             const coinGeckoJson = await coinGecko.json()
             const coinGeckoPrice = coinGeckoJson.yup.usd
-            const store = await getStore()
             if (store.settings.coinGeckoPrice !== coinGeckoPrice) {
-                await chrome.storage.local.set({ store: { ...store, settings: { ...store.settings, coinGeckoPrice } } })
+                await chrome.storage.local.set({ store: { ...store, settings: { ...store.settings, coinGeckoPrice, lastCoinGeckoPriceCheckTimestamp: new Date().getTime() } } })
             }
         } catch (error) {
             console.error('Error fetching coinGecko', error)

src/components/Notification.svelte

@@ -13,32 +13,34 @@
   const numImages = notif?.senders?.length ?? 0;
   let loaders: ImgLoader[] = Array(numImages).fill(null);
 
+  console.log(notif)
+
 </script>
 
 {#if notif.eventType === "vote"}
-  {@const url = notif.meta.url}
+  {@const url = notif?.meta?.url ?? ''}
   {@const length = url.length}
   {@const shortUrl = url.slice(0, 10) + "..." + url.slice(length - 10, length)}
   {@const finalUrl = length > 24 ? shortUrl : url}
   <div class="flex flex-row notifBody">
     <LikeIcon solid={true} className={'w-9 mx-auto p-4'} />
     <div class="ml-4 text-left" style="width: 97%">
-      <p class="text-xs text-gray-200 my-0 mt-1">
+      <p class="text-xs text-gray-200 my-0 mt-2">
-        by
+        your post was liked
         {#if notif?.senders?.length > 1}
             {notif?.senders[0].handle}
-            {#if notif.senders.length - 1 > 0}
+            {#if notif.senders?.length - 1 > 0}
             <span class="opacity-60"> and {notif.senders.length - 1} more</span>
             {/if}
         {:else}
-          {notif.senders[0].handle.length > 12 ? notif.senders[0].handle.slice(0, 12) + "..." : notif.senders[0].handle}
+          {notif.senders[0].handle?.length > 12 ? notif.senders[0]?.handle?.slice(0, 12) + "..." : notif.senders[0]?.handle ?? ''}
         {/if}
       </p>
-      <p class="text-xs text-gray-200 my-0 mt-1">
+      <p class="text-xs text-gray-200 my-0 mt-1 cursor-pointer">
         <span
           on:click={() => extrenalNavigate(`${YUP_APP_BASE}/post/${notif.meta.postid}`)}
           aria-hidden
-          class="text-blue-200 interactive-svg">{finalUrl}</span
+          class="text-blue-200 interactive-svg">view the post</span
         >
       </p>
       <p class="text-xs text-gray-200 my-1 text-right mr-2">
@@ -126,6 +128,62 @@
       {timeSince(new Date(notif.createdAt))}
     </p>
   </div>
+{:else if ["comment"].includes(notif.eventType)}
+<div class="flex flex-col notifBody">
+  {#each notif.senders as sender, i}
+  <div class="flex flex-row items-center">
+  <ImgLoader bind:this={loaders[i]} source="{sender?.avatar}" >
+    <img
+      class="notificationImage"
+      on:load={() => loaders[i]?.onLoad()}
+      on:error={() => loaders[i]?.onError()}
+      style={$mainStore.settings.theme === "light" ? "filter: invert(0.9);" : ""}
+      slot="img"
+      src={sender.avatar}
+      alt="preview"
+    />
+    <svg
+      class="notificationImage"
+      style={$mainStore.settings.theme === "light" ? "filter: invert(0.9);" : ""}
+      slot="error"
+      viewBox="0 0 512 512"
+      ><g
+        ><polygon
+          points="40,38.999 40,468.998 215,293.998 270,348.998 360,258.998 470,358.998 470,38.999 "
+          style="fill:#EFF3F6;"
+        />
+        <g><circle cx="150" cy="158.999" r="40" style="fill:#FCD884;" /></g><g
+          ><polygon
+            points="470,358.998 470,468.998 385,468.998 385,463.998 270,348.998 360,258.998    "
+            style="fill:#70993F;"
+          /></g
+        ><g><polygon points="385,463.998 385,468.998 40,468.998 215,293.998 270,348.998" style="fill:#80AF52;" /></g
+        ></g
+      ><g /></svg
+    >
+  </ImgLoader>
+  <div class="ml-4 text-left" style="width: 97%">
+    <p
+      aria-hidden
+      class="text-xs text-gray-200 my-0 mt-1 cursor-pointer"
+      on:click={() => extrenalNavigate(`${YUP_APP_BASE}/post/${notif?.meta?.commentId}`)}
+    >
+      <b>{sender?.handle || `${sender?._id?.slice(0, 6)}...`}</b>
+      commented on yout post, click to view.
+    </p>
+  </div>
+  </div>
+  {/each}
+  <p class="text-xs text-gray-200 my-1 text-right mr-2">
+    <svg class="w-3 inline" viewBox="0 0 20 20"
+      ><path
+        fill="#fff"
+        d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-7.59V4h2v5.59l3.95 3.95-1.41 1.41L9 10.41z"
+      /></svg
+    >
+    {timeSince(new Date(notif.createdAt))}
+  </p>
+</div>
 {:else}
   <div class="flex flex-row items-center notifBody">
     <div class="ml-4 text-left" style="width: 97%">

src/pages/Notifications.svelte

@@ -51,17 +51,17 @@ const changeNotifsType = async (t : string[] | null) => {
 
 {#if loading}
     <PageLoader />
-{:else if notifs.length === 0}
+{:else if (notifs ?? []).length === 0}
 
     {#await pastNotifsPromise}
         &nbsp;
     {:then pastNotifs}
         {#if (pastNotifs.notifs ?? []).length > 0}
-            {noNotifications = true}
+        {#each pastNotifs.notifs as notif}
-        {:else}
-         {#each pastNotifs.notifs as notif}
         <Notification {notif} />
          {/each}
+        {:else}
+        {(noNotifications = true) && ''}
         {/if}
     {/await}
 {:else}
@@ -76,9 +76,11 @@ const changeNotifsType = async (t : string[] | null) => {
     </div>
 {/if}
 
+{#key noNotifications}
 {#if noNotifications }
 <div class="flex flex-col items-center justify-center h-full">
     <p class="text-2xl font-semibold">No Notifications</p>
     <p class="text-lg">You have no notifications</p>
 </div>
 {/if}
+{/key}

src/utils/storage.ts

@@ -44,6 +44,7 @@ export const storageDefault = {
         injectEmbed: false,
         chromeNotifWhenReward: false,
         chromeNotifWhenAbleToVote: false,
+        lastCoinGeckoPriceCheckTimestamp: 0,
         coinGeckoPrice: 0,
         hasNewNotifications: false,
         refilNotifTimestamp: 0,
@@ -55,7 +56,7 @@ export const storageDefault = {
         enableFollowNotif: false,
         lastfollowNotif: 0,
         lastCommentNotif: 0,
-        lastMentionNotif: 0,
+        lastMentionNotif: 0
     }
 }
 

src/utils/types.ts

@@ -24,6 +24,7 @@ export interface Vote {
         postid?: string
         url?: string
         message?: string
+        commentId?: string
     }
     image: string
     createdAt: string