Proposals UI sexy-fying

PIVX-Labs · Aug 6, 2023 · 138e71c · 138e71c
1 parent a0029fd
commit 138e71c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/assets/style/style.css b/assets/style/style.css
@@ -3156,7 +3156,7 @@ select.form-control option {
 }
 
 .governFiatSize {
-    font-size:13px;
+    font-size:12px;
 }
 
 .governLinkIco {

diff --git a/scripts/global.js b/scripts/global.js
@@ -978,10 +978,11 @@ export async function updateActivityGUI(fStaking = false, fNewOnly = false) {
 }
 
 /**
- * Open the Explorer in a new tab for the loaded master public key
+ * Open the Explorer in a new tab for the current wallet, or a specific address
+ * @param {string?} strAddress - Optional address to open, if void, the master key is used
  */
-export async function openExplorer() {
-    if (masterKey.isHD) {
+export async function openExplorer(strAddress = '') {
+    if (masterKey.isHD && !strAddress) {
         const derivationPath = getDerivationPath(masterKey.isHardwareWallet)
             .split('/')
             .slice(0, 4)
@@ -990,7 +991,10 @@ export async function openExplorer() {
         window.open(cExplorer.url + '/xpub/' + xpub, '_blank');
     } else {
         const address = await masterKey.getAddress();
-        window.open(cExplorer.url + '/address/' + address, '_blank');
+        window.open(
+            cExplorer.url + '/address/' + (strAddress || address),
+            '_blank'
+        );
     }
 }
 
@@ -2156,15 +2160,20 @@ async function renderProposals(arrProposals, fContested) {
             </span>`;
         }
 
-        // Name and URL hyperlink
+        // Name, Payment Address and URL hyperlink
         const domNameAndURL = domRow.insertCell();
+        domNameAndURL.style = 'vertical-align: middle;';
 
         // IMPORTANT: Sanitise all of our HTML or a rogue server or malicious proposal could perform a cross-site scripting attack
-        domNameAndURL.innerHTML = `<a class="active governLink" href="${sanitizeHTML(
+        domNameAndURL.innerHTML = `<a class="governLink" style="color: white" href="${sanitizeHTML(
             cProposal.URL
         )}" target="_blank" rel="noopener noreferrer"><b>${sanitizeHTML(
             cProposal.Name
-        )} <span class="governLinkIco"><i class="fa-solid fa-arrow-up-right-from-square"></i></b></a></span>`;
+        )} <span class="governLinkIco"><i class="fa-solid fa-arrow-up-right-from-square"></i></b></a></span><br><a class="governLink" style="font-size: small; color:#8b38ff;" onclick="MPW.openExplorer('${
+            cProposal.PaymentAddress
+        }')"><i class="fa-solid fa-user-large" style="margin-right: 5px"></i><b>${sanitizeHTML(
+            cProposal.PaymentAddress.slice(0, 6) + '...'
+        )}`;
 
         // Convert proposal amount to user's currency
         const nProposalValue = parseInt(cProposal.MonthlyPayment) * nPrice;
@@ -2174,12 +2183,13 @@ async function renderProposals(arrProposals, fContested) {
         // Payment Schedule and Amounts
         const domPayments = domRow.insertCell();
         domPayments.classList.add('for-desktop');
+        domPayments.style = 'vertical-align: middle;';
         domPayments.innerHTML = `<span class="governValues"><b>${sanitizeHTML(
             parseInt(cProposal.MonthlyPayment).toLocaleString('en-gb', ',', '.')
         )}</b> <span class="governMarked">${
             cChainParams.current.TICKER
         }</span> <br>
-        <b class="governFiatSize">${strProposalCurrency} <span style="color:#8b38ff;">${strCurrency.toUpperCase()}</span></b></span>
+        <b class="governFiatSize">(${strProposalCurrency} <span style="color:#8b38ff;">${strCurrency.toUpperCase()}</span>)</b></span>
 
         <span class="governInstallments"> ${sanitizeHTML(
             cProposal['RemainingPaymentCount']
@@ -2192,6 +2202,7 @@ async function renderProposals(arrProposals, fContested) {
         // Vote Counts and Consensus Percentages
         const domVoteCounters = domRow.insertCell();
         domVoteCounters.classList.add('for-desktop');
+        domVoteCounters.style = 'vertical-align: middle;';
 
         const nLocalPercent = cProposal.Ratio * 100;
         domVoteCounters.innerHTML = `<b>${parseFloat(
@@ -2215,6 +2226,7 @@ async function renderProposals(arrProposals, fContested) {
         if (cProposal.local) {
             const domVoteBtns = domRow.insertCell();
             domVoteBtns.classList.add('for-desktop');
+            domVoteBtns.style = 'vertical-align: middle;';
             voteBtn = '';
         } else {
             let btnYesClass = 'pivx-button-small';
@@ -2227,6 +2239,7 @@ async function renderProposals(arrProposals, fContested) {
                 }
             }
             const domVoteBtns = domRow.insertCell();
+            domVoteBtns.style = 'vertical-align: middle;';
             const domNoBtn = document.createElement('button');
             domNoBtn.className = btnNoClass;
             domNoBtn.innerText = translation.no;
@@ -2260,6 +2273,7 @@ async function renderProposals(arrProposals, fContested) {
         // Create extended row for mobile
         const mobileDomRow = domTable.insertRow();
         const mobileExtended = mobileDomRow.insertCell();
+        mobileExtended.style = 'vertical-align: middle;';
         if (domTable.id == 'proposalsTableBody') {
             mobileExtended.id = `governMob${i}`;
         } else if (domTable.id == 'proposalsContestedTableBody') {