uiux(Wallet): improve readability of high value balances
Uses `toLocaleString()` polyfill to insert `.` and/or `,` as needed based on currently selected locale. Closes #845
This commit is contained in:
Pascal Precht
Iuri Matias
parent
e0adc3056e
commit
9c1613acf8
|
|
@ -205,7 +205,7 @@ proc updateAccount*(self: WalletModel, address: string) =
|
|||
self.events.emit("accountsUpdated", Args())
|
||||
|
||||
proc getTotalFiatBalance*(self: WalletModel): string =
|
||||
fmt"{self.totalBalance:.2f} {self.defaultCurrency}"
|
||||
fmt"{self.totalBalance:.2f}"
|
||||
|
||||
proc convertValue*(self: WalletModel, balance: string, fromCurrency: string, toCurrency: string): float =
|
||||
result = convertValue(balance, fromCurrency, toCurrency)
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ Item {
|
|||
StyledText {
|
||||
id: assetFiatValue
|
||||
color: Style.current.darkGrey
|
||||
text: fiatBalanceDisplay.toUpperCase()
|
||||
text: Utils.toLocaleString(fiatBalance, appSettings.locale) + " " + walletModel.defaultCurrency.toUpperCase()
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.bottom: parent.bottom
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ Item {
|
|||
StyledTextEdit {
|
||||
id: walletAmountValue
|
||||
color: Style.current.textColor
|
||||
text: walletModel.totalFiatBalance
|
||||
text: Utils.toLocaleString(walletModel.totalFiatBalance, appSettings.locale) + " " + walletModel.defaultCurrency.toUpperCase()
|
||||
selectByMouse: true
|
||||
cursorVisible: true
|
||||
readOnly: true
|
||||
|
|
@ -134,7 +134,7 @@ Item {
|
|||
}
|
||||
StyledText {
|
||||
id: walletBalance
|
||||
text: balance.toUpperCase()
|
||||
text: Utils.toLocaleString(fiatBalance, appSettings.locale) + " " + walletModel.defaultCurrency.toUpperCase()
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Style.current.smallPadding
|
||||
anchors.right: parent.right
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ pragma Singleton
|
|||
|
||||
import QtQuick 2.13
|
||||
import "../shared/xss.js" as XSS
|
||||
import "../shared/polyfill.number.toLocaleString.js" as NumberPolyFill
|
||||
|
||||
QtObject {
|
||||
function isHex(value) {
|
||||
|
|
@ -57,6 +58,10 @@ QtObject {
|
|||
return replacedText;
|
||||
}
|
||||
|
||||
function toLocaleString(val, locale, options) {
|
||||
return NumberPolyFill.toLocaleString(val, locale, options)
|
||||
}
|
||||
|
||||
function isOnlyEmoji(inputText) {
|
||||
var emoji_regex = /^(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff]|\s)+$/;
|
||||
return emoji_regex.test(inputText);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,294 @@
|
|||
// polyfill.number.toLocaleDateString
|
||||
// Copied from: https://github.com/willsp/polyfill-Number.toLocaleString-with-Locales
|
||||
// Got this from MDN:
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Example:_Checking_for_support_for_locales_and_options_arguments
|
||||
function toLocaleStringSupportsLocales() {
|
||||
var number = 0;
|
||||
try {
|
||||
number.toLocaleString("i");
|
||||
} catch (e) {
|
||||
return e.name === "RangeError";
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
var replaceSeparators = function(sNum, separators) {
|
||||
var sNumParts = sNum.split('.');
|
||||
if (separators && separators.thousands) {
|
||||
sNumParts[0] = sNumParts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1" + separators.thousands);
|
||||
}
|
||||
sNum = sNumParts.join(separators.decimal);
|
||||
|
||||
return sNum;
|
||||
};
|
||||
|
||||
var renderFormat = function(template, props) {
|
||||
for (var prop in props) {
|
||||
if (props[prop].indexOf('-') !== -1) {
|
||||
props[prop] = props[prop].replace('-', '');
|
||||
template = '-' + template;
|
||||
}
|
||||
template = template.replace("{{" + prop + "}}", props[prop]);
|
||||
}
|
||||
|
||||
return template;
|
||||
};
|
||||
|
||||
var mapMatch = function(map, locale) {
|
||||
var match = locale;
|
||||
var language = locale && locale.toLowerCase().match(/^\w+/);
|
||||
|
||||
if (!map.hasOwnProperty(locale)) {
|
||||
if (map.hasOwnProperty(language)) {
|
||||
match = language;
|
||||
} else {
|
||||
match = "en";
|
||||
}
|
||||
}
|
||||
|
||||
return map[match];
|
||||
};
|
||||
|
||||
var dotThousCommaDec = function(sNum) {
|
||||
var separators = {
|
||||
decimal: ',',
|
||||
thousands: '.'
|
||||
};
|
||||
|
||||
return replaceSeparators(sNum, separators);
|
||||
};
|
||||
|
||||
var commaThousDotDec = function(sNum) {
|
||||
var separators = {
|
||||
decimal: '.',
|
||||
thousands: ','
|
||||
};
|
||||
|
||||
return replaceSeparators(sNum, separators);
|
||||
};
|
||||
|
||||
var spaceThousCommaDec = function(sNum) {
|
||||
var seperators = {
|
||||
decimal: ',',
|
||||
thousands: '\u00A0'
|
||||
};
|
||||
|
||||
return replaceSeparators(sNum, seperators);
|
||||
};
|
||||
|
||||
var apostrophThousDotDec = function(sNum) {
|
||||
var seperators = {
|
||||
decimal: '.',
|
||||
thousands: '\u0027'
|
||||
};
|
||||
|
||||
return replaceSeparators(sNum, seperators);
|
||||
};
|
||||
|
||||
var transformForLocale = {
|
||||
en: commaThousDotDec,
|
||||
'en-GB': commaThousDotDec,
|
||||
'en-US': commaThousDotDec,
|
||||
it: dotThousCommaDec,
|
||||
fr: spaceThousCommaDec,
|
||||
de: dotThousCommaDec,
|
||||
"de-DE": dotThousCommaDec,
|
||||
"de-AT": dotThousCommaDec,
|
||||
"de-CH": apostrophThousDotDec,
|
||||
"de-LI": apostrophThousDotDec,
|
||||
"de-BE": dotThousCommaDec,
|
||||
"nl": dotThousCommaDec,
|
||||
"nl-BE": dotThousCommaDec,
|
||||
"nl-NL": dotThousCommaDec,
|
||||
ro: dotThousCommaDec,
|
||||
"ro-RO": dotThousCommaDec,
|
||||
ru: spaceThousCommaDec,
|
||||
"ru-RU": spaceThousCommaDec,
|
||||
hu: spaceThousCommaDec,
|
||||
"hu-HU": spaceThousCommaDec,
|
||||
"da-DK": dotThousCommaDec,
|
||||
"nb-NO": spaceThousCommaDec
|
||||
};
|
||||
|
||||
var currencyFormatMap = {
|
||||
en: "pre",
|
||||
'en-GB': "pre",
|
||||
'en-US': "pre",
|
||||
it: "post",
|
||||
fr: "post",
|
||||
de: "post",
|
||||
"de-DE": "post",
|
||||
"de-AT": "prespace",
|
||||
"de-CH": "prespace",
|
||||
"de-LI": "post",
|
||||
"de-BE": "post",
|
||||
"nl": "post",
|
||||
"nl-BE": "post",
|
||||
"nl-NL": "post",
|
||||
ro: "post",
|
||||
"ro-RO": "post",
|
||||
ru: "post",
|
||||
"ru-RU": "post",
|
||||
hu: "post",
|
||||
"hu-HU": "post",
|
||||
"da-DK": "post",
|
||||
"nb-NO": "post"
|
||||
};
|
||||
|
||||
var currencySymbols = {
|
||||
"afn": "؋",
|
||||
"ars": "$",
|
||||
"awg": "ƒ",
|
||||
"aud": "$",
|
||||
"azn": "₼",
|
||||
"bsd": "$",
|
||||
"bbd": "$",
|
||||
"byr": "p.",
|
||||
"bzd": "BZ$",
|
||||
"bmd": "$",
|
||||
"bob": "Bs.",
|
||||
"bam": "KM",
|
||||
"bwp": "P",
|
||||
"bgn": "лв",
|
||||
"brl": "R$",
|
||||
"bnd": "$",
|
||||
"khr": "៛",
|
||||
"cad": "$",
|
||||
"kyd": "$",
|
||||
"clp": "$",
|
||||
"cny": "¥",
|
||||
"cop": "$",
|
||||
"crc": "₡",
|
||||
"hrk": "kn",
|
||||
"cup": "₱",
|
||||
"czk": "Kč",
|
||||
"dkk": "kr",
|
||||
"dop": "RD$",
|
||||
"xcd": "$",
|
||||
"egp": "£",
|
||||
"svc": "$",
|
||||
"eek": "kr",
|
||||
"eur": "€",
|
||||
"fkp": "£",
|
||||
"fjd": "$",
|
||||
"ghc": "¢",
|
||||
"gip": "£",
|
||||
"gtq": "Q",
|
||||
"ggp": "£",
|
||||
"gyd": "$",
|
||||
"hnl": "L",
|
||||
"hkd": "$",
|
||||
"huf": "Ft",
|
||||
"isk": "kr",
|
||||
"inr": "₹",
|
||||
"idr": "Rp",
|
||||
"irr": "﷼",
|
||||
"imp": "£",
|
||||
"ils": "₪",
|
||||
"jmd": "J$",
|
||||
"jpy": "¥",
|
||||
"jep": "£",
|
||||
"kes": "KSh",
|
||||
"kzt": "лв",
|
||||
"kpw": "₩",
|
||||
"krw": "₩",
|
||||
"kgs": "лв",
|
||||
"lak": "₭",
|
||||
"lvl": "Ls",
|
||||
"lbp": "£",
|
||||
"lrd": "$",
|
||||
"ltl": "Lt",
|
||||
"mkd": "ден",
|
||||
"myr": "RM",
|
||||
"mur": "₨",
|
||||
"mxn": "$",
|
||||
"mnt": "₮",
|
||||
"mzn": "MT",
|
||||
"nad": "$",
|
||||
"npr": "₨",
|
||||
"ang": "ƒ",
|
||||
"nzd": "$",
|
||||
"nio": "C$",
|
||||
"ngn": "₦",
|
||||
"nok": "kr",
|
||||
"omr": "﷼",
|
||||
"pkr": "₨",
|
||||
"pab": "B/.",
|
||||
"pyg": "Gs",
|
||||
"pen": "S/.",
|
||||
"php": "₱",
|
||||
"pln": "zł",
|
||||
"qar": "﷼",
|
||||
"ron": "lei",
|
||||
"rub": "₽",
|
||||
"shp": "£",
|
||||
"sar": "﷼",
|
||||
"rsd": "Дин.",
|
||||
"scr": "₨",
|
||||
"sgd": "$",
|
||||
"sbd": "$",
|
||||
"sos": "S",
|
||||
"zar": "R",
|
||||
"lkr": "₨",
|
||||
"sek": "kr",
|
||||
"chf": "CHF",
|
||||
"srd": "$",
|
||||
"syp": "£",
|
||||
"tzs": "TSh",
|
||||
"twd": "NT$",
|
||||
"thb": "฿",
|
||||
"ttd": "TT$",
|
||||
"try": "",
|
||||
"trl": "₤",
|
||||
"tvd": "$",
|
||||
"ugx": "USh",
|
||||
"uah": "₴",
|
||||
"gbp": "£",
|
||||
"usd": "$",
|
||||
"uyu": "$U",
|
||||
"uzs": "лв",
|
||||
"vef": "Bs",
|
||||
"vnd": "₫",
|
||||
"yer": "﷼",
|
||||
"zwd": "Z$"
|
||||
};
|
||||
|
||||
var currencyFormats = {
|
||||
pre: "{{code}}{{num}}",
|
||||
post: "{{num}} {{code}}",
|
||||
prespace: "{{code}} {{num}}"
|
||||
};
|
||||
|
||||
function toLocaleString(val, locale, options) {
|
||||
if (locale && locale.length < 2)
|
||||
throw new RangeError("Invalid language tag: " + locale);
|
||||
|
||||
var sNum;
|
||||
|
||||
if (options && (options.minimumFractionDigits || options.minimumFractionDigits === 0)) {
|
||||
sNum = Number(val).toFixed(options.minimumFractionDigits);
|
||||
} else {
|
||||
sNum = Number(val).toString();
|
||||
}
|
||||
|
||||
sNum = mapMatch(transformForLocale, locale)(sNum, options);
|
||||
|
||||
if(options && options.currency && options.style === "currency") {
|
||||
var format = currencyFormats[mapMatch(currencyFormatMap, locale)];
|
||||
var symbol = currencySymbols[options.currency.toLowerCase()];
|
||||
if(options.currencyDisplay === "code" || !symbol) {
|
||||
sNum = renderFormat(format, {
|
||||
num: sNum,
|
||||
code: options.currency.toUpperCase()
|
||||
});
|
||||
} else {
|
||||
sNum = renderFormat(format, {
|
||||
num: sNum,
|
||||
code: symbol
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return sNum;
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue