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

Merge pull request #504 from 0xProject/fix/website/wallet-key-warning

Browse Source 
Fix missing key warnings in wallet component
This commit is contained in:
Brandon Millman
2018-04-05 12:14:43 -07:00
committed by GitHub
parent 7f7ddee0f9 c396be42b9
commit d6176872f7
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -121,6 +121,10 @@ const ZRX_TOKEN_SYMBOL = 'ZRX';
const ETHER_SYMBOL = 'ETH'; const ETHER_SYMBOL = 'ETH';
const ICON_DIMENSION = 24; const ICON_DIMENSION = 24;
const TOKEN_AMOUNT_DISPLAY_PRECISION = 3; 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> { export class Wallet extends React.Component<WalletProps, WalletState> {
private _isUnmounted: boolean; private _isUnmounted: boolean;
@@ -196,6 +200,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const primaryText = 'wallet'; const primaryText = 'wallet';
return ( return (
<ListItem <ListItem
key={HEADER_ITEM_KEY}
primaryText={primaryText.toUpperCase()} primaryText={primaryText.toUpperCase()}
leftIcon={<ActionAccountBalanceWallet color={colors.mediumBlue} />} leftIcon={<ActionAccountBalanceWallet color={colors.mediumBlue} />}
style={styles.paddedItem} style={styles.paddedItem}
@@ -206,6 +211,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
private _renderDisconnectedRows() { private _renderDisconnectedRows() {
return ( return (
<WalletDisconnectedItem <WalletDisconnectedItem
key={DISCONNECTED_ITEM_KEY}
providerType={this.props.providerType} providerType={this.props.providerType}
injectedProviderName={this.props.injectedProviderName} injectedProviderName={this.props.injectedProviderName}
onToggleLedgerDialog={this.props.onToggleLedgerDialog} onToggleLedgerDialog={this.props.onToggleLedgerDialog}
@@ -217,6 +223,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const primaryText = utils.getAddressBeginAndEnd(userAddress); const primaryText = utils.getAddressBeginAndEnd(userAddress);
return ( return (
<ListItem <ListItem
key={HEADER_ITEM_KEY}
primaryText={primaryText} primaryText={primaryText}
leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
style={{ ...styles.paddedItem, ...styles.borderedItem }} style={{ ...styles.paddedItem, ...styles.borderedItem }}
@@ -226,7 +233,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
} }
private _renderFooterRows() { private _renderFooterRows() {
const primaryText = '+ other tokens'; const primaryText = '+ other tokens';
return <ListItem primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />; return <ListItem key={FOOTER_ITEM_KEY} primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />;
} }
private _renderEthRows() { private _renderEthRows() {
const primaryText = this._renderAmount( const primaryText = this._renderAmount(
@@ -245,7 +252,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
: { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const etherToken = this._getEthToken(); const etherToken = this._getEthToken();
return ( return (
<div> <div key={ETHER_ITEM_KEY}>
<ListItem <ListItem
primaryText={primaryText} primaryText={primaryText}
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} />}
@@ -304,7 +311,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
: { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const etherToken = this._getEthToken(); const etherToken = this._getEthToken();
return ( return (
<div> <div key={token.address}>
<ListItem <ListItem
primaryText={amount} primaryText={amount}
leftIcon={this._renderTokenIcon(token, tokenLink)} leftIcon={this._renderTokenIcon(token, tokenLink)}

6
packages/website/ts/components/wallet/wrap_ether_item.tsx
View File

@@ -111,7 +111,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
disableTouchRipple={true} disableTouchRipple={true}
style={walletItemStyles.focusedItem} style={walletItemStyles.focusedItem}
innerDivStyle={styles.innerDiv} innerDivStyle={styles.innerDiv}
leftIcon={this.state.isEthConversionHappening && this._renderIsEthConversionHappeningSpinner()} leftIcon={this._renderIsEthConversionHappeningSpinner()}
rightAvatar={this._renderWrapEtherConfirmationButton()} rightAvatar={this._renderWrapEtherConfirmationButton()}
/> />
); );
@@ -123,11 +123,11 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
}); });
} }
private _renderIsEthConversionHappeningSpinner() { private _renderIsEthConversionHappeningSpinner() {
return ( return this.state.isEthConversionHappening ? (
<div className="pl1" style={{ paddingTop: 10 }}> <div className="pl1" style={{ paddingTop: 10 }}>
<i className="zmdi zmdi-spinner zmdi-hc-spin" /> <i className="zmdi zmdi-spinner zmdi-hc-spin" />
</div> </div>
); ) : null;
} }
private _renderWrapEtherConfirmationButton() { private _renderWrapEtherConfirmationButton() {
const isWrappingEth = this.props.direction === Side.Deposit; const isWrappingEth = this.props.direction === Side.Deposit;