Adding option to re broadcast multisig transaction

css/main.css

@@ -526,6 +526,10 @@ ol li::before {
   margin-right: auto;
 }
 
+.margin-top-1 {
+  margin-top: 1rem;
+}
+
 .margin-bottom-0-5 {
   margin-bottom: 0.5rem;
 }

css/main.scss

@@ -532,7 +532,9 @@ ol {
 .margin-right-auto {
   margin-right: auto;
 }
-
+.margin-top-1 {
+  margin-top: 1rem;
+}
 .margin-bottom-0-5 {
   margin-bottom: 0.5rem;
 }
@@ -802,17 +804,17 @@ ol {
   color: var(--error-color);
 }
 
-.app-brand{
+.app-brand {
   display: flex;
   gap: 0.3rem;
   align-items: center;
-  .icon{
+  .icon {
     height: 1.7rem;
     width: 1.7rem;
   }
 }
-.app-name{
-  &__company{
+.app-name {
+  &__company {
     font-size: 0.8rem;
     font-weight: 500;
     color: rgba(var(--text-color), 0.8);

index.html

@@ -2123,15 +2123,20 @@
                     {
                         clipPath: 'circle(0)',
                     },
-                ], animOptions).onfinish = e => {
-                    e.target.commitStyles()
-                    e.target.cancel()
-                }
+                ], animOptions)
                 button.parentNode.append(createElement('sm-spinner'))
             } else {
-                button.style = ''
-                const potentialTarget = button.parentNode.querySelector('sm-spinner')
-                if (potentialTarget) potentialTarget.remove();
+                button.animate([
+                    {
+                        clipPath: 'circle(0)',
+                    },
+                    {
+                        clipPath: 'circle(100%)',
+                    },
+                ], animOptions).onfinish = () => {
+                    const potentialTarget = button.parentNode.querySelector('sm-spinner')
+                    if (potentialTarget) potentialTarget.remove();
+                }
             }
         }
 
@@ -2976,7 +2981,6 @@
                 easing: 'ease',
                 fill: 'forwards'
             }
-            console.log('updateMessageUI', messagesData)
             for (let messageId in messagesData) {
                 const { category, floID, time, message, sender, groupID, admin, name, pipeID, unconfirmed, type } = messagesData[messageId]
                 const chatAddress = floID || groupID || pipeID
@@ -3832,6 +3836,31 @@
             getRef('messages_container').scrollTo({ top: getRef('messages_container').scrollHeight, behavior: smooth ? 'smooth' : undefined })
         }
 
+        function broadcastTx(pipeID, e) {
+            return new Promise(async (resolve, reject) => {
+                const button = e.target.closest('button')
+                try {
+                    buttonLoader(button, true)
+                    const tx_hex_signed = floGlobals.pipelineTxHex || getTxHex(pipeID)
+                    if (!tx_hex_signed) reject('No transaction found')
+                    const pipeline = messenger.pipeline[pipeID]
+                    const txid = await floBlockchainAPI.broadcastTx(tx_hex_signed)
+                    console.debug(txid);
+                    const result = await messenger.sendRaw(messenger.encrypt(txid, pipeline.eKey), pipeline.id, "BROADCAST", false)
+                    renderElem(button.closest('.grid'), html``)
+                    resolve({
+                        tx_hex: tx_hex_signed,
+                        txid: txid
+                    })
+                } catch (error) {
+                    setTimeout(() => {
+                        buttonLoader(button, false)
+                    }, 400);
+                    reject(error)
+                }
+            })
+        }
+
         let chatLazyLoader
         function renderMessages(floID) {
             return new Promise(async (resolve, reject) => {
@@ -3954,7 +3983,7 @@
                                 }
                                 const { inputs, outputs, fee, floData } = details
                                 const { s: signsDone, r: minSignsRequired, t: totalMembers } = inputs[0]?.signed || {}
-                                const pendingSigns = minSignsRequired - signsDone || 0
+                                const pendingSigns = minSignsRequired - signsDone || 0;
                                 if ($('#transaction_details')) $('#transaction_details').remove()
                                 getRef('messages_container').prepend(html.node`
                                         <details id="transaction_details" class="grid gap-1 card" open>
@@ -3990,6 +4019,14 @@
                                                     <p>${floData}</p>
                                                 </div>`: ''
                                     }
+                                            ${messenger.pipeline[floID].model === 'flo_multisig' && pendingSigns === 0 && !messenger.pipeline[floID].disabled ? html`
+                                                <div class="grid gap-0-5 margin-top-1">
+                                                    <strong> The transaction was not completed. Retry the transaction by clicking the button below.</strong>
+                                                    <div class="multi-state-button margin-right-auto">
+                                                        <button class="button button--primary cta" onclick="${(e) => broadcastTx(floID, e)}">Retry</button>
+                                                    </div>
+                                                </div>
+                                            `: ''}
                                         </details>
                                     `)
                             } catch (err) {

scripts/messenger.js

@@ -96,10 +96,12 @@
                 .catch(error => reject(error))
         })
     }
+    messenger.sendRaw = sendRaw;
 
     function encrypt(value, key = _loaded.appendix.AESKey) {
         return Crypto.AES.encrypt(value, key)
     }
+    messenger.encrypt = encrypt;
 
     function decrypt(value, key = _loaded.appendix.AESKey) {
         return Crypto.AES.decrypt(value, key)