aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/wallet/wallet.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/wallet/wallet.tsx')
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx17
1 files changed, 12 insertions, 5 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 39c95d31c..d3dc8e3dd 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -71,7 +71,7 @@ interface AccessoryItemConfig {
}
const styles: Styles = {
- wallet: {
+ root: {
width: 346,
backgroundColor: colors.white,
borderBottomRightRadius: 10,
@@ -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;
@@ -174,7 +178,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
}
public render() {
const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError;
- return <div style={styles.wallet}>{isReadyToRender && this._renderRows()}</div>;
+ return <div style={styles.root}>{isReadyToRender && this._renderRows()}</div>;
}
private _renderRows() {
const isAddressAvailable = !_.isEmpty(this.props.userAddress);
@@ -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)}