Commit e62143f1 authored by YJ's avatar YJ
Browse files

show usd balance under eth token balance

TODO:

* show usd amount in txForm Field
* show usd txCost in txForm Field
parents e4c69874 e66ed21a
Pipeline #149658 failed with stage
......@@ -106,6 +106,14 @@ class Send extends Component {
step={0.5}
type='range' // In Gwei
/>
{values.to === values.from && (
<span>
<h3>WARNING:</h3>
<p>
The sender and receiver addresses are the same.
</p>
</span>
)}
</fieldset>
<nav className='form-nav'>
<button
......@@ -170,6 +178,7 @@ class Send extends Component {
validateForm = values => {
const errors = {};
if (!isAddress(values.to)) {
errors.to = 'Please enter a valid Ethereum address';
}
......
......@@ -10,7 +10,8 @@ import { TokenCard } from 'fether-ui';
import { withRouter } from 'react-router-dom';
import withAccount from '../../../utils/withAccount.js';
import withBalance from '../../../utils/withBalance';
import withBalance from '../../../utils/withBalance.js';
import { estimateUsd } from '../../../utils/estimateUsd';
@withRouter
@withAccount
......@@ -21,6 +22,20 @@ class TokenBalance extends Component {
token: PropTypes.object
};
state = {
usdBalance: null
};
componentDidMount = async () => {
const { balance, token } = this.props;
if (token.symbol === 'ETH') {
this.setState({
usdBalance: (await estimateUsd()) * balance
});
}
};
handleClick = () => {
const { accountAddress, history, sendStore, token } = this.props;
if (!token.address) {
......@@ -31,7 +46,15 @@ class TokenBalance extends Component {
};
render () {
return <TokenCard onClick={this.handleClick} {...this.props} />;
const { usdBalance } = this.state;
return (
<TokenCard
onClick={this.handleClick}
usdBalance={usdBalance}
{...this.props}
/>
);
}
}
......
.token {
.token, .token_usd {
display: flex;
align-items: center;
align-content: center;
......@@ -36,7 +36,7 @@
height: ms(0) * 1.3;
}
.token_symbol {
.token_symbol, .token_symbol_usd {
height: ms(0) * 1.3;
font-size: ms(-2);
&:before {
......
/**
* Estimate ETHUSD
*/
export const estimateUsd = () => {
return fetch('https://api.etherscan.io/api?module=stats&action=ethprice')
.then(data => data.json())
.then(data => {
return data.result.ethusd;
});
};
......@@ -11,6 +11,7 @@ import { Placeholder } from '../Placeholder';
export const TokenCard = ({
balance,
usdBalance,
children,
decimals,
showBalance,
......@@ -33,13 +34,22 @@ export const TokenCard = ({
<Placeholder height={20} width={100} />
)}
</div>
<div className='token_balance'>
{balance ? (
<span>{balance.toFixed(decimals)} </span>
) : showBalance ? (
<Placeholder height={20} width={50} />
<div className='token_balances'>
<div className='token_balance'>
{balance ? (
<span>{balance.toFixed(decimals)} </span>
) : showBalance ? (
<Placeholder height={20} width={50} />
) : null}
<span className='token_symbol'>{token && token.symbol}</span>
</div>
{usdBalance !== null ? (
<div className='token_usd'>
<div className='token_balance'>
{<span className='token_symbol_usd'>{`${usdBalance} USD`}</span>}
</div>
</div>
) : null}
<span className='token_symbol'>{token && token.symbol}</span>
</div>
{children}
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment