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 { ...@@ -106,6 +106,14 @@ class Send extends Component {
step={0.5} step={0.5}
type='range' // In Gwei type='range' // In Gwei
/> />
{values.to === values.from && (
<span>
<h3>WARNING:</h3>
<p>
The sender and receiver addresses are the same.
</p>
</span>
)}
</fieldset> </fieldset>
<nav className='form-nav'> <nav className='form-nav'>
<button <button
...@@ -170,6 +178,7 @@ class Send extends Component { ...@@ -170,6 +178,7 @@ class Send extends Component {
validateForm = values => { validateForm = values => {
const errors = {}; const errors = {};
if (!isAddress(values.to)) { if (!isAddress(values.to)) {
errors.to = 'Please enter a valid Ethereum address'; errors.to = 'Please enter a valid Ethereum address';
} }
......
...@@ -10,7 +10,8 @@ import { TokenCard } from 'fether-ui'; ...@@ -10,7 +10,8 @@ import { TokenCard } from 'fether-ui';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import withAccount from '../../../utils/withAccount.js'; import withAccount from '../../../utils/withAccount.js';
import withBalance from '../../../utils/withBalance'; import withBalance from '../../../utils/withBalance.js';
import { estimateUsd } from '../../../utils/estimateUsd';
@withRouter @withRouter
@withAccount @withAccount
...@@ -21,6 +22,20 @@ class TokenBalance extends Component { ...@@ -21,6 +22,20 @@ class TokenBalance extends Component {
token: PropTypes.object token: PropTypes.object
}; };
state = {
usdBalance: null
};
componentDidMount = async () => {
const { balance, token } = this.props;
if (token.symbol === 'ETH') {
this.setState({
usdBalance: (await estimateUsd()) * balance
});
}
};
handleClick = () => { handleClick = () => {
const { accountAddress, history, sendStore, token } = this.props; const { accountAddress, history, sendStore, token } = this.props;
if (!token.address) { if (!token.address) {
...@@ -31,7 +46,15 @@ class TokenBalance extends Component { ...@@ -31,7 +46,15 @@ class TokenBalance extends Component {
}; };
render () { 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; display: flex;
align-items: center; align-items: center;
align-content: center; align-content: center;
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
height: ms(0) * 1.3; height: ms(0) * 1.3;
} }
.token_symbol { .token_symbol, .token_symbol_usd {
height: ms(0) * 1.3; height: ms(0) * 1.3;
font-size: ms(-2); font-size: ms(-2);
&:before { &: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'; ...@@ -11,6 +11,7 @@ import { Placeholder } from '../Placeholder';
export const TokenCard = ({ export const TokenCard = ({
balance, balance,
usdBalance,
children, children,
decimals, decimals,
showBalance, showBalance,
...@@ -33,13 +34,22 @@ export const TokenCard = ({ ...@@ -33,13 +34,22 @@ export const TokenCard = ({
<Placeholder height={20} width={100} /> <Placeholder height={20} width={100} />
)} )}
</div> </div>
<div className='token_balance'> <div className='token_balances'>
{balance ? ( <div className='token_balance'>
<span>{balance.toFixed(decimals)} </span> {balance ? (
) : showBalance ? ( <span>{balance.toFixed(decimals)} </span>
<Placeholder height={20} width={50} /> ) : 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} ) : null}
<span className='token_symbol'>{token && token.symbol}</span>
</div> </div>
{children} {children}
</div> </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