minor UI fix

components.js

@@ -1001,11 +1001,11 @@ smNotifications.innerHTML = `
             }
             .icon--success {
                 fill: var(--green);
-              }
-              .icon--failure,
-              .icon--error {
+                }
+                .icon--failure,
+                .icon--error {
                 fill: var(--danger-color);
-              }
+                }
             .close{
                 height: 2rem;
                 width: 2rem;
@@ -1117,13 +1117,13 @@ customElements.define('sm-notifications', class extends HTMLElement {
 
     createNotification(message, options = {}) {
         const { pinned = false, icon = '', action } = options;
-        const notification = document.createElement('output')
+        const notification = document.createElement('div')
         notification.id = this.randString(8)
         notification.classList.add('notification');
         let composition = ``;
         composition += `
                     <div class="icon-container">${icon}</div>
-                    <p>${message}</p>
+                    <output>${message}</output>
                     `;
         if (action) {
             composition += `
@@ -1177,6 +1177,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
     }
 
     removeNotification(notification, direction = 'left') {
+        if (!notification) return;
         const sign = direction === 'left' ? '-' : '+';
         notification.animate([
             {
@@ -1218,8 +1219,10 @@ customElements.define('sm-notifications', class extends HTMLElement {
 
         this.mediaQuery.addEventListener('change', this.handleOrientationChange);
         this.notificationPanel.addEventListener('pointerdown', e => {
-            if (e.target.closest('.notification')) {
-                this.swipeThreshold = this.clientWidth / 2;
+            if (e.target.closest('.close')) {
+                this.removeNotification(e.target.closest('.notification'));
+            } else if (e.target.closest('.notification')) {
+                this.swipeThreshold = e.target.closest('.notification').getBoundingClientRect().width / 2;
                 this.currentTarget = e.target.closest('.notification');
                 this.currentTarget.setPointerCapture(e.pointerId);
                 this.startTime = Date.now();
@@ -1262,12 +1265,6 @@ customElements.define('sm-notifications', class extends HTMLElement {
             this.notificationPanel.releasePointerCapture(e.pointerId);
             this.currentX = 0;
         });
-        this.notificationPanel.addEventListener('click', e => {
-            if (e.target.closest('.close')) {
-                this.removeNotification(e.target.closest('.notification'));
-            }
-        });
-
         const observer = new MutationObserver(mutationList => {
             mutationList.forEach(mutation => {
                 if (mutation.type === 'childList') {

index.html

@@ -1515,16 +1515,15 @@
                         console.error(e)
                     })
                 }).catch(error => {
+                    console.error(error)
                     notify(`Error sending transaction \n ${error}`, 'error');
                 }).finally(_ => {
                     buttonLoader('send_transaction', false)
                 })
             }).catch(err => {
                 notify(err, 'error')
-            }).finally(() => {
                 buttonLoader('send_transaction', false)
             })
-
         }
 
         // detect if given string is a bitcoin transaction id