diff options
| -rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 13 | ||||
| -rw-r--r-- | packages/website/ts/components/wallet/wrap_ether_item.tsx | 6 |
2 files changed, 14 insertions, 5 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 39c95d31c..64e8bb53f 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -121,6 +121,10 @@ const ZRX_TOKEN_SYMBOL = 'ZRX'; const ETHER_SYMBOL = 'ETH'; const ICON_DIMENSION = 24; const TOKEN_AMOUNT_DISPLAY_PRECISION = 3; +const HEADER_ITEM_KEY = 'HEADER'; +const FOOTER_ITEM_KEY = 'FOOTER'; +const DISCONNECTED_ITEM_KEY = 'DISCONNECTED'; +const ETHER_ITEM_KEY = 'ETHER'; export class Wallet extends React.Component<WalletProps, WalletState> { private _isUnmounted: boolean; @@ -196,6 +200,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const primaryText = 'wallet'; return ( <ListItem + key={HEADER_ITEM_KEY} primaryText={primaryText.toUpperCase()} leftIcon={<ActionAccountBalanceWallet color={colors.mediumBlue} />} style={styles.paddedItem} @@ -206,6 +211,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { private _renderDisconnectedRows() { return ( <WalletDisconnectedItem + key={DISCONNECTED_ITEM_KEY} providerType={this.props.providerType} injectedProviderName={this.props.injectedProviderName} onToggleLedgerDialog={this.props.onToggleLedgerDialog} @@ -217,6 +223,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const primaryText = utils.getAddressBeginAndEnd(userAddress); return ( <ListItem + key={HEADER_ITEM_KEY} primaryText={primaryText} leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} style={{ ...styles.paddedItem, ...styles.borderedItem }} @@ -226,7 +233,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { } private _renderFooterRows() { const primaryText = '+ other tokens'; - return <ListItem primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />; + return <ListItem key={FOOTER_ITEM_KEY} primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />; } private _renderEthRows() { const primaryText = this._renderAmount( @@ -245,7 +252,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; const etherToken = this._getEthToken(); return ( - <div> + <div key={ETHER_ITEM_KEY}> <ListItem primaryText={primaryText} leftIcon={<img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />} @@ -304,7 +311,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; const etherToken = this._getEthToken(); return ( - <div> + <div key={token.address}> <ListItem primaryText={amount} leftIcon={this._renderTokenIcon(token, tokenLink)} diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 3a876721a..be394afb9 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -111,7 +111,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther disableTouchRipple={true} style={walletItemStyles.focusedItem} innerDivStyle={styles.innerDiv} - leftIcon={this.state.isEthConversionHappening && this._renderIsEthConversionHappeningSpinner()} + leftIcon={this._renderIsEthConversionHappeningSpinner()} rightAvatar={this._renderWrapEtherConfirmationButton()} /> ); @@ -123,10 +123,12 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther }); } private _renderIsEthConversionHappeningSpinner() { - return ( + return this.state.isEthConversionHappening ? ( <div className="pl1" style={{ paddingTop: 10 }}> <i className="zmdi zmdi-spinner zmdi-hc-spin" /> </div> + ) : ( + undefined ); } private _renderWrapEtherConfirmationButton() { |