From 668bad3b3a809c2921892acd7470566fd4386f89 Mon Sep 17 00:00:00 2001 From: jojobyte <184880+jojobyte@users.noreply.github.com> Date: Fri, 15 Mar 2024 20:14:46 -0600 Subject: [PATCH] fix(ui): :lipstick: pretty format dash values for #55 --- src/components/balance.js | 43 ++++++++++---------------------------- src/helpers/utils.js | 44 +++++++++++++++++++++++++++++++++++++++ src/index.css | 1 + src/rigs/send-confirm.js | 19 +++++++++++++---- src/rigs/tx-info.js | 20 ++++++++++++++---- src/styles/form.css | 3 ++- src/styles/theme.css | 2 +- 7 files changed, 90 insertions(+), 42 deletions(-) diff --git a/src/components/balance.js b/src/components/balance.js index daf3f43..90bf624 100644 --- 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 = {
${state.name} ${state.id}
`, 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 - }.${ - fundsFraction - }${ - fundsRemainder - }` - } + let balance = formatDash( + state.walletFunds.balance, + { + fract: state.fract, + maxlen: state.maxlen, + sigsplit: state.sigsplit, + } + ) return html` ${state.header(state)} -
+
diff --git a/src/helpers/utils.js b/src/helpers/utils.js index 5a4c08c..18b4958 100644 --- 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 + }.${ + fundsFraction + }${ + fundsRemainder + }` + } + + return balance +} + export function formDataEntries(event) { let fd = new FormData( event.target, diff --git a/src/index.css b/src/index.css index 7439fb5..7e69e4d 100644 --- 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 index c4b432e..1a1cc5a 100644 --- 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}
@@ -73,7 +78,7 @@ export let sendConfirmRig = (async function (globals) { - ${state.fullAmount} + ${fullAmount}
@@ -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`
Dash Network Fee
-
+
- ${state.fee?.dash} + ${dashFee}
@@ -103,7 +114,7 @@ export let sendConfirmRig = (async function (globals) { - ${(Number(state.fullAmount) + Number(state.fee?.dash)).toFixed(8)} + ${totalAmount}
diff --git a/src/rigs/tx-info.js b/src/rigs/tx-info.js index 126aa58..f7f7c92 100644 --- 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}
@@ -55,7 +61,7 @@ export let txInfoRig = (async function (globals) { - ${state.amount} + ${amount}
@@ -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`
Dash Network Fee
-
+
- ${state.fee} + ${dashFee}
@@ -85,7 +97,7 @@ export let txInfoRig = (async function (globals) { - ${(Number(state.amount) + Number(state.fee)).toFixed(8)} + ${totalAmount}
diff --git a/src/styles/form.css b/src/styles/form.css index 1f18ad4..501c7f5 100644 --- 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 index 6c4b071..19a3f4a 100644 --- 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);