refactor(tokens): update networksIconSelector to return all icons (#5147

)

### Description

Accepting network ids as an array would mean that the selector
recomputes the result even if the same list of network ids are passed
and returns a new result, resulting in unnecessary rerenders. This
updates it so that the selector returns all network id's icons. An
alternative approach would be to set `memoizeOptions` like
`tokenIdsSelector`, but there doesn't seem to be any harm in returning
all network's icon in the function. The consumer of this selector can
pick the required networks' icon from the object

### Test plan

CI, ensured the below warning doesn't show in #5148 when merged with
this change
<img
src="https://github.com/valora-inc/wallet/assets/5062591/14ac3745-d92c-44a7-9a1a-4c93837eff2e"
width="200"/>


### Related issues

N/A

### Backwards compatibility

Yes

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [x] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

src/tokens/TokenImport.tsx

@@ -75,9 +75,7 @@ export default function TokenImportScreen(_: Props) {
   const walletAddress = useSelector(walletAddressSelector)
   const supportedTokens = useSelector((state) => tokensByIdSelector(state, supportedNetworkIds))
 
-  const networkIconByNetworkId = useSelector((state) =>
-    networksIconSelector(state, supportedNetworkIds)
-  )
+  const networkIconByNetworkId = useSelector(networksIconSelector)
 
   const validateAddress = (tokenAddress: string): tokenAddress is Address => {
     if (!tokenAddress || !networkId) return false

src/tokens/saga.test.ts

@@ -172,7 +172,7 @@ describe(fetchTokenBalancesSaga, () => {
     await expectSaga(fetchTokenBalancesSaga)
       .provide([
         [select(importedTokensSelector, supportedNetworks), []],
-        [select(networksIconSelector, supportedNetworks), {}],
+        [select(networksIconSelector), {}],
         [call(getTokensInfo), mockBlockchainApiTokenInfo],
         [select(walletAddressSelector), mockAccount],
         [call(fetchTokenBalancesForAddressByTokenId, mockAccount), fetchBalancesResponse],
@@ -202,7 +202,7 @@ describe(fetchTokenBalancesSaga, () => {
     await expectSaga(fetchTokenBalancesSaga)
       .provide([
         [select(importedTokensSelector, supportedNetworks), []],
-        [select(networksIconSelector, supportedNetworks), {}],
+        [select(networksIconSelector), {}],
         [call(getTokensInfo), mockBlockchainApiTokenInfo],
         [select(walletAddressSelector), mockAccount],
         [
@@ -245,7 +245,7 @@ describe(fetchTokenBalancesSaga, () => {
         [call(getTokensInfo), mockBlockchainApiTokenInfo],
         [select(importedTokensSelector, supportedNetworks), importedTokens],
         [
-          select(networksIconSelector, supportedNetworks),
+          select(networksIconSelector),
           {
             [NetworkId['celo-alfajores']]: 'newCeloUrl',
             [NetworkId['ethereum-sepolia']]: 'newEthUrl',

src/tokens/saga.ts

@@ -208,7 +208,7 @@ export function* fetchTokenBalancesSaga() {
 
     const supportedNetworks = getSupportedNetworkIdsForTokenBalances()
     const importedTokens = yield* select(importedTokensSelector, supportedNetworks)
-    const networkIconByNetworkId = yield* select(networksIconSelector, supportedNetworks)
+    const networkIconByNetworkId = yield* select(networksIconSelector)
 
     const supportedTokens = yield* call(getTokensInfo)
     const fetchedBalancesByTokenId = yield* call(fetchTokenBalancesForAddressByTokenId, address)

src/tokens/selectors.ts

@@ -90,13 +90,10 @@ export const tokensByIdSelector = createSelector(
 )
 
 export const networksIconSelector = createSelector(
-  [
-    (state: RootState, networkIds: NetworkId[]) => tokensByIdSelector(state, networkIds),
-    (_state: RootState, networkIds: NetworkId[]) => networkIds,
-  ],
-  (tokens, networkIds) => {
+  [(state: RootState) => tokensByIdSelector(state, Object.values(NetworkId))],
+  (tokens) => {
     const result: Partial<Record<NetworkId, string>> = {}
-    for (const networkId of networkIds) {
+    for (const networkId of Object.values(NetworkId)) {
       // We use as network icon the network icon of any token in that network.
       const token = Object.values(tokens).find(
         (token) => token?.networkId === networkId && token.networkIconUrl