fix(ui): 💄 pretty format dash values for #55

dashhive · Mar 16, 2024 · 668bad3 · 668bad3
1 parent ae18dc9
commit 668bad3
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 42 deletions.
diff --git a/src/components/balance.js b/src/components/balance.js
@@ -1,5 +1,5 @@
 import { lit as html } from '../helpers/lit.js'
-import { fixedDash, envoy, } from '../helpers/utils.js'
+import { envoy, formatDash, } from '../helpers/utils.js'
 import { updateAllFunds, } from '../helpers/wallet.js'
 
 const initialState = {
@@ -14,6 +14,7 @@ const initialState = {
   addr: null,
   maxlen: 10,
   fract: 8,
+  sigsplit: 4,
   render(
     renderState = {},
     position = 'afterbegin',
@@ -23,41 +24,19 @@ const initialState = {
     <figcaption>${state.name} ${state.id}</figcaption>
   `,
   content: state => {
-    let funds = 0
-    let balance = `${funds}`
-
-    if (state.walletFunds.balance) {
-      funds += state.walletFunds.balance
-      balance = fixedDash(funds, state.fract)
-      // TODO FIX: does not support large balances
-
-      // console.log('balance fixedDash', balance, balance.length)
-
-      let [fundsInt,fundsFract] = balance.split('.')
-      state.maxlen -= fundsInt.length
-
-      let fundsFraction = fundsFract?.substring(
-        0, Math.min(Math.max(0, state.maxlen), 3)
-      )
-
-      let fundsRemainder = fundsFract?.substring(
-        fundsFraction.length,
-        Math.max(0, state.maxlen)
-      )
-
-      balance = html`${
-        fundsInt
-      }<sub><span>.${
-        fundsFraction
-      }</span>${
-        fundsRemainder
-      }</sub>`
-    }
+    let balance = formatDash(
+      state.walletFunds.balance,
+      {
+        fract: state.fract,
+        maxlen: state.maxlen,
+        sigsplit: state.sigsplit,
+      }
+    )
 
     return html`
       ${state.header(state)}
 
-      <div title="${funds}">
+      <div title="${state.walletFunds.balance}">
         <svg width="32" height="33" viewBox="0 0 32 33">
           <use xlink:href="#icon-dash-mark"></use>
         </svg>

diff --git a/src/helpers/utils.js b/src/helpers/utils.js
@@ -270,6 +270,50 @@ export function toDuff(dash) {
   return Math.round(parseFloat(dash) * DUFFS);
 }
 
+export function formatDash(
+  unformattedBalance,
+  options = {},
+) {
+  let opts = {
+    maxlen: 10,
+    fract: 8,
+    sigsplit: 4,
+    ...options,
+  }
+  let funds = 0
+  let balance = `${funds}`
+
+  if (unformattedBalance) {
+    funds += unformattedBalance
+    balance = fixedDash(funds, opts.fract)
+    // TODO FIX: does not support large balances
+
+    // console.log('balance fixedDash', balance, balance.length)
+
+    let [fundsInt,fundsFract] = balance.split('.')
+    opts.maxlen -= fundsInt.length
+
+    let fundsFraction = fundsFract?.substring(
+      0, Math.min(Math.max(0, opts.maxlen), opts.sigsplit)
+    )
+
+    let fundsRemainder = fundsFract?.substring(
+      fundsFraction.length,
+      Math.max(0, opts.maxlen)
+    )
+
+    balance = `${
+      fundsInt
+    }<sub><span>.${
+      fundsFraction
+    }</span>${
+      fundsRemainder
+    }</sub>`
+  }
+
+  return balance
+}
+
 export function formDataEntries(event) {
   let fd = new FormData(
     event.target,

diff --git a/src/index.css b/src/index.css
@@ -72,6 +72,7 @@ main header figure figcaption + div svg {
 main header figure figcaption + div sub {
   align-self: self-end;
   font-size: 2.75rem;
+  font-size: 74%;
 }
 main footer {
   text-align: center;

diff --git a/src/rigs/send-confirm.js b/src/rigs/send-confirm.js
@@ -3,6 +3,7 @@ import {
   formDataEntries,
   getStoreData,
   sortContactsByAlias,
+  formatDash,
 } from '../helpers/utils.js'
 
 export let sendConfirmRig = (async function (globals) {
@@ -64,6 +65,10 @@ export let sendConfirmRig = (async function (globals) {
       showAmount: state => {
         let output = html``
         if (state.fullAmount) {
+          let fullAmount = formatDash(
+            state.fullAmount,
+          )
+
           output = html`
             ${output}
             <article>
@@ -73,7 +78,7 @@ export let sendConfirmRig = (async function (globals) {
                   <svg width="26" height="27" viewBox="0 0 32 33">
                     <use xlink:href="#icon-dash-mark"></use>
                   </svg>
-                  ${state.fullAmount}
+                  ${fullAmount}
                 </div>
               </figure>
             </article>
@@ -85,16 +90,22 @@ export let sendConfirmRig = (async function (globals) {
         if (!state.fee?.dash || !state.fullAmount) {
           return ''
         }
+        let dashFee = formatDash(
+          state.fee.dash,
+        )
+        let totalAmount = formatDash(
+          Number(state.fullAmount) + Number(state.fee?.dash),
+        )
 
         return html`
           <article class="col rg-3">
             <figure>
               <figcaption>Dash Network Fee</figcaption>
-              <div class="small">
+              <div class="mid">
                 <svg width="22" height="23" viewBox="0 0 32 33">
                   <use xlink:href="#icon-dash-mark"></use>
                 </svg>
-                ${state.fee?.dash}
+                ${dashFee}
               </div>
             </figure>
             <figure>
@@ -103,7 +114,7 @@ export let sendConfirmRig = (async function (globals) {
                 <svg width="32" height="33" viewBox="0 0 32 33">
                   <use xlink:href="#icon-dash-mark"></use>
                 </svg>
-                ${(Number(state.fullAmount) + Number(state.fee?.dash)).toFixed(8)}
+                ${totalAmount}
               </div>
             </figure>
           </article>

diff --git a/src/rigs/tx-info.js b/src/rigs/tx-info.js
@@ -1,4 +1,7 @@
 import { lit as html } from '../helpers/lit.js'
+import {
+  formatDash,
+} from '../helpers/utils.js'
 
 export let txInfoRig = (async function (globals) {
   'use strict';
@@ -46,6 +49,9 @@ export let txInfoRig = (async function (globals) {
       showAmount: state => {
         let output = html``
         if (state.amount) {
+          let amount = formatDash(
+            state.amount,
+          )
           output = html`
             ${output}
             <article>
@@ -55,7 +61,7 @@ export let txInfoRig = (async function (globals) {
                   <svg width="26" height="27" viewBox="0 0 32 33">
                     <use xlink:href="#icon-dash-mark"></use>
                   </svg>
-                  ${state.amount}
+                  ${amount}
                 </div>
               </figure>
             </article>
@@ -67,16 +73,22 @@ export let txInfoRig = (async function (globals) {
         if (!state.fee || !state.amount) {
           return ''
         }
+        let dashFee = formatDash(
+          state.fee,
+        )
+        let totalAmount = formatDash(
+          Number(state.amount) + Number(state.fee),
+        )
 
         return html`
           <article class="col rg-3">
             <figure>
               <figcaption>Dash Network Fee</figcaption>
-              <div class="small">
+              <div class="mid">
                 <svg width="22" height="23" viewBox="0 0 32 33">
                   <use xlink:href="#icon-dash-mark"></use>
                 </svg>
-                ${state.fee}
+                ${dashFee}
               </div>
             </figure>
             <figure>
@@ -85,7 +97,7 @@ export let txInfoRig = (async function (globals) {
                 <svg width="32" height="33" viewBox="0 0 32 33">
                   <use xlink:href="#icon-dash-mark"></use>
                 </svg>
-                ${(Number(state.amount) + Number(state.fee)).toFixed(8)}
+                ${totalAmount}
               </div>
             </figure>
           </article>

diff --git a/src/styles/form.css b/src/styles/form.css
@@ -253,7 +253,8 @@ form > article > figure figcaption + div svg {
 form aside > article > figure figcaption + div sub,
 form > article > figure figcaption + div sub {
   align-self: self-end;
-  font-size: 2.75rem;
+  /* font-size: 2.75rem; */
+  font-size: 74%;
 }
 
 /* form fieldset div > input + button i {

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -49,7 +49,7 @@
   --bgc: var(--d);
   --fc: var(--l);
 
-  --emphasize: var(--l);
+  --emphasize: var(--f);
   --de-emphasize: var(--dark-600);
 
   --nav-bg: var(--dark-900);