aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon@0xproject.com>2018-04-06 03:14:43 +0800
committerGitHub <noreply@github.com>2018-04-06 03:14:43 +0800
commitd6176872f7041e2cd1d7ecfb12b0f2323c3459ad (patch)
tree85500a97a851ed07ef7014f1b3591501fac69de1 /packages/website/ts/components
parent7f7ddee0f95f3ed3e903c230088dbee4648771bd (diff)
parentc396be42b9365b5f2e6274d0a4e25e3e6e25cdd0 (diff)
downloaddexon-sol-tools-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar
dexon-sol-tools-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar.gz
dexon-sol-tools-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar.bz2
dexon-sol-tools-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar.lz
dexon-sol-tools-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar.xz
dexon-sol-tools-d6176872f7041e2cd1d7ecfb12b0f2323c3459ad.tar.zst
dexon-sol-tools-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/ts/components')
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx13
-rw-r--r--packages/website/ts/components/wallet/wrap_ether_item.tsx6
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;