Browse Source

refactor: rename PaySummaryRow as DataRow

renovate/lint-staged-8.x
Tom Kirkpatrick 6 years ago
parent
commit
769652f3fc
No known key found for this signature in database GPG Key ID: 72203A8EC5967EA8
  1. 9
      app/components/Pay/PaySummaryLightning.js
  2. 7
      app/components/Pay/PaySummaryOnChain.js
  3. 24
      app/components/Pay/PaySummaryRow.js
  4. 1
      app/components/Pay/index.js
  5. 13
      app/components/Request/RequestSummary.js
  6. 22
      app/components/UI/DataRow.js
  7. 1
      app/components/UI/index.js
  8. 6
      stories/pages/pay.stories.js
  9. 6
      test/unit/components/Pay/PaySummaryRow.spec.js
  10. 4
      test/unit/components/Pay/__snapshots__/PaySummaryLightning.spec.js.snap
  11. 4
      test/unit/components/Pay/__snapshots__/PaySummaryOnchain.spec.js.snap
  12. 21
      test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap

9
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>
)
}

7
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>

24
app/components/Pay/PaySummaryRow.js

@ -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

1
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'

13
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>

22
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

1
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'

6
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',

6
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()
})
})

4
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"

4
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"

21
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"
>
<styled.div
width={0.5}
>
<Text
fontWeight="normal"
width={0.5}
>
left contnet
</Text>
</styled.div>
<styled.div
width={0.5}
>
<Text
textAlign="right"
width={0.5}
>
right content
</Text>
</styled.div>
</Styled(styled.div)>
</styled.div>
</Styled(styled.div)>
`;

Loading…
Cancel
Save