Ada formatting functions supporting localization.

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 = ({
  <Text style={styles.balanceLabel}>
  {translations.availableFunds.toUpperCase()}:
  </Text>
- <Amount value={printAda(availableAmount)} style={styles.balanceValue} />
+ <Amount
+ value={formatAda(availableAmount)}
+ style={styles.balanceValue}
+ />
  </View>
 
  <View style={styles.transactionSummary}>
  <View style={styles.fees}>
  <Text style={styles.label}>{translations.fees}</Text>
- <Amount value={printAda(transactionData.fee)} />
+ <Amount value={formatAda(transactionData.fee)} />
  </View>
  <View style={styles.remainingBalance}>
  <Text style={styles.label}>{translations.balanceAfterTx}</Text>
- <Amount value={printAda(balanceAfterTx)} />
+ <Amount value={formatAda(balanceAfterTx)} />
  </View>
  </View>
 
@@ -77,7 +80,7 @@ const ConfirmScreen = ({
  </View>
  <View style={styles.item}>
  <Text style={styles.label}>{translations.amount}</Text>
- <Amount value={printAda(amount)} />
+ <Amount value={formatAda(amount)} />
  </View>
 
  <View style={styles.item}>

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}) => (
  <Text>
- {translations.availableAmount}: {value ? printAda(value) : ''}
+ {translations.availableAmount}: {value ? formatAda(value) : ''}
  </Text>
  ),
 )

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 (
  <View style={styles.amountContainer}>
  <Text style={amountStyle}>{amountText}</Text>

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}) => (
- <Text> Pending amount: {printAda(amount)} </Text>
+ <Text> Pending amount: {formatAda(amount)} </Text>
 )
 
 const TxHistory = ({

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<Props> {
  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<Props> {
  <View style={styles.container}>
  <View style={styles.metadataPanel}>
  <View>
- <Text>{transaction.submittedAt.format('hh:mm:ss A')}</Text>
+ <Text>{formatTimeToSeconds(transaction.submittedAt)}</Text>
  </View>
  <View>
  <AssuranceLevel transaction={transaction} />
@@ -114,7 +114,12 @@ class TxHistoryListItem extends Component<Props> {
  <View style={styles.horizontalSpacer} />
  {hasAmount ? (
  <>
- <Text style={amountStyle}>{formattedAmount}</Text>
+ <Text style={[amountStyle, styles.integerAmount]}>
+ {formatAdaInteger(transaction.amount)}
+ </Text>
+ <Text style={[amountStyle, styles.decimalAmount]}>
+ {formatAdaFractional(transaction.amount)}
+ </Text>
  <AdaSign size={16} color={amountStyle.color} />
  </>
  ) : (
@@ -125,7 +130,7 @@ class TxHistoryListItem extends Component<Props> {
  <View style={styles.horizontalSpacer} />
  {hasFee && (
  <Text style={styles.feeAmount}>
- {printAda(transaction.fee)} l10n Fee
+ {formatAda(transaction.fee)} l10n Fee
  </Text>
  )}
  </View>

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

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) => (
  <Text style={styles.nameText}>{wallet.name}</Text>
  </View>
  <View style={styles.balance}>
- <Text style={styles.balanceText}>{printAda(wallet.balance)}</Text>
+ <Text style={styles.balanceText}>{formatAda(wallet.balance)}</Text>
  <AdaIcon height={14} width={14} color={COLORS.WHITE} />
  </View>
  </TouchableOpacity>

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')
+}

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(
  () => <Text>l10n Please wait while wallet is initialized...</Text>,
  ),
 )
-
-// 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)
-}