From 26528ff0b469002ca5cbfdcafa3dd2fb131cf3ba Mon Sep 17 00:00:00 2001 From: rickycodes Date: Mon, 10 Aug 2020 00:56:19 -0400 Subject: [PATCH 1/4] Display correct balance from state --- .../UI/AccountList/AccountElement/index.js | 48 +++++++++++++++++-- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/app/components/UI/AccountList/AccountElement/index.js b/app/components/UI/AccountList/AccountElement/index.js index 9be650b9f2c..0c4e2687458 100644 --- a/app/components/UI/AccountList/AccountElement/index.js +++ b/app/components/UI/AccountList/AccountElement/index.js @@ -7,6 +7,10 @@ import { renderFromWei } from '../../../../util/number'; import { getTicker } from '../../../../util/transactions'; import { strings } from '../../../../../locales/i18n'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import { connect } from 'react-redux'; + +const EMPTY = '0x0'; +const BALANCE_KEY = 'balance'; const styles = StyleSheet.create({ account: { @@ -76,7 +80,7 @@ const styles = StyleSheet.create({ /** * View that renders specific account element in AccountList */ -export default class AccountElement extends PureComponent { +class AccountElement extends PureComponent { static propTypes = { /** * Callback to be called onPress @@ -94,7 +98,17 @@ export default class AccountElement extends PureComponent { * Whether the account element should be disabled (opaque and not clickable) */ disabled: PropTypes.bool, - item: PropTypes.object + item: PropTypes.object, + /** + * Selected address as string + */ + selectedAddress: PropTypes.string, + /** + * List of accounts from the AccountTrackerController + */ + accounts: PropTypes.object, + selectedAccount: PropTypes.object, + selectedAccountHasBalance: PropTypes.bool }; onPress = () => { @@ -110,7 +124,7 @@ export default class AccountElement extends PureComponent { }; render() { - const { disabled } = this.props; + const { disabled, selectedAddress, accounts, selectedAccount, selectedAccountHasBalance } = this.props; const { address, balance, ticker, name, isSelected, isImported, balanceError } = this.props.item; const selected = isSelected ? : null; const imported = isImported ? ( @@ -120,6 +134,12 @@ export default class AccountElement extends PureComponent { ) : null; + + const updatedBalanceFromState = + balance === EMPTY && selectedAddress === address && selectedAccount && selectedAccountHasBalance + ? accounts[selectedAddress][BALANCE_KEY] + : balance; + return ( - {renderFromWei(balance)} {getTicker(ticker)} + {renderFromWei(updatedBalanceFromState)} {getTicker(ticker)} {!!balanceError && ( {balanceError} @@ -150,3 +170,23 @@ export default class AccountElement extends PureComponent { ); } } + +const mapStateToProps = ({ + engine: { + backgroundState: { PreferencesController, AccountTrackerController } + } +}) => { + const { selectedAddress } = PreferencesController; + const { accounts } = AccountTrackerController; + const selectedAccount = accounts[selectedAddress]; + const selectedAccountHasBalance = + selectedAccount && Object.prototype.hasOwnProperty.call(selectedAccount, BALANCE_KEY); + return { + accounts, + selectedAddress, + selectedAccount, + selectedAccountHasBalance + }; +}; + +export default connect(mapStateToProps)(AccountElement); From 8ef7dfa4ac314bdc1d622dbd2e546f1a885aad18 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Mon, 10 Aug 2020 01:10:35 -0400 Subject: [PATCH 2/4] Document props --- app/components/UI/AccountList/AccountElement/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/components/UI/AccountList/AccountElement/index.js b/app/components/UI/AccountList/AccountElement/index.js index 0c4e2687458..3b100b99dc5 100644 --- a/app/components/UI/AccountList/AccountElement/index.js +++ b/app/components/UI/AccountList/AccountElement/index.js @@ -107,7 +107,13 @@ class AccountElement extends PureComponent { * List of accounts from the AccountTrackerController */ accounts: PropTypes.object, + /** + * The currently selected account + */ selectedAccount: PropTypes.object, + /** + * Does the currently selected account have a balance? + */ selectedAccountHasBalance: PropTypes.bool }; From cfc50cb84f882b151a82df1b3312dcdeacdde747 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Mon, 10 Aug 2020 01:17:19 -0400 Subject: [PATCH 3/4] Remove accounts prop --- app/components/UI/AccountList/AccountElement/index.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/app/components/UI/AccountList/AccountElement/index.js b/app/components/UI/AccountList/AccountElement/index.js index 3b100b99dc5..faca8cd8c0e 100644 --- a/app/components/UI/AccountList/AccountElement/index.js +++ b/app/components/UI/AccountList/AccountElement/index.js @@ -103,10 +103,6 @@ class AccountElement extends PureComponent { * Selected address as string */ selectedAddress: PropTypes.string, - /** - * List of accounts from the AccountTrackerController - */ - accounts: PropTypes.object, /** * The currently selected account */ @@ -130,7 +126,7 @@ class AccountElement extends PureComponent { }; render() { - const { disabled, selectedAddress, accounts, selectedAccount, selectedAccountHasBalance } = this.props; + const { disabled, selectedAddress, selectedAccount, selectedAccountHasBalance } = this.props; const { address, balance, ticker, name, isSelected, isImported, balanceError } = this.props.item; const selected = isSelected ? : null; const imported = isImported ? ( @@ -143,7 +139,7 @@ class AccountElement extends PureComponent { const updatedBalanceFromState = balance === EMPTY && selectedAddress === address && selectedAccount && selectedAccountHasBalance - ? accounts[selectedAddress][BALANCE_KEY] + ? selectedAccount[BALANCE_KEY] : balance; return ( @@ -188,7 +184,6 @@ const mapStateToProps = ({ const selectedAccountHasBalance = selectedAccount && Object.prototype.hasOwnProperty.call(selectedAccount, BALANCE_KEY); return { - accounts, selectedAddress, selectedAccount, selectedAccountHasBalance From 4cb235f97bd04e2d7945338537e207e26a3d4338 Mon Sep 17 00:00:00 2001 From: rickycodes Date: Mon, 10 Aug 2020 10:08:31 -0400 Subject: [PATCH 4/4] Use ownProps to get updatedBalanceFromStore --- .../UI/AccountList/AccountElement/index.js | 44 ++++++++----------- 1 file changed, 18 insertions(+), 26 deletions(-) diff --git a/app/components/UI/AccountList/AccountElement/index.js b/app/components/UI/AccountList/AccountElement/index.js index faca8cd8c0e..36c6b7f81ce 100644 --- a/app/components/UI/AccountList/AccountElement/index.js +++ b/app/components/UI/AccountList/AccountElement/index.js @@ -100,17 +100,9 @@ class AccountElement extends PureComponent { disabled: PropTypes.bool, item: PropTypes.object, /** - * Selected address as string + * Updated balance using stored in state */ - selectedAddress: PropTypes.string, - /** - * The currently selected account - */ - selectedAccount: PropTypes.object, - /** - * Does the currently selected account have a balance? - */ - selectedAccountHasBalance: PropTypes.bool + updatedBalanceFromStore: PropTypes.string }; onPress = () => { @@ -126,8 +118,8 @@ class AccountElement extends PureComponent { }; render() { - const { disabled, selectedAddress, selectedAccount, selectedAccountHasBalance } = this.props; - const { address, balance, ticker, name, isSelected, isImported, balanceError } = this.props.item; + const { disabled, updatedBalanceFromStore } = this.props; + const { address, ticker, name, isSelected, isImported, balanceError } = this.props.item; const selected = isSelected ? : null; const imported = isImported ? ( @@ -137,11 +129,6 @@ class AccountElement extends PureComponent { ) : null; - const updatedBalanceFromState = - balance === EMPTY && selectedAddress === address && selectedAccount && selectedAccountHasBalance - ? selectedAccount[BALANCE_KEY] - : balance; - return ( - {renderFromWei(updatedBalanceFromState)} {getTicker(ticker)} + {renderFromWei(updatedBalanceFromStore)} {getTicker(ticker)} {!!balanceError && ( {balanceError} @@ -173,20 +160,25 @@ class AccountElement extends PureComponent { } } -const mapStateToProps = ({ - engine: { - backgroundState: { PreferencesController, AccountTrackerController } - } -}) => { +const mapStateToProps = ( + { + engine: { + backgroundState: { PreferencesController, AccountTrackerController } + } + }, + { item: { balance, address } } +) => { const { selectedAddress } = PreferencesController; const { accounts } = AccountTrackerController; const selectedAccount = accounts[selectedAddress]; const selectedAccountHasBalance = selectedAccount && Object.prototype.hasOwnProperty.call(selectedAccount, BALANCE_KEY); + const updatedBalanceFromStore = + balance === EMPTY && selectedAddress === address && selectedAccount && selectedAccountHasBalance + ? selectedAccount[BALANCE_KEY] + : balance; return { - selectedAddress, - selectedAccount, - selectedAccountHasBalance + updatedBalanceFromStore }; };