From 0d0ec892fe61019d1be440282e6bf7dc36e3a0b1 Mon Sep 17 00:00:00 2001
From: jojobyte <184880+jojobyte@users.noreply.github.com>
Date: Wed, 14 Feb 2024 10:12:22 -0700
Subject: [PATCH] feat(ui): :sparkles: add tx info dialog after send

---
 src/main.js              |   6 ++
 src/rigs/send-confirm.js |  11 ++++
 src/rigs/tx-info.js      | 119 +++++++++++++++++++++++++++++++++++++++
 src/styles/dialog.css    |   7 +++
 4 files changed, 143 insertions(+)
 create mode 100644 src/rigs/tx-info.js

diff --git a/src/main.js b/src/main.js
index ea05311..5b6d511 100644
--- a/src/main.js
+++ b/src/main.js
@@ -61,6 +61,7 @@ import sendOrReceiveRig from './rigs/send-or-request.js'
 import sendConfirmRig from './rigs/send-confirm.js'
 import requestQrRig from './rigs/request-qr.js'
 import pairQrRig from './rigs/pair-qr.js'
+import txInfoRig from './rigs/tx-info.js'
 
 // app/data state
 let accounts
@@ -466,6 +467,11 @@ async function main() {
     getAddrsWithFunds, batchGenAcctAddrs,
   })
 
+  appDialogs.txInfo = await txInfoRig({
+    setupDialog,
+    mainApp, wallet, userInfo,
+  })
+
   appDialogs.sendConfirm = await sendConfirmRig({
     mainApp, appDialogs, appState, appTools,
     store, userInfo, contactsList, walletFunds,
diff --git a/src/rigs/send-confirm.js b/src/rigs/send-confirm.js
index edbc608..f50ba93 100644
--- a/src/rigs/send-confirm.js
+++ b/src/rigs/send-confirm.js
@@ -191,6 +191,17 @@ export let sendConfirmRig = (async function (globals) {
               state.contact,
               txRes,
             )
+
+            await appDialogs.txInfo.render(
+              {
+                contact: state.contact,
+                txRes,
+                amount: state.amount,
+              },
+              'afterend',
+            )
+
+            let showTxInfo = appDialogs.txInfo.showModal()
           }
 
           sendConfirm.close(fde.intent)
diff --git a/src/rigs/tx-info.js b/src/rigs/tx-info.js
new file mode 100644
index 0000000..e00ade0
--- /dev/null
+++ b/src/rigs/tx-info.js
@@ -0,0 +1,119 @@
+import { lit as html } from '../helpers/lit.js'
+import { qrSvg } from '../helpers/qr.js'
+import {
+  setClipboard,
+  openBlobSVG,
+  generatePaymentRequestURI,
+} from '../helpers/utils.js'
+
+export let txInfoRig = (async function (globals) {
+  'use strict';
+
+  let {
+    mainApp, setupDialog,
+  } = globals;
+
+  let txInfo = await setupDialog(
+    mainApp,
+    {
+      name: 'Transaction Sent',
+      address: '',
+      submitTxt: html`Okay`,
+      submitAlt: 'Okay',
+      cancelTxt: 'Cancel',
+      cancelAlt: `Cancel`,
+      placement: 'wide',
+      closeTxt: html`<svg class="x" width="26" height="26" viewBox="0 0 26 26"><use xlink:href="#icon-x"></use></svg>`,
+      closeAlt: `Close`,
+      amount: 0,
+      getContact: state => {
+        let to = state.contact?.info?.name
+        if (!to && state.contact?.alias) {
+          to = `@${state.contact?.alias}`
+        }
+        if (!to) {
+          to = state.to
+        }
+        return to
+      },
+      footer: state => html`
+        <footer class="inline col">
+          <button
+            class="rounded"
+            type="submit"
+            name="intent"
+            value="okay"
+            title="${state.submitAlt}"
+          >
+            <span>${state.submitTxt}</span>
+          </button>
+        </footer>
+      `,
+      showAmount: state => {
+        if (!state.amount) {
+          return ''
+        }
+
+        return html`
+          <article>
+            <figure>
+              <figcaption>Amount</figcaption>
+              <div class="big">
+                <svg width="32" height="33" viewBox="0 0 32 33">
+                  <use xlink:href="#icon-dash-mark"></use>
+                </svg>
+                ${state.amount}
+              </div>
+            </figure>
+          </article>
+        `
+      },
+      showTransaction: state => {
+        if (!state.txRes) {
+          return ''
+        }
+
+        return html`
+          <article>
+            <figure>
+              <figcaption>Transaction ID</figcaption>
+              <div class="txid" title="${state.txRes?.txid}">${state.txRes?.txid}</div>
+              <br>
+              <a href="https://insight.dash.org/insight/tx/${state.txRes?.txid || ''}" target="_blank" rel="noreferrer">View the Transaction on Dash Insight</a>
+            </figure>
+          </article>
+        `
+      },
+      content: state => html`
+        ${state.header(state)}
+
+        <article>
+          <figure>
+            <figcaption>To</figcaption>
+            <div>${state.getContact(state)}</div>
+          </figure>
+        </article>
+        ${state.showAmount(state)}
+        ${state.showTransaction(state)}
+
+        ${state.footer(state)}
+      `,
+      fields: html``,
+      events: {
+        handleSubmit: state => async event => {
+          event.preventDefault()
+          event.stopPropagation()
+
+          txInfo.close()
+        },
+      },
+    }
+  )
+
+  // @ts-ignore
+  globals.txInfo = txInfo;
+
+  return txInfo
+})
+
+export default txInfoRig
\ No newline at end of file
diff --git a/src/styles/dialog.css b/src/styles/dialog.css
index 0c714a7..263453f 100644
--- a/src/styles/dialog.css
+++ b/src/styles/dialog.css
@@ -452,6 +452,13 @@ dialog.responsive fieldset.contact section article {
   align-items: stretch;
 }
 
+dialog .txid {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
 @media (min-width: 650px) {
   dialog.responsive {
     width: fit-content;