From 13456488ed7f9506fb6e6355c541ec46c415d793 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Mon, 5 Nov 2018 23:17:05 +0100 Subject: [PATCH 01/13] refactor: remove unused components --- app/components/CryptoIcon/CryptoIcon.js | 23 ------------ app/components/CryptoIcon/index.js | 3 -- app/components/CurrencyIcon/CurrencyIcon.js | 20 ----------- app/components/CurrencyIcon/index.js | 3 -- test/unit/components/CryptoIcon.spec.js | 39 --------------------- test/unit/components/CurrencyIcon.spec.js | 32 ----------------- 6 files changed, 120 deletions(-) delete mode 100644 app/components/CryptoIcon/CryptoIcon.js delete mode 100644 app/components/CryptoIcon/index.js delete mode 100644 app/components/CurrencyIcon/CurrencyIcon.js delete mode 100644 app/components/CurrencyIcon/index.js delete mode 100644 test/unit/components/CryptoIcon.spec.js delete mode 100644 test/unit/components/CurrencyIcon.spec.js diff --git a/app/components/CryptoIcon/CryptoIcon.js b/app/components/CryptoIcon/CryptoIcon.js deleted file mode 100644 index f34d6008..00000000 --- a/app/components/CryptoIcon/CryptoIcon.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -import SkinnyBitcoin from 'components/Icon/SkinnyBitcoin' -import Litecoin from 'components/Icon/Litecoin' - -const CryptoIcon = ({ currency, styles }) => { - switch (currency) { - case 'btc': - return - case 'ltc': - return - default: - return - } -} - -CryptoIcon.propTypes = { - currency: PropTypes.string.isRequired, - styles: PropTypes.object -} - -export default CryptoIcon diff --git a/app/components/CryptoIcon/index.js b/app/components/CryptoIcon/index.js deleted file mode 100644 index 13f3d237..00000000 --- a/app/components/CryptoIcon/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import CryptoIcon from './CryptoIcon' - -export default CryptoIcon diff --git a/app/components/CurrencyIcon/CurrencyIcon.js b/app/components/CurrencyIcon/CurrencyIcon.js deleted file mode 100644 index e77d1904..00000000 --- a/app/components/CurrencyIcon/CurrencyIcon.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import FaDollar from 'react-icons/lib/fa/dollar' -import CryptoIcon from '../CryptoIcon' - -const CurrencyIcon = ({ currency, crypto, styles }) => { - return currency === 'usd' ? ( - - ) : ( - - ) -} - -CurrencyIcon.propTypes = { - currency: PropTypes.string.isRequired, - crypto: PropTypes.string.isRequired, - styles: PropTypes.object -} - -export default CurrencyIcon diff --git a/app/components/CurrencyIcon/index.js b/app/components/CurrencyIcon/index.js deleted file mode 100644 index da33382d..00000000 --- a/app/components/CurrencyIcon/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import CurrencyIcon from './CurrencyIcon' - -export default CurrencyIcon diff --git a/test/unit/components/CryptoIcon.spec.js b/test/unit/components/CryptoIcon.spec.js deleted file mode 100644 index 65d313c6..00000000 --- a/test/unit/components/CryptoIcon.spec.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' -import { configure, shallow } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' -import CryptoIcon from 'components/CryptoIcon' -import SkinnyBitcoin from 'components/Icon/SkinnyBitcoin' -import Litecoin from 'components/Icon/Litecoin' - -configure({ adapter: new Adapter() }) - -const defaultProps = { - currency: 'bch', - styles: {} -} - -describe('component.CryptoIcon', () => { - describe('currency is "unknown"', () => { - const props = { ...defaultProps } - const el = shallow() - it('should show empty span', () => { - expect(el.html()).toEqual('') - }) - }) - - describe('currency is "btc"', () => { - const props = { ...defaultProps, currency: 'btc' } - const el = shallow() - it('should show btc symbol', () => { - expect(el.find(SkinnyBitcoin)).toHaveLength(1) - }) - }) - - describe('currency is "ltc"', () => { - const props = { ...defaultProps, currency: 'ltc' } - const el = shallow() - it('should show ltc symbol', () => { - expect(el.find(Litecoin)).toHaveLength(1) - }) - }) -}) diff --git a/test/unit/components/CurrencyIcon.spec.js b/test/unit/components/CurrencyIcon.spec.js deleted file mode 100644 index 7ecc8f33..00000000 --- a/test/unit/components/CurrencyIcon.spec.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import { configure, shallow } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' -import FaDollar from 'react-icons/lib/fa/dollar' -import CryptoIcon from 'components/CryptoIcon' -import CurrencyIcon from 'components/CurrencyIcon' - -configure({ adapter: new Adapter() }) - -const defaultProps = { - currency: '', - crypto: '', - styles: {} -} - -describe('component.CurrencyIcon', () => { - describe('currency is "usd"', () => { - const props = { ...defaultProps, currency: 'usd' } - const el = shallow() - it('should show usd symbol', () => { - expect(el.find(FaDollar)).toHaveLength(1) - }) - }) - - describe('currency is not "usd"', () => { - const props = { ...defaultProps, currency: 'btc' } - const el = shallow() - it('should show btc symbol', () => { - expect(el.find(CryptoIcon)).toHaveLength(1) - }) - }) -}) From ef70acddd0bf69ef723e59d0b3d28e12b0d6cca2 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Tue, 6 Nov 2018 09:26:56 +0100 Subject: [PATCH 02/13] refactor: move Value component to UI dir --- app/components/Activity/Invoice/Invoice.js | 2 +- app/components/Activity/InvoiceModal/InvoiceModal.js | 3 +-- app/components/Activity/Payment/Payment.js | 2 +- app/components/Activity/PaymentModal/PaymentModal.js | 3 +-- app/components/Activity/Transaction/Transaction.js | 2 +- app/components/Activity/TransactionModal/TransactionModal.js | 3 +-- app/components/Contacts/Network/Network.js | 3 +-- app/components/Pay/PaySummaryLightning.js | 3 +-- app/components/Pay/PaySummaryOnChain.js | 3 +-- app/components/Request/RequestSummary.js | 3 +-- app/components/{Value => UI}/Value.js | 0 app/components/UI/index.js | 1 + app/components/Value/Value.scss | 0 app/components/Value/index.js | 3 --- app/components/Wallet/Wallet.js | 3 +-- 15 files changed, 12 insertions(+), 22 deletions(-) rename app/components/{Value => UI}/Value.js (100%) delete mode 100644 app/components/Value/Value.scss delete mode 100644 app/components/Value/index.js diff --git a/app/components/Activity/Invoice/Invoice.js b/app/components/Activity/Invoice/Invoice.js index a82d0892..5c96e24f 100644 --- a/app/components/Activity/Invoice/Invoice.js +++ b/app/components/Activity/Invoice/Invoice.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { btc } from 'lib/utils' -import Value from 'components/Value' +import { Value } from 'components/UI' import CheckCircle from 'components/Icon/CheckCircle' import { FormattedNumber, FormattedTime, FormattedMessage, injectIntl } from 'react-intl' diff --git a/app/components/Activity/InvoiceModal/InvoiceModal.js b/app/components/Activity/InvoiceModal/InvoiceModal.js index 35a162ec..fa75083d 100644 --- a/app/components/Activity/InvoiceModal/InvoiceModal.js +++ b/app/components/Activity/InvoiceModal/InvoiceModal.js @@ -3,8 +3,7 @@ import PropTypes from 'prop-types' import QRCode from 'qrcode.react' import copy from 'copy-to-clipboard' import { showNotification } from 'lib/utils/notifications' -import Value from 'components/Value' -import { Dropdown } from 'components/UI' +import { Dropdown, Value } from 'components/UI' import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl' import Countdown from '../Countdown' import messages from './messages' diff --git a/app/components/Activity/Payment/Payment.js b/app/components/Activity/Payment/Payment.js index 2e1c5d0e..9a7a7324 100644 --- a/app/components/Activity/Payment/Payment.js +++ b/app/components/Activity/Payment/Payment.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import Zap from 'components/Icon/Zap' import { btc } from 'lib/utils' -import Value from 'components/Value' +import { Value } from 'components/UI' import { FormattedNumber, FormattedTime, injectIntl } from 'react-intl' import messages from './messages' diff --git a/app/components/Activity/PaymentModal/PaymentModal.js b/app/components/Activity/PaymentModal/PaymentModal.js index 072a8a9b..8d1c9839 100644 --- a/app/components/Activity/PaymentModal/PaymentModal.js +++ b/app/components/Activity/PaymentModal/PaymentModal.js @@ -2,8 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import PaperPlane from 'components/Icon/PaperPlane' import Zap from 'components/Icon/Zap' -import { Dropdown } from 'components/UI' -import Value from 'components/Value' +import { Dropdown, Value } from 'components/UI' import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl' import messages from './messages' import styles from './PaymentModal.scss' diff --git a/app/components/Activity/Transaction/Transaction.js b/app/components/Activity/Transaction/Transaction.js index 7274997f..a36e9c01 100644 --- a/app/components/Activity/Transaction/Transaction.js +++ b/app/components/Activity/Transaction/Transaction.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import ChainLink from 'components/Icon/ChainLink' import { btc } from 'lib/utils' -import Value from 'components/Value' +import { Value } from 'components/UI' import { FormattedNumber, FormattedTime, FormattedMessage, injectIntl } from 'react-intl' import messages from './messages' diff --git a/app/components/Activity/TransactionModal/TransactionModal.js b/app/components/Activity/TransactionModal/TransactionModal.js index 71bd0c93..d6bad29f 100644 --- a/app/components/Activity/TransactionModal/TransactionModal.js +++ b/app/components/Activity/TransactionModal/TransactionModal.js @@ -3,9 +3,8 @@ import PropTypes from 'prop-types' import PaperPlane from 'components/Icon/PaperPlane' import Hand from 'components/Icon/Hand' import ChainLink from 'components/Icon/ChainLink' -import { Dropdown } from 'components/UI' +import { Dropdown, Value } from 'components/UI' 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' diff --git a/app/components/Contacts/Network/Network.js b/app/components/Contacts/Network/Network.js index 409706b8..7275595a 100644 --- a/app/components/Contacts/Network/Network.js +++ b/app/components/Contacts/Network/Network.js @@ -7,8 +7,7 @@ import FaAngleDown from 'react-icons/lib/fa/angle-down' import { btc, blockExplorer } from 'lib/utils' import Plus from 'components/Icon/Plus' import Search from 'components/Icon/Search' -import { BackgroundLight, Text } from 'components/UI' -import Value from 'components/Value' +import { BackgroundLight, Text, Value } from 'components/UI' import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl' import messages from './messages' diff --git a/app/components/Pay/PaySummaryLightning.js b/app/components/Pay/PaySummaryLightning.js index 6cd7629e..9a92b855 100644 --- a/app/components/Pay/PaySummaryLightning.js +++ b/app/components/Pay/PaySummaryLightning.js @@ -5,8 +5,7 @@ import { FormattedNumber, FormattedMessage } from 'react-intl' import { satoshisToFiat } from 'lib/utils/btc' import { decodePayReq, getNodeAlias } from 'lib/utils/crypto' import BigArrowRight from 'components/Icon/BigArrowRight' -import { Bar, Dropdown, Spinner, Text, Truncate } from 'components/UI' -import Value from 'components/Value' +import { Bar, Dropdown, Spinner, Text, Truncate, Value } from 'components/UI' import { PaySummaryRow } from '.' import messages from './messages' diff --git a/app/components/Pay/PaySummaryOnChain.js b/app/components/Pay/PaySummaryOnChain.js index f64415f1..03c329dc 100644 --- a/app/components/Pay/PaySummaryOnChain.js +++ b/app/components/Pay/PaySummaryOnChain.js @@ -5,8 +5,7 @@ import { FormattedNumber, FormattedMessage } from 'react-intl' import get from 'lodash.get' import { satoshisToFiat } from 'lib/utils/btc' import BigArrowRight from 'components/Icon/BigArrowRight' -import { Bar, Dropdown, Spinner, Text, Truncate } from 'components/UI' -import Value from 'components/Value' +import { Bar, Dropdown, Spinner, Text, Truncate, Value } from 'components/UI' import { PaySummaryRow } from '.' import messages from './messages' diff --git a/app/components/Request/RequestSummary.js b/app/components/Request/RequestSummary.js index 8f522674..e3f60d7c 100644 --- a/app/components/Request/RequestSummary.js +++ b/app/components/Request/RequestSummary.js @@ -5,8 +5,7 @@ import { FormattedMessage, FormattedRelative, injectIntl } from 'react-intl' import { decodePayReq } from 'lib/utils/crypto' import { showNotification } from 'lib/utils/notifications' import copy from 'copy-to-clipboard' -import { Bar, Button, Dropdown, QRCode, Text, Truncate } from 'components/UI' -import Value from 'components/Value' +import { Bar, Button, Dropdown, QRCode, Text, Truncate, Value } from 'components/UI' import { PaySummaryRow } from '../Pay' import messages from './messages' diff --git a/app/components/Value/Value.js b/app/components/UI/Value.js similarity index 100% rename from app/components/Value/Value.js rename to app/components/UI/Value.js diff --git a/app/components/UI/index.js b/app/components/UI/index.js index 4cf7949f..e0540d9c 100644 --- a/app/components/UI/index.js +++ b/app/components/UI/index.js @@ -32,3 +32,4 @@ export TextArea from './TextArea' export Titlebar from './Titlebar' export Toggle from './Toggle' export Truncate from './Truncate' +export Value from './Value' diff --git a/app/components/Value/Value.scss b/app/components/Value/Value.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/app/components/Value/index.js b/app/components/Value/index.js deleted file mode 100644 index 4e1ecc82..00000000 --- a/app/components/Value/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Value from './Value' - -export default Value diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index 93a35264..14bf7a07 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -4,9 +4,8 @@ import FaAngleUp from 'react-icons/lib/fa/angle-up' import FaAngleDown from 'react-icons/lib/fa/angle-down' import { Box, Flex } from 'rebass' import { btc, blockExplorer } from 'lib/utils' -import Value from 'components/Value' import Settings from 'components/Settings' -import { Button, Dropdown, Text } from 'components/UI' +import { Button, Dropdown, Text, Value } from 'components/UI' import CheckAnimated from 'components/Icon/CheckAnimated' import ZapLogo from 'components/Icon/ZapLogo' import ZapLogoBlack from 'components/Icon/ZapLogoBlack' From b3efb8a0f7d010c2ab637ca49120d8b05eda8331 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Tue, 6 Nov 2018 09:37:21 +0100 Subject: [PATCH 03/13] refactor: move AmountInput component to UI dir --- app/components/AmountInput/AmountInput.scss | 0 app/components/AmountInput/index.js | 3 --- app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js | 3 +-- app/components/{AmountInput => UI}/AmountInput.js | 0 app/components/UI/index.js | 1 + test/unit/components/{ => UI}/AmountInput.spec.js | 2 +- 6 files changed, 3 insertions(+), 6 deletions(-) delete mode 100644 app/components/AmountInput/AmountInput.scss delete mode 100644 app/components/AmountInput/index.js rename app/components/{AmountInput => UI}/AmountInput.js (100%) rename test/unit/components/{ => UI}/AmountInput.spec.js (99%) diff --git a/app/components/AmountInput/AmountInput.scss b/app/components/AmountInput/AmountInput.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/app/components/AmountInput/index.js b/app/components/AmountInput/index.js deleted file mode 100644 index 37d612c0..00000000 --- a/app/components/AmountInput/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import AmountInput from './AmountInput' - -export default AmountInput diff --git a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js index 022dbd16..ba6c31c8 100644 --- a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js +++ b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js @@ -1,8 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import FaExclamationCircle from 'react-icons/lib/fa/exclamation-circle' -import AmountInput from 'components/AmountInput' -import { Button, Dropdown } from 'components/UI' +import { AmountInput, Button, Dropdown } from 'components/UI' import { FormattedNumber, FormattedMessage } from 'react-intl' import messages from './messages' import styles from './SubmitChannelForm.scss' diff --git a/app/components/AmountInput/AmountInput.js b/app/components/UI/AmountInput.js similarity index 100% rename from app/components/AmountInput/AmountInput.js rename to app/components/UI/AmountInput.js diff --git a/app/components/UI/index.js b/app/components/UI/index.js index e0540d9c..c35007d0 100644 --- a/app/components/UI/index.js +++ b/app/components/UI/index.js @@ -1,3 +1,4 @@ +export AmountInput from './AmountInput' export BackgroundDark from './BackgroundDark' export BackgroundLight from './BackgroundLight' export BackgroundLightest from './BackgroundLightest' diff --git a/test/unit/components/AmountInput.spec.js b/test/unit/components/UI/AmountInput.spec.js similarity index 99% rename from test/unit/components/AmountInput.spec.js rename to test/unit/components/UI/AmountInput.spec.js index db6d0789..426a20ef 100644 --- a/test/unit/components/AmountInput.spec.js +++ b/test/unit/components/UI/AmountInput.spec.js @@ -2,7 +2,7 @@ import React from 'react' import { configure, mount } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' -import AmountInput from 'components/AmountInput' +import { AmountInput } from 'components/UI' configure({ adapter: new Adapter() }) From 8b701e8ed7edc4633b556c1cdef1d812752abbd8 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Tue, 6 Nov 2018 10:00:55 +0100 Subject: [PATCH 04/13] refactor: regenerate icons with unique ids --- .svgrrc | 1 + app/components/Icon/BigArrowLeft.js | 2 +- app/components/Icon/BigArrowRight.js | 2 +- app/components/Icon/Bitcoin.js | 2 +- app/components/Icon/Btcpay.js | 2 +- app/components/Icon/ChainLink.js | 6 +++--- app/components/Icon/Channels.js | 4 ++-- app/components/Icon/Check.js | 6 +++--- app/components/Icon/CheckAnimated.js | 16 +++++++++++++--- app/components/Icon/CheckCircle.js | 6 +++--- app/components/Icon/Clock.js | 6 +++--- app/components/Icon/Close.js | 2 +- app/components/Icon/CloudLightning.js | 6 +++--- app/components/Icon/Cloudbolt.js | 4 ++-- app/components/Icon/Contacts.js | 2 +- app/components/Icon/Copy.js | 6 +++--- app/components/Icon/Error.js | 2 +- app/components/Icon/Eye.js | 6 +++--- app/components/Icon/Globe.js | 6 +++--- app/components/Icon/Hand.js | 2 +- app/components/Icon/Help.js | 6 +++--- app/components/Icon/Help2.js | 2 +- app/components/Icon/IconPlus.js | 4 ++-- app/components/Icon/Lightning.js | 6 +++--- app/components/Icon/Litecoin.js | 2 +- app/components/Icon/LndLogo.js | 2 +- app/components/Icon/LtcLogo.js | 2 +- app/components/Icon/Network.js | 2 +- app/components/Icon/Onchain.js | 6 +++--- app/components/Icon/PaperPlane.js | 2 +- app/components/Icon/Peers.js | 3 +-- app/components/Icon/Plus.js | 6 +++--- app/components/Icon/PlusCircle.js | 6 +++--- app/components/Icon/Qrcode.js | 4 ++-- app/components/Icon/Search.js | 6 +++--- app/components/Icon/Settings.js | 3 +-- app/components/Icon/SkinnyBitcoin.js | 2 +- app/components/Icon/Spinner.js | 12 +++--------- app/components/Icon/Success.js | 12 +++--------- app/components/Icon/User.js | 6 +++--- app/components/Icon/Wallet.js | 2 +- app/components/Icon/Wallet2.js | 2 +- app/components/Icon/X.js | 12 +++--------- app/components/Icon/Zap.js | 6 +++--- app/components/Icon/ZapLogo.js | 2 +- app/components/Icon/ZapLogoBlack.js | 2 +- app/icons/channels.svg | 4 ++-- app/icons/icon-plus.svg | 2 +- app/icons/peers.svg | 4 ++-- app/icons/qrcode.svg | 4 ++-- app/icons/settings.svg | 4 ++-- .../UI/__snapshots__/Modal.spec.js.snap | 5 ++--- .../UI/__snapshots__/Notification.spec.js.snap | 10 ++++------ .../UI/__snapshots__/Spinner.spec.js.snap | 5 ++--- 54 files changed, 117 insertions(+), 130 deletions(-) diff --git a/.svgrrc b/.svgrrc index bd73f1e9..657a110c 100644 --- a/.svgrrc +++ b/.svgrrc @@ -2,6 +2,7 @@ "icon": true, "replaceAttrValues": { "#FFF": "currentColor", + "#FFFFFF": "currentColor", "#F5A623": "currentColor", "#010002": "currentColor", "#E63939": "currentColor", diff --git a/app/components/Icon/BigArrowLeft.js b/app/components/Icon/BigArrowLeft.js index d1a73661..92233368 100644 --- a/app/components/Icon/BigArrowLeft.js +++ b/app/components/Icon/BigArrowLeft.js @@ -1,7 +1,7 @@ import React from 'react' const SvgBigArrowLeft = props => ( - + ( - + ( - + ( - + ( diff --git a/app/components/Icon/Channels.js b/app/components/Icon/Channels.js index 529ef3ad..02d1abe8 100644 --- a/app/components/Icon/Channels.js +++ b/app/components/Icon/Channels.js @@ -1,8 +1,8 @@ import React from 'react' const SvgChannels = props => ( - - + + diff --git a/app/components/Icon/Check.js b/app/components/Icon/Check.js index f5a5ac00..8a3bdfbb 100644 --- a/app/components/Icon/Check.js +++ b/app/components/Icon/Check.js @@ -2,15 +2,15 @@ import React from 'react' const SvgCheck = props => ( diff --git a/app/components/Icon/CheckAnimated.js b/app/components/Icon/CheckAnimated.js index a49d236b..36c28e14 100644 --- a/app/components/Icon/CheckAnimated.js +++ b/app/components/Icon/CheckAnimated.js @@ -1,9 +1,19 @@ import React from 'react' const SvgCheckAnimated = props => ( - - - + + + ) diff --git a/app/components/Icon/CheckCircle.js b/app/components/Icon/CheckCircle.js index 9c1bbc30..970c5516 100644 --- a/app/components/Icon/CheckCircle.js +++ b/app/components/Icon/CheckCircle.js @@ -2,15 +2,15 @@ import React from 'react' const SvgCheckCircle = props => ( diff --git a/app/components/Icon/Clock.js b/app/components/Icon/Clock.js index 8a776a59..1d1a29cd 100644 --- a/app/components/Icon/Clock.js +++ b/app/components/Icon/Clock.js @@ -2,15 +2,15 @@ import React from 'react' const SvgClock = props => ( diff --git a/app/components/Icon/Close.js b/app/components/Icon/Close.js index df10cab4..e6511263 100644 --- a/app/components/Icon/Close.js +++ b/app/components/Icon/Close.js @@ -1,7 +1,7 @@ import React from 'react' const SvgClose = props => ( - + diff --git a/app/components/Icon/CloudLightning.js b/app/components/Icon/CloudLightning.js index 2205129a..f897fc79 100644 --- a/app/components/Icon/CloudLightning.js +++ b/app/components/Icon/CloudLightning.js @@ -2,15 +2,15 @@ import React from 'react' const SvgCloudLightning = props => ( diff --git a/app/components/Icon/Cloudbolt.js b/app/components/Icon/Cloudbolt.js index 9d568f9e..0bd59af0 100644 --- a/app/components/Icon/Cloudbolt.js +++ b/app/components/Icon/Cloudbolt.js @@ -1,9 +1,9 @@ import React from 'react' const SvgCloudbolt = props => ( - + diff --git a/app/components/Icon/Contacts.js b/app/components/Icon/Contacts.js index e8332317..7960e16f 100644 --- a/app/components/Icon/Contacts.js +++ b/app/components/Icon/Contacts.js @@ -1,7 +1,7 @@ import React from 'react' const SvgContacts = props => ( - + ( diff --git a/app/components/Icon/Error.js b/app/components/Icon/Error.js index 6e0c8d70..dfbb72b3 100644 --- a/app/components/Icon/Error.js +++ b/app/components/Icon/Error.js @@ -1,7 +1,7 @@ import React from 'react' const SvgError = props => ( - + ( diff --git a/app/components/Icon/Globe.js b/app/components/Icon/Globe.js index db6aa774..b1cf5dd9 100644 --- a/app/components/Icon/Globe.js +++ b/app/components/Icon/Globe.js @@ -2,15 +2,15 @@ import React from 'react' const SvgGlobe = props => ( diff --git a/app/components/Icon/Hand.js b/app/components/Icon/Hand.js index d8e4311c..8c8acfe5 100644 --- a/app/components/Icon/Hand.js +++ b/app/components/Icon/Hand.js @@ -1,7 +1,7 @@ import React from 'react' const SvgHand = props => ( - + diff --git a/app/components/Icon/Help.js b/app/components/Icon/Help.js index 1126305a..ccf6996c 100644 --- a/app/components/Icon/Help.js +++ b/app/components/Icon/Help.js @@ -2,15 +2,15 @@ import React from 'react' const SvgHelp = props => ( diff --git a/app/components/Icon/Help2.js b/app/components/Icon/Help2.js index a717a990..2994ec34 100644 --- a/app/components/Icon/Help2.js +++ b/app/components/Icon/Help2.js @@ -1,7 +1,7 @@ import React from 'react' const SvgHelp2 = props => ( - + ( - - + + diff --git a/app/components/Icon/Lightning.js b/app/components/Icon/Lightning.js index 03955321..d26740ab 100644 --- a/app/components/Icon/Lightning.js +++ b/app/components/Icon/Lightning.js @@ -1,15 +1,15 @@ import React from 'react' const SvgLightning = props => ( - + - + - + ( - + ) diff --git a/app/components/Icon/LndLogo.js b/app/components/Icon/LndLogo.js index 1cdb8007..077eeb21 100644 --- a/app/components/Icon/LndLogo.js +++ b/app/components/Icon/LndLogo.js @@ -1,7 +1,7 @@ import React from 'react' const SvgLndLogo = props => ( - + ( - + ( - + ( - + - + - + ( - + ( - + diff --git a/app/components/Icon/Plus.js b/app/components/Icon/Plus.js index 5c6169fb..3b17508c 100644 --- a/app/components/Icon/Plus.js +++ b/app/components/Icon/Plus.js @@ -2,15 +2,15 @@ import React from 'react' const SvgPlus = props => ( diff --git a/app/components/Icon/PlusCircle.js b/app/components/Icon/PlusCircle.js index e7de4594..0875ad1d 100644 --- a/app/components/Icon/PlusCircle.js +++ b/app/components/Icon/PlusCircle.js @@ -2,15 +2,15 @@ import React from 'react' const SvgPlusCircle = props => ( diff --git a/app/components/Icon/Qrcode.js b/app/components/Icon/Qrcode.js index 891ccdfa..53da3723 100644 --- a/app/components/Icon/Qrcode.js +++ b/app/components/Icon/Qrcode.js @@ -1,8 +1,8 @@ import React from 'react' const SvgQrcode = props => ( - - + + diff --git a/app/components/Icon/Search.js b/app/components/Icon/Search.js index 572c31a6..1a040bef 100644 --- a/app/components/Icon/Search.js +++ b/app/components/Icon/Search.js @@ -2,15 +2,15 @@ import React from 'react' const SvgSearch = props => ( diff --git a/app/components/Icon/Settings.js b/app/components/Icon/Settings.js index fdcf1572..3babe437 100644 --- a/app/components/Icon/Settings.js +++ b/app/components/Icon/Settings.js @@ -1,14 +1,13 @@ import React from 'react' const SvgSettings = props => ( - + diff --git a/app/components/Icon/SkinnyBitcoin.js b/app/components/Icon/SkinnyBitcoin.js index f935a33e..191d0cd4 100644 --- a/app/components/Icon/SkinnyBitcoin.js +++ b/app/components/Icon/SkinnyBitcoin.js @@ -1,7 +1,7 @@ import React from 'react' const SvgSkinnyBitcoin = props => ( - + diff --git a/app/components/Icon/Spinner.js b/app/components/Icon/Spinner.js index a9d72be1..a634a8df 100644 --- a/app/components/Icon/Spinner.js +++ b/app/components/Icon/Spinner.js @@ -1,20 +1,14 @@ import React from 'react' const SvgSpinner = props => ( - + - + ) diff --git a/app/components/Icon/Success.js b/app/components/Icon/Success.js index 73bf86ce..50610f99 100644 --- a/app/components/Icon/Success.js +++ b/app/components/Icon/Success.js @@ -1,20 +1,14 @@ import React from 'react' const SvgSuccess = props => ( - + - + ) diff --git a/app/components/Icon/User.js b/app/components/Icon/User.js index aa0c238c..fe067abc 100644 --- a/app/components/Icon/User.js +++ b/app/components/Icon/User.js @@ -2,15 +2,15 @@ import React from 'react' const SvgUser = props => ( diff --git a/app/components/Icon/Wallet.js b/app/components/Icon/Wallet.js index 7ddf08ff..f971d77e 100644 --- a/app/components/Icon/Wallet.js +++ b/app/components/Icon/Wallet.js @@ -1,7 +1,7 @@ import React from 'react' const SvgWallet = props => ( - + diff --git a/app/components/Icon/Wallet2.js b/app/components/Icon/Wallet2.js index 4e878e1c..d96588a6 100644 --- a/app/components/Icon/Wallet2.js +++ b/app/components/Icon/Wallet2.js @@ -1,7 +1,7 @@ import React from 'react' const SvgWallet2 = props => ( - + diff --git a/app/components/Icon/X.js b/app/components/Icon/X.js index 0259171d..d1f60288 100644 --- a/app/components/Icon/X.js +++ b/app/components/Icon/X.js @@ -1,16 +1,10 @@ import React from 'react' const SvgX = props => ( - + @@ -21,7 +15,7 @@ const SvgX = props => ( strokeLinecap="round" strokeLinejoin="round" transform="translate(1)" - xlinkHref="#a" + xlinkHref="#x_svg__a" /> ) diff --git a/app/components/Icon/Zap.js b/app/components/Icon/Zap.js index 7fa259df..4b75069b 100644 --- a/app/components/Icon/Zap.js +++ b/app/components/Icon/Zap.js @@ -2,15 +2,15 @@ import React from 'react' const SvgZap = props => ( diff --git a/app/components/Icon/ZapLogo.js b/app/components/Icon/ZapLogo.js index 953ef42c..b9a245bd 100644 --- a/app/components/Icon/ZapLogo.js +++ b/app/components/Icon/ZapLogo.js @@ -1,7 +1,7 @@ import React from 'react' const SvgZapLogo = props => ( - + ( - + Group Created with Sketch. - + @@ -17,4 +17,4 @@ - \ No newline at end of file + diff --git a/app/icons/icon-plus.svg b/app/icons/icon-plus.svg index ebbffb2e..938bc73c 100644 --- a/app/icons/icon-plus.svg +++ b/app/icons/icon-plus.svg @@ -1,5 +1,5 @@ - + diff --git a/app/icons/peers.svg b/app/icons/peers.svg index 6e30374d..38cda5bd 100644 --- a/app/icons/peers.svg +++ b/app/icons/peers.svg @@ -4,7 +4,7 @@ users Created with Sketch. - + @@ -16,4 +16,4 @@ - \ No newline at end of file + diff --git a/app/icons/qrcode.svg b/app/icons/qrcode.svg index fe674bc6..a1aab55e 100644 --- a/app/icons/qrcode.svg +++ b/app/icons/qrcode.svg @@ -4,7 +4,7 @@ Group 23 Created with Sketch. - + @@ -24,4 +24,4 @@ - \ No newline at end of file + diff --git a/app/icons/settings.svg b/app/icons/settings.svg index 04726886..44ad7aa7 100644 --- a/app/icons/settings.svg +++ b/app/icons/settings.svg @@ -4,7 +4,7 @@ settings Created with Sketch. - + @@ -14,4 +14,4 @@ - \ No newline at end of file + diff --git a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap index d2a8a2c5..373a43fa 100644 --- a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap @@ -58,12 +58,11 @@ exports[`component.UI.Modal should render correctly 1`] = ` height="2em" viewBox="0 0 22 20" width="2em" - xmlnsXlink="http://www.w3.org/1999/xlink" > diff --git a/test/unit/components/UI/__snapshots__/Notification.spec.js.snap b/test/unit/components/UI/__snapshots__/Notification.spec.js.snap index 7e2181dd..b591ffc2 100644 --- a/test/unit/components/UI/__snapshots__/Notification.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Notification.spec.js.snap @@ -65,18 +65,17 @@ exports[`component.UI.Notification should render correctly 1`] = ` height="1em" viewBox="0 0 17 17" width="1em" - xmlnsXlink="http://www.w3.org/1999/xlink" > @@ -94,12 +93,11 @@ exports[`component.UI.Notification should render correctly 1`] = ` strokeWidth={4} viewBox="0 0 22 20" width="1em" - xmlnsXlink="http://www.w3.org/1999/xlink" > diff --git a/test/unit/components/UI/__snapshots__/Spinner.spec.js.snap b/test/unit/components/UI/__snapshots__/Spinner.spec.js.snap index 7549a0e9..26b214dd 100644 --- a/test/unit/components/UI/__snapshots__/Spinner.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Spinner.spec.js.snap @@ -18,17 +18,16 @@ exports[`component.UI.Spinner should render correctly 1`] = ` height="1em" viewBox="0 0 14 14" width="1em" - xmlnsXlink="http://www.w3.org/1999/xlink" > From 769652f3fcc4426976b195b65f25ce1d2c7e2515 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Tue, 6 Nov 2018 12:01:57 +0100 Subject: [PATCH 05/13] refactor: rename PaySummaryRow as DataRow --- app/components/Pay/PaySummaryLightning.js | 9 ++--- app/components/Pay/PaySummaryOnChain.js | 7 ++-- app/components/Pay/PaySummaryRow.js | 24 ------------ app/components/Pay/index.js | 1 - app/components/Request/RequestSummary.js | 13 +++---- app/components/UI/DataRow.js | 22 +++++++++++ app/components/UI/index.js | 1 + stories/pages/pay.stories.js | 6 +++ .../unit/components/Pay/PaySummaryRow.spec.js | 6 +-- .../PaySummaryLightning.spec.js.snap | 4 +- .../PaySummaryOnchain.spec.js.snap | 4 +- .../__snapshots__/PaySummaryRow.spec.js.snap | 39 +++++++------------ 12 files changed, 64 insertions(+), 72 deletions(-) delete mode 100644 app/components/Pay/PaySummaryRow.js create mode 100644 app/components/UI/DataRow.js diff --git a/app/components/Pay/PaySummaryLightning.js b/app/components/Pay/PaySummaryLightning.js index 9a92b855..67b5ba61 100644 --- a/app/components/Pay/PaySummaryLightning.js +++ b/app/components/Pay/PaySummaryLightning.js @@ -5,8 +5,7 @@ import { FormattedNumber, FormattedMessage } from 'react-intl' import { satoshisToFiat } from 'lib/utils/btc' import { decodePayReq, getNodeAlias } from 'lib/utils/crypto' import BigArrowRight from 'components/Icon/BigArrowRight' -import { Bar, Dropdown, Spinner, Text, Truncate, Value } from 'components/UI' -import { PaySummaryRow } from '.' +import { Bar, DataRow, Dropdown, Spinner, Text, Truncate, Value } from 'components/UI' import messages from './messages' class PaySummaryLightning extends React.PureComponent { @@ -132,7 +131,7 @@ class PaySummaryLightning extends React.PureComponent { - } right={ isQueryingRoutes ? ( @@ -151,7 +150,7 @@ class PaySummaryLightning extends React.PureComponent { - } right={ @@ -162,7 +161,7 @@ class PaySummaryLightning extends React.PureComponent { - {memo && } right={memo} />} + {memo && } right={memo} />} ) } diff --git a/app/components/Pay/PaySummaryOnChain.js b/app/components/Pay/PaySummaryOnChain.js index 03c329dc..1f747da4 100644 --- a/app/components/Pay/PaySummaryOnChain.js +++ b/app/components/Pay/PaySummaryOnChain.js @@ -5,8 +5,7 @@ import { FormattedNumber, FormattedMessage } from 'react-intl' import get from 'lodash.get' import { satoshisToFiat } from 'lib/utils/btc' import BigArrowRight from 'components/Icon/BigArrowRight' -import { Bar, Dropdown, Spinner, Text, Truncate, Value } from 'components/UI' -import { PaySummaryRow } from '.' +import { Bar, DataRow, Dropdown, Spinner, Text, Truncate, Value } from 'components/UI' import messages from './messages' class PaySummaryOnChain extends React.Component { @@ -110,7 +109,7 @@ class PaySummaryOnChain extends React.Component { - } right={ isQueryingFees ? ( @@ -138,7 +137,7 @@ class PaySummaryOnChain extends React.Component { - } right={ diff --git a/app/components/Pay/PaySummaryRow.js b/app/components/Pay/PaySummaryRow.js deleted file mode 100644 index f8d5d57b..00000000 --- a/app/components/Pay/PaySummaryRow.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { Box, Flex } from 'rebass' -import { Text } from 'components/UI' - -const PaySummaryRow = ({ left, right }) => ( - - - - {left} - - - {right} - - - -) - -PaySummaryRow.propTypes = { - left: PropTypes.any, - right: PropTypes.any -} - -export default PaySummaryRow diff --git a/app/components/Pay/index.js b/app/components/Pay/index.js index 1a345aac..c0307ec3 100644 --- a/app/components/Pay/index.js +++ b/app/components/Pay/index.js @@ -3,4 +3,3 @@ export PayButtons from './PayButtons' export PayHeader from './PayHeader' export PaySummaryLightning from './PaySummaryLightning' export PaySummaryOnChain from './PaySummaryOnChain' -export PaySummaryRow from './PaySummaryRow' diff --git a/app/components/Request/RequestSummary.js b/app/components/Request/RequestSummary.js index e3f60d7c..ab19ffa1 100644 --- a/app/components/Request/RequestSummary.js +++ b/app/components/Request/RequestSummary.js @@ -5,8 +5,7 @@ import { FormattedMessage, FormattedRelative, injectIntl } from 'react-intl' import { decodePayReq } from 'lib/utils/crypto' import { showNotification } from 'lib/utils/notifications' import copy from 'copy-to-clipboard' -import { Bar, Button, Dropdown, QRCode, Text, Truncate, Value } from 'components/UI' -import { PaySummaryRow } from '../Pay' +import { Bar, DataRow, Button, Dropdown, QRCode, Text, Truncate, Value } from 'components/UI' import messages from './messages' class RequestSummary extends React.Component { @@ -95,11 +94,11 @@ class RequestSummary extends React.Component { {memo && ( - } right={memo} /> {' '} + } right={memo} /> {' '} )} - } right={ @@ -117,7 +116,7 @@ class RequestSummary extends React.Component { - } right={ @@ -128,7 +127,7 @@ class RequestSummary extends React.Component { - } right= - } right={ diff --git a/app/components/UI/DataRow.js b/app/components/UI/DataRow.js new file mode 100644 index 00000000..77c62f14 --- /dev/null +++ b/app/components/UI/DataRow.js @@ -0,0 +1,22 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Flex } from 'rebass' +import { Text } from 'components/UI' + +const DataRow = ({ left, right }) => ( + + + {left} + + + {right} + + +) + +DataRow.propTypes = { + left: PropTypes.any, + right: PropTypes.any +} + +export default DataRow diff --git a/app/components/UI/index.js b/app/components/UI/index.js index c35007d0..3037a7c4 100644 --- a/app/components/UI/index.js +++ b/app/components/UI/index.js @@ -5,6 +5,7 @@ export BackgroundLightest from './BackgroundLightest' export Bar from './Bar' export Button from './Button' export CryptoAmountInput from './CryptoAmountInput' +export DataRow from './DataRow' export Dropdown from './Dropdown' export FiatAmountInput from './FiatAmountInput' export Form from './Form' diff --git a/stories/pages/pay.stories.js b/stories/pages/pay.stories.js index ca98ee99..03d08bdb 100644 --- a/stories/pages/pay.stories.js +++ b/stories/pages/pay.stories.js @@ -36,6 +36,12 @@ const store = new Store({ fiatCurrency: 'USD', fiatCurrencies: ['USD', 'EUR', 'GBP'], + onchainFees: { + fastestFee: 100, + halfHourFee: 70, + hourFee: 30 + }, + nodes: [ { pub_key: '03c856d2dbec7454c48f311031f06bb99e3ca1ab15a9b9b35de14e139aa663b463', diff --git a/test/unit/components/Pay/PaySummaryRow.spec.js b/test/unit/components/Pay/PaySummaryRow.spec.js index fff9903c..4323e2ee 100644 --- a/test/unit/components/Pay/PaySummaryRow.spec.js +++ b/test/unit/components/Pay/PaySummaryRow.spec.js @@ -1,11 +1,11 @@ import React from 'react' import { shallow } from 'enzyme' import toJSON from 'enzyme-to-json' -import { PaySummaryRow } from 'components/Pay' +import { DataRow } from 'components/UI' -describe('component.Form.PaySummaryRow', () => { +describe('component.Form.DataRow', () => { it('should render correctly', () => { - const wrapper = shallow() + const wrapper = shallow() expect(toJSON(wrapper)).toMatchSnapshot() }) }) diff --git a/test/unit/components/Pay/__snapshots__/PaySummaryLightning.spec.js.snap b/test/unit/components/Pay/__snapshots__/PaySummaryLightning.spec.js.snap index b9d72680..2a77be4e 100644 --- a/test/unit/components/Pay/__snapshots__/PaySummaryLightning.spec.js.snap +++ b/test/unit/components/Pay/__snapshots__/PaySummaryLightning.spec.js.snap @@ -89,7 +89,7 @@ exports[`component.Form.PaySummaryLightning should render correctly 1`] = ` - - - - - - - - left contnet - - - - - right content - - - - + left contnet + + + right content + + `; From 01e2bd72b53d069d7155ab71c593cc2355a76583 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Tue, 6 Nov 2018 13:05:51 +0100 Subject: [PATCH 06/13] feat(ui): add simplified Countdown component --- app/components/UI/Countdown.js | 85 +++++++++++++++++++ app/components/UI/index.js | 1 + app/components/UI/messages.js | 2 + stories/components/countdown.stories.js | 30 +++++++ test/unit/components/UI/Countdown.spec.js | 11 +++ .../UI/__snapshots__/Countdown.spec.js.snap | 19 +++++ 6 files changed, 148 insertions(+) create mode 100644 app/components/UI/Countdown.js create mode 100644 stories/components/countdown.stories.js create mode 100644 test/unit/components/UI/Countdown.spec.js create mode 100644 test/unit/components/UI/__snapshots__/Countdown.spec.js.snap diff --git a/app/components/UI/Countdown.js b/app/components/UI/Countdown.js new file mode 100644 index 00000000..4d6fdb62 --- /dev/null +++ b/app/components/UI/Countdown.js @@ -0,0 +1,85 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import { FormattedMessage, FormattedRelative } from 'react-intl' +import { Text } from 'components/UI' +import messages from './messages' + +class Countdown extends React.Component { + state = { + isExpired: null, + timer: null + } + + static propTypes = { + colorActive: PropTypes.string, + colorExpired: PropTypes.string, + date: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]).isRequired, + countdownStyle: PropTypes.string, + countUpAfterExpire: PropTypes.bool, + updateInterval: PropTypes.number + } + + static defaultProps = { + colorActive: 'superGreen', + colorExpired: 'superRed', + countdownStyle: 'best fit', + countUpAfterExpire: true, + updateInterval: 1000 + } + + componentDidMount() { + let { date } = this.props + if (date instanceof Date) { + date = new Date(date) + } + + const expiresIn = date - Date.now() + if (expiresIn >= 0) { + this.setState({ isExpired: false }) + const timer = setInterval(() => this.setState({ isExpired: true }), expiresIn) + this.setState({ timer }) + } else { + this.setState({ isExpired: true }) + } + } + + componentWillUnmount() { + const { timer } = this.state + clearInterval(timer) + } + + render() { + const { + colorActive, + colorExpired, + countdownStyle, + countUpAfterExpire, + date, + updateInterval, + ...rest + } = this.props + const { isExpired } = this.state + return ( + + {isExpired ? ( + + ) : ( + + )} + {(!isExpired || (isExpired && countUpAfterExpire)) && ( + + {` `} + + + )} + + ) + } +} + +export default Countdown diff --git a/app/components/UI/index.js b/app/components/UI/index.js index 3037a7c4..60aa5e41 100644 --- a/app/components/UI/index.js +++ b/app/components/UI/index.js @@ -4,6 +4,7 @@ export BackgroundLight from './BackgroundLight' export BackgroundLightest from './BackgroundLightest' export Bar from './Bar' export Button from './Button' +export Countdown from './Countdown' export CryptoAmountInput from './CryptoAmountInput' export DataRow from './DataRow' export Dropdown from './Dropdown' diff --git a/app/components/UI/messages.js b/app/components/UI/messages.js index 9357a041..5043d4fd 100644 --- a/app/components/UI/messages.js +++ b/app/components/UI/messages.js @@ -2,6 +2,8 @@ import { defineMessages } from 'react-intl' /* eslint-disable max-len */ export default defineMessages({ + expires: 'Expires', + expired: 'Expired', required_field: 'This is a required field', invalid_request: 'Not a valid {chain} request.', valid_request: 'Valid {chain} request', diff --git a/stories/components/countdown.stories.js b/stories/components/countdown.stories.js new file mode 100644 index 00000000..1add657f --- /dev/null +++ b/stories/components/countdown.stories.js @@ -0,0 +1,30 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import { Countdown } from 'components/UI' + +storiesOf('Components.Countdown', module).addWithChapters('Countdown', { + chapters: [ + { + sections: [ + { + title: 'Default', + sectionFn: () => + }, + { + title: 'Stop after expire', + sectionFn: () => + }, + { + title: 'Custom colors', + sectionFn: () => ( + + ) + } + ] + } + ] +}) diff --git a/test/unit/components/UI/Countdown.spec.js b/test/unit/components/UI/Countdown.spec.js new file mode 100644 index 00000000..2eb75159 --- /dev/null +++ b/test/unit/components/UI/Countdown.spec.js @@ -0,0 +1,11 @@ +import React from 'react' +import { shallow } from 'enzyme' +import toJSON from 'enzyme-to-json' +import { Countdown } from 'components/UI' + +describe('component.UI.Countdown', () => { + it('should render correctly with default props', () => { + const wrapper = shallow() + expect(toJSON(wrapper)).toMatchSnapshot() + }) +}) diff --git a/test/unit/components/UI/__snapshots__/Countdown.spec.js.snap b/test/unit/components/UI/__snapshots__/Countdown.spec.js.snap new file mode 100644 index 00000000..67a31512 --- /dev/null +++ b/test/unit/components/UI/__snapshots__/Countdown.spec.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`component.UI.Countdown should render correctly with default props 1`] = ` + + + + + +`; From 006be2156e2bb60999101cc0ccdbcde6934329c6 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Tue, 6 Nov 2018 13:20:54 +0100 Subject: [PATCH 07/13] refactor: use new Countdown component --- .../Activity/Countdown/Countdown.js | 95 ------------------- .../Activity/Countdown/Countdown.scss | 16 ---- app/components/Activity/Countdown/index.js | 3 - app/components/Activity/Countdown/messages.js | 6 -- .../Activity/InvoiceModal/InvoiceModal.js | 7 +- 5 files changed, 3 insertions(+), 124 deletions(-) delete mode 100644 app/components/Activity/Countdown/Countdown.js delete mode 100644 app/components/Activity/Countdown/Countdown.scss delete mode 100644 app/components/Activity/Countdown/index.js delete mode 100644 app/components/Activity/Countdown/messages.js diff --git a/app/components/Activity/Countdown/Countdown.js b/app/components/Activity/Countdown/Countdown.js deleted file mode 100644 index 9deecc2d..00000000 --- a/app/components/Activity/Countdown/Countdown.js +++ /dev/null @@ -1,95 +0,0 @@ -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 { - constructor(props) { - super(props) - - this.state = { - days: null, - hours: null, - minutes: null, - seconds: null, - expired: false, - interval: null - } - - this.timerInterval = this.timerInterval.bind(this) - } - - componentDidMount() { - const interval = setInterval(this.timerInterval, 1000) - // store interval in the state so it can be accessed later - this.setState({ interval }) - } - - componentWillUnmount() { - const { interval } = this.state - // use interval from the state to clear the interval - clearInterval(interval) - } - - timerInterval() { - const convertTwoDigits = n => (n > 9 ? n : `0${n}`.slice(-2)) - - const now = new Date().getTime() - const { countDownDate } = this.props - const countDownSeconds = countDownDate * 1000 - const distance = countDownSeconds - now - - if (distance <= 0) { - this.setState({ expired: true }) - const { interval } = this.state - clearInterval(interval) - return - } - - const days = convertTwoDigits(Math.floor(distance / (1000 * 60 * 60 * 24))) - const hours = convertTwoDigits( - Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) - ) - const minutes = convertTwoDigits(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))) - const seconds = convertTwoDigits(Math.floor((distance % (1000 * 60)) / 1000)) - - this.setState({ - days, - hours, - minutes, - seconds - }) - } - - render() { - const { days, hours, minutes, seconds, expired } = this.state - - if (expired) { - return Expired - } - if (!days && !hours && !minutes && !seconds) { - return - } - - return ( - - - - - {days > 0 && `${days}:`} - {hours > 0 && `${hours}:`} - {minutes > 0 && `${minutes}:`} - {seconds >= 0 && `${seconds}`} - - ) - } -} - -Countdown.propTypes = { - countDownDate: PropTypes.number.isRequired -} - -export default Countdown diff --git a/app/components/Activity/Countdown/Countdown.scss b/app/components/Activity/Countdown/Countdown.scss deleted file mode 100644 index c17583f6..00000000 --- a/app/components/Activity/Countdown/Countdown.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import 'styles/variables.scss'; - -.container { - display: block; - text-align: center; - font-size: 12px; - min-height: 12px; - - &.expired { - color: $red; - } -} - -.caption { - margin-right: 4px; -} diff --git a/app/components/Activity/Countdown/index.js b/app/components/Activity/Countdown/index.js deleted file mode 100644 index cdb1f176..00000000 --- a/app/components/Activity/Countdown/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Countdown from './Countdown' - -export default Countdown diff --git a/app/components/Activity/Countdown/messages.js b/app/components/Activity/Countdown/messages.js deleted file mode 100644 index a00ed317..00000000 --- a/app/components/Activity/Countdown/messages.js +++ /dev/null @@ -1,6 +0,0 @@ -import { defineMessages } from 'react-intl' - -/* eslint-disable max-len */ -export default defineMessages({ - expires: 'Expires in' -}) diff --git a/app/components/Activity/InvoiceModal/InvoiceModal.js b/app/components/Activity/InvoiceModal/InvoiceModal.js index fa75083d..9b3dfe19 100644 --- a/app/components/Activity/InvoiceModal/InvoiceModal.js +++ b/app/components/Activity/InvoiceModal/InvoiceModal.js @@ -3,9 +3,8 @@ import PropTypes from 'prop-types' import QRCode from 'qrcode.react' import copy from 'copy-to-clipboard' import { showNotification } from 'lib/utils/notifications' -import { Dropdown, Value } from 'components/UI' +import { Countdown, Dropdown, Value } from 'components/UI' import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl' -import Countdown from '../Countdown' import messages from './messages' import styles from './InvoiceModal.scss' @@ -21,7 +20,7 @@ const InvoiceModal = ({ showNotification('Noice', ) } - const countDownDate = parseInt(invoice.creation_date, 10) + parseInt(invoice.expiry, 10) + const countDownDate = (parseInt(invoice.creation_date, 10) + parseInt(invoice.expiry, 10)) * 1000 return (
@@ -39,7 +38,7 @@ const InvoiceModal = ({ level="L" className={styles.qrcode} /> - +
From 16a7567f4586702eef94a294da7f02d1935b9cf6 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Tue, 6 Nov 2018 15:58:14 +0100 Subject: [PATCH 08/13] refactor: rename FormFieldMessage to Message --- app/components/Pay/Pay.js | 10 +++++----- app/components/UI/Button.js | 7 +++++-- app/components/UI/Input.js | 10 +++------- app/components/UI/LightningInvoiceInput.js | 6 +++--- .../UI/{FormFieldMessage.js => Message.js} | 16 ++++++++-------- app/components/UI/TextArea.js | 10 +++------- app/components/UI/index.js | 2 +- 7 files changed, 28 insertions(+), 33 deletions(-) rename app/components/UI/{FormFieldMessage.js => Message.js} (72%) diff --git a/app/components/Pay/Pay.js b/app/components/Pay/Pay.js index 833685ed..2988c750 100644 --- a/app/components/Pay/Pay.js +++ b/app/components/Pay/Pay.js @@ -11,7 +11,7 @@ import { Dropdown, FiatAmountInput, Form, - FormFieldMessage, + Message, Label, LightningInvoiceInput, Panel, @@ -699,16 +699,16 @@ class Pay extends React.Component { {currentStep === 'summary' && !isQueryingRoutes && !hasRoute && ( - + - + )} {currentStep === 'summary' && !hasEnoughFunds && ( - + - + )} + {processing ? ( {processing && } diff --git a/app/components/UI/Input.js b/app/components/UI/Input.js index b4243a9e..3482b0af 100644 --- a/app/components/UI/Input.js +++ b/app/components/UI/Input.js @@ -4,7 +4,7 @@ import { withTheme } from 'styled-components' import system from '@rebass/components' import { styles } from 'styled-system' import { Flex } from 'rebass' -import { FormFieldMessage } from 'components/UI' +import { Message } from 'components/UI' // Create an html input element that accepts all style props from styled-system. const SystemInput = system( @@ -120,13 +120,9 @@ class Input extends React.Component { error={fieldState.error} /> {fieldState.error && ( - + {fieldState.error} - + )} ) diff --git a/app/components/UI/LightningInvoiceInput.js b/app/components/UI/LightningInvoiceInput.js index 6cd22ed1..4a6731fe 100644 --- a/app/components/UI/LightningInvoiceInput.js +++ b/app/components/UI/LightningInvoiceInput.js @@ -4,7 +4,7 @@ import { FormattedMessage, injectIntl } from 'react-intl' import { asField } from 'informed' import { isOnchain, isLn } from 'lib/utils/crypto' import TextArea from 'components/UI/TextArea' -import FormFieldMessage from 'components/UI/FormFieldMessage' +import Message from 'components/UI/Message' import messages from './messages' /** @@ -76,14 +76,14 @@ const InformedTextArea = asField(({ fieldState, fieldApi, ...props }) => {