From 769652f3fcc4426976b195b65f25ce1d2c7e2515 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Tue, 6 Nov 2018 12:01:57 +0100
Subject: [PATCH] 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 {
<Bar />
- <PaySummaryRow
+ <DataRow
left={<FormattedMessage {...messages.fee} />}
right={
isQueryingRoutes ? (
@@ -151,7 +150,7 @@ class PaySummaryLightning extends React.PureComponent {
<Bar />
- <PaySummaryRow
+ <DataRow
left={<FormattedMessage {...messages.total} />}
right={
<React.Fragment>
@@ -162,7 +161,7 @@ class PaySummaryLightning extends React.PureComponent {
<Bar />
- {memo && <PaySummaryRow left={<FormattedMessage {...messages.memo} />} right={memo} />}
+ {memo && <DataRow left={<FormattedMessage {...messages.memo} />} right={memo} />}
</Box>
)
}
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 {
<Bar />
- <PaySummaryRow
+ <DataRow
left={<FormattedMessage {...messages.fee} />}
right={
isQueryingFees ? (
@@ -138,7 +137,7 @@ class PaySummaryOnChain extends React.Component {
<Bar />
- <PaySummaryRow
+ <DataRow
left={<FormattedMessage {...messages.total} />}
right={
<React.Fragment>
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 }) => (
- <Box py={3}>
- <Flex alignItems="center">
- <Box width={1 / 2}>
- <Text fontWeight="normal">{left}</Text>
- </Box>
- <Box width={1 / 2}>
- <Text textAlign="right">{right}</Text>
- </Box>
- </Flex>
- </Box>
-)
-
-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 {
<Box {...rest}>
{memo && (
<React.Fragment>
- <PaySummaryRow left={<FormattedMessage {...messages.memo} />} right={memo} /> <Bar />{' '}
+ <DataRow left={<FormattedMessage {...messages.memo} />} right={memo} /> <Bar />{' '}
</React.Fragment>
)}
- <PaySummaryRow
+ <DataRow
left={<FormattedMessage {...messages.amount} />}
right={
<Flex alignItems="center" justifyContent="flex-end">
@@ -117,7 +116,7 @@ class RequestSummary extends React.Component {
<Bar />
- <PaySummaryRow
+ <DataRow
left={<FormattedMessage {...messages.qrcode} />}
right={
<Text>
@@ -128,7 +127,7 @@ class RequestSummary extends React.Component {
<Bar />
- <PaySummaryRow
+ <DataRow
left={<FormattedMessage {...messages.ln_invoice} />}
right=<React.Fragment>
<Text
@@ -149,7 +148,7 @@ class RequestSummary extends React.Component {
<Bar />
- <PaySummaryRow
+ <DataRow
left={<FormattedMessage {...messages.status} />}
right={
<React.Fragment>
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 }) => (
+ <Flex alignItems="center" py={3}>
+ <Text width={1 / 2} fontWeight="normal">
+ {left}
+ </Text>
+ <Text width={1 / 2} textAlign="right">
+ {right}
+ </Text>
+ </Flex>
+)
+
+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(<PaySummaryRow left="left contnet" right="right content" />)
+ const wrapper = shallow(<DataRow left="left contnet" right="right content" />)
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`] = `
</Styled(styled.div)>
</styled.div>
<Bar />
- <PaySummaryRow
+ <DataRow
left={
<FormattedMessage
defaultMessage="Fee"
@@ -111,7 +111,7 @@ exports[`component.Form.PaySummaryLightning should render correctly 1`] = `
}
/>
<Bar />
- <PaySummaryRow
+ <DataRow
left={
<FormattedMessage
defaultMessage="Total"
diff --git a/test/unit/components/Pay/__snapshots__/PaySummaryOnchain.spec.js.snap b/test/unit/components/Pay/__snapshots__/PaySummaryOnchain.spec.js.snap
index 16931bc6..bdf56820 100644
--- a/test/unit/components/Pay/__snapshots__/PaySummaryOnchain.spec.js.snap
+++ b/test/unit/components/Pay/__snapshots__/PaySummaryOnchain.spec.js.snap
@@ -102,7 +102,7 @@ exports[`component.Form.PaySummaryOnchain should render correctly 1`] = `
</Styled(styled.div)>
</styled.div>
<Bar />
- <PaySummaryRow
+ <DataRow
left={
<FormattedMessage
defaultMessage="Fee"
@@ -119,7 +119,7 @@ exports[`component.Form.PaySummaryOnchain should render correctly 1`] = `
}
/>
<Bar />
- <PaySummaryRow
+ <DataRow
left={
<FormattedMessage
defaultMessage="Total"
diff --git a/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap b/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
index e8e1f994..0af1a460 100644
--- a/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
+++ b/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
@@ -1,30 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`component.Form.PaySummaryRow should render correctly 1`] = `
-<styled.div
+exports[`component.Form.DataRow should render correctly 1`] = `
+<Styled(styled.div)
+ alignItems="center"
py={3}
>
- <Styled(styled.div)
- alignItems="center"
+ <Text
+ fontWeight="normal"
+ width={0.5}
>
- <styled.div
- width={0.5}
- >
- <Text
- fontWeight="normal"
- >
- left contnet
- </Text>
- </styled.div>
- <styled.div
- width={0.5}
- >
- <Text
- textAlign="right"
- >
- right content
- </Text>
- </styled.div>
- </Styled(styled.div)>
-</styled.div>
+ left contnet
+ </Text>
+ <Text
+ textAlign="right"
+ width={0.5}
+ >
+ right content
+ </Text>
+</Styled(styled.div)>
`;