<commit_before>// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape } from 'react-intl';
import adaSymbolBig from '../../../assets/images/ada-symbol-big-dark.svg';
import adaSymbolSmallest from '../../../assets/images/ada-symbol-smallest-dark.svg';
import BorderedBox from '../../widgets/BorderedBox';
import { DECIMAL_PLACES_IN_ADA } from '../../../config/numbersConfig';
import type { UnconfirmedAmount } from '../../../types/unconfirmedAmountType';
import styles from './WalletSummary.scss';

const messages = defineMessages({
  pendingOutgoingConfirmationLabel: {
    id: 'wallet.summary.page.pendingOutgoingConfirmationLabel',
    defaultMessage: '!!!Outgoing pending confirmation',
    description: '"Outgoing pending confirmation" label on Wallet summary page'
  },
  pendingIncomingConfirmationLabel: {
    id: 'wallet.summary.page.pendingIncomingConfirmationLabel',
    defaultMessage: '!!!Incoming pending confirmation',
    description: '"Incoming pending confirmation" label on Wallet summary page'
  },
  transactionsLabel: {
    id: 'wallet.summary.page.transactionsLabel',
    defaultMessage: '!!!Number of transactions',
    description: '"Number of transactions" label on Wallet summary page'
  }
});

@observer
export default class WalletSummary extends Component {

  props: {
    walletName: string,
    amount: string,
    numberOfTransactions: number,
    pendingAmount: UnconfirmedAmount,
    isLoadingTransactions: boolean,
  };

  static contextTypes = {
    intl: intlShape.isRequired,
  };

  render() {
    const {
      walletName,
      amount,
      pendingAmount,
      numberOfTransactions,
      isLoadingTransactions
    } = this.props;
    const { intl } = this.context;
    return (
      <div className={styles.component}>
        <BorderedBox>
          <div className={styles.walletName}>{walletName}</div>
          <div className={styles.walletAmount}>
            {amount}
            <img src={adaSymbolBig} role="presentation" />
          </div>
          <div className={styles.pendingConfirmation}>
            {`${intl.formatMessage(messages.pendingIncomingConfirmationLabel)}`}
            : {pendingAmount.incoming.toFormat(DECIMAL_PLACES_IN_ADA)}
            <img src={adaSymbolSmallest} role="presentation" />
          </div>
          <div className={styles.pendingConfirmation}>
            {`${intl.formatMessage(messages.pendingOutgoingConfirmationLabel)}`}
            : {pendingAmount.outgoing.toFormat(DECIMAL_PLACES_IN_ADA)}
            <img src={adaSymbolSmallest} role="presentation" />
          </div>
          {!isLoadingTransactions ? (
            <div className={styles.numberOfTransactions}>
              {intl.formatMessage(messages.transactionsLabel)}: {numberOfTransactions}<commit_msg>[DAEF-225] Introduce fix which hide pending amount if it is zero<commit_after>// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape } from 'react-intl';
import adaSymbolBig from '../../../assets/images/ada-symbol-big-dark.svg';
import adaSymbolSmallest from '../../../assets/images/ada-symbol-smallest-dark.svg';
import BorderedBox from '../../widgets/BorderedBox';
import { DECIMAL_PLACES_IN_ADA } from '../../../config/numbersConfig';
import type { UnconfirmedAmount } from '../../../types/unconfirmedAmountType';
import styles from './WalletSummary.scss';

const messages = defineMessages({
  pendingOutgoingConfirmationLabel: {
    id: 'wallet.summary.page.pendingOutgoingConfirmationLabel',
    defaultMessage: '!!!Outgoing pending confirmation',
    description: '"Outgoing pending confirmation" label on Wallet summary page'
  },
  pendingIncomingConfirmationLabel: {
    id: 'wallet.summary.page.pendingIncomingConfirmationLabel',
    defaultMessage: '!!!Incoming pending confirmation',
    description: '"Incoming pending confirmation" label on Wallet summary page'
  },
  transactionsLabel: {
    id: 'wallet.summary.page.transactionsLabel',
    defaultMessage: '!!!Number of transactions',
    description: '"Number of transactions" label on Wallet summary page'
  }
});

@observer
export default class WalletSummary extends Component {

  props: {
    walletName: string,
    amount: string,
    numberOfTransactions: number,
    pendingAmount: UnconfirmedAmount,
    isLoadingTransactions: boolean,
  };

  static contextTypes = {
    intl: intlShape.isRequired,
  };

  render() {
    const {
      walletName,
      amount,
      pendingAmount,
      numberOfTransactions,
      isLoadingTransactions
    } = this.props;
    const { intl } = this.context;
    return (
      <div className={styles.component}>
        <BorderedBox>
          <div className={styles.walletName}>{walletName}</div>
          <div className={styles.walletAmount}>
            {amount}
            <img src={adaSymbolBig} role="presentation" />
          </div>
          {pendingAmount.incoming.toFormat() > 0 &&
            <div className={styles.pendingConfirmation}>
              {`${intl.formatMessage(messages.pendingIncomingConfirmationLabel)}`}
              : {pendingAmount.incoming.toFormat(DECIMAL_PLACES_IN_ADA)}
              <img src={adaSymbolSmallest} role="presentation" />
            </div>
          }
          {pendingAmount.outgoing.toFormat() > 0 &&
            <div className={styles.pendingConfirmation}>
              {`${intl.formatMessage(messages.pendingOutgoingConfirmationLabel)}`}
              : {pendingAmount.outgoing.toFormat(DECIMAL_PLACES_IN_ADA)}
              <img src={adaSymbolSmallest} role="presentation" />
            </div>
          }
          {!isLoadingTransactions ? (
            <div className={styles.numberOfTransactions}>
              {intl.formatMessage(messages.transactionsLabel)}: {numberOfTransactions}
{'fraction_non_alphanumeric': 0.1235725242883927, 'fraction_numerical': 0.0008522243054371911, 'mean_word_length': 3.26453488372093, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5316688', 'n_tokens_mistral': 1618, 'n_tokens_neox': 1608, 'n_words': 331}