Add Balance Decimals slider setting

assets/style/style.css

@@ -3356,4 +3356,82 @@ select.form-control option {
     padding-right:17px;
     padding-top: 14px;
     padding-bottom: 14px;
+}
+
+.sliderStyle .arrow {
+    display:none;
+}
+
+.tooltip.sliderStyle {
+    top:-10px!important;
+}
+
+.sliderStyle .tooltip-inner {
+    width: 30px;
+    height: 30px;
+    background-color: #ffffffb3;
+    border-radius: 25%;
+    color: #000;
+    font-weight: 500;
+}
+
+.slider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 15px;
+    border-radius: 7.5px;
+    border-color: rgba(255, 255, 255, 0%);
+    background: rgba(255, 255, 255, 22%);
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%; 
+    background: #b988e1;
+    cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #b988e1;
+    cursor: pointer;
+}
+
+.sliderContainer {
+    position: relative;
+    width: 100%;
+    padding-left:12px;
+    padding-right:12px;
+}
+
+.slider {
+    width: 100%;
+}
+
+.sliderDisplay {
+    /*position: absolute;
+    top: 50%;
+    margin-left: 0px;
+    transform: translate(-50%, -50%);
+    margin-top: -6px;
+    z-index: 40;
+    pointer-events: none;*/
+
+    /*text-align: center;*/
+    /*width: 2em;*/
+}
+
+@media (min-width:768px) {
+    .sliderDisplay {
+        display: none;
+    }
 }

index.template.html

@@ -462,7 +462,7 @@ <h3 class="noselect balance-title">
                             <canvas id="identicon" class="innerShadow" style="width: 65px; height: 65px;" data-jdenticon-value=""></canvas><br />
                             <span class="ptr" onclick="MPW.renderWalletBreakdown()" data-toggle="modal" data-target="#walletBreakdownModal">
                               <span class="dcWallet-pivxBalance" id="guiBalance"></span>
-                              <span id="guiBalanceTicker" class="dcWallet-pivxTicker">PIVX</span>
+                              <span id="guiBalanceTicker" class="dcWallet-pivxTicker">PIV</span>
                               <i class="fa-solid fa-plus" style="opacity: 0.5; position: relative; left: 2px;"></i>
                             </span>
                             <br />
@@ -808,7 +808,7 @@ <h3 class="noselect balance-title">
                         </div>
 
                         <span data-i18n="staking">Staking</span><br>
-                        <span class="dcWallet-pivxBalance" id="guiBalanceStaking">0</span> <span id="guiBalanceStakingTicker" class="dcWallet-pivxTicker">PIVX</span><br />
+                        <span class="dcWallet-pivxBalance" id="guiBalanceStaking">0</span> <span id="guiBalanceStakingTicker" class="dcWallet-pivxTicker">PIV</span><br />
                         <div class="dcWallet-usdBalance">
                           <span id="guiStakingValue" class="dcWallet-usdValue">$-</span>
                           <span id="guiStakingValueCurrency" class="dcWallet-usdValue">USD</span>
@@ -866,7 +866,7 @@ <h3 class="noselect balance-title">
                                 MAX
                               </div>
                             </span>
-                            <span id="unstakeAmountCoinsTicker" class="input-group-text">PIVX</span>
+                            <span id="unstakeAmountCoinsTicker" class="input-group-text">PIV</span>
                           </div>
                         </div>
                       </div>
@@ -910,7 +910,7 @@ <h3 class="noselect balance-title">
                                 MAX
                               </div>
                             </span>
-                            <span id="stakeAmountCoinsTicker" class="input-group-text">PIVX</span>
+                            <span id="stakeAmountCoinsTicker" class="input-group-text">PIV</span>
                           </div>
                         </div>
                       </div>
@@ -1171,6 +1171,15 @@ <h2 id="mnLastSeen" class="stake-balances" style="overflow-wrap: anywhere; top:
 
                       <br />
 
+                      <label for="displayDecimals" data-i18n="settingsDecimals">Balance Decimals:</label> <span class="sliderDisplay" id="sliderDisplay">(-)</span>
+                      <br />
+
+                      <div class="sliderContainer">
+                      </div>
+                      <input type="range" min="0" max="8" value="2" class="slider" id="displayDecimals" name="displayDecimals" data-toggle="tooltip" data-placement="top" title="0">
+
+                      <br />
+
                       <label for="translation" data-i18n="settingsLanguage">Choose a Language:</label>
                       <br />
                       <select id="translation" class="form-control" name="translation">
@@ -1199,6 +1208,6 @@ <h2 id="mnLastSeen" class="stake-balances" style="overflow-wrap: anywhere; top:
     </div>
 
     <div class="blackBack blackBackHide d-none" id="blackBack"></div>
-
+    
   </body>
 </html>

locale/en/translation.js

@@ -132,6 +132,7 @@ export const en_translation = {
 
     // Settings
     settingsCurrency: 'Choose a display currency:', //
+    settingsDecimals: 'Balance Decimals:', //
     settingsExplorer: 'Choose an explorer:', //
     settingsLanguage: 'Choose a Language:', //
     settingsPivxNode: 'Choose a PIVX node:', //

locale/ph/translation.js

@@ -137,6 +137,7 @@ export const ph_translation = {
 
     // Settings
     settingsCurrency: 'Pumili ng display currency:', //Choose a display currency:
+    settingsDecimals: '', //Balance Decimals:
     settingsExplorer: 'Pumili ng explorer:', //Choose an explorer:
     settingsLanguage: 'Pumili ng Wika:', //Choose a Language:
     settingsPivxNode: 'Pumili ng PIVX node:', //Choose a PIVX node:

locale/pt-br/translation.js

@@ -137,6 +137,7 @@ export const pt_br_translation = {
 
     // Settings
     settingsCurrency: 'Escolha uma moeda de exibição:', //Choose a display currency:
+    settingsDecimals: '', //Balance Decimals:
     settingsExplorer: 'Escolha um explorador:', //Choose an explorer:
     settingsLanguage: 'Escolha um Idioma:', //Choose a Language:
     settingsPivxNode: 'Escolha um node PIVX:', //Choose a PIVX node:

locale/pt-pt/translation.js

@@ -136,6 +136,7 @@ export const pt_pt_translation = {
 
     // Settings
     settingsCurrency: 'Escolha uma moeda de exibição:', //Choose a display currency:
+    settingsDecimals: '', //Balance Decimals:
     settingsExplorer: 'Escolha um explorador:', //Choose an explorer:
     settingsLanguage: 'Escolha um Idioma:', //Choose a Language:
     settingsPivxNode: 'Escolha um node PIVX:', //Choose a PIVX node:

locale/template/translation.js

@@ -1,4 +1,4 @@
 var translation = {
     // This document is to be used as a template as all the base code is in English
     // Basic HTML tags are allowed such as <b><i> etc. All data is sanitized https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
 
@@ -143,6 +143,7 @@
 
     // Settings
     settingsCurrency: '', //Choose a display currency:
+    settingsDecimals: '', //Balance Decimals:
     settingsExplorer: '', //Choose an explorer:
     settingsLanguage: '', //Choose a Language:
     settingsPivxNode: '', //Choose a PIVX node:

locale/uwu/translation.js

@@ -133,7 +133,8 @@ export const uwu_translation = {
         'Dees are pwoposals dat received an overwhelming ameownt of downwotes, making it likely spam or a highly contwestable pwoposal.', //These are proposals that received an overwhelming amount of downvotes, making it likely spam or a highly contestable proposal.
 
     // Settings
-    settingsCurrency: 'Chowose a dispway cuwwency:',
+    settingsCurrency: 'Chowose a dispway cuwwency:', //Choose a display currency:
+    settingsDecimals: 'Balance Decimawls:', //Balance Decimals:
     settingsExplorer: 'Chowose an expwower:', //Choose an explorer:
     settingsLanguage: 'Chowose a Languwuage:', //Choose a Language:
     settingsAnalytics: 'Chowose your anawytics contwibution wevel:', //Choose your analytics contribution level:

scripts/global.js

@@ -10,7 +10,7 @@
     decryptWallet,
     getNewAddress,
     getDerivationPath,
     LegacyMasterKey,
 } from './wallet.js';
 import { getNetwork, HistoricalTxType } from './network.js';
 import {
@@ -21,6 +21,7 @@
     strCurrency,
     setColdStakingAddress,
     strColdStakingAddress,
+    nDisplayDecimals,
 } from './settings.js';
 import { createAndSendTransaction, signTransaction } from './transactions.js';
 import {
@@ -32,6 +33,7 @@
     isValidBech32,
     isBase64,
     sleep,
+    beautifyNumber,
 } from './misc.js';
 import { cChainParams, COIN, MIN_PASS_LENGTH } from './chain_params.js';
 import { decrypt } from './aes-gcm.js';
@@ -285,6 +287,9 @@
         domNodeSelect: document.getElementById('node'),
         domAutoSwitchToggle: document.getElementById('autoSwitchToggler'),
         domTranslationSelect: document.getElementById('translation'),
+        domDisplayDecimalsSlider: document.getElementById('displayDecimals'),
+        domDisplayDecimalsSliderDisplay:
+            document.getElementById('sliderDisplay'),
         domBlackBack: document.getElementById('blackBack'),
         domWalletSettings: document.getElementById('settingsWallet'),
         domDisplaySettings: document.getElementById('settingsDisplay'),
@@ -299,9 +304,40 @@
 
     // Enable all Bootstrap Tooltips
     $(function () {
+        $('#displayDecimals').tooltip({
+            template:
+                '<div class="tooltip sliderStyle" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+        });
         $('[data-toggle="tooltip"]').tooltip();
     });
 
+    // Set decimal slider event
+    const sliderElement = document.getElementById('displayDecimals');
+    function handleDecimalSlider() {
+        setTimeout(() => {
+            try {
+                if (window.innerWidth > 991) {
+                    const sliderHalf = Math.round(
+                        document
+                            .getElementById('displayDecimals')
+                            .getBoundingClientRect().width / 2
+                    );
+                    const sliderBegin = -sliderHalf + 28;
+                    const stepVal = (sliderHalf * 2) / 8 - 6.45;
+                    const sliderValue = parseInt(sliderElement.value) + 1;
+
+                    document.querySelector('.sliderStyle').style.left = `${
+                        sliderBegin - stepVal + stepVal * sliderValue
+                    }px`;
+                    document.querySelector('.tooltip-inner').innerHTML =
+                        sliderValue - 1;
+                }
+            } catch (e) {}
+        }, 10);
+    }
+    sliderElement.addEventListener('input', handleDecimalSlider);
+    sliderElement.addEventListener('mouseover', handleDecimalSlider);
+
     // Register Input Pair events
     doms.domSendAmountCoins.oninput = () => {
         updateAmountInputPair(
@@ -520,6 +556,9 @@
     // Update the Dashboard currency
     doms.domGuiBalanceValueCurrency.innerText = strCurrency.toUpperCase();
 
+    // Update the Stake Dashboard currency
+    doms.domGuiStakingValueCurrency.innerText = strCurrency.toUpperCase();
+
     // Update the Send menu ticker and currency
     doms.domSendAmountValueCurrency.innerText = strCurrency.toUpperCase();
     doms.domSendAmountCoinsTicker.innerText = cChainParams.current.TICKER;
@@ -591,10 +630,14 @@
     // Update the GUI too, if chosen
     if (updateGUI) {
         // Set the balance, and adjust font-size for large balance strings
-        const nLen = nCoins.toFixed(2).length;
-        doms.domGuiBalance.innerText = nCoins.toFixed(nLen >= 6 ? 0 : 2);
-        doms.domAvailToDelegate.innerText =
-            nCoins.toFixed(2) + ' ' + cChainParams.current.TICKER;
+        const strBal = nCoins.toFixed(nDisplayDecimals);
+        const nLen = strBal.length;
+        doms.domGuiBalance.innerHTML = beautifyNumber(
+            strBal,
+            nLen >= 10 ? '17px' : '25px'
+        );
+        doms.domAvailToDelegate.innerHTML =
+            beautifyNumber(strBal) + ' ' + cChainParams.current.TICKER;
 
         // Update tickers
         updateTicker();
@@ -608,12 +651,18 @@
 
 export function getStakingBalance(updateGUI = false) {
     const nBalance = mempool.getDelegatedBalance();
+    const nCoins = nBalance / COIN;
 
     if (updateGUI) {
         // Set the balance, and adjust font-size for large balance strings
-        doms.domGuiBalanceStaking.innerText = Math.floor(nBalance / COIN);
-        doms.domAvailToUndelegate.innerText =
-            (nBalance / COIN).toFixed(2) + ' ' + cChainParams.current.TICKER;
+        const strBal = nCoins.toFixed(nDisplayDecimals);
+        const nLen = strBal.length;
+        doms.domGuiBalanceStaking.innerHTML = beautifyNumber(
+            strBal,
+            nLen >= 10 ? '17px' : '25px'
+        );
+        doms.domAvailToUndelegate.innerHTML =
+            beautifyNumber(strBal) + ' ' + cChainParams.current.TICKER;
 
         // Update tickers
         updateTicker();
@@ -2683,6 +2732,24 @@
     const { btn, section } = SETTINGS[page];
 
     Object.values(SETTINGS).forEach(({ section, btn }) => {
+        // Set the slider to the proper location
+        if (page == 'display') {
+            doms.domDisplayDecimalsSlider.oninput = function () {
+                doms.domDisplayDecimalsSliderDisplay.innerHTML = this.value;
+                //let val =  ((((doms.domDisplayDecimalsSlider.offsetWidth - 24) / 9) ) * parseInt(this.value));
+
+                //doms.domDisplayDecimalsSliderDisplay.style.marginLeft = (val) + 'px';
+            };
+
+            // Triggers the input event
+            setTimeout(
+                () =>
+                    doms.domDisplayDecimalsSlider.dispatchEvent(
+                        new Event('input')
+                    ),
+                10
+            );
+        }
         // Hide all settings sections
         section.classList.add('d-none');
         // Make all buttons inactive

scripts/misc.js

@@ -296,6 +296,26 @@ export function sanitizeHTML(text) {
     return element.innerHTML;
 }
 
+/**
+ * "Beautifies" a number with HTML, by displaying decimals in a lower opacity
+ * @param {string} strNumber - The number in String form to beautify
+ * @param {string?} strDecFontSize - The optional font size to display decimals in
+ * @returns {string} - A HTML string with beautified number handling
+ */
+export function beautifyNumber(strNumber, strDecFontSize = '') {
+    if (typeof strNumber === 'number') strNumber = strNumber.toString();
+
+    // Only run this for numbers with decimals
+    if (!strNumber.includes('.')) return strNumber;
+
+    // Split the number in to Full and Decimal parts
+    const arrNumParts = strNumber.split('.');
+
+    // Return a HTML that renders the decimal in a lower opacity
+    const strFontSize = strDecFontSize ? 'font-size: ' + strDecFontSize : '';
+    return `${arrNumParts[0]}<span style="opacity: 0.55; ${strFontSize}">.${arrNumParts[1]}</span>`;
+}
+
 /**
  * Check if a string is valid Base64 encoding
  * @param {string} str - String to check