From aa2eba8fe989e28d2f496ae7b9dac21a0c4d2608 Mon Sep 17 00:00:00 2001 From: gantunesr Date: Wed, 30 Jun 2021 21:55:36 -0400 Subject: [PATCH 01/15] fix(WatchAssetRequestComponent): Token balance --- app/components/UI/WatchAssetRequest/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/components/UI/WatchAssetRequest/index.js b/app/components/UI/WatchAssetRequest/index.js index 2651f41c88a..09c950eeb01 100644 --- a/app/components/UI/WatchAssetRequest/index.js +++ b/app/components/UI/WatchAssetRequest/index.js @@ -149,10 +149,11 @@ class WatchAssetRequest extends PureComponent { suggestedAssetMeta: { asset }, contractBalances } = this.props; + const address = Object.keys(contractBalances).find(key => key.toLowerCase() === asset.address); const balance = - asset.address in contractBalances - ? renderFromTokenMinimalUnit(contractBalances[asset.address], asset.decimals) - : '0'; + typeof address === 'undefined' + ? '0' + : renderFromTokenMinimalUnit(contractBalances[address], asset.decimals); return ( From 1e0c4b0684e0f20dc1c4b3c53fc68d959b93b501 Mon Sep 17 00:00:00 2001 From: gantunesr Date: Mon, 5 Jul 2021 12:25:40 -0400 Subject: [PATCH 02/15] fix(WatchAssetRequestComponent): Update --- app/components/UI/WatchAssetRequest/index.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/app/components/UI/WatchAssetRequest/index.js b/app/components/UI/WatchAssetRequest/index.js index 09c950eeb01..ecddde4c9cf 100644 --- a/app/components/UI/WatchAssetRequest/index.js +++ b/app/components/UI/WatchAssetRequest/index.js @@ -6,6 +6,7 @@ import { strings } from '../../../../locales/i18n'; import { connect } from 'react-redux'; import ActionView from '../ActionView'; import { renderFromTokenMinimalUnit } from '../../../util/number'; +import { toLowerCaseEquals } from '../../../util/general'; import TokenImage from '../../UI/TokenImage'; import Device from '../../../util/Device'; import Engine from '../../../core/Engine'; @@ -149,11 +150,8 @@ class WatchAssetRequest extends PureComponent { suggestedAssetMeta: { asset }, contractBalances } = this.props; - const address = Object.keys(contractBalances).find(key => key.toLowerCase() === asset.address); - const balance = - typeof address === 'undefined' - ? '0' - : renderFromTokenMinimalUnit(contractBalances[address], asset.decimals); + const address = Object.keys(contractBalances).find(key => toLowerCaseEquals(key, asset.address)); + const balance = address ? renderFromTokenMinimalUnit(contractBalances[address], asset.decimals) : '0'; return ( From 609837cf984c5b732629548ec87348e94a297654 Mon Sep 17 00:00:00 2001 From: gantunesr Date: Wed, 18 Aug 2021 18:51:09 -0400 Subject: [PATCH 03/15] fix(TokenBalance): Add hook to fetch token balances --- app/components/hooks/useTokenBalance.tsx | 26 ++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 app/components/hooks/useTokenBalance.tsx diff --git a/app/components/hooks/useTokenBalance.tsx b/app/components/hooks/useTokenBalance.tsx new file mode 100644 index 00000000000..faeeb025207 --- /dev/null +++ b/app/components/hooks/useTokenBalance.tsx @@ -0,0 +1,26 @@ +import { useState, useEffect, Dispatch, SetStateAction } from 'react'; +import Engine from '../../core/Engine'; + +const useTokenBalance = (tokenAddress: string, userAddress: string): [number, boolean, boolean] => { + // This hook should be only used with ERC20 tokens + const [balance, setBalance]: [number, Dispatch>] = useState(0); + const [loading, setLoading]: [boolean, Dispatch>] = useState(true); + const [error, setError]: [boolean, Dispatch>] = useState(false); + const { TokenBalancesController }: any = Engine.context; + + const fetchBalance = async (tokenAddress: string, userAddress: string): Promise => { + TokenBalancesController.getBalanceOf(tokenAddress, userAddress) + .then((balance: string) => setBalance(Number(balance))) + .catch(() => setError(true)) + .finally(() => setLoading(false)); + }; + + useEffect(() => { + fetchBalance(tokenAddress, userAddress); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [tokenAddress, userAddress]); + + return [balance, loading, error]; +}; + +export default useTokenBalance; From f2af3f0beb68047649f6fac45e1a6f2a5a438f9e Mon Sep 17 00:00:00 2001 From: gantunesr Date: Wed, 18 Aug 2021 18:52:58 -0400 Subject: [PATCH 04/15] refactor(TokenBalance): WatchAssetRequest component --- app/components/UI/WatchAssetRequest/index.js | 209 ++++++++++--------- 1 file changed, 108 insertions(+), 101 deletions(-) diff --git a/app/components/UI/WatchAssetRequest/index.js b/app/components/UI/WatchAssetRequest/index.js index d9d64f2e487..c03c72b33c9 100644 --- a/app/components/UI/WatchAssetRequest/index.js +++ b/app/components/UI/WatchAssetRequest/index.js @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react'; +import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { StyleSheet, View, Text } from 'react-native'; import { colors, fontStyles } from '../../../styles/common'; @@ -12,6 +12,7 @@ import Device from '../../../util/Device'; import Engine from '../../../core/Engine'; import URL from 'url-parse'; import AnalyticsV2 from '../../../util/analyticsV2'; +import useTokenBalance from '../../hooks/useTokenBalance'; const styles = StyleSheet.create({ root: { @@ -79,44 +80,30 @@ const styles = StyleSheet.create({ } }); -/** - * PureComponent that renders watch asset content - */ -class WatchAssetRequest extends PureComponent { - static propTypes = { - /** - * Callback triggered when this message signature is rejected - */ - onCancel: PropTypes.func, - /** - * Callback triggered when this message signature is approved - */ - onConfirm: PropTypes.func, - /** - * Token object - */ - suggestedAssetMeta: PropTypes.object, - /** - * Object containing token balances in the format address => balance - */ - contractBalances: PropTypes.object, - /** - * Object containing current page title, url, and icon href - */ - currentPageInformation: PropTypes.object - }; +const WatchAssetRequest = ({ + suggestedAssetMeta, + contractBalances, + currentPageInformation, + selectedAddress, + onCancel, + onConfirm +}) => { + useEffect( + () => async () => { + const { TokensController } = Engine.context; + const { suggestedAssetMeta } = this.props; + await TokensController.rejectWatchAsset(suggestedAssetMeta.id); + }, + [] + ); - getAnalyticsParams = () => { + const getAnalyticsParams = () => { try { - const { - suggestedAssetMeta: { asset }, - currentPageInformation - } = this.props; - + const { asset } = suggestedAssetMeta; const { NetworkController } = Engine.context; const { chainId, type } = NetworkController?.state?.provider || {}; - const url = new URL(currentPageInformation?.url); + return { token_address: asset?.address, token_symbol: asset?.symbol, @@ -131,90 +118,110 @@ class WatchAssetRequest extends PureComponent { } }; - componentWillUnmount = async () => { - const { TokensController } = Engine.context; - const { suggestedAssetMeta } = this.props; - await TokensController.rejectWatchAsset(suggestedAssetMeta.id); - }; - - onConfirm = async () => { - const { onConfirm, suggestedAssetMeta } = this.props; + const onConfirmPress = async () => { const { TokensController } = Engine.context; await TokensController.acceptWatchAsset(suggestedAssetMeta.id); - AnalyticsV2.trackEvent(AnalyticsV2.ANALYTICS_EVENTS.TOKEN_ADDED, this.getAnalyticsParams()); + AnalyticsV2.trackEvent(AnalyticsV2.ANALYTICS_EVENTS.TOKEN_ADDED, getAnalyticsParams()); onConfirm && onConfirm(); }; - render() { - const { - suggestedAssetMeta: { asset }, - contractBalances - } = this.props; - const address = Object.keys(contractBalances).find(key => toLowerCaseEquals(key, asset.address)); - const balance = address ? renderFromTokenMinimalUnit(contractBalances[address], asset.decimals) : '0'; - return ( - - - - {strings('watch_asset_request.title')} - - - - - - {strings('watch_asset_request.message')} - + const { asset } = suggestedAssetMeta; + const address = Object.keys(contractBalances).find(key => toLowerCaseEquals(key, asset.address)); - - - - {strings('watch_asset_request.token')} - + const [remoteBalance] = useTokenBalance(asset.address, selectedAddress); + const balance = renderFromTokenMinimalUnit(address ? contractBalances[address] : remoteBalance, asset.decimals); - - - - - - {asset.symbol} + return ( + + + + {strings('watch_asset_request.title')} + + + + + + {strings('watch_asset_request.message')} + + + + + + {strings('watch_asset_request.token')} + + + + + + + {asset.symbol} + - - - {strings('watch_asset_request.balance')} - + + + {strings('watch_asset_request.balance')} + - - - {balance} {asset.symbol} - - + + + {balance} {asset.symbol} + - - - ); - } -} + + + + ); +}; + +WatchAssetRequest.propTypes = { + /** + * Callback triggered when this message signature is rejected + */ + onCancel: PropTypes.func, + /** + * Callback triggered when this message signature is approved + */ + onConfirm: PropTypes.func, + /** + * Token object + */ + suggestedAssetMeta: PropTypes.object, + /** + * Current public address + */ + selectedAddress: PropTypes.string, + /** + * Object containing token balances in the format address => balance + */ + contractBalances: PropTypes.object, + /** + * Object containing current page title, url, and icon href + */ + currentPageInformation: PropTypes.object +}; const mapStateToProps = state => ({ - contractBalances: state.engine.backgroundState.TokenBalancesController.contractBalances + contractBalances: state.engine.backgroundState.TokenBalancesController.contractBalances, + selectedAddress: state.engine.backgroundState.PreferencesController.selectedAddress, + provider: state.engine.backgroundState.NetworkController.provider }); export default connect(mapStateToProps)(WatchAssetRequest); From fc8edb75b91c85afcde0f9d6a5ecbe0cfc65ce17 Mon Sep 17 00:00:00 2001 From: gantunesr Date: Wed, 18 Aug 2021 22:29:37 -0400 Subject: [PATCH 05/15] docs(TokenBalance): useTokenBalance hook --- app/components/hooks/useTokenBalance.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/components/hooks/useTokenBalance.tsx b/app/components/hooks/useTokenBalance.tsx index faeeb025207..8c3488b0baa 100644 --- a/app/components/hooks/useTokenBalance.tsx +++ b/app/components/hooks/useTokenBalance.tsx @@ -1,6 +1,13 @@ import { useState, useEffect, Dispatch, SetStateAction } from 'react'; import Engine from '../../core/Engine'; +/** + * Hook to handle the balance of ERC20 tokens + * @param {String} tokenAddress Token contract address + * @param {String} userAddress Public address which holds the token + * @returns {Handlers} Handlers `[balance, loading, error]` + */ + const useTokenBalance = (tokenAddress: string, userAddress: string): [number, boolean, boolean] => { // This hook should be only used with ERC20 tokens const [balance, setBalance]: [number, Dispatch>] = useState(0); From ee5d3710861e357e9502ec0616835b4d19e5ca33 Mon Sep 17 00:00:00 2001 From: gantunesr Date: Wed, 18 Aug 2021 22:58:38 -0400 Subject: [PATCH 06/15] fix(TokenBalance): Change condition for balance source --- app/components/UI/WatchAssetRequest/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/UI/WatchAssetRequest/index.js b/app/components/UI/WatchAssetRequest/index.js index 2af51c078b7..9c21fb859c3 100644 --- a/app/components/UI/WatchAssetRequest/index.js +++ b/app/components/UI/WatchAssetRequest/index.js @@ -128,8 +128,8 @@ const WatchAssetRequest = ({ const { asset } = suggestedAssetMeta; const address = Object.keys(contractBalances).find(key => toLowerCaseEquals(key, asset.address)); - const [remoteBalance] = useTokenBalance(asset.address, selectedAddress); - const balance = renderFromTokenMinimalUnit(address ? contractBalances[address] : remoteBalance, asset.decimals); + let [balance] = useTokenBalance(asset.address, selectedAddress); + balance = renderFromTokenMinimalUnit(address ? contractBalances[address] : balance, asset.decimals); return ( From b273d1bb8a355dabe3e66e9f19e70ab78b3b4e61 Mon Sep 17 00:00:00 2001 From: gantunesr Date: Wed, 18 Aug 2021 23:49:33 -0400 Subject: [PATCH 07/15] fix(TokenBalance): Change data type --- app/components/hooks/useTokenBalance.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/hooks/useTokenBalance.tsx b/app/components/hooks/useTokenBalance.tsx index 8c3488b0baa..6159160860d 100644 --- a/app/components/hooks/useTokenBalance.tsx +++ b/app/components/hooks/useTokenBalance.tsx @@ -8,16 +8,16 @@ import Engine from '../../core/Engine'; * @returns {Handlers} Handlers `[balance, loading, error]` */ -const useTokenBalance = (tokenAddress: string, userAddress: string): [number, boolean, boolean] => { +const useTokenBalance = (tokenAddress: string, userAddress: string): [string, boolean, boolean] => { // This hook should be only used with ERC20 tokens - const [balance, setBalance]: [number, Dispatch>] = useState(0); + const [balance, setBalance]: [string, Dispatch>] = useState('0'); const [loading, setLoading]: [boolean, Dispatch>] = useState(true); const [error, setError]: [boolean, Dispatch>] = useState(false); const { TokenBalancesController }: any = Engine.context; const fetchBalance = async (tokenAddress: string, userAddress: string): Promise => { TokenBalancesController.getBalanceOf(tokenAddress, userAddress) - .then((balance: string) => setBalance(Number(balance))) + .then((balance: string) => setBalance(JSON.stringify(balance))) .catch(() => setError(true)) .finally(() => setLoading(false)); }; From 659c404c688902a38a0966917e69723beee8351d Mon Sep 17 00:00:00 2001 From: gantunesr Date: Sat, 21 Aug 2021 16:49:17 -0400 Subject: [PATCH 08/15] test(WatchAssetRequest): Update --- app/components/UI/WatchAssetRequest/index.test.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/components/UI/WatchAssetRequest/index.test.js b/app/components/UI/WatchAssetRequest/index.test.js index 9b8c2545128..e87cb5a1624 100644 --- a/app/components/UI/WatchAssetRequest/index.test.js +++ b/app/components/UI/WatchAssetRequest/index.test.js @@ -3,6 +3,7 @@ import { shallow } from 'enzyme'; import WatchAssetRequest from './'; import configureMockStore from 'redux-mock-store'; import { BN } from 'ethereumjs-util'; +import { ROPSTEN } from '../../../constants/network'; const mockStore = configureMockStore(); @@ -13,6 +14,14 @@ describe('WatchAssetRequest', () => { backgroundState: { TokenBalancesController: { contractBalances: { '0x2': new BN(0) } + }, + PreferencesController: { + selectedAddress: '0xe7E125654064EEa56229f273dA586F10DF96B0a1' + }, + NetworkController: { + provider: { + type: ROPSTEN + } } } } From 010e9fc01e59d8f5954e4eabce4dda2ea9d35e07 Mon Sep 17 00:00:00 2001 From: gantunesr Date: Fri, 27 Aug 2021 21:53:28 -0400 Subject: [PATCH 09/15] fix(TokenBalance): Add try-catch --- app/components/UI/WatchAssetRequest/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/components/UI/WatchAssetRequest/index.js b/app/components/UI/WatchAssetRequest/index.js index 9c21fb859c3..08362e3da0a 100644 --- a/app/components/UI/WatchAssetRequest/index.js +++ b/app/components/UI/WatchAssetRequest/index.js @@ -126,10 +126,15 @@ const WatchAssetRequest = ({ }; const { asset } = suggestedAssetMeta; - const address = Object.keys(contractBalances).find(key => toLowerCaseEquals(key, asset.address)); + const address = Object.keys(contractBalances).find(key => toLowerCaseEquals(key, asset.address)); let [balance] = useTokenBalance(asset.address, selectedAddress); - balance = renderFromTokenMinimalUnit(address ? contractBalances[address] : balance, asset.decimals); + + try { + balance = renderFromTokenMinimalUnit(address ? contractBalances[address] : balance, asset.decimals); + } catch (e) { + balance = 0; + } return ( From db6619ba158d7c1193ad86ad36b01d572d60e10c Mon Sep 17 00:00:00 2001 From: gantunesr Date: Fri, 27 Aug 2021 21:53:48 -0400 Subject: [PATCH 10/15] fix(TokenBalance): Change type from string to BN --- app/components/hooks/useTokenBalance.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/components/hooks/useTokenBalance.tsx b/app/components/hooks/useTokenBalance.tsx index 6159160860d..656c864643a 100644 --- a/app/components/hooks/useTokenBalance.tsx +++ b/app/components/hooks/useTokenBalance.tsx @@ -1,5 +1,6 @@ import { useState, useEffect, Dispatch, SetStateAction } from 'react'; import Engine from '../../core/Engine'; +import { BN } from '@metamask/controllers'; /** * Hook to handle the balance of ERC20 tokens @@ -8,16 +9,16 @@ import Engine from '../../core/Engine'; * @returns {Handlers} Handlers `[balance, loading, error]` */ -const useTokenBalance = (tokenAddress: string, userAddress: string): [string, boolean, boolean] => { +const useTokenBalance = (tokenAddress: string, userAddress: string): [any, boolean, boolean] => { // This hook should be only used with ERC20 tokens - const [balance, setBalance]: [string, Dispatch>] = useState('0'); + const [balance, setBalance]: [BN | null, Dispatch>] = useState(null); const [loading, setLoading]: [boolean, Dispatch>] = useState(true); const [error, setError]: [boolean, Dispatch>] = useState(false); const { TokenBalancesController }: any = Engine.context; const fetchBalance = async (tokenAddress: string, userAddress: string): Promise => { TokenBalancesController.getBalanceOf(tokenAddress, userAddress) - .then((balance: string) => setBalance(JSON.stringify(balance))) + .then((balance: BN) => setBalance(balance)) .catch(() => setError(true)) .finally(() => setLoading(false)); }; From 59fce75f0f7b927db36a0dd5b3c5544fefe94840 Mon Sep 17 00:00:00 2001 From: gantunesr Date: Mon, 30 Aug 2021 19:29:48 -0400 Subject: [PATCH 11/15] fix(TokenBalance): Remove props from unmount in useEffect hook --- app/components/UI/WatchAssetRequest/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/components/UI/WatchAssetRequest/index.js b/app/components/UI/WatchAssetRequest/index.js index 08362e3da0a..cc145f5ec05 100644 --- a/app/components/UI/WatchAssetRequest/index.js +++ b/app/components/UI/WatchAssetRequest/index.js @@ -91,10 +91,9 @@ const WatchAssetRequest = ({ useEffect( () => async () => { const { TokensController } = Engine.context; - const { suggestedAssetMeta } = this.props; - await TokensController.rejectWatchAsset(suggestedAssetMeta.id); + typeof suggestedAssetMeta !== undefined && (await TokensController.rejectWatchAsset(suggestedAssetMeta.id)); }, - [] + [suggestedAssetMeta] ); const getAnalyticsParams = () => { From 8e83d21de7190db4e0ca01575fb0f75c03e3fd4e Mon Sep 17 00:00:00 2001 From: gantunesr Date: Tue, 7 Sep 2021 09:26:46 -0300 Subject: [PATCH 12/15] fix(WatchAsset): Address review comments --- app/components/UI/WatchAssetRequest/index.js | 26 ++++---------------- app/components/hooks/useTokenBalance.tsx | 18 +++++++------- 2 files changed, 14 insertions(+), 30 deletions(-) diff --git a/app/components/UI/WatchAssetRequest/index.js b/app/components/UI/WatchAssetRequest/index.js index 8c502a903fe..a8ab4e57d14 100644 --- a/app/components/UI/WatchAssetRequest/index.js +++ b/app/components/UI/WatchAssetRequest/index.js @@ -6,7 +6,6 @@ import { strings } from '../../../../locales/i18n'; import { connect } from 'react-redux'; import ActionView from '../ActionView'; import { renderFromTokenMinimalUnit } from '../../../util/number'; -import { toLowerCaseEquals } from '../../../util/general'; import TokenImage from '../../UI/TokenImage'; import Device from '../../../util/device'; import Engine from '../../../core/Engine'; @@ -80,14 +79,7 @@ const styles = StyleSheet.create({ }, }); -const WatchAssetRequest = ({ - suggestedAssetMeta, - contractBalances, - currentPageInformation, - selectedAddress, - onCancel, - onConfirm -}) => { +const WatchAssetRequest = ({ suggestedAssetMeta, currentPageInformation, selectedAddress, onCancel, onConfirm }) => { useEffect( () => async () => { const { TokensController } = Engine.context; @@ -125,12 +117,10 @@ const WatchAssetRequest = ({ }; const { asset } = suggestedAssetMeta; - - const address = Object.keys(contractBalances).find(key => toLowerCaseEquals(key, asset.address)); let [balance] = useTokenBalance(asset.address, selectedAddress); try { - balance = renderFromTokenMinimalUnit(address ? contractBalances[address] : balance, asset.decimals); + balance = renderFromTokenMinimalUnit(balance, asset.decimals); } catch (e) { balance = 0; } @@ -167,7 +157,7 @@ const WatchAssetRequest = ({ @@ -212,20 +202,14 @@ WatchAssetRequest.propTypes = { * Current public address */ selectedAddress: PropTypes.string, - /** - * Object containing token balances in the format address => balance - */ - contractBalances: PropTypes.object, /** * Object containing current page title, url, and icon href */ - currentPageInformation: PropTypes.object + currentPageInformation: PropTypes.object, }; -const mapStateToProps = state => ({ - contractBalances: state.engine.backgroundState.TokenBalancesController.contractBalances, +const mapStateToProps = (state) => ({ selectedAddress: state.engine.backgroundState.PreferencesController.selectedAddress, - provider: state.engine.backgroundState.NetworkController.provider }); export default connect(mapStateToProps)(WatchAssetRequest); diff --git a/app/components/hooks/useTokenBalance.tsx b/app/components/hooks/useTokenBalance.tsx index 656c864643a..c9a521356d5 100644 --- a/app/components/hooks/useTokenBalance.tsx +++ b/app/components/hooks/useTokenBalance.tsx @@ -4,31 +4,31 @@ import { BN } from '@metamask/controllers'; /** * Hook to handle the balance of ERC20 tokens - * @param {String} tokenAddress Token contract address - * @param {String} userAddress Public address which holds the token - * @returns {Handlers} Handlers `[balance, loading, error]` + * @property tokenAddress Token contract address + * @property userAddress Public address which holds the token + * @returns Array that consists of `[balance, loading, error]` */ -const useTokenBalance = (tokenAddress: string, userAddress: string): [any, boolean, boolean] => { +const useTokenBalance = (requestedTokenAddress: string, userCurrentAddress: string): [BN | null, boolean, boolean] => { // This hook should be only used with ERC20 tokens - const [balance, setBalance]: [BN | null, Dispatch>] = useState(null); + const [tokenBalance, setTokenBalance]: [BN | null, Dispatch>] = useState(null); const [loading, setLoading]: [boolean, Dispatch>] = useState(true); const [error, setError]: [boolean, Dispatch>] = useState(false); const { TokenBalancesController }: any = Engine.context; const fetchBalance = async (tokenAddress: string, userAddress: string): Promise => { TokenBalancesController.getBalanceOf(tokenAddress, userAddress) - .then((balance: BN) => setBalance(balance)) + .then((balance: BN) => setTokenBalance(balance)) .catch(() => setError(true)) .finally(() => setLoading(false)); }; useEffect(() => { - fetchBalance(tokenAddress, userAddress); + fetchBalance(requestedTokenAddress, userCurrentAddress); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [tokenAddress, userAddress]); + }, [requestedTokenAddress, userCurrentAddress]); - return [balance, loading, error]; + return [tokenBalance, loading, error]; }; export default useTokenBalance; From 6490c9334534de6f77a97b6a614c8fea270251c0 Mon Sep 17 00:00:00 2001 From: gantunesr Date: Tue, 7 Sep 2021 09:50:46 -0300 Subject: [PATCH 13/15] lint --- app/components/UI/WatchAssetRequest/index.test.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/components/UI/WatchAssetRequest/index.test.js b/app/components/UI/WatchAssetRequest/index.test.js index b7245b7754d..01ea9da2430 100644 --- a/app/components/UI/WatchAssetRequest/index.test.js +++ b/app/components/UI/WatchAssetRequest/index.test.js @@ -13,18 +13,18 @@ describe('WatchAssetRequest', () => { engine: { backgroundState: { TokenBalancesController: { - contractBalances: { '0x2': new BN(0) } + contractBalances: { '0x2': new BN(0) }, }, PreferencesController: { - selectedAddress: '0xe7E125654064EEa56229f273dA586F10DF96B0a1' + selectedAddress: '0xe7E125654064EEa56229f273dA586F10DF96B0a1', }, NetworkController: { provider: { - type: ROPSTEN - } - } - } - } + type: ROPSTEN, + }, + }, + }, + }, }; const wrapper = shallow( From 7de95c0b9b70c794683892fd5a11cbae6d4fdfcc Mon Sep 17 00:00:00 2001 From: gantunesr Date: Tue, 7 Sep 2021 10:19:29 -0300 Subject: [PATCH 14/15] Update docs --- app/components/hooks/useTokenBalance.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/hooks/useTokenBalance.tsx b/app/components/hooks/useTokenBalance.tsx index c9a521356d5..d9b7b5398bf 100644 --- a/app/components/hooks/useTokenBalance.tsx +++ b/app/components/hooks/useTokenBalance.tsx @@ -4,8 +4,8 @@ import { BN } from '@metamask/controllers'; /** * Hook to handle the balance of ERC20 tokens - * @property tokenAddress Token contract address - * @property userAddress Public address which holds the token + * @property requestedTokenAddress Token contract address + * @property userCurrentAddress Public address which holds the token * @returns Array that consists of `[balance, loading, error]` */ From 0277d3cda999b7b4068e4658dc0126e95adddd36 Mon Sep 17 00:00:00 2001 From: gantunesr Date: Tue, 7 Sep 2021 14:55:51 -0300 Subject: [PATCH 15/15] fix(TokenBalance): Handle crash --- app/components/UI/WatchAssetRequest/index.js | 7 +------ app/util/number/index.js | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/app/components/UI/WatchAssetRequest/index.js b/app/components/UI/WatchAssetRequest/index.js index a8ab4e57d14..945a89cefe9 100644 --- a/app/components/UI/WatchAssetRequest/index.js +++ b/app/components/UI/WatchAssetRequest/index.js @@ -118,12 +118,7 @@ const WatchAssetRequest = ({ suggestedAssetMeta, currentPageInformation, selecte const { asset } = suggestedAssetMeta; let [balance] = useTokenBalance(asset.address, selectedAddress); - - try { - balance = renderFromTokenMinimalUnit(balance, asset.decimals); - } catch (e) { - balance = 0; - } + balance = renderFromTokenMinimalUnit(balance, asset.decimals); return ( diff --git a/app/util/number/index.js b/app/util/number/index.js index 17111878ba3..73c13e5cf05 100644 --- a/app/util/number/index.js +++ b/app/util/number/index.js @@ -190,7 +190,7 @@ export function toTokenMinimalUnit(tokenValue, decimals) { * If value is less than 5 precision decimals will show '< 0.00001' */ export function renderFromTokenMinimalUnit(tokenValue, decimals, decimalsToShow = 5) { - const minimalUnit = fromTokenMinimalUnit(tokenValue, decimals); + const minimalUnit = fromTokenMinimalUnit(tokenValue || 0, decimals); const minimalUnitNumber = parseFloat(minimalUnit); let renderMinimalUnit; if (minimalUnitNumber < 0.00001 && minimalUnitNumber > 0) {