diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js index 14ec9f784..10472db12 100644 --- a/ui/components/app/signature-request-original/signature-request-original.component.js +++ b/ui/components/app/signature-request-original/signature-request-original.component.js @@ -50,7 +50,6 @@ export default class SignatureRequestOriginal extends Component { }; state = { - fromAccount: this.props.fromAccount, showSignatureRequestWarning: false, }; @@ -274,11 +273,13 @@ export default class SignatureRequestOriginal extends Component { }; render = () => { - const { messagesCount, conversionRate, nativeCurrency } = this.props; const { + messagesCount, + conversionRate, + nativeCurrency, fromAccount: { address, balance, name }, - showSignatureRequestWarning, - } = this.state; + } = this.props; + const { showSignatureRequestWarning } = this.state; const { t } = this.context; const rejectNText = t('rejectRequestsN', [messagesCount]); diff --git a/ui/hooks/useAssetDetails.js b/ui/hooks/useAssetDetails.js index 8d9de9c67..04e3e7201 100644 --- a/ui/hooks/useAssetDetails.js +++ b/ui/hooks/useAssetDetails.js @@ -1,22 +1,33 @@ +import { isEqual } from 'lodash'; import { useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import { getCollectibles } from '../ducks/metamask/metamask'; +import { getCollectibles, getTokens } from '../ducks/metamask/metamask'; import { getAssetDetails } from '../helpers/utils/token-util'; import { hideLoadingIndication, showLoadingIndication } from '../store/actions'; +import { isEqualCaseInsensitive } from '../../shared/modules/string-utils'; import { usePrevious } from './usePrevious'; +import { useTokenTracker } from './useTokenTracker'; export function useAssetDetails(tokenAddress, userAddress, transactionData) { const dispatch = useDispatch(); // state selectors const collectibles = useSelector(getCollectibles); + const tokens = useSelector(getTokens, isEqual); + const currentToken = tokens.find((token) => + isEqualCaseInsensitive(token.address, tokenAddress), + ); // in-hook state const [currentAsset, setCurrentAsset] = useState(null); + const { tokensWithBalances } = useTokenTracker( + currentToken ? [currentToken] : [], + ); // previous state checkers const prevTokenAddress = usePrevious(tokenAddress); const prevUserAddress = usePrevious(userAddress); const prevTransactionData = usePrevious(transactionData); + const prevTokenBalance = usePrevious(tokensWithBalances); useEffect(() => { async function getAndSetAssetDetails() { @@ -33,7 +44,8 @@ export function useAssetDetails(tokenAddress, userAddress, transactionData) { if ( tokenAddress !== prevTokenAddress || userAddress !== prevUserAddress || - transactionData !== prevTransactionData + transactionData !== prevTransactionData || + (prevTokenBalance && prevTokenBalance !== tokensWithBalances) ) { getAndSetAssetDetails(); } @@ -46,6 +58,8 @@ export function useAssetDetails(tokenAddress, userAddress, transactionData) { userAddress, transactionData, collectibles, + tokensWithBalances, + prevTokenBalance, ]); if (currentAsset) { diff --git a/ui/hooks/useAssetDetails.test.js b/ui/hooks/useAssetDetails.test.js index 31f6f6044..3fc591303 100644 --- a/ui/hooks/useAssetDetails.test.js +++ b/ui/hooks/useAssetDetails.test.js @@ -19,6 +19,7 @@ const renderUseAssetDetails = ({ chainId: '0x5', }, tokenList: {}, + tokens: [], }, };