Add Balance Decimals slider setting

assets/style/style.css

@@ -3356,4 +3356,52 @@ 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;
+  }

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,12 @@ <h2 id="mnLastSeen" class="stake-balances" style="overflow-wrap: anywhere; top:
 
                       <br />
 
+                      <label for="displayDecimals" data-i18n="settingsDecimals">Balance Decimals:</label>
+                      <br />
+                      <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 +1205,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,7 @@
         domNodeSelect: document.getElementById('node'),
         domAutoSwitchToggle: document.getElementById('autoSwitchToggler'),
         domTranslationSelect: document.getElementById('translation'),
+        domDisplayDecimalsSlider: document.getElementById('displayDecimals'),
         domBlackBack: document.getElementById('blackBack'),
         domWalletSettings: document.getElementById('settingsWallet'),
         domDisplaySettings: document.getElementById('settingsDisplay'),
@@ -299,9 +302,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(
@@ -591,10 +625,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 +646,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();

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

scripts/settings.js

@@ -40,6 +40,8 @@ export let cNode = cChainParams.current.Nodes[0];
 export let fAutoSwitch = true;
 /** The active Cold Staking address: default is the PIVX Labs address */
 export let strColdStakingAddress = 'SdgQDpS8jDRJDX8yK8m9KnTMarsE84zdsy';
+/** The decimals to display for the wallet balance */
+export let nDisplayDecimals = 2;
 
 let transparencyReport;
 
@@ -72,6 +74,10 @@ export class Settings {
      * @type {String} Currency to display
      */
     displayCurrency;
+    /**
+     * @type {number} The decimals to display for the wallet balance
+     */
+    displayDecimals;
     constructor({
         analytics,
         explorer,
@@ -80,6 +86,7 @@ export class Settings {
         coldAddress = strColdStakingAddress,
         translation = '',
         displayCurrency = 'usd',
+        displayDecimals = nDisplayDecimals,
     } = {}) {
         this.analytics = analytics;
         this.explorer = explorer;
@@ -88,6 +95,7 @@ export class Settings {
         this.coldAddress = coldAddress;
         this.translation = translation;
         this.displayCurrency = displayCurrency;
+        this.displayDecimals = displayDecimals;
     }
 }
 
@@ -134,6 +142,11 @@ export async function start() {
         setCurrency(evt.target.value);
     };
 
+    // Hook up the 'display decimals' slider UI
+    doms.domDisplayDecimalsSlider.onchange = function (evt) {
+        setDecimals(Number(evt.target.value));
+    };
+
     // Hook up the 'explorer' select UI
     document.getElementById('explorer').onchange = function (evt) {
         setExplorer(
@@ -171,6 +184,7 @@ export async function start() {
         analytics: strSettingAnalytics,
         autoswitch,
         coldAddress,
+        displayDecimals,
     } = await database.getSettings();
 
     // Set the Cold Staking address
@@ -180,6 +194,10 @@ export async function start() {
     fAutoSwitch = autoswitch;
     doms.domAutoSwitchToggle.checked = fAutoSwitch;
 
+    // Set the display decimals
+    nDisplayDecimals = displayDecimals;
+    doms.domDisplayDecimalsSlider.value = nDisplayDecimals;
+
     // Apply translations to the transparency report
     STATS = {
         // Stat key   // Description of the stat, it's data, and it's purpose
@@ -283,6 +301,20 @@ async function setCurrency(currency) {
     database.setSettings({ displayCurrency: strCurrency });
     // Update the UI to reflect the new currency
     getBalance(true);
+    getStakingBalance(true);
+}
+
+/**
+ * Sets and saves the display decimals setting in runtime and database
+ * @param {number} decimals - The decimals to set for the display
+ */
+async function setDecimals(decimals) {
+    nDisplayDecimals = decimals;
+    const database = await Database.getInstance();
+    database.setSettings({ displayDecimals: nDisplayDecimals });
+    // Update the UI to reflect the new decimals
+    getBalance(true);
+    getStakingBalance(true);
 }
 
 /**