Refactor token selectors (#8671)

Unused token selectors have been removed, and the remaining token
selector has been moved to the `metamask` Redux store.

ui/app/ducks/metamask/metamask.js

@@ -377,3 +377,5 @@ export const getSwitchToConnectedAlertEnabledness = (state) => getAlertEnabledne
 export const getUnconnectedAccountAlertEnabledness = (state) => getAlertEnabledness(state)[ALERT_TYPES.unconnectedAccount]
 
 export const getSwitchToConnectedAlertShown = (state) => state.metamask.switchToConnectedAlertShown
+
+export const getTokens = (state) => state.metamask.tokens

ui/app/hooks/tests/useTransactionDisplayData.test.js

@@ -4,7 +4,8 @@ import { renderHook } from '@testing-library/react-hooks'
 import sinon from 'sinon'
 import transactions from '../../../../test/data/transaction-data.json'
 import { useTransactionDisplayData } from '../useTransactionDisplayData'
-import { tokenSelector, getPreferences, getShouldShowFiat, getNativeCurrency, getCurrentCurrency } from '../../selectors'
+import { getPreferences, getShouldShowFiat, getNativeCurrency, getCurrentCurrency } from '../../selectors'
+import { getTokens } from '../../ducks/metamask/metamask'
 import * as i18nhooks from '../useI18nContext'
 import { getMessage } from '../../helpers/utils/i18n-helper'
 import messages from '../../../../app/_locales/en/messages.json'
@@ -81,7 +82,7 @@ describe('useTransactionDisplayData', function () {
     useI18nContext = sinon.stub(i18nhooks, 'useI18nContext')
     useI18nContext.returns((key, variables) => getMessage('en', messages, key, variables))
     useSelector.callsFake((selector) => {
-      if (selector === tokenSelector) {
+      if (selector === getTokens) {
         return []
       } else if (selector === getPreferences) {
         return {

ui/app/hooks/useTransactionDisplayData.js

@@ -26,7 +26,7 @@ import {
 import { useCurrencyDisplay } from './useCurrencyDisplay'
 import { useTokenDisplayValue } from './useTokenDisplayValue'
 import { useTokenData } from './useTokenData'
-import { tokenSelector } from '../selectors'
+import { getTokens } from '../ducks/metamask/metamask'
 
 /**
  * @typedef {Object} TransactionDisplayData
@@ -51,7 +51,7 @@ import { tokenSelector } from '../selectors'
  * @return {TransactionDisplayData}
  */
 export function useTransactionDisplayData (transactionGroup) {
-  const knownTokens = useSelector(tokenSelector)
+  const knownTokens = useSelector(getTokens)
   const t = useI18nContext()
   const { initialTransaction, primaryTransaction } = transactionGroup
   // initialTransaction contains the data we need to derive the primary purpose of this transaction group

ui/app/pages/confirm-approve/confirm-approve.container.js

@@ -3,9 +3,9 @@ import { compose } from 'redux'
 import { withRouter } from 'react-router-dom'
 import {
   contractExchangeRateSelector,
-  tokenSelector,
   transactionFeeSelector,
 } from '../../selectors'
+import { getTokens } from '../../ducks/metamask/metamask'
 import { showModal } from '../../store/actions'
 import {
   getTokenData,
@@ -45,7 +45,7 @@ const mapStateToProps = (state, ownProps) => {
     ethTransactionTotal,
     fiatTransactionTotal,
   } = transactionFeeSelector(state, transaction)
-  const tokens = tokenSelector(state)
+  const tokens = getTokens(state)
   const currentToken = tokens && tokens.find(({ address }) => tokenAddress === address)
   const { decimals, symbol: tokenSymbol } = currentToken || {}
 

ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js

@@ -4,9 +4,9 @@ import { withRouter } from 'react-router-dom'
 import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component'
 import {
   contractExchangeRateSelector,
-  tokenSelector,
   transactionFeeSelector,
 } from '../../selectors'
+import { getTokens } from '../../ducks/metamask/metamask'
 import {
   getTokenData,
 } from '../../helpers/utils/transactions.util'
@@ -38,7 +38,7 @@ const mapStateToProps = (state, ownProps) => {
     ethTransactionTotal,
     fiatTransactionTotal,
   } = transactionFeeSelector(state, transaction)
-  const tokens = tokenSelector(state)
+  const tokens = getTokens(state)
   const currentToken = tokens && tokens.find(({ address }) => tokenAddress === address)
   const { decimals, symbol: tokenSymbol } = currentToken || {}
 

ui/app/pages/send/send.container.js

@@ -21,7 +21,6 @@ import {
   getSendToNickname,
   getTokenBalance,
   getQrCodeData,
-  getTokens,
   getSelectedAddress,
   getAddressBook,
 } from '../../selectors'
@@ -43,6 +42,7 @@ import {
 import {
   fetchBasicGasEstimates,
 } from '../../ducks/gas/gas.duck'
+import { getTokens } from '../../ducks/metamask/metamask'
 import {
   calcGasTotal,
 } from './send.utils.js'

ui/app/selectors/index.js

@@ -4,5 +4,4 @@ export * from './first-time-flow'
 export * from './permissions'
 export * from './selectors'
 export * from './send'
-export * from './tokens'
 export * from './transactions'

ui/app/selectors/send.js

@@ -146,10 +146,6 @@ export function getGasButtonGroupShown (state) {
   return state.send.gasButtonGroupShown
 }
 
-export function getTokens (state) {
-  return state.metamask.tokens
-}
-
 export function getTitleKey (state) {
   const isEditing = Boolean(getSendEditingTransactionId(state))
   const isToken = Boolean(getSelectedToken(state))

ui/app/selectors/tests/send.test.js

@@ -31,7 +31,6 @@ import {
   gasFeeIsInError,
   getGasLoadingError,
   getGasButtonGroupShown,
-  getTokens,
   getTitleKey,
   isSendFormInError,
 } from '../send'
@@ -510,20 +509,6 @@ describe('send selectors', function () {
     })
   })
 
-  describe('add-recipient selectors', function () {
-    describe('getTokens()', function () {
-      it('should return empty array if no tokens in state', function () {
-        const state = {
-          metamask: {
-            tokens: [],
-          },
-        }
-
-        assert.deepStrictEqual(getTokens(state), [])
-      })
-    })
-  })
-
   describe('send-header selectors', function () {
 
     const getMetamaskSendMockState = (send) => {

ui/app/selectors/tests/tokens.test.js

@@ -1,28 +0,0 @@
-import assert from 'assert'
-import { selectedTokenSelector } from '../tokens'
-
-const metaToken = {
-  'address': '0x617b3f8050a0bd94b6b1da02b4384ee5b4df13f4',
-  'symbol': 'META',
-  'decimals': 18,
-}
-
-const state = {
-  metamask: {
-    selectedTokenAddress: '0x617b3f8050a0bd94b6b1da02b4384ee5b4df13f4',
-    tokens: [
-      {
-        'address': '0x06012c8cf97bead5deae237070f9587f8e7a266d',
-        'symbol': 'CK',
-        'decimals': 0,
-      },
-      metaToken,
-    ],
-  },
-}
-describe('Selected Token Selector', function () {
-  it('selects token info from tokens based on selectedTokenAddress in state', function () {
-    const tokenInfo = selectedTokenSelector(state)
-    assert.equal(tokenInfo, metaToken)
-  })
-})

ui/app/selectors/tokens.js

@@ -1,11 +0,0 @@
-import { createSelector } from 'reselect'
-
-export const selectedTokenAddressSelector = (state) => state.metamask.selectedTokenAddress
-export const tokenSelector = (state) => state.metamask.tokens
-export const selectedTokenSelector = createSelector(
-  tokenSelector,
-  selectedTokenAddressSelector,
-  (tokens = [], selectedTokenAddress = '') => {
-    return tokens.find(({ address }) => address === selectedTokenAddress)
-  }
-)