diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-04-06 03:14:43 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-04-06 03:14:43 +0800 |
commit | d6176872f7041e2cd1d7ecfb12b0f2323c3459ad (patch) | |
tree | 85500a97a851ed07ef7014f1b3591501fac69de1 /packages/website | |
parent | 7f7ddee0f95f3ed3e903c230088dbee4648771bd (diff) | |
parent | c396be42b9365b5f2e6274d0a4e25e3e6e25cdd0 (diff) | |
download | dexon-0x-contracts-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar dexon-0x-contracts-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar.gz dexon-0x-contracts-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar.bz2 dexon-0x-contracts-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar.lz dexon-0x-contracts-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar.xz dexon-0x-contracts-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar.zst dexon-0x-contracts-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.zip |
Merge pull request #504 from 0xProject/fix/website/wallet-key-warning
Fix missing key warnings in wallet component
Diffstat (limited to 'packages/website')
-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, 13 insertions, 6 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..a38163770 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,11 +123,11 @@ 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> - ); + ) : null; } private _renderWrapEtherConfirmationButton() { const isWrappingEth = this.props.direction === Side.Deposit; |