crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add price information to wallet

Browse Source
This commit is contained in:
Brandon Millman
2018-04-17 23:19:31 -04:00
parent 12d5c35d14
commit 39c0064ffb
2 changed files with 80 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
packages/website/ts/components/wallet/wallet.tsx
View File

@@ -28,6 +28,7 @@ import { Dispatcher } from 'ts/redux/dispatcher';
import { import {
BalanceErrs, BalanceErrs,
BlockchainErrs, BlockchainErrs,
ItemByAddress,
ProviderType, ProviderType,
Side, Side,
Token, Token,
@@ -35,6 +36,7 @@ import {
TokenState, TokenState,
TokenStateByAddress, TokenStateByAddress,
} from 'ts/types'; } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants'; import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils'; import { utils } from 'ts/utils/utils';
import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
@@ -70,6 +72,11 @@ interface AccessoryItemConfig {
allowanceToggleConfig?: AllowanceToggleConfig; allowanceToggleConfig?: AllowanceToggleConfig;
} }
interface WebsiteBackendPriceInfo {
price: string;
address: string;
}
const styles: Styles = { const styles: Styles = {
root: { root: {
width: 346, width: 346,
@@ -125,13 +132,15 @@ const HEADER_ITEM_KEY = 'HEADER';
const FOOTER_ITEM_KEY = 'FOOTER'; const FOOTER_ITEM_KEY = 'FOOTER';
const DISCONNECTED_ITEM_KEY = 'DISCONNECTED'; const DISCONNECTED_ITEM_KEY = 'DISCONNECTED';
const ETHER_ITEM_KEY = 'ETHER'; const ETHER_ITEM_KEY = 'ETHER';
const USD_DECIMAL_PLACES = 2;
export class Wallet extends React.Component<WalletProps, WalletState> { export class Wallet extends React.Component<WalletProps, WalletState> {
private _isUnmounted: boolean; private _isUnmounted: boolean;
constructor(props: WalletProps) { constructor(props: WalletProps) {
super(props); super(props);
this._isUnmounted = false; this._isUnmounted = false;
const initialTrackedTokenStateByAddress = this._getInitialTrackedTokenStateByAddress(props.trackedTokens); const trackedTokenAddresses = _.map(props.trackedTokens, token => token.address);
const initialTrackedTokenStateByAddress = this._getInitialTrackedTokenStateByAddress(trackedTokenAddresses);
this.state = { this.state = {
trackedTokenStateByAddress: initialTrackedTokenStateByAddress, trackedTokenStateByAddress: initialTrackedTokenStateByAddress,
wrappedEtherDirection: undefined, wrappedEtherDirection: undefined,
@@ -161,13 +170,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
// Add placeholder entry for this token to the state, since fetching the // Add placeholder entry for this token to the state, since fetching the
// balance/allowance is asynchronous // balance/allowance is asynchronous
const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress; const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress;
_.each(newTokenAddresses, (tokenAddress: string) => { const initialTrackedTokenStateByAddress = this._getInitialTrackedTokenStateByAddress(newTokenAddresses);
trackedTokenStateByAddress[tokenAddress] = { _.assign(trackedTokenStateByAddress, initialTrackedTokenStateByAddress);
balance: new BigNumber(0),
allowance: new BigNumber(0),
isLoaded: false,
};
});
this.setState({ this.setState({
trackedTokenStateByAddress, trackedTokenStateByAddress,
}); });
@@ -241,6 +245,13 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
constants.DECIMAL_PLACES_ETH, constants.DECIMAL_PLACES_ETH,
ETHER_SYMBOL, ETHER_SYMBOL,
); );
const etherToken = this._getEthToken();
const etherPrice = this.state.trackedTokenStateByAddress[etherToken.address].price;
const secondaryText = this._renderValue(
this.props.userEtherBalanceInWei,
constants.DECIMAL_PLACES_ETH,
etherPrice,
);
const accessoryItemConfig = { const accessoryItemConfig = {
wrappedEtherDirection: Side.Deposit, wrappedEtherDirection: Side.Deposit,
}; };
@@ -250,11 +261,11 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const style = isInWrappedEtherState const style = isInWrappedEtherState
? { ...walletItemStyles.focusedItem, ...styles.paddedItem } ? { ...walletItemStyles.focusedItem, ...styles.paddedItem }
: { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const etherToken = this._getEthToken();
return ( return (
<div key={ETHER_ITEM_KEY}> <div key={ETHER_ITEM_KEY}>
<ListItem <ListItem
primaryText={primaryText} primaryText={primaryText}
secondaryText={secondaryText}
leftIcon={<img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />} leftIcon={<img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />}
rightAvatar={this._renderAccessoryItems(accessoryItemConfig)} rightAvatar={this._renderAccessoryItems(accessoryItemConfig)}
disableTouchRipple={true} disableTouchRipple={true}
@@ -294,7 +305,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
this.props.networkId, this.props.networkId,
EtherscanLinkSuffixes.Address, EtherscanLinkSuffixes.Address,
); );
const amount = this._renderAmount(tokenState.balance, token.decimals, token.symbol); const primaryText = this._renderAmount(tokenState.balance, token.decimals, token.symbol);
const secondaryText = this._renderValue(tokenState.balance, token.decimals, tokenState.price);
const wrappedEtherDirection = token.symbol === ETHER_TOKEN_SYMBOL ? Side.Receive : undefined; const wrappedEtherDirection = token.symbol === ETHER_TOKEN_SYMBOL ? Side.Receive : undefined;
const accessoryItemConfig: AccessoryItemConfig = { const accessoryItemConfig: AccessoryItemConfig = {
wrappedEtherDirection, wrappedEtherDirection,
@@ -313,7 +325,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
return ( return (
<div key={token.address}> <div key={token.address}>
<ListItem <ListItem
primaryText={amount} primaryText={primaryText}
secondaryText={secondaryText}
leftIcon={this._renderTokenIcon(token, tokenLink)} leftIcon={this._renderTokenIcon(token, tokenLink)}
rightAvatar={this._renderAccessoryItems(accessoryItemConfig)} rightAvatar={this._renderAccessoryItems(accessoryItemConfig)}
disableTouchRipple={true} disableTouchRipple={true}
@@ -374,6 +387,16 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const result = `${formattedAmount} ${symbol}`; const result = `${formattedAmount} ${symbol}`;
return <div style={styles.amountLabel}>{result}</div>; return <div style={styles.amountLabel}>{result}</div>;
} }
private _renderValue(amount: BigNumber, decimals: number, price?: BigNumber) {
if (_.isUndefined(price)) {
return null;
}
const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
const value = unitAmount.mul(price);
const formattedAmount = value.toFixed(USD_DECIMAL_PLACES);
const result = `$${formattedAmount}`;
return result;
}
private _renderTokenIcon(token: Token, tokenLink?: string) { private _renderTokenIcon(token: Token, tokenLink?: string) {
const tooltipId = `tooltip-${token.address}`; const tooltipId = `tooltip-${token.address}`;
const tokenIcon = <TokenIcon token={token} diameter={ICON_DIMENSION} />; const tokenIcon = <TokenIcon token={token} diameter={ICON_DIMENSION} />;
@@ -422,10 +445,10 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
/> />
); );
} }
private _getInitialTrackedTokenStateByAddress(trackedTokens: Token[]) { private _getInitialTrackedTokenStateByAddress(tokenAddresses: string[]) {
const trackedTokenStateByAddress: TokenStateByAddress = {}; const trackedTokenStateByAddress: TokenStateByAddress = {};
_.each(trackedTokens, token => { _.each(tokenAddresses, tokenAddress => {
trackedTokenStateByAddress[token.address] = { trackedTokenStateByAddress[tokenAddress] = {
balance: new BigNumber(0), balance: new BigNumber(0),
allowance: new BigNumber(0), allowance: new BigNumber(0),
isLoaded: false, isLoaded: false,
@@ -434,19 +457,32 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
return trackedTokenStateByAddress; return trackedTokenStateByAddress;
} }
private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]) { private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]) {
const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress; const balanceAndAllowanceTupleByAddress: ItemByAddress<BigNumber[]> = {};
const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress;
for (const tokenAddress of tokenAddresses) { for (const tokenAddress of tokenAddresses) {
const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( const balanceAndAllowanceTuple = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
userAddressIfExists, userAddressIfExists,
tokenAddress, tokenAddress,
); );
trackedTokenStateByAddress[tokenAddress] = { balanceAndAllowanceTupleByAddress[tokenAddress] = balanceAndAllowanceTuple;
balance,
allowance,
isLoaded: true,
};
} }
const pricesByAddress = await this._getPricesByAddressAsync(tokenAddresses);
const trackedTokenStateByAddress = _.reduce(
tokenAddresses,
(acc, address) => {
const [balance, allowance] = balanceAndAllowanceTupleByAddress[address];
const price = pricesByAddress[address];
acc[address] = {
balance,
allowance,
price,
isLoaded: true,
};
return acc;
},
this.state.trackedTokenStateByAddress,
);
if (!this._isUnmounted) { if (!this._isUnmounted) {
this.setState({ this.setState({
trackedTokenStateByAddress, trackedTokenStateByAddress,
@@ -454,21 +490,23 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
} }
} }
private async _refetchTokenStateAsync(tokenAddress: string) { private async _refetchTokenStateAsync(tokenAddress: string) {
const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; await this._fetchBalancesAndAllowancesAsync([tokenAddress]);
const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( }
userAddressIfExists, private async _getPricesByAddressAsync(tokenAddresses: string[]): Promise<ItemByAddress<BigNumber>> {
tokenAddress, if (_.isEmpty(tokenAddresses)) {
); return {};
this.setState({ }
trackedTokenStateByAddress: { const tokenAddressesQueryString = tokenAddresses.join(',');
...this.state.trackedTokenStateByAddress, const endpoint = `${configs.BACKEND_BASE_URL}/prices?tokens=${tokenAddressesQueryString}`;
[tokenAddress]: { const response = await fetch(endpoint);
balance, if (response.status !== 200) {
allowance, return {};
isLoaded: true, }
}, const websiteBackendPriceInfos: WebsiteBackendPriceInfo[] = await response.json();
}, const addresses = _.map(websiteBackendPriceInfos, info => info.address);
}); const prices = _.map(websiteBackendPriceInfos, info => new BigNumber(info.price));
const pricesByAddress = _.zipObject(addresses, prices);
return pricesByAddress;
} }
private _openWrappedEtherActionRow(wrappedEtherDirection: Side) { private _openWrappedEtherActionRow(wrappedEtherDirection: Side) {
this.setState({ this.setState({
@@ -485,4 +523,4 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const etherToken = _.find(tokens, { symbol: ETHER_TOKEN_SYMBOL }); const etherToken = _.find(tokens, { symbol: ETHER_TOKEN_SYMBOL });
return etherToken; return etherToken;
} }
} } // tslint:disable:max-file-line-count

7
packages/website/ts/types.ts
View File

@@ -487,14 +487,17 @@ export interface OutdatedWrappedEtherByNetworkId {
}; };
} }
export interface TokenStateByAddress { export interface ItemByAddress<T> {
[address: string]: TokenState; [address: string]: T;
} }
export type TokenStateByAddress = ItemByAddress<TokenState>;
export interface TokenState { export interface TokenState {
balance: BigNumber; balance: BigNumber;
allowance: BigNumber; allowance: BigNumber;
isLoaded: boolean; isLoaded: boolean;
price?: BigNumber;
} }
export interface RelayerInfo { export interface RelayerInfo {