MyCrypto/common/containers/Tabs/Swap/components/CurrentRates.jsx

107 lines
3.1 KiB
React
Raw Normal View History

// @flow
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 { toFixedIfLarger } from 'utils/formatters';
import type { Pairs } from 'actions/swapTypes';
import { bityReferralURL } from 'config/data';
import bityLogoWhite from 'assets/images/logo-bity-white.svg';
2017-06-12 01:02:39 +00:00
export default class CurrentRates extends Component {
props: Pairs;
2017-06-12 01:02:39 +00:00
state = {
ETHBTCAmount: 1,
ETHREPAmount: 1,
BTCETHAmount: 1,
BTCREPAmount: 1
2017-06-19 05:39:07 +00:00
};
onChange = (event: SyntheticInputEvent) => {
2017-06-19 05:39:07 +00:00
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
render() {
const { ETHBTC, ETHREP, BTCETH, BTCREP } = this.props;
2017-06-19 05:39:07 +00:00
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 * 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 * 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 * 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 * 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={bityReferralURL} target="_blank">
<img src={bityLogoWhite} width={120} height={49} />
2017-06-19 05:39:07 +00:00
</a>
</section>
</article>
);
}
2017-06-12 01:02:39 +00:00
}