Bug fixes and UI improvements

css/main.css

@@ -984,6 +984,24 @@ sm-button[variant=primary] {
   grid-template-rows: 1fr auto;
 }
 
+.prime-action {
+  display: flex;
+  font-size: 0.8rem;
+  font-weight: 500;
+  white-space: initial;
+  text-align: left;
+  padding: 0.5rem;
+}
+.prime-action .icon {
+  background-color: rgba(var(--text-color), 0.06);
+  fill: var(--accent-color);
+  border-radius: 2rem;
+  padding: 0.6rem;
+  height: 2.6rem;
+  width: 2.6rem;
+  margin-right: 0.5rem;
+}
+
 .initial {
   position: relative;
   justify-content: center;

css/main.scss

@@ -1014,6 +1014,24 @@ sm-button[variant="primary"] {
   grid-template-rows: 1fr auto;
 }
 
+.prime-action {
+  display: flex;
+  font-size: 0.8rem;
+  font-weight: 500;
+  white-space: initial;
+  text-align: left;
+  padding: 0.5rem;
+  .icon {
+    background-color: rgba(var(--text-color), 0.06);
+    fill: var(--accent-color);
+    border-radius: 2rem;
+    padding: 0.6rem;
+    height: 2.6rem;
+    width: 2.6rem;
+    margin-right: 0.5rem;
+  }
+}
+
 .initial {
   position: relative;
   justify-content: center;

index.html

@@ -219,13 +219,26 @@
     <main id="main_page" class="page grid hidden">
         <section id="chat_page" class="inner-page">
             <div id="contacts" class="grid">
-                <section class="grid gap-0-5" style="padding: 1rem;">
+                <section class="grid gap-0-5 card" style="padding: 1rem 1rem 0 1rem; border-radius: 0 0 1rem 1rem;">
-                    <h5>Multisig</h5>
+                    <h4>Bitcoin multisig</h4>
-                    <div>
+                    <div class="flex align-center gap-0-5" style="margin: 0 -0.5rem 0.5rem;">
-                        <button class="button button--small" onclick="openCreationPopup('multisig')">Create
+                        <button class="prime-action" onclick="openCreationPopup('multisig')">
-                            address</button>
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                        <button class="button button--small" onclick="openPopup('multisig_tx_popup')">Initiate
+                                width="24px" fill="#000000">
-                            transaction</button>
+                                <path d="M0 0h24v24H0z" fill="none" />
+                                <path
+                                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
+                            </svg>
+                            Create address
+                        </button>
+                        <button class="prime-action" onclick="openPopup('multisig_tx_popup')">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0z" fill="none" />
+                                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+                            </svg>
+                            Initiate transaction
+                        </button>
                     </div>
                 </section>
                 <div class="grid header">
@@ -2504,11 +2517,6 @@
                 } else if (type) {
                     switch (type) {
                         case 'TRANSACTION':
-                            if (floGlobals.pipeSigns[pipeID]) {
-                                floGlobals.pipeSigns[pipeID].add(sender)
-                            } else {
-                                floGlobals.pipeSigns[pipeID] = new Set()
-                            }
                             return html.node`<p class="pipeline-event pipeline-event--signed event-card flex align-center">
                                     <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M10.09,16.72l-3.8-3.81l1.48-1.48l2.32,2.33 l5.85-5.87l1.48,1.48L10.09,16.72z"/></g></svg>
                                     ${getContactName(sender)} signed the transaction
@@ -2589,9 +2597,9 @@
             },
             multisigOption(address) {
                 btcOperator.getBalance(address).then(balance => {
-                    const target = getRef('select_multisig_list').querySelector(`input[value="${address}"]`).parentNode.querySelector('.multisig-option__balance');
+                    const target = getRef('select_multisig_list').querySelector(`input[value="${address}"]`);
                     if (target)
-                        target.textContent = `Balance: ${balance} BTC`;
+                        target.parentNode.querySelector('.multisig-option__balance').textContent = `Balance: ${balance} BTC`;
                 }).catch(err => notify(err, 'error'))
                 return html`
                     <li>
@@ -3494,6 +3502,18 @@
                         });
                     }
                     chatLazyLoader.init()
+                    if (getFloIdType(floID) === 'pipeline') {
+                        for (const key in chat) {
+                            const { type, sender } = chat[key]
+                            if (type === 'TRANSACTION') {
+                                if (floGlobals.pipeSigns[floID]) {
+                                    floGlobals.pipeSigns[floID].add(sender)
+                                } else {
+                                    floGlobals.pipeSigns[floID] = new Set()
+                                }
+                            }
+                        }
+                    }
                     resolve()
                 }).catch(error => {
                     console.log(error)
@@ -3566,6 +3586,7 @@
                             `)
                         }
                     }
+                    // to-do: fix signed transaction detection error caused due to lazy loading
                     resolve()
                 })
             })

scripts/components.js

@@ -2139,6 +2139,7 @@ smNotifications.innerHTML = `
                 padding: 0.3rem;
                 transition: background-color 0.3s, transform 0.3s;
                 background-color: transparent;
+                flex-shrink: 0;
             }
             .close:active{
                 transform: scale(0.9);
@@ -2240,13 +2241,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 += `
@@ -2300,6 +2301,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
     }
 
     removeNotification(notification, direction = 'left') {
+        if (!notification) return;
         const sign = direction === 'left' ? '-' : '+';
         notification.animate([
             {
@@ -2341,8 +2343,10 @@ customElements.define('sm-notifications', class extends HTMLElement {
 
         this.mediaQuery.addEventListener('change', this.handleOrientationChange);
         this.notificationPanel.addEventListener('pointerdown', e => {
-            if (e.target.closest('.notification')) {
+            if (e.target.closest('.close')) {
-                this.swipeThreshold = this.clientWidth / 2;
+                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();
@@ -2385,12 +2389,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') {