aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/wallet
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-05-30 08:57:22 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-05-30 08:57:22 +0800
commitb14c3fe48dc8eb5bad6eefceac872754eec34ffe (patch)
tree4b151a99b892d8adf3c53418c3a1b03600da87bc /packages/website/ts/components/wallet
parentbc28a08dd0d4db99549122fb4912b4931a3aad78 (diff)
downloaddexon-sol-tools-b14c3fe48dc8eb5bad6eefceac872754eec34ffe.tar
dexon-sol-tools-b14c3fe48dc8eb5bad6eefceac872754eec34ffe.tar.gz
dexon-sol-tools-b14c3fe48dc8eb5bad6eefceac872754eec34ffe.tar.bz2
dexon-sol-tools-b14c3fe48dc8eb5bad6eefceac872754eec34ffe.tar.lz
dexon-sol-tools-b14c3fe48dc8eb5bad6eefceac872754eec34ffe.tar.xz
dexon-sol-tools-b14c3fe48dc8eb5bad6eefceac872754eec34ffe.tar.zst
dexon-sol-tools-b14c3fe48dc8eb5bad6eefceac872754eec34ffe.zip
Onboarding: implement add ETH step, and stub for add WETH step
Diffstat (limited to 'packages/website/ts/components/wallet')
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx30
1 files changed, 17 insertions, 13 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 524dc1952..d72c5458f 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -131,9 +131,6 @@ const styles: Styles = {
};
const ETHER_ICON_PATH = '/images/ether.png';
-const ETHER_TOKEN_SYMBOL = 'WETH';
-const ZRX_TOKEN_SYMBOL = 'ZRX';
-const ETHER_SYMBOL = 'ETH';
const ICON_DIMENSION = 24;
const TOKEN_AMOUNT_DISPLAY_PRECISION = 3;
const BODY_ITEM_KEY = 'BODY';
@@ -319,7 +316,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const primaryText = this._renderAmount(
this.props.userEtherBalanceInWei,
constants.DECIMAL_PLACES_ETH,
- ETHER_SYMBOL,
+ constants.ETHER_SYMBOL,
);
const etherToken = this._getEthToken();
const etherPrice = this.state.trackedTokenStateByAddress[etherToken.address].price;
@@ -338,13 +335,13 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
? { ...walletItemStyles.focusedItem, ...styles.paddedItem }
: { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const key = ETHER_ITEM_KEY;
- return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig);
+ return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row');
}
private _renderTokenRows(): React.ReactNode {
const trackedTokens = this.props.trackedTokens;
const trackedTokensStartingWithEtherToken = trackedTokens.sort(
- firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL)
- .thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL)
+ firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL)
+ .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL)
.thenBy('address'),
);
return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
@@ -359,7 +356,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const icon = <TokenIcon token={token} diameter={ICON_DIMENSION} link={tokenLink} />;
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 isWeth = token.symbol === constants.ETHER_TOKEN_SYMBOL;
+ const wrappedEtherDirection = isWeth ? Side.Receive : undefined;
const accessoryItemConfig: AccessoryItemConfig = {
wrappedEtherDirection,
allowanceToggleConfig: {
@@ -368,7 +366,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
},
};
const key = token.address;
- return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig);
+ return this._renderBalanceRow(
+ key,
+ icon,
+ primaryText,
+ secondaryText,
+ accessoryItemConfig,
+ isWeth ? 'weth-row' : undefined,
+ );
}
private _renderBalanceRow(
key: string,
@@ -376,6 +381,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
primaryText: React.ReactNode,
secondaryText: React.ReactNode,
accessoryItemConfig: AccessoryItemConfig,
+ className?: string,
): React.ReactNode {
const shouldShowWrapEtherItem =
!_.isUndefined(this.state.wrappedEtherDirection) &&
@@ -385,7 +391,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
: { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const etherToken = this._getEthToken();
return (
- <div key={key} className="flex flex-column">
+ <div key={key} className={`flex flex-column ${className || ''}`}>
<div className="flex items-center" style={style}>
<div className="px2">{icon}</div>
<div className="flex-none pr2 pt2 pb2">
@@ -575,8 +581,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
});
}
private _getEthToken(): Token {
- const tokens = _.values(this.props.tokenByAddress);
- const etherToken = _.find(tokens, { symbol: ETHER_TOKEN_SYMBOL });
- return etherToken;
+ return utils.getEthToken(this.props.tokenByAddress);
}
} // tslint:disable:max-file-line-count