diff --git a/.babelrc b/.babelrc index 5c664379f91..4c3a98ab042 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 f98216448b4..d8b858523f2 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 4b9ce687416..c8ab0b84bda 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 f39db7a8232..9deecc2d63c 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 00000000000..a00ed317a96 --- /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 500226cc02c..efa866e76b2 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 00000000000..a53205fd911 --- /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 e8564ace2cc..033e0dd7b80 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 00000000000..f265af737b6 --- /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 c9cea94768c..65700fc5bb3 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 00000000000..921da9e0072 --- /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 3242cd63f64..5c0149add6f 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} + {' '} +
    @@ -95,7 +101,13 @@ const TransactionModal = ({
    - {transaction.time_stamp * 1000} + {' '} +