From 132929b776e84e4407828c949e77597d6cdedfeb Mon Sep 17 00:00:00 2001
From: Duddino <duddino@duddino.com>
Date: Tue, 13 Feb 2024 17:11:09 +0100
Subject: [PATCH 1/2] Tx Description Box

---
 locale/cnr/translation.toml         |   2 +
 locale/de/translation.toml          |   2 +
 locale/en/translation.toml          |   2 +
 locale/es-mx/translation.toml       |   2 +
 locale/fr/translation.toml          |   2 +
 locale/it/translation.toml          |   2 +
 locale/nl/translation.toml          |   2 +
 locale/ph/translation.toml          |   2 +
 locale/pl/translation.toml          |   2 +
 locale/pt-br/translation.toml       |   2 +
 locale/pt-pt/translation.toml       |   2 +
 locale/template/translation.toml    |   2 +
 locale/uwu/translation.toml         |   2 +
 scripts/Modal.vue                   |   6 +-
 scripts/dashboard/Activity.vue      |  31 +++++--
 scripts/dashboard/CreateWallet.vue  |   4 +-
 scripts/dashboard/TxDescription.vue | 127 ++++++++++++++++++++++++++++
 scripts/mempool.js                  |   6 +-
 scripts/wallet.js                   |  19 ++++-
 19 files changed, 209 insertions(+), 10 deletions(-)
 create mode 100644 scripts/dashboard/TxDescription.vue

diff --git a/locale/cnr/translation.toml b/locale/cnr/translation.toml
index 7aa8213b8..ee0890103 100644
--- a/locale/cnr/translation.toml
+++ b/locale/cnr/translation.toml
@@ -215,6 +215,8 @@ chartImmatureBalance = "" # Immature balance
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 INTERNAL_ERROR = "Interna greška, molimo pokušajte ponovo kasnije" # Internal error, please try again later
diff --git a/locale/de/translation.toml b/locale/de/translation.toml
index cff4e7acf..bbf0fb7a4 100644
--- a/locale/de/translation.toml
+++ b/locale/de/translation.toml
@@ -215,6 +215,8 @@ syncShieldProgress = "" # Loading shielded blocks {current} of {total}
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 INTERNAL_ERROR = "Interner Fehler, bitte versuche es später erneut" # Internal error, please try again later
diff --git a/locale/en/translation.toml b/locale/en/translation.toml
index b35a45de1..d3484a00b 100644
--- a/locale/en/translation.toml
+++ b/locale/en/translation.toml
@@ -215,6 +215,8 @@ syncShieldProgress = "Loading shielded blocks {current} of {total}" # Loading sh
 useShieldInputs = "Use shield inputs" # Use shield inputs
 newShieldAddress = "Get new shield address" # Get new shield address
 shieldAddress = "Shield address" # Shield address
+noInputs = "No inputs" # No inputs
+noOutputs = "No outputs" # No outputs
 
 [ALERTS]
 INTERNAL_ERROR = "Internal error, please try again later" # Internal error, please try again later
diff --git a/locale/es-mx/translation.toml b/locale/es-mx/translation.toml
index a3ac330e1..10ebe7dd3 100644
--- a/locale/es-mx/translation.toml
+++ b/locale/es-mx/translation.toml
@@ -215,6 +215,8 @@ syncShieldProgress = "" # Loading shielded blocks {current} of {total}
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 INTERNAL_ERROR = "Error interno, vuelve a intentarlo más tarde" # Internal error, please try again later
diff --git a/locale/fr/translation.toml b/locale/fr/translation.toml
index d9d9ec32e..934495914 100644
--- a/locale/fr/translation.toml
+++ b/locale/fr/translation.toml
@@ -215,6 +215,8 @@ syncShieldProgress = "" # Loading shielded blocks {current} of {total}
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 INTERNAL_ERROR = "Erreur interne, veuillez réessayer plus tard" # Internal error, please try again later
diff --git a/locale/it/translation.toml b/locale/it/translation.toml
index 70c90958c..76bce5cc4 100644
--- a/locale/it/translation.toml
+++ b/locale/it/translation.toml
@@ -215,6 +215,8 @@ syncShieldProgress = "" # Loading shielded blocks {current} of {total}
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 INTERNAL_ERROR = "Errore interno, rirova più tardi" # Internal error, please try again later
diff --git a/locale/nl/translation.toml b/locale/nl/translation.toml
index 5cf7faca2..c74173ae6 100644
--- a/locale/nl/translation.toml
+++ b/locale/nl/translation.toml
@@ -215,6 +215,8 @@ syncShieldProgress = "" # Loading shielded blocks {current} of {total}
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 INTERNAL_ERROR = "Interne fout, probeer het later opnieuw" # Internal error, please try again later
diff --git a/locale/ph/translation.toml b/locale/ph/translation.toml
index 340e76bce..5254efd60 100644
--- a/locale/ph/translation.toml
+++ b/locale/ph/translation.toml
@@ -215,6 +215,8 @@ syncShieldProgress = "" # Loading shielded blocks {current} of {total}
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 INTERNAL_ERROR = "Internal error, Pakiusap uliting muli" # Internal error, please try again later
diff --git a/locale/pl/translation.toml b/locale/pl/translation.toml
index fb7c39300..c113bbb10 100644
--- a/locale/pl/translation.toml
+++ b/locale/pl/translation.toml
@@ -215,6 +215,8 @@ chartImmatureBalance = "" # Immature balance
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 INTERNAL_ERROR = "Błąd wewnętrzny, spróbuj ponownie później" # Internal error, please try again later
diff --git a/locale/pt-br/translation.toml b/locale/pt-br/translation.toml
index e4f2fb55d..aa8ae74cd 100644
--- a/locale/pt-br/translation.toml
+++ b/locale/pt-br/translation.toml
@@ -82,6 +82,8 @@ syncShieldProgress = "" # Loading shielded blocks {current} of {total}
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 STAKE_ADDR_SET = "<b>Endereço de Cold Staking definido!</b><br>Ao fazer Stake no futuro este endereço irá ser usado." # <b>Cold Address set!</b><br>Future stakes will use this address.
diff --git a/locale/pt-pt/translation.toml b/locale/pt-pt/translation.toml
index ccb40e474..b2ca310b9 100644
--- a/locale/pt-pt/translation.toml
+++ b/locale/pt-pt/translation.toml
@@ -82,6 +82,8 @@ syncShieldProgress = "" # Loading shielded blocks {current} of {total}
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 STAKE_ADDR_SET = "<b>Endereço de Cold Staking definido!</b><br>Ao fazer Stake no futuro irá ser usado este endereço." # <b>Cold Address set!</b><br>Future stakes will use this address.
diff --git a/locale/template/translation.toml b/locale/template/translation.toml
index 32f14d6e3..2b05a4935 100644
--- a/locale/template/translation.toml
+++ b/locale/template/translation.toml
@@ -239,6 +239,8 @@ unhandledException = "Unhandled exception."
 useShieldInputs = "Use shield inputs"
 newShieldAddress = "Get new shield address"
 shieldAddress = "Shield address"
+noInputs = "No inputs"
+noOutputs = "No outputs"
 
 [ALERTS]
 INTERNAL_ERROR = "Internal error, please try again later"
diff --git a/locale/uwu/translation.toml b/locale/uwu/translation.toml
index db184d24a..321c8ea1f 100644
--- a/locale/uwu/translation.toml
+++ b/locale/uwu/translation.toml
@@ -215,6 +215,8 @@ syncShieldProgress = "" # Loading shielded blocks {current} of {total}
 useShieldInputs = "" # Use shield inputs
 newShieldAddress = "" # Get new shield address
 shieldAddress = "" # Shield address
+noInputs = "" # No inputs
+noOutputs = "" # No outputs
 
 [ALERTS]
 INTERNAL_ERROR = "Internal error, pwease try again later" # Internal error, please try again later
diff --git a/scripts/Modal.vue b/scripts/Modal.vue
index e3c1eeccf..5d0e55a33 100644
--- a/scripts/Modal.vue
+++ b/scripts/Modal.vue
@@ -8,7 +8,11 @@ const props = defineProps({
 <template>
     <Transition name="modal">
         <div v-if="show" class="modal-mask black-text">
-            <div class="modal-dialog modal-dialog-centered" role="document">
+            <div
+                class="modal-dialog modal-dialog-centered"
+                role="document"
+                style="max-width: none"
+            >
                 <div class="modal-content" :class="modalClass">
                     <div class="modal-header" v-if="!!$slots.header">
                         <slot name="header"></slot>
diff --git a/scripts/dashboard/Activity.vue b/scripts/dashboard/Activity.vue
index 9897e355d..b8c68704f 100644
--- a/scripts/dashboard/Activity.vue
+++ b/scripts/dashboard/Activity.vue
@@ -9,6 +9,7 @@ import { Database } from '../database.js';
 import { HistoricalTx, HistoricalTxType } from '../mempool';
 import { getNameOrAddress } from '../contacts-book.js';
 import { getEventEmitter } from '../event_bus';
+import TxDescription from './TxDescription.vue';
 
 const props = defineProps({
     title: String,
@@ -25,6 +26,9 @@ const rewardsText = computed(
 const rewardAmount = ref(0);
 const ticker = computed(() => cChainParams.current.TICKER);
 const explorerUrl = ref(getNetwork()?.strUrl);
+
+const showTxDescription = ref(false);
+const selectedTx = ref(null);
 const txMap = computed(() => {
     return {
         [HistoricalTxType.STAKE]: {
@@ -177,9 +181,9 @@ async function parseTXs(arrTXs) {
         if (cTx.type === HistoricalTxType.SENT) {
             fSendToSelf = true;
             // Check all addresses to find our own, caching them for performance
-            for (const strAddr of cTx.receivers) {
+            for (const { address } of cTx.receivers) {
                 // If a previous Tx checked this address, skip it, otherwise, check it against our own address(es)
-                if (!wallet.isOwnAddress(strAddr)) {
+                if (!wallet.isOwnAddress(address)) {
                     // External address, this is not a self-only Tx
                     fSendToSelf = false;
                 }
@@ -197,7 +201,10 @@ async function parseTXs(arrTXs) {
                 who = translation.activityShieldedAddress;
             } else {
                 const arrAddresses = cTx.receivers
-                    .map((addr) => [wallet.isOwnAddress(addr), addr])
+                    .map(({ address }) => [
+                        wallet.isOwnAddress(address),
+                        address,
+                    ])
                     .filter(([isOwnAddress, _]) => {
                         return cTx.type === HistoricalTxType.RECEIVED
                             ? isOwnAddress
@@ -227,6 +234,7 @@ async function parseTXs(arrTXs) {
             confirmed: fConfirmed,
             icon,
             colour,
+            tx: cTx,
         });
     }
 
@@ -259,11 +267,16 @@ getEventEmitter().on(
     (_str, done) => done && update()
 );
 onMounted(() => update());
-
 defineExpose({ update, reset, getTxCount });
 </script>
 
 <template>
+    <TxDescription
+        :show="showTxDescription"
+        :tx="selectedTx"
+        :displayDecimals="2"
+        @close="showTxDescription = false"
+    />
     <div>
         <center>
             <span class="dcWallet-activityLbl"
@@ -298,7 +311,15 @@ defineExpose({ update, reset, getTxCount });
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for="tx in txs">
+                            <tr
+                                v-for="tx in txs"
+                                @click="
+                                    () => {
+                                        selectedTx = tx.tx;
+                                        showTxDescription = true;
+                                    }
+                                "
+                            >
                                 <td
                                     class="align-middle pr-10px"
                                     style="font-size: 12px"
diff --git a/scripts/dashboard/CreateWallet.vue b/scripts/dashboard/CreateWallet.vue
index ebf880659..bf1f1ba0a 100644
--- a/scripts/dashboard/CreateWallet.vue
+++ b/scripts/dashboard/CreateWallet.vue
@@ -66,7 +66,7 @@ async function generateWallet() {
         </div>
     </div>
     <Teleport to="body">
-        <modal :show="showModal" @close="showModal = false">
+        <Modal :show="showModal" @close="showModal = false">
             <template #body>
                 <p class="modal-label"></p>
                 <div class="auto-fit">
@@ -119,6 +119,6 @@ async function generateWallet() {
                     </button>
                 </center>
             </template>
-        </modal>
+        </Modal>
     </Teleport>
 </template>
diff --git a/scripts/dashboard/TxDescription.vue b/scripts/dashboard/TxDescription.vue
new file mode 100644
index 000000000..ef3cdef0b
--- /dev/null
+++ b/scripts/dashboard/TxDescription.vue
@@ -0,0 +1,127 @@
+<script setup>
+import Modal from '../Modal.vue';
+import { translation } from '../i18n.js';
+import { watch, ref, toRefs, defineProps } from 'vue';
+import { getNetwork } from '../network';
+import { COIN, cChainParams } from '../chain_params';
+import { beautifyNumber } from '../misc';
+/** @type {{show: boolean, tx: import('../mempool.js').HistoricalTx, wallet: import('../wallet.js').Wallet}} */
+const props = defineProps({
+    show: Boolean,
+    tx: Object,
+    wallet: Object,
+    displayDecimals: Number,
+});
+const { show, tx, wallet, displayDecimals } = toRefs(props);
+const emit = defineEmits(['close']);
+const inputs = ref([]);
+watch(tx, async () => {
+    inputs.value = [];
+    for (const input of tx.value.senders) {
+        const inputTx = await getNetwork().getTxInfo(input.txid);
+        const txout = inputTx.vout[input.n];
+
+        inputs.value.push({
+            address: txout.addresses[0],
+            amount: txout.value,
+        });
+    }
+});
+function satsToStr(sats) {
+    console.log(displayDecimals);
+    return `${(sats / COIN).toFixed(displayDecimals.value)} ${
+        cChainParams.current.TICKER
+    }`;
+}
+</script>
+
+<template>
+    <Modal :show="show" modalClass="exportKeysModalColor">
+        <template #header>
+            <h5 class="modal-title">Transaction Description</h5>
+            <button
+                type="button"
+                class="close"
+                aria-label="Close"
+                data-testid="closeBtn"
+                @click="emit('close')"
+            >
+                <i class="fa-solid fa-xmark closeCross"></i>
+            </button>
+        </template>
+        <template #body>
+            <div>
+                <code class="wallet-code"> {{ tx.id }} </code>
+                <hr />
+                <div class="tx-container">
+                    <div class="io-container">
+                        <div
+                            v-for="input in inputs"
+                            style="
+                                display: flex;
+                                flex-direction: row;
+                                margin: 10px;
+                                gap: 10px;
+                            "
+                        >
+                            <code class="wallet-code" style="color: white">
+                                {{ input.address }}
+                            </code>
+                            <span style="flex-shrink: 0">
+                                {{ satsToStr(input.amount) }}
+                            </span>
+                        </div>
+                        <span v-if="!tx.senders.length">
+                            {{ translation.noInputs }}
+                        </span>
+                    </div>
+                    <p><i class="arrow down"></i></p>
+                    <div class="io-container">
+                        <div
+                            v-for="output in tx.receivers"
+                            style="
+                                display: flex;
+                                flex-direction: row;
+                                margin: 10px;
+                                gap: 10px;
+                            "
+                        >
+                            <code class="wallet-code" style="">
+                                {{ output.address }}
+                            </code>
+                            <span style="flex-shrink: 0">
+                                {{ satsToStr(output.amount) }}
+                            </span>
+                        </div>
+
+                        <span v-if="!tx.receivers.length">
+                            {{ translation.noOutputs }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </Modal>
+</template>
+
+<style>
+.tx-container {
+    display: flex;
+    flex-direction: column;
+}
+.io-container {
+    display: flex;
+    flex-direction: column;
+}
+.arrow {
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    display: inline-block;
+    padding: 3px;
+}
+
+.down {
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+}
+</style>
diff --git a/scripts/mempool.js b/scripts/mempool.js
index 45c5a8cae..d2ccf6476 100644
--- a/scripts/mempool.js
+++ b/scripts/mempool.js
@@ -25,7 +25,8 @@ export class HistoricalTx {
     /**
      * @param {HistoricalTxType} type - The type of transaction.
      * @param {string} id - The transaction ID.
-     * @param {Array<string>} receivers - The list of 'output addresses'.
+     * @param {Array<{amount: number, address: string}>} receivers - The list of 'output addresses'.
+     * @param {Array<{amount: number, address: string}>} senders - The list of 'output addresses'.
      * @param {boolean} shieldedOutputs - If this transaction contains Shield outputs.
      * @param {number} time - The block time of the transaction.
      * @param {number} blockHeight - The block height of the transaction.
@@ -34,6 +35,7 @@ export class HistoricalTx {
     constructor(
         type,
         id,
+        senders,
         receivers,
         shieldedOutputs,
         time,
@@ -42,6 +44,7 @@ export class HistoricalTx {
     ) {
         this.type = type;
         this.id = id;
+        this.senders = senders;
         this.receivers = receivers;
         this.shieldedOutputs = shieldedOutputs;
         this.time = time;
@@ -258,6 +261,7 @@ export class Mempool {
         this.txmap.set(tx.txid, tx);
         for (const vin of tx.vin) {
             const op = vin.outpoint;
+            if (!op) console.log(tx);
             if (!this.isSpent(op)) {
                 this.setSpent(op.txid, op);
             }
diff --git a/scripts/wallet.js b/scripts/wallet.js
index 89d1d12bd..e12dff1e5 100644
--- a/scripts/wallet.js
+++ b/scripts/wallet.js
@@ -661,12 +661,27 @@ export class Wallet {
         return tx.vout.reduce(
             (acc, vout) => [
                 ...acc,
-                ...this.getAddressesFromScript(vout.script).addresses,
+                ...this.getAddressesFromScript(vout.script).addresses.map(
+                    (address) => {
+                        return {
+                            address,
+                            amount: vout.value,
+                        };
+                    }
+                ),
             ],
             []
         );
     }
 
+    /**
+     * Return the input addresses for a given transaction
+     * @param {Transaction} tx
+     */
+    getInAddress(tx) {
+        return tx.vin.map((i) => i.outpoint);
+    }
+
     /**
      * Convert a list of Blockbook transactions to HistoricalTxs
      * @param {Array<Transaction>} arrTXs - An array of the Blockbook TXs
@@ -684,6 +699,7 @@ export class Wallet {
 
             // The receiver addresses, if any
             let arrReceivers = this.getOutAddress(tx);
+            const arrSenders = this.getInAddress(tx);
 
             // Figure out the type, based on the Tx's properties
             let type = HistoricalTxType.UNKNOWN;
@@ -708,6 +724,7 @@ export class Wallet {
                 new HistoricalTx(
                     type,
                     tx.txid,
+                    arrSenders,
                     arrReceivers,
                     false,
                     tx.blockTime,

From 467432e187342b13e05730131cdad28e2af6567a Mon Sep 17 00:00:00 2001
From: Duddino <duddino@duddino.com>
Date: Wed, 14 Feb 2024 14:50:49 +0100
Subject: [PATCH 2/2] Load all inputs at once

---
 scripts/dashboard/TxDescription.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/scripts/dashboard/TxDescription.vue b/scripts/dashboard/TxDescription.vue
index ef3cdef0b..8432714a9 100644
--- a/scripts/dashboard/TxDescription.vue
+++ b/scripts/dashboard/TxDescription.vue
@@ -4,28 +4,32 @@ import { translation } from '../i18n.js';
 import { watch, ref, toRefs, defineProps } from 'vue';
 import { getNetwork } from '../network';
 import { COIN, cChainParams } from '../chain_params';
-import { beautifyNumber } from '../misc';
 /** @type {{show: boolean, tx: import('../mempool.js').HistoricalTx, wallet: import('../wallet.js').Wallet}} */
 const props = defineProps({
     show: Boolean,
     tx: Object,
-    wallet: Object,
     displayDecimals: Number,
 });
-const { show, tx, wallet, displayDecimals } = toRefs(props);
+const { show, tx, displayDecimals } = toRefs(props);
 const emit = defineEmits(['close']);
 const inputs = ref([]);
 watch(tx, async () => {
     inputs.value = [];
-    for (const input of tx.value.senders) {
-        const inputTx = await getNetwork().getTxInfo(input.txid);
-        const txout = inputTx.vout[input.n];
+    inputs.value = (
+        await Promise.all(
+            tx.value.senders.map(async (i) => [
+                await getNetwork().getTxInfo(i.txid),
+                i.n,
+            ])
+        )
+    ).map(([inputTx, n]) => {
+        const txout = inputTx.vout[n];
 
-        inputs.value.push({
+        return {
             address: txout.addresses[0],
             amount: txout.value,
-        });
-    }
+        };
+    });
 });
 function satsToStr(sats) {
     console.log(displayDecimals);