PIVX-Labs · Duddino · Feb 13, 2024 · Feb 14, 2024 · Feb 27, 2024
diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "This address does not support shield transfers" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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"
 cantShieldToExc = "This address does not support shield transfers"
 
 [ALERTS]

diff --git 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
 cantShieldToExc = "" # This address does not support shield transfers
 
 [ALERTS]

diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,131 @@
+<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';
+/** @type {{show: boolean, tx: import('../mempool.js').HistoricalTx, wallet: import('../wallet.js').Wallet}} */
+const props = defineProps({
+    show: Boolean,
+    tx: Object,
+    displayDecimals: Number,
+});
+const { show, tx, displayDecimals } = toRefs(props);
+const emit = defineEmits(['close']);
+const inputs = ref([]);
+watch(tx, async () => {
+    inputs.value = [];
+    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];
+
+        return {
+            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
@@ -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);
             }