From 8def2481409c7bf27f17ea8966bbf39a95bd5941 Mon Sep 17 00:00:00 2001 From: Peter Peresini Date: Tue, 13 Nov 2018 09:03:00 +0100 Subject: [PATCH] Ada formatting functions supporting localization. - also started time formatting functions and locale initialization - Fixes #22 --- src/components/Send/ConfirmScreen.js | 13 +++-- src/components/Send/SendScreen.js | 5 +- src/components/TxHistory/TxDetails.js | 5 +- src/components/TxHistory/TxHistory.js | 5 +- src/components/TxHistory/TxHistoryListItem.js | 27 ++++++---- .../styles/TxHistoryListItem.style.js | 13 +++-- .../WalletSelection/WalletListItem.js | 4 +- src/utils/format.js | 50 +++++++++++++++++++ src/utils/renderUtils.js | 7 --- 9 files changed, 94 insertions(+), 35 deletions(-) create mode 100644 src/utils/format.js diff --git a/src/components/Send/ConfirmScreen.js b/src/components/Send/ConfirmScreen.js index d9a7f33a29..a7fdbb7fc6 100644 --- a/src/components/Send/ConfirmScreen.js +++ b/src/components/Send/ConfirmScreen.js @@ -13,7 +13,7 @@ import {utxoBalanceSelector} from '../../selectors' // import {authenticate} from '../../helpers/bioAuthHelper' import walletManager from '../../crypto/wallet' import {WALLET_ROUTES} from '../../RoutesList' -import {printAda} from '../../utils/renderUtils' +import {formatAda} from '../../utils/format' import styles from './styles/ConfirmScreen.style' @@ -57,17 +57,20 @@ const ConfirmScreen = ({ {translations.availableFunds.toUpperCase()}: - + {translations.fees} - + {translations.balanceAfterTx} - + @@ -77,7 +80,7 @@ const ConfirmScreen = ({ {translations.amount} - + diff --git a/src/components/Send/SendScreen.js b/src/components/Send/SendScreen.js index 6639d27410..2ac9ede16c 100644 --- a/src/components/Send/SendScreen.js +++ b/src/components/Send/SendScreen.js @@ -17,7 +17,8 @@ import { utxosSelector, } from '../../selectors' import {Logger} from '../../utils/logging' -import {printAda, withTranslations} from '../../utils/renderUtils' +import {withTranslations} from '../../utils/renderUtils' +import {formatAda} from '../../utils/format' import walletManager from '../../crypto/wallet' import {fetchUTXOs} from '../../actions/utxo' import {CardanoError} from '../../crypto/util' @@ -159,7 +160,7 @@ const FetchingErrorBanner = withTranslations(getTranslations)( const AvailableAmount = withTranslations(getTranslations)( ({translations, value}) => ( - {translations.availableAmount}: {value ? printAda(value) : ''} + {translations.availableAmount}: {value ? formatAda(value) : ''} ), ) diff --git a/src/components/TxHistory/TxDetails.js b/src/components/TxHistory/TxDetails.js index 3dc2eb01c4..9424bf0c18 100644 --- a/src/components/TxHistory/TxDetails.js +++ b/src/components/TxHistory/TxDetails.js @@ -7,7 +7,8 @@ import {View} from 'react-native' import _ from 'lodash' import {transactionsInfoSelector} from '../../selectors' -import {printAda, withNavigationTitle} from '../../utils/renderUtils' +import {withNavigationTitle} from '../../utils/renderUtils' +import {formatAda} from '../../utils/format' import {Text} from '../UiKit' import Screen from '../../components/Screen' import AdaIcon from '../../assets/AdaIcon' @@ -30,7 +31,7 @@ const AdaAmount = ({amount, direction}) => { : styles.negativeAmount const amountText = - direction === TRANSACTION_DIRECTION.SELF ? '--' : printAda(amount) + direction === TRANSACTION_DIRECTION.SELF ? '--' : formatAda(amount) return ( {amountText} diff --git a/src/components/TxHistory/TxHistory.js b/src/components/TxHistory/TxHistory.js index f85071a8db..43f7b16400 100644 --- a/src/components/TxHistory/TxHistory.js +++ b/src/components/TxHistory/TxHistory.js @@ -23,9 +23,10 @@ import { RenderCount, measureRenderTime, requireInitializedWallet, - printAda, } from '../../utils/renderUtils' +import {formatAda} from '../../utils/format' + import styles from './styles/TxHistory.style' import type {NavigationScreenProp, NavigationState} from 'react-navigation' @@ -45,7 +46,7 @@ const SyncErrorBanner = ({showRefresh, onRefresh}) => ( ) const PendingAmount = ({amount}) => ( - Pending amount: {printAda(amount)} + Pending amount: {formatAda(amount)} ) const TxHistory = ({ diff --git a/src/components/TxHistory/TxHistoryListItem.js b/src/components/TxHistory/TxHistoryListItem.js index a1a8f396bd..1de428e00c 100644 --- a/src/components/TxHistory/TxHistoryListItem.js +++ b/src/components/TxHistory/TxHistoryListItem.js @@ -11,7 +11,14 @@ import {transactionsInfoSelector} from '../../selectors' import {TX_HISTORY_ROUTES} from '../../RoutesList' import styles from './styles/TxHistoryListItem.style' import {COLORS} from '../../styles/config' -import {withTranslations, printAda} from '../../utils/renderUtils' +import {withTranslations} from '../../utils/renderUtils' + +import { + formatAda, + formatAdaInteger, + formatAdaFractional, + formatTimeToSeconds, +} from '../../utils/format' import {TRANSACTION_DIRECTION} from '../../types/HistoryTransaction' @@ -63,13 +70,6 @@ class TxHistoryListItem extends Component { render() { const {transaction, translations} = this.props - const formattedAmount = { - SENT: (x) => printAda(x), - RECEIVED: (x) => printAda(x), - SELF: (x) => '--', - MULTI: (x) => printAda(x), - }[transaction.direction](transaction.amount) - const amountStyle = { SENT: styles.negativeAmount, RECEIVED: styles.positiveAmount, @@ -99,7 +99,7 @@ class TxHistoryListItem extends Component { - {transaction.submittedAt.format('hh:mm:ss A')} + {formatTimeToSeconds(transaction.submittedAt)} @@ -114,7 +114,12 @@ class TxHistoryListItem extends Component { {hasAmount ? ( <> - {formattedAmount} + + {formatAdaInteger(transaction.amount)} + + + {formatAdaFractional(transaction.amount)} + ) : ( @@ -125,7 +130,7 @@ class TxHistoryListItem extends Component { {hasFee && ( - {printAda(transaction.fee)} l10n Fee + {formatAda(transaction.fee)} l10n Fee )} diff --git a/src/components/TxHistory/styles/TxHistoryListItem.style.js b/src/components/TxHistory/styles/TxHistoryListItem.style.js index b675ca68bd..9f72ae9b9b 100644 --- a/src/components/TxHistory/styles/TxHistoryListItem.style.js +++ b/src/components/TxHistory/styles/TxHistoryListItem.style.js @@ -34,24 +34,29 @@ const styles = { flexDirection: 'row', }, adaSignContainer: { - marginLeft: 10, + marginTop: 6, + marginLeft: 6, }, positiveAmount: { color: COLORS.POSITIVE_AMOUNT, - fontSize: 20, }, negativeAmount: { color: COLORS.NEGATIVE_AMOUNT, - fontSize: 20, }, neutralAmount: { color: COLORS.BLACK, - fontSize: 20, }, feeAmount: { color: COLORS.NEGATIVE_AMOUNT, fontSize: 14, }, + integerAmount: { + fontSize: 20, + }, + decimalAmount: { + paddingTop: 5, + fontSize: 15, + }, } export default styles diff --git a/src/components/WalletSelection/WalletListItem.js b/src/components/WalletSelection/WalletListItem.js index 125304af6a..8e19b825ef 100644 --- a/src/components/WalletSelection/WalletListItem.js +++ b/src/components/WalletSelection/WalletListItem.js @@ -8,7 +8,7 @@ import AdaIcon from '../../assets/AdaIcon' import CardanoIcon from '../../assets/CardanoIcon' import {ROOT_ROUTES} from '../../RoutesList' import {COLORS} from '../../styles/config' -import {printAda} from '../../utils/renderUtils' +import {formatAda} from '../../utils/format' import styles from './styles/WalletListItem.style' @@ -28,7 +28,7 @@ const WalletListItem = ({wallet, navigateLogin}: Props) => ( {wallet.name} - {printAda(wallet.balance)} + {formatAda(wallet.balance)} diff --git a/src/utils/format.js b/src/utils/format.js new file mode 100644 index 0000000000..10f2edea70 --- /dev/null +++ b/src/utils/format.js @@ -0,0 +1,50 @@ +import {BigNumber} from 'bignumber.js' +import moment from 'moment' + +const fmt = { + prefix: '', + decimalSeparator: '.', + groupSeparator: ',', + groupSize: 3, + secondaryGroupSize: 0, + fractionGroupSize: 0, + fractionGroupSeparator: ' ', + suffix: '', +} + +export const initializeLocalization = (language: string) => { + BigNumber.config({ + FORMAT: fmt, + }) + moment.locale('de') + // TODO(ppershing): localize moment +} + +// Hardcoded here for now +initializeLocalization('ignored') + +// 1 ADA = 1 000 000 micro ada +const MICRO = 1000000 + +export const formatAda = (amount: BigNumber) => { + const num = amount.dividedBy(MICRO) + return num.toFormat(6) +} + +export const formatAdaInteger = (amount: BigNumber) => { + const num = amount.dividedBy(MICRO) + return num.toFormat(0) +} + +export const formatAdaFractional = (amount: BigNumber) => { + const fractional = amount + .abs() + .modulo(MICRO) + .dividedBy(MICRO) + // remove leading 0. + return fractional.toFormat(6).substring(1) +} + +export const formatTimeToSeconds = (ts: string | moment) => { + return moment(ts).format('LT') +} diff --git a/src/utils/renderUtils.js b/src/utils/renderUtils.js index 52139c8996..4e6ea1267e 100644 --- a/src/utils/renderUtils.js +++ b/src/utils/renderUtils.js @@ -5,7 +5,6 @@ import {connect} from 'react-redux' import {Text} from 'react-native' import {compose} from 'redux' import {Logger} from './logging' -import {BigNumber} from 'bignumber.js' import {walletIsInitializedSelector} from '../selectors' @@ -143,9 +142,3 @@ export const requireInitializedWallet = compose( () => l10n Please wait while wallet is initialized..., ), ) - -// TODO(ppershing): probably belongs to utils/localization once we have it -export const printAda = (amount: BigNumber) => { - // 1 ADA = 1 000 000 micro ada - return amount.dividedBy(1000000).toFixed(6) -}