Adjust rewards appearance/styling

PIVX-Labs · Apr 18, 2023 · e21d6ba · e21d6ba
1 parent 287ba0f
commit e21d6ba
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 85 deletions.
diff --git a/index.template.html b/index.template.html
@@ -983,18 +983,16 @@ <h4 class="stake-balances" style="background-color: #2c0044; border-radius: 10px
                   <h2 id="mnLastPaid" class="stake-balances" style="overflow-wrap: anywhere; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; width: 100%; padding: 10px; font-size: xx-large;" id="mnStatus"></h2>
                   </div>
                   <!-- // MASTERNODE REWARD LIST -->
-                  <div class="staking-banner-bottom">
-                    <div class="stake-box large-box col-md-4">
-                      <div id="masternode-rewards-title" class="staking-rewards-header">
-                      <h5><span data-i18n="masternode">Masternode</span> <span data-i18n="rewards">Rewards</span></h5>
-                      </div>
-                      <div class="masternode-rewards-list">
-                        <div id="masternode-rewards-content"></div>
-                          <button type="button" id="stakingLoadMore" onclick="MPW.updateMasternodeRewardsGUI()">
-                          <span class="buttoni-icon" id="stakingLoadMoreIcon"><i class="fas fa-sync fa-tiny-margin"></i></span>
-                          <span class="buttoni-text" data-i18n="stakingLoadMore">Load more</span>
-                          </button>
-                      </div>
+                  <div class="stake-box large-box col-md-4">
+                    <div id="masternode-rewards-title">
+                    <h4 class="stake-balances" style="background-color: #2c0044; border-radius: 10px;"><span data-i18n="masternode">Masternode</span> <span data-i18n="rewards">Rewards</span></h4>
+                    </div>
+                    <div class="masternode-rewards-list">
+                      <div id="masternode-rewards-content"></div>
+                        <button type="button" id="masternodeLoadMore" onclick="MPW.updateMasternodeRewardsGUI()">
+                        <span class="buttoni-icon" id="stakingLoadMoreIcon"><i class="fas fa-sync fa-tiny-margin"></i></span>
+                        <span class="buttoni-text" data-i18n="masternodeLoadMore">Load more</span>
+                        </button>
                     </div>
                   </div>
                 </div>
@@ -1072,7 +1070,6 @@ <h5><span data-i18n="masternode">Masternode</span> <span data-i18n="rewards">Rew
             </div>
           </div>
         </div>
-      </div>
       <!--
       Alert
     -->

diff --git a/scripts/global.js b/scripts/global.js
@@ -68,6 +68,7 @@ export function start() {
         domGuiBalanceBoxStaking: document.getElementById(
             'guiBalanceBoxStaking'
         ),
+        domGuiMasternodeLoadMore: document.getElementById('masternodeLoadMore'),
         domGuiDelegateAmount: document.getElementById('delegateAmount'),
         domGuiUndelegateAmount: document.getElementById('undelegateAmount'),
         domStakeTab: document.getElementById('stakeTab'),
@@ -125,6 +126,7 @@ export function start() {
         domMnNetType: document.getElementById('mnNetType'),
         domMnNetIP: document.getElementById('mnNetIP'),
         domMnLastSeen: document.getElementById('mnLastSeen'),
+        domMnLastPaid: document.getElementById('mnLastPaid'),
 
         domAccessWallet: document.getElementById('accessWallet'),
         domImportWallet: document.getElementById('importWallet'),
@@ -512,7 +514,7 @@ export async function updateStakingRewardsGUI() {
 export async function updateMasternodeRewardsGUI() {
     const network = getNetwork();
     const masternodeRewards = await network.getMasternodeRewards();
-    if (network.areRewardsComplete) {
+    if (network.areRewardsMasternodeComplete) {
         // Hide the load more button
         doms.domGuiMasternodeLoadMore.style.display = 'none';
     }
@@ -535,9 +537,12 @@ export async function updateMasternodeRewardsGUI() {
         (total, reward) => total + reward.amount,
         0
     );
-    // UpdateDOMS.DOM
-    doms.domMasternodeRewardsTitle.innerHTML = `Masternode Rewards: ≥${nRewards} ${cChainParams.current.TICKER}`;
-    doms.domMasternodeRewardsList.innerHTML = strList;
+    if(nRewards.length != 0) {
+        // UpdateDOMS.DOM
+        doms.domMasternodeRewardsTitle.style.cssText = 'background-color:#2c0044;border-radius:10px;margin-top:1rem;margin-bottom:0.75rem;padding:5px;font-size:22px;font-weight:500;line-height:1.2;font-family:Montserrat,sans-serif!important;';
+        doms.domMasternodeRewardsTitle.innerHTML = `Masternode Rewards: ≥ ${nRewards} ${cChainParams.current.TICKER}`;
+        doms.domMasternodeRewardsList.innerHTML = strList;
+    }
 }
 
 /**
@@ -1568,6 +1573,7 @@ export async function updateMasternodeTab() {
 
 async function refreshMasternodeData(cMasternode, fAlert = false) {
     const cMasternodeData = await cMasternode.getFullData();
+    const cMasternodeReward = await cMasternode.getNextMasternodePaymentInMinutes();
     if (debug) console.log(cMasternodeData);
 
     // If we have MN data available, update the dashboard
@@ -1584,6 +1590,14 @@ async function refreshMasternodeData(cMasternode, fAlert = false) {
         doms.domMnLastSeen.innerText = new Date(
             cMasternodeData.lastseen * 1000
         ).toLocaleTimeString();
+
+        if (cMasternodeReward > 30) {
+            doms.domMnLastPaid.innerText = "~" + cMasternodeReward + " blocks";
+        } else if (cMasternodeReward == 0) {
+            doms.domMnLastPaid.innerText = "Not yet paid";
+        } else {
+            doms.domMnLastPaid.innerText = "Coming soon";
+        }
     }
 
     if (cMasternodeData.status === 'MISSING') {

diff --git a/scripts/index.js b/scripts/index.js
@@ -40,6 +40,7 @@ export {
     toggleBottomMenu,
     createProposal,
     updateStakingRewardsGUI,
+    updateMasternodeRewardsGUI,
 } from './global.js';
 export { generateWallet, getNewAddress, importWallet } from './wallet.js';
 export { toggleTestnet, toggleDebug } from './settings.js';

diff --git a/scripts/network.js b/scripts/network.js
@@ -4,7 +4,7 @@ import { createAlert } from './misc.js';
 import { Mempool, UTXO } from './mempool.js';
 import { getEventEmitter } from './event_bus.js';
 import { STATS, cStatKeys, cAnalyticsLevel } from './settings.js';
-import { Masternode, getFullData } from './masternode.js';
+import Masternode from './masternode.js';
 
 /**
  * Virtual class rapresenting any network backend
@@ -348,80 +348,76 @@ export class ExplorerNetwork extends Network {
      * @returns Filtered array of Masternode rewards
      */
     async getMasternodeRewards() {
-        const cMasternode = new Masternode(
-            JSON.parse(localStorage.getItem('masternode'))
-        );
-        const cMasternodeData = await cMasternode.getFullData();
         if (this.rewardsMasternodeSyncing) {
             return this.masternodeRewards;
         }
-        try {
-            if (!this.enabled || this.areRewardsMasternodeComplete)
+        if(localStorage.getItem('masternode')) {
+            const cMasternode = new Masternode(
+                JSON.parse(localStorage.getItem('masternode'))
+            );
+            const cMasternodeData = await cMasternode.getFullData();
+            if (this.rewardsMasternodeSyncing) {
                 return this.masternodeRewards;
-            this.rewardsMasternodeSyncing = true;
-            const nHeight = this.masternodeRewards.length
-                ? this.masternodeRewards[this.masternodeRewards.length - 1].blockHeight
-                : 0;
-            const mapPaths = new Map();
-            const txSum = (v) =>
-                v.reduce(
-                    (t, s) =>
-                        t +
-                        (s.addresses
-                            .map((strAddr) => mapPaths.get(strAddr))
-                            .filter((v) => v).length && s.addresses.length === 2
-                            ? parseInt(s.value)
-                            : 0),
-                    0
-                );
-            let cData;
-            cData = await (
-                await fetch(
-                    `${
-                        this.strUrl
-                    }/api/v2/xpub/${cMasternodeData.addr}?details=txs&pageSize=500&to=${
-                        nHeight ? nHeight - 1 : 0
-                    }`
-                )
-            ).json();
-            cData = await (
-                await fetch(
-                    `${
-                        this.strUrl
-                    }/api/v2/address/${cMasternodeData.addr}?details=txs&pageSize=500&to=${
-                        nHeight ? nHeight - 1 : 0
-                    }`
-                )
-            ).json();
-            mapPaths.set(cMasternodeData.addr, ':)');
-        if (cData && cData.transactions) {
-            // Update rewards
-            this.masternodeRewards = this.masternodeRewards.concat(
-                cData.transactions
-                    .filter(
-                        (tx) => tx.vout[0].addresses[0] === 'CoinStake TX'
+            }
+            try {
+                if (!this.enabled || this.areRewardsMasternodeComplete)
+                    return this.masternodeRewards;
+                this.rewardsMasternodeSyncing = true;
+                const nHeight = this.masternodeRewards.length
+                    ? this.masternodeRewards[this.masternodeRewards.length - 1].blockHeight
+                    : 0;
+                const mapPaths = new Map();
+                const txSum = (v) =>
+                    v.reduce(
+                        (t, s) =>
+                            t +
+                            (s.addresses
+                                .map((strAddr) => mapPaths.get(strAddr))
+                                .filter((v) => v).length && s.addresses.length === 2
+                                ? parseInt(s.value)
+                                : 0),
+                        0
+                    );
+                let cData;
+                cData = await (
+                    await fetch(
+                        `${
+                            this.strUrl
+                        }/api/v2/address/${cMasternodeData.addr}?details=txs&pageSize=500&to=${
+                            nHeight ? nHeight - 1 : 0
+                        }`
                     )
-                    .map((tx) => {
-                        return {
-                            id: tx.txid,
-                            time: tx.blockTime,
-                            blockHeight: tx.blockHeight,
-                            amount: txSum(tx.vout.slice(-1)) / COIN,
-                        };
-                    })
-                    .filter((tx) => tx.amount != 0)
-                );
-
-                // If the results don't match the full 'max/requested results', then we know the rewards are complete
-                if (cData.transactions.length !== cData.itemsOnPage) {
-                    this.areMasternodeRewardsComplete = true;
+                ).json();
+                mapPaths.set(cMasternodeData.addr, ':)');
+            if (cData && cData.transactions) {
+                // Update rewards
+                this.masternodeRewards = this.masternodeRewards.concat(
+                    cData.transactions
+                        .filter(
+                            (tx) => tx.vout[0].addresses[0] === 'CoinStake TX'
+                        )
+                        .map((tx) => {
+                            return {
+                                id: tx.txid,
+                                time: tx.blockTime,
+                                blockHeight: tx.blockHeight,
+                                amount: txSum(tx.vout.slice(-1)) / COIN,
+                            };
+                        })
+                        .filter((tx) => tx.amount != 0)
+                    );
+
+                    // If the results don't match the full 'max/requested results', then we know the rewards are complete
+                    if (cData.transactions.length !== cData.itemsOnPage) {
+                        this.areMasternodeRewardsComplete = true;
+                    }
                 }
+                return this.masternodeRewards;
+            } catch (e) {
+                console.error(e);
+            } finally {
+                this.rewardsMasternodeSyncing = false;
             }
-            return this.masternodeRewards;
-        } catch (e) {
-            console.error(e);
-        } finally {
-            this.rewardsMasternodeSyncing = false;
         }
     }