MyCrypto/common/containers/Tabs/Swap/components/currentRates.js

119 lines
3.3 KiB
JavaScript
Raw Normal View History

2017-06-19 05:39:07 +00:00
import React, { Component } from 'react';
2017-06-12 01:02:39 +00:00
import translate from 'translations';
import PropTypes from 'prop-types';
import { toFixedIfLarger } from 'utils/formatters';
2017-06-12 01:02:39 +00:00
export default class CurrentRates extends Component {
2017-06-19 05:39:07 +00:00
constructor(props) {
super(props);
this.state = {
ETHBTCAmount: 1,
ETHREPAmount: 1,
BTCETHAmount: 1,
BTCREPAmount: 1
2017-06-12 01:02:39 +00:00
};
2017-06-19 05:39:07 +00:00
}
2017-06-12 01:02:39 +00:00
2017-06-19 05:39:07 +00:00
static propTypes = {
ETHBTC: PropTypes.number,
ETHREP: PropTypes.number,
BTCETH: PropTypes.number,
BTCREP: PropTypes.number
};
onChange = event => {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
};
2017-06-12 01:02:39 +00:00
2017-06-19 05:39:07 +00:00
// TODO - A little code duplication here, but simple enough to where it doesn't seem worth the time to fix.
render() {
return (
<article className="swap-rates">
<section className="row">
<h5 className="col-xs-6 col-xs-offset-3">
{translate('SWAP_rates')}
</h5>
</section>
<section className="row order-panel">
<div className="col-sm-6 order-info">
<p className="mono">
<input
className="form-control input-sm"
onChange={this.onChange}
value={this.state.ETHBTCAmount}
name="ETHBTCAmount"
/>
<span>
2017-06-24 20:39:03 +00:00
{` ETH = ${toFixedIfLarger(
this.state.ETHBTCAmount * this.props.ETHBTC,
2017-06-19 05:39:07 +00:00
6
2017-06-24 20:39:03 +00:00
)} BTC`}
2017-06-19 05:39:07 +00:00
</span>
</p>
<p className="mono">
<input
className="form-control input-sm"
onChange={this.onChange}
value={this.state.ETHREPAmount}
name="ETHREPAmount"
/>
<span>
2017-06-24 20:39:03 +00:00
{` ETH = ${toFixedIfLarger(
this.state.ETHREPAmount * this.props.ETHREP,
2017-06-19 05:39:07 +00:00
6
2017-06-24 20:39:03 +00:00
)} REP`}
2017-06-19 05:39:07 +00:00
</span>
</p>
</div>
<div className="col-sm-6 order-info">
<p className="mono">
<input
className="form-control input-sm"
onChange={this.onChange}
value={this.state.BTCETHAmount}
name="BTCETHAmount"
/>
<span>
2017-06-24 20:39:03 +00:00
{` BTC = ${toFixedIfLarger(
this.state.BTCETHAmount * this.props.BTCETH,
2017-06-19 05:39:07 +00:00
6
2017-06-24 20:39:03 +00:00
)} ETH`}
2017-06-19 05:39:07 +00:00
</span>
</p>
<p className="mono">
<input
className="form-control input-sm"
onChange={this.onChange}
value={this.state.BTCREPAmount}
name="BTCREPAmount"
/>
<span>
2017-06-24 20:39:03 +00:00
{` BTC = ${toFixedIfLarger(
this.state.BTCREPAmount * this.props.BTCREP,
2017-06-19 05:39:07 +00:00
6
2017-06-24 20:39:03 +00:00
)} REP`}
2017-06-19 05:39:07 +00:00
</span>
</p>
</div>
<a
className="link bity-logo"
href="https://bity.com/af/jshkb37v"
target="_blank"
>
<img
src={'https://www.myetherwallet.com/images/logo-bity-white.svg'}
width={120}
height={49}
/>
</a>
</section>
</article>
);
}
2017-06-12 01:02:39 +00:00
}