From aedd1ee2331dda20331b6e2dafaa2d115e7aa420 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Mon, 17 Sep 2018 18:28:36 +0200 Subject: [PATCH] feat(i18n): initial multi-language support --- .babelrc | 5 +- app/components/Activity/Activity.js | 21 ++- app/components/Activity/Activity.scss | 21 +-- .../Activity/Countdown/Countdown.js | 7 +- app/components/Activity/Countdown/messages.js | 6 + app/components/Activity/Invoice/Invoice.js | 31 +++- app/components/Activity/Invoice/messages.js | 10 + .../Activity/InvoiceModal/InvoiceModal.js | 47 +++-- .../Activity/InvoiceModal/messages.js | 12 ++ app/components/Activity/Payment/Payment.js | 31 +++- app/components/Activity/Payment/messages.js | 8 + .../Activity/PaymentModal/PaymentModal.js | 24 ++- .../Activity/PaymentModal/messages.js | 8 + .../Activity/Transaction/Transaction.js | 32 +++- .../Activity/Transaction/messages.js | 10 + .../TransactionModal/TransactionModal.js | 30 ++- .../Activity/TransactionModal/messages.js | 9 + app/components/Activity/messages.js | 13 ++ .../Contacts/AddChannel/AddChannel.js | 25 ++- .../Contacts/AddChannel/messages.js | 11 ++ .../ConnectManually/ConnectManually.js | 21 ++- .../Contacts/ConnectManually/messages.js | 9 + app/components/Contacts/Network/Network.js | 39 ++-- app/components/Contacts/Network/messages.js | 16 ++ .../SubmitChannelForm/SubmitChannelForm.js | 30 +-- .../Contacts/SubmitChannelForm/messages.js | 11 ++ .../Contacts/SuggestedNodes/SuggestedNodes.js | 11 +- .../Contacts/SuggestedNodes/messages.js | 8 + app/components/Form/Pay/Pay.js | 28 ++- app/components/Form/Pay/messages.js | 11 ++ app/components/Form/Request/Request.js | 25 ++- app/components/Form/Request/messages.js | 9 + app/components/LoadingBolt/LoadingBolt.js | 7 +- app/components/LoadingBolt/messages.js | 6 + .../Onboarding/Autopilot/Autopilot.js | 10 +- .../Onboarding/Autopilot/messages.js | 7 + .../Onboarding/BtcPayServer/BtcPayServer.js | 21 ++- .../Onboarding/BtcPayServer/messages.js | 10 + .../ConnectionConfirm/ConnectionConfirm.js | 8 +- .../Onboarding/ConnectionConfirm/messages.js | 7 + .../ConnectionDetails/ConnectionDetails.js | 18 +- .../Onboarding/ConnectionDetails/messages.js | 10 + .../ConnectionType/ConnectionType.js | 18 +- .../Onboarding/ConnectionType/messages.js | 14 ++ .../Onboarding/FormContainer/FormContainer.js | 14 +- .../Onboarding/FormContainer/messages.js | 8 + app/components/Onboarding/Login/Login.js | 21 ++- app/components/Onboarding/Login/messages.js | 7 + .../NewWalletPassword/NewWalletPassword.js | 24 ++- .../Onboarding/NewWalletPassword/messages.js | 10 + app/components/Onboarding/Onboarding.js | 87 +++++---- .../Onboarding/RecoverForm/RecoverForm.js | 11 +- .../Onboarding/RecoverForm/messages.js | 6 + app/components/Onboarding/Signup/Signup.js | 10 +- app/components/Onboarding/Signup/messages.js | 7 + app/components/Onboarding/Syncing/Syncing.js | 52 ++++-- app/components/Onboarding/Syncing/messages.js | 17 ++ app/components/Onboarding/messages.js | 35 ++++ app/components/Settings/Fiat/Fiat.js | 6 +- app/components/Settings/Fiat/messages.js | 6 + app/components/Settings/Locale/Locale.js | 49 +++++ app/components/Settings/Locale/Locale.scss | 42 +++++ app/components/Settings/Locale/index.js | 3 + app/components/Settings/Locale/messages.js | 6 + app/components/Settings/Menu/Menu.js | 10 +- app/components/Settings/Menu/messages.js | 7 + app/components/Settings/Settings.js | 8 +- .../Wallet/ReceiveModal/ReceiveModal.js | 23 ++- .../Wallet/ReceiveModal/messages.js | 9 + app/components/Wallet/Wallet.js | 21 ++- app/components/Wallet/messages.js | 10 + app/containers/Activity.js | 11 ++ app/containers/Root.js | 28 +-- app/index.js | 37 ++-- app/lib/utils/i18n.js | 125 +++++++++++++ app/lib/zap/menuBuilder.js | 40 +++- app/reducers/activity.js | 8 +- app/reducers/index.js | 4 + app/reducers/ipc.js | 2 + app/reducers/locale.js | 40 ++++ app/translations/bg-BG.json | 157 ++++++++++++++++ app/translations/cs-CZ.json | 157 ++++++++++++++++ app/translations/de-DE.json | 157 ++++++++++++++++ app/translations/el-GR.json | 157 ++++++++++++++++ app/translations/en.json | 157 ++++++++++++++++ app/translations/es-ES.json | 157 ++++++++++++++++ app/translations/fr-FR.json | 157 ++++++++++++++++ app/translations/hr-HR.json | 157 ++++++++++++++++ app/translations/ja-JP.json | 157 ++++++++++++++++ app/translations/nl-NL.json | 157 ++++++++++++++++ app/translations/pt-BR.json | 157 ++++++++++++++++ app/translations/ro-RO.json | 157 ++++++++++++++++ app/translations/ru-RU.json | 157 ++++++++++++++++ app/translations/sv-SE.json | 157 ++++++++++++++++ app/translations/tr-TR.json | 157 ++++++++++++++++ app/translations/uk-UA.json | 157 ++++++++++++++++ app/translations/zh-CN.json | 157 ++++++++++++++++ package.json | 10 +- .../__helpers__/intl-enzyme-test-helper.js.js | 41 +++++ test/unit/components/Form/Pay.spec.js | 10 +- test/unit/components/Form/Request.spec.js | 8 +- test/unit/components/LoadingBolt.spec.js | 6 +- .../__snapshots__/activity.spec.js.snap | 56 +++--- yarn.lock | 171 ++++++++++++++++-- 104 files changed, 4146 insertions(+), 344 deletions(-) create mode 100644 app/components/Activity/Countdown/messages.js create mode 100644 app/components/Activity/Invoice/messages.js create mode 100644 app/components/Activity/InvoiceModal/messages.js create mode 100644 app/components/Activity/Payment/messages.js create mode 100644 app/components/Activity/PaymentModal/messages.js create mode 100644 app/components/Activity/Transaction/messages.js create mode 100644 app/components/Activity/TransactionModal/messages.js create mode 100644 app/components/Activity/messages.js create mode 100644 app/components/Contacts/AddChannel/messages.js create mode 100644 app/components/Contacts/ConnectManually/messages.js create mode 100644 app/components/Contacts/Network/messages.js create mode 100644 app/components/Contacts/SubmitChannelForm/messages.js create mode 100644 app/components/Contacts/SuggestedNodes/messages.js create mode 100644 app/components/Form/Pay/messages.js create mode 100644 app/components/Form/Request/messages.js create mode 100644 app/components/LoadingBolt/messages.js create mode 100644 app/components/Onboarding/Autopilot/messages.js create mode 100644 app/components/Onboarding/BtcPayServer/messages.js create mode 100644 app/components/Onboarding/ConnectionConfirm/messages.js create mode 100644 app/components/Onboarding/ConnectionDetails/messages.js create mode 100644 app/components/Onboarding/ConnectionType/messages.js create mode 100644 app/components/Onboarding/FormContainer/messages.js create mode 100644 app/components/Onboarding/Login/messages.js create mode 100644 app/components/Onboarding/NewWalletPassword/messages.js create mode 100644 app/components/Onboarding/RecoverForm/messages.js create mode 100644 app/components/Onboarding/Signup/messages.js create mode 100644 app/components/Onboarding/Syncing/messages.js create mode 100644 app/components/Onboarding/messages.js create mode 100644 app/components/Settings/Fiat/messages.js create mode 100644 app/components/Settings/Locale/Locale.js create mode 100644 app/components/Settings/Locale/Locale.scss create mode 100644 app/components/Settings/Locale/index.js create mode 100644 app/components/Settings/Locale/messages.js create mode 100644 app/components/Settings/Menu/messages.js create mode 100644 app/components/Wallet/ReceiveModal/messages.js create mode 100644 app/components/Wallet/messages.js create mode 100644 app/lib/utils/i18n.js create mode 100644 app/reducers/locale.js create mode 100644 app/translations/bg-BG.json create mode 100644 app/translations/cs-CZ.json create mode 100644 app/translations/de-DE.json create mode 100644 app/translations/el-GR.json create mode 100644 app/translations/en.json create mode 100644 app/translations/es-ES.json create mode 100644 app/translations/fr-FR.json create mode 100644 app/translations/hr-HR.json create mode 100644 app/translations/ja-JP.json create mode 100644 app/translations/nl-NL.json create mode 100644 app/translations/pt-BR.json create mode 100644 app/translations/ro-RO.json create mode 100644 app/translations/ru-RU.json create mode 100644 app/translations/sv-SE.json create mode 100644 app/translations/tr-TR.json create mode 100644 app/translations/uk-UA.json create mode 100644 app/translations/zh-CN.json create mode 100644 test/unit/__helpers__/intl-enzyme-test-helper.js.js diff --git a/.babelrc b/.babelrc index 5c664379..4c3a98ab 100644 --- a/.babelrc +++ b/.babelrc @@ -10,7 +10,10 @@ "stage-0", "react" ], - "plugins": ["add-module-exports", "dynamic-import-webpack"], + "plugins": ["add-module-exports", "dynamic-import-webpack", ["react-intl-auto", { + "removePrefix": "app/", + "filebase": false + }]], "env": { "production": { "presets": ["react-optimize"], diff --git a/app/components/Activity/Activity.js b/app/components/Activity/Activity.js index f9821644..d8b85852 100644 --- a/app/components/Activity/Activity.js +++ b/app/components/Activity/Activity.js @@ -5,6 +5,8 @@ import searchIcon from 'icons/search.svg' import xIcon from 'icons/x.svg' import FaRepeat from 'react-icons/lib/fa/repeat' +import { FormattedMessage, injectIntl } from 'react-intl' + import Wallet from 'components/Wallet' import LoadingBolt from 'components/LoadingBolt' import Invoice from './Invoice' @@ -13,6 +15,8 @@ import Transaction from './Transaction' import styles from './Activity.scss' +import messages from './messages' + class Activity extends Component { constructor(props, context) { super(props, context) @@ -87,7 +91,8 @@ class Activity extends Component { updateSearchActive, updateSearchText, - walletProps + walletProps, + intl } = this.props if (balance.channelBalance === null || balance.walletBalance === null) { @@ -134,7 +139,7 @@ class Activity extends Component {
updateSearchText(event.target.value)} /> @@ -160,7 +165,7 @@ class Activity extends Component { className={f.key === filter.key ? styles.activeFilter : undefined} onClick={() => changeFilter(f)} > - {f.name} +
@@ -176,7 +181,7 @@ class Activity extends Component { this.repeat = ref }} > - {refreshing ? : 'Refresh'} + {refreshing ? : }
  • updateSearchActive(true)}> @@ -204,7 +209,11 @@ class Activity extends Component { {showExpiredToggle && (
  • - {showExpiredRequests ? 'Hide Expired Requests' : 'Show Expired Requests'} + {showExpiredRequests ? ( + + ) : ( + + )}
    • )} @@ -240,4 +249,4 @@ Activity.propTypes = { currencyName: PropTypes.string.isRequired } -export default Activity +export default injectIntl(Activity) diff --git a/app/components/Activity/Activity.scss b/app/components/Activity/Activity.scss index 4b9ce687..c8ab0b84 100644 --- a/app/components/Activity/Activity.scss +++ b/app/components/Activity/Activity.scss @@ -284,23 +284,15 @@ font-size: 10px; } - .icon, - h3, - span { - vertical-align: middle; - } - - h3, - span { - font-size: 14px; - font-weight: bold; - letter-spacing: 1.2px; + .date { + font-size: 12px; } .icon { display: inline-block; flex: none; position: relative; + vertical-align: middle; width: 20px; height: 20px; background: #31343f; @@ -321,6 +313,9 @@ h3 { display: inline-block; + font-size: 14px; + font-weight: bold; + letter-spacing: 1.2px; &::after { content: ' '; @@ -328,10 +323,6 @@ width: 3px; } } - - span { - text-transform: uppercase; - } } .amount { diff --git a/app/components/Activity/Countdown/Countdown.js b/app/components/Activity/Countdown/Countdown.js index f39db7a8..9deecc2d 100644 --- a/app/components/Activity/Countdown/Countdown.js +++ b/app/components/Activity/Countdown/Countdown.js @@ -1,6 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' +import { FormattedMessage } from 'react-intl' +import messages from './messages' + import styles from './Countdown.scss' class Countdown extends React.Component { @@ -73,7 +76,9 @@ class Countdown extends React.Component { return ( - Expires in + + + {days > 0 && `${days}:`} {hours > 0 && `${hours}:`} {minutes > 0 && `${minutes}:`} diff --git a/app/components/Activity/Countdown/messages.js b/app/components/Activity/Countdown/messages.js new file mode 100644 index 00000000..a00ed317 --- /dev/null +++ b/app/components/Activity/Countdown/messages.js @@ -0,0 +1,6 @@ +import { defineMessages } from 'react-intl' + +/* eslint-disable max-len */ +export default defineMessages({ + expires: 'Expires in' +}) diff --git a/app/components/Activity/Invoice/Invoice.js b/app/components/Activity/Invoice/Invoice.js index 500226cc..efa866e7 100644 --- a/app/components/Activity/Invoice/Invoice.js +++ b/app/components/Activity/Invoice/Invoice.js @@ -1,14 +1,17 @@ import React from 'react' import PropTypes from 'prop-types' -import Moment from 'react-moment' import { btc } from 'lib/utils' import Isvg from 'react-inlinesvg' import Value from 'components/Value' import checkmarkIcon from 'icons/check_circle.svg' + +import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl' +import messages from './messages' + import styles from '../Activity.scss' -const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyName }) => ( +const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyName, intl }) => (
    showActivityModal('INVOICE', invoice.payment_request)} @@ -16,7 +19,11 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
    @@ -24,19 +31,25 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
    -

    {invoice.settled ? 'Received payment' : 'Requested payment'}

    +

    + {invoice.settled ? ( + + ) : ( + + )} +

    - - {invoice.settled ? invoice.settle_date * 1000 : invoice.creation_date * 1000} - +
    + @@ -66,4 +79,4 @@ Invoice.propTypes = { currencyName: PropTypes.string.isRequired } -export default Invoice +export default injectIntl(Invoice) diff --git a/app/components/Activity/Invoice/messages.js b/app/components/Activity/Invoice/messages.js new file mode 100644 index 00000000..a53205fd --- /dev/null +++ b/app/components/Activity/Invoice/messages.js @@ -0,0 +1,10 @@ +import { defineMessages } from 'react-intl' + +/* eslint-disable max-len */ +export default defineMessages({ + received: 'Received payment', + requested: 'Requested payment', + type_paid: 'Lightning invoice (paid)', + type_unpaid: 'Lightning invoice (unpaid)', + amount: 'Invoice amount' +}) diff --git a/app/components/Activity/InvoiceModal/InvoiceModal.js b/app/components/Activity/InvoiceModal/InvoiceModal.js index e8564ace..033e0dd7 100644 --- a/app/components/Activity/InvoiceModal/InvoiceModal.js +++ b/app/components/Activity/InvoiceModal/InvoiceModal.js @@ -1,8 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import Moment from 'react-moment' - import QRCode from 'qrcode.react' import copy from 'copy-to-clipboard' import { showNotification } from 'lib/utils/notifications' @@ -10,8 +8,11 @@ import { showNotification } from 'lib/utils/notifications' import FaAngleDown from 'react-icons/lib/fa/angle-down' import Value from 'components/Value' +import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl' import Countdown from '../Countdown' +import messages from './messages' + import styles from './InvoiceModal.scss' const InvoiceModal = ({ @@ -29,7 +30,7 @@ const InvoiceModal = ({ }) => { const copyPaymentRequest = () => { copy(invoice.payment_request) - showNotification('Noice', 'Successfully copied to clipboard') + showNotification('Noice', ) } const countDownDate = parseInt(invoice.creation_date, 10) + parseInt(invoice.expiry, 10) @@ -38,7 +39,9 @@ const InvoiceModal = ({
    -

    Payment Request

    +

    + +

    - {invoice.creation_date * 1000} + {' '} +

    - {!invoice.settled &&

    Not Paid

    } - {invoice.settled &&

    Paid

    } + {!invoice.settled && ( +

    + +

    + )} + {invoice.settled && ( +

    + +

    + )}
    -

    Memo

    +

    + +

    {invoice.memo}

    -

    Request

    +

    + +

    {invoice.payment_request}

    -
    Save as image
    -
    Copy Request
    +
    + +
    +
    + +
    ) diff --git a/app/components/Activity/InvoiceModal/messages.js b/app/components/Activity/InvoiceModal/messages.js new file mode 100644 index 00000000..f265af73 --- /dev/null +++ b/app/components/Activity/InvoiceModal/messages.js @@ -0,0 +1,12 @@ +import { defineMessages } from 'react-intl' + +/* eslint-disable max-len */ +export default defineMessages({ + copy: 'Copy Request', + pay_req: 'Payment Request', + memo: 'Memo', + request: 'Request', + save: 'Save as image', + not_paid: 'Not Paid', + paid: 'Paid' +}) diff --git a/app/components/Activity/Payment/Payment.js b/app/components/Activity/Payment/Payment.js index c9cea947..65700fc5 100644 --- a/app/components/Activity/Payment/Payment.js +++ b/app/components/Activity/Payment/Payment.js @@ -1,14 +1,25 @@ import React from 'react' import PropTypes from 'prop-types' -import Moment from 'react-moment' import Isvg from 'react-inlinesvg' import zap from 'icons/zap.svg' import { btc } from 'lib/utils' import Value from 'components/Value' + +import { FormattedTime, injectIntl } from 'react-intl' +import messages from './messages' + import styles from '../Activity.scss' -const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, currencyName }) => { +const Payment = ({ + payment, + ticker, + currentTicker, + showActivityModal, + nodes, + currencyName, + intl +}) => { const displayNodeName = pubkey => { const node = nodes.find(n => pubkey === n.pub_key) @@ -25,7 +36,7 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, cur onClick={() => showActivityModal('PAYMENT', payment.payment_hash)} >
    -
    +
    @@ -35,10 +46,13 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, cur

    {displayNodeName(payment.path[payment.path.length - 1])}

    - {payment.creation_date * 1000} +
    -
    +
    - {currencyName} - + {currentTicker[ticker.fiatTicker].symbol} {btc.convert('sats', 'fiat', payment.value, currentTicker[ticker.fiatTicker].last)} @@ -64,7 +78,8 @@ Payment.propTypes = { ticker: PropTypes.object.isRequired, currentTicker: PropTypes.object.isRequired, nodes: PropTypes.array.isRequired, - showActivityModal: PropTypes.func.isRequired + showActivityModal: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired } -export default Payment +export default injectIntl(Payment) diff --git a/app/components/Activity/Payment/messages.js b/app/components/Activity/Payment/messages.js new file mode 100644 index 00000000..921da9e0 --- /dev/null +++ b/app/components/Activity/Payment/messages.js @@ -0,0 +1,8 @@ +import { defineMessages } from 'react-intl' + +/* eslint-disable max-len */ +export default defineMessages({ + amount: 'Payment amount', + fee: 'Payment fee', + type: 'Lightning payment' +}) diff --git a/app/components/Activity/PaymentModal/PaymentModal.js b/app/components/Activity/PaymentModal/PaymentModal.js index 3242cd63..5c0149ad 100644 --- a/app/components/Activity/PaymentModal/PaymentModal.js +++ b/app/components/Activity/PaymentModal/PaymentModal.js @@ -1,8 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import Moment from 'react-moment' - import FaAngleDown from 'react-icons/lib/fa/angle-down' import Isvg from 'react-inlinesvg' @@ -11,6 +9,9 @@ import zap from 'icons/zap.svg' import Value from 'components/Value' +import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl' +import messages from './messages' + import styles from './PaymentModal.scss' const PaymentModal = ({ @@ -30,12 +31,14 @@ const PaymentModal = ({
    - Sent +
    - Lightning Network + + +
    - {currencyName} fee + + {' '} + {currencyName} +
    @@ -78,7 +84,13 @@ const PaymentModal = ({
    - {payment.creation_date * 1000} + {' '} +
    diff --git a/app/components/Activity/PaymentModal/messages.js b/app/components/Activity/PaymentModal/messages.js new file mode 100644 index 00000000..8c5cd9a8 --- /dev/null +++ b/app/components/Activity/PaymentModal/messages.js @@ -0,0 +1,8 @@ +import { defineMessages } from 'react-intl' + +/* eslint-disable max-len */ +export default defineMessages({ + sent: 'Sent', + fee: 'Fee', + lightning: 'Lightning Network' +}) diff --git a/app/components/Activity/Transaction/Transaction.js b/app/components/Activity/Transaction/Transaction.js index 46357b09..993cb068 100644 --- a/app/components/Activity/Transaction/Transaction.js +++ b/app/components/Activity/Transaction/Transaction.js @@ -1,37 +1,53 @@ import React from 'react' import PropTypes from 'prop-types' -import Moment from 'react-moment' import Isvg from 'react-inlinesvg' import link from 'icons/link.svg' import { btc } from 'lib/utils' import Value from 'components/Value' + +import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl' +import messages from './messages' + import styles from '../Activity.scss' -const Transaction = ({ transaction, ticker, currentTicker, showActivityModal, currencyName }) => ( +const Transaction = ({ + transaction, + ticker, + currentTicker, + showActivityModal, + currencyName, + intl +}) => (
    showActivityModal('TRANSACTION', transaction.tx_hash)} >
    -
    +
    -

    {transaction.received ? 'Received' : 'Sent'}

    +

    + {transaction.received ? ( + + ) : ( + + )} +

    - {transaction.time_stamp * 1000} +
    @@ -45,7 +61,7 @@ const Transaction = ({ transaction, ticker, currentTicker, showActivityModal, cu /> {currencyName} - + {currentTicker[ticker.fiatTicker].symbol} {btc.convert('sats', 'fiat', transaction.amount, currentTicker[ticker.fiatTicker].last)} @@ -61,4 +77,4 @@ Transaction.propTypes = { currencyName: PropTypes.string.isRequired } -export default Transaction +export default injectIntl(Transaction) diff --git a/app/components/Activity/Transaction/messages.js b/app/components/Activity/Transaction/messages.js new file mode 100644 index 00000000..3e436b1c --- /dev/null +++ b/app/components/Activity/Transaction/messages.js @@ -0,0 +1,10 @@ +import { defineMessages } from 'react-intl' + +/* eslint-disable max-len */ +export default defineMessages({ + received: 'Received', + sent: 'Sent', + amount: 'Transaction amount', + fee: 'Transaction fee', + type: 'On-chain transaction' +}) diff --git a/app/components/Activity/TransactionModal/TransactionModal.js b/app/components/Activity/TransactionModal/TransactionModal.js index 266b48bc..b205613a 100644 --- a/app/components/Activity/TransactionModal/TransactionModal.js +++ b/app/components/Activity/TransactionModal/TransactionModal.js @@ -1,10 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' - -import Moment from 'react-moment' - import FaAngleDown from 'react-icons/lib/fa/angle-down' - import Isvg from 'react-inlinesvg' import paperPlane from 'icons/paper_plane.svg' import hand from 'icons/hand.svg' @@ -13,6 +9,9 @@ import { blockExplorer } from 'lib/utils' import Value from 'components/Value' +import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl' +import messages from './messages' + import styles from './TransactionModal.scss' const TransactionModal = ({ @@ -34,12 +33,16 @@ const TransactionModal = ({ {transaction.received ? (
    - Received + + +
    ) : (
    - Sent + + +
    )}
    @@ -49,7 +52,7 @@ const TransactionModal = ({ className={styles.link} onClick={() => blockExplorer.showTransaction(network, transaction.tx_hash)} > - On-Chain +
    @@ -59,7 +62,10 @@ const TransactionModal = ({ currentTicker={currentTicker} fiatTicker={ticker.fiatTicker} /> - {currencyName} fee + + {' '} + {currencyName} +
    @@ -95,7 +101,13 @@ const TransactionModal = ({
    - {transaction.time_stamp * 1000} + {' '} +