Merge pull request #176 from blocknative/develop

Release 1.5.0
blocknative · Oct 15, 2020 · 06eb30c · 06eb30c
2 parents 5a30c98 + 6ebf2dd
commit 06eb30c
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bnc-notify",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Show web3 users realtime transaction notifications",
   "keywords": [
     "ethereum",

diff --git a/src/components/NotificationContent.svelte b/src/components/NotificationContent.svelte
@@ -53,8 +53,7 @@
     justify-content: center;
     font-size: inherit;
     font-family: inherit;
-    margin-left: 0.75em;
-    max-width: 78%;
+    margin: 0 1.5rem 0 0.75rem;
   }
 
   /* .bn-notify-notification-info-meta */

diff --git a/src/components/TypeIcon.svelte b/src/components/TypeIcon.svelte
@@ -9,7 +9,10 @@
     height: 100%;
     font-size: inherit;
     font-family: inherit;
-    width: 1.5em;
+  }
+
+  svg {
+    width: 1.3rem;
   }
 </style>
 

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -79,6 +79,7 @@ export interface CustomNotificationObject {
   autoDismiss?: number
   onclick?: (event: any) => void
   eventCode?: string
+  link?: string
 }
 
 export interface BitcoinInputOutput {

diff --git a/src/views/Notify.svelte b/src/views/Notify.svelte
@@ -101,7 +101,7 @@
     padding: 0 0.75em;
     margin: 0;
     list-style-type: none;
-    width: 20em;
+    width: 18rem;
     bottom: 0;
     right: 0;
     font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
@@ -163,6 +163,12 @@
     font-size: inherit;
     font-family: inherit;
   }
+
+  a {
+    display: flex;
+    text-decoration: none;
+    color: inherit;
+  }
 </style>
 
 {#if $notifications.length > 0}
@@ -176,14 +182,26 @@
         animate:flip={{ duration: 500 }}
         class:bn-notify-dark-mode={$app.darkMode}
         class:bn-notify-clickable={notification.onclick}
-        class="bn-notify-custom bn-notify-notification {`bn-notify-notification-${notification.type}`} {$app.name ? `bn-notify-${$app.name}` : ''}"
+        class="bn-notify-custom bn-notify-notification {`bn-notify-notification-${notification.type}`}
+        {$app.name ? `bn-notify-${$app.name}` : ''}"
         in:fly={{ duration: 1200, delay: 300, x, y, easing: elasticOut }}
         out:fly={{ duration: 400, x, y, easing: quintIn }}>
-        <TypeIcon type={notification.type} />
-        <NotificationContent {notification} />
+        {#if notification.link}
+          <a
+            class="bn-notify-notification-link"
+            href={notification.link}
+            target="_blank"
+            rel="noreferrer noopener">
+            <TypeIcon type={notification.type} />
+            <NotificationContent {notification} />
+          </a>
+        {:else}
+          <TypeIcon type={notification.type} />
+          <NotificationContent {notification} />
+        {/if}
         <div
           class="bn-notify-custom bn-notify-notification-close {$app.name ? `bn-notify-${$app.name}` : ''}"
-          on:click={() => notifications.remove(notification.id, notification.eventCode)}>
+          on:click|stopPropagation={() => notifications.remove(notification.id, notification.eventCode)}>
           <CloseIcon />
         </div>
         <AutoDismiss {notification} />