import React from 'react' import PropTypes from 'prop-types' import { Box, Flex } from 'rebass' 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, DataRow, Dropdown, Spinner, Text, Truncate, Value } from 'components/UI' import messages from './messages' class PaySummaryOnChain extends React.Component { static propTypes = { /** Amount to send (in satoshis). */ amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, /** Onchain address of recipient. */ address: PropTypes.string.isRequired, /** Currently selected cryptocurrency (key). */ cryptoCurrency: PropTypes.string.isRequired, /** Ticker symbol of the currently selected cryptocurrency. */ cryptoCurrencyTicker: PropTypes.string.isRequired, /** List of supported cryptocurrencies. */ cryptoCurrencies: PropTypes.arrayOf( PropTypes.shape({ key: PropTypes.string.isRequired, name: PropTypes.string.isRequired }) ).isRequired, /** Current ticker data as provided by blockchain.info */ currentTicker: PropTypes.object.isRequired, /** Current fee information as provided by bitcoinfees.earn.com */ onchainFees: PropTypes.shape({ fastestFee: PropTypes.number, halfHourFee: PropTypes.number, hourFee: PropTypes.number }), /** Currently selected fiat currency (key). */ fiatCurrency: PropTypes.string.isRequired, /** Boolean indicating wether routing information is currently being fetched. */ isQueryingFees: PropTypes.bool, /** Method to fetch fee information for onchain transactions. */ queryFees: PropTypes.func.isRequired, /** Set the current cryptocurrency. */ setCryptoCurrency: PropTypes.func.isRequired } static defaultProps = { isQueryingFees: false, onchainFees: {} } componentDidMount() { const { queryFees } = this.props queryFees() } render() { const { amount, address, cryptoCurrency, cryptoCurrencyTicker, cryptoCurrencies, currentTicker, fiatCurrency, onchainFees, isQueryingFees, setCryptoCurrency, ...rest } = this.props const fiatAmount = satoshisToFiat(amount, currentTicker[fiatCurrency]) const fee = get(onchainFees, 'fastestFee', null) return ( {' ≈ '} } right={ isQueryingFees ? ( ) : !fee ? ( ) : ( {fee} satoshis () ) } /> } right={ {cryptoCurrencyTicker} {!isQueryingFees && fee && (+ {fee} satoshis per byte)} } /> ) } } export default PaySummaryOnChain