fix: fetch balances when opening token selector in LP page (#7321)

* fix: fetch balances when opening token selector in LP page

* fix: move PrefetchBalancesWrapper

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -31,11 +31,11 @@ import { useCloseModal, useFiatOnrampAvailability, useOpenModal, useToggleModal
 import { ApplicationModal } from '../../state/application/reducer'
 import { useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
 import StatusIcon from '../Identicon/StatusIcon'
+import { useCachedPortfolioBalancesQuery } from '../PrefetchBalancesWrapper/PrefetchBalancesWrapper'
 import { useToggleAccountDrawer } from '.'
 import IconButton, { IconHoverText, IconWithConfirmTextButton } from './IconButton'
 import MiniPortfolio from './MiniPortfolio'
 import { portfolioFadeInAnimation } from './MiniPortfolio/PortfolioRow'
-import { useCachedPortfolioBalancesQuery } from './PrefetchBalancesWrapper'
 
 const AuthenticatedHeaderWrapper = styled.div`
   padding: 20px 16px;

src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx

@@ -1,6 +1,6 @@
 import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
 import { TraceEvent } from 'analytics'
-import { useCachedPortfolioBalancesQuery } from 'components/AccountDrawer/PrefetchBalancesWrapper'
+import { useCachedPortfolioBalancesQuery } from 'components/PrefetchBalancesWrapper/PrefetchBalancesWrapper'
 import Row from 'components/Row'
 import { DeltaArrow, formatDelta } from 'components/Tokens/TokenDetails/Delta'
 import { TokenBalance } from 'graphql/data/__generated__/types-and-hooks'

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -4,10 +4,10 @@ import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
 import { TraceEvent } from 'analytics'
-import PrefetchBalancesWrapper from 'components/AccountDrawer/PrefetchBalancesWrapper'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
+import PrefetchBalancesWrapper from 'components/PrefetchBalancesWrapper/PrefetchBalancesWrapper'
 import Tooltip from 'components/Tooltip'
 import { isSupportedChain } from 'constants/chains'
 import ms from 'ms'

src/components/CurrencyInputPanel/index.tsx

@@ -5,6 +5,7 @@ import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
 import { TraceEvent } from 'analytics'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
+import PrefetchBalancesWrapper from 'components/PrefetchBalancesWrapper/PrefetchBalancesWrapper'
 import { isSupportedChain } from 'constants/chains'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
@@ -230,45 +231,50 @@ export default function CurrencyInputPanel({
                 />
               )}
 
-              <CurrencySelect
+              <PrefetchBalancesWrapper shouldFetchOnAccountUpdate={modalOpen}>
-                disabled={!chainAllowed}
+                <CurrencySelect
-                visible={currency !== undefined}
+                  disabled={!chainAllowed}
-                selected={!!currency}
+                  visible={currency !== undefined}
-                hideInput={hideInput}
+                  selected={!!currency}
-                className="open-currency-select-button"
+                  hideInput={hideInput}
-                onClick={() => {
+                  className="open-currency-select-button"
-                  if (onCurrencySelect) {
+                  onClick={() => {
-                    setModalOpen(true)
+                    if (onCurrencySelect) {
-                  }
+                      setModalOpen(true)
-                }}
+                    }
-                pointerEvents={!onCurrencySelect ? 'none' : undefined}
+                  }}
-              >
+                  pointerEvents={!onCurrencySelect ? 'none' : undefined}
-                <Aligner>
+                >
-                  <RowFixed>
+                  <Aligner>
-                    {pair ? (
+                    <RowFixed>
-                      <span style={{ marginRight: '0.5rem' }}>
+                      {pair ? (
-                        <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
+                        <span style={{ marginRight: '0.5rem' }}>
-                      </span>
+                          <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
-                    ) : (
+                        </span>
-                      currency && <CurrencyLogo style={{ marginRight: '0.5rem' }} currency={currency} size="24px" />
+                      ) : (
-                    )}
+                        currency && <CurrencyLogo style={{ marginRight: '0.5rem' }} currency={currency} size="24px" />
-                    {pair ? (
+                      )}
-                      <StyledTokenName className="pair-name-container">
+                      {pair ? (
-                        {pair?.token0.symbol}:{pair?.token1.symbol}
+                        <StyledTokenName className="pair-name-container">
-                      </StyledTokenName>
+                          {pair?.token0.symbol}:{pair?.token1.symbol}
-                    ) : (
+                        </StyledTokenName>
-                      <StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
+                      ) : (
-                        {(currency && currency.symbol && currency.symbol.length > 20
+                        <StyledTokenName
-                          ? currency.symbol.slice(0, 4) +
+                          className="token-symbol-container"
-                            '...' +
+                          active={Boolean(currency && currency.symbol)}
-                            currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
+                        >
-                          : currency?.symbol) || <Trans>Select a token</Trans>}
+                          {(currency && currency.symbol && currency.symbol.length > 20
-                      </StyledTokenName>
+                            ? currency.symbol.slice(0, 4) +
-                    )}
+                              '...' +
-                  </RowFixed>
+                              currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
-                  {onCurrencySelect && <StyledDropDown selected={!!currency} />}
+                            : currency?.symbol) || <Trans>Select a token</Trans>}
-                </Aligner>
+                        </StyledTokenName>
-              </CurrencySelect>
+                      )}
+                    </RowFixed>
+                    {onCurrencySelect && <StyledDropDown selected={!!currency} />}
+                  </Aligner>
+                </CurrencySelect>
+              </PrefetchBalancesWrapper>
             </InputRow>
             {Boolean(!hideInput && !hideBalance && currency) && (
               <FiatRow>

src/components/PrefetchBalancesWrapper/PrefetchBalancesWrapper.tsx

@@ -5,7 +5,7 @@ import usePrevious from 'hooks/usePrevious'
 import { atom, useAtom } from 'jotai'
 import { PropsWithChildren, useCallback, useEffect } from 'react'
 
-import { usePendingActivity } from './MiniPortfolio/Activity/hooks'
+import { usePendingActivity } from '../AccountDrawer/MiniPortfolio/Activity/hooks'
 
 /** Returns true if the number of pending activities has decreased */
 function useHasUpdatedTx() {

src/components/SearchModal/CurrencySearch.tsx

@@ -4,7 +4,7 @@ import { InterfaceEventName, InterfaceModalName } from '@uniswap/analytics-event
 import { Currency, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { Trace } from 'analytics'
-import { useCachedPortfolioBalancesQuery } from 'components/AccountDrawer/PrefetchBalancesWrapper'
+import { useCachedPortfolioBalancesQuery } from 'components/PrefetchBalancesWrapper/PrefetchBalancesWrapper'
 import { supportedChainIdFromGQLChain } from 'graphql/data/util'
 import useDebounce from 'hooks/useDebounce'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'

src/components/Web3Status/index.tsx

@@ -4,9 +4,9 @@ import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent, TraceEvent } from 'analytics'
 import PortfolioDrawer, { useAccountDrawer } from 'components/AccountDrawer'
 import { usePendingActivity } from 'components/AccountDrawer/MiniPortfolio/Activity/hooks'
-import PrefetchBalancesWrapper from 'components/AccountDrawer/PrefetchBalancesWrapper'
 import Loader from 'components/Icons/LoadingSpinner'
 import { IconWrapper } from 'components/Identicon/StatusIcon'
+import PrefetchBalancesWrapper from 'components/PrefetchBalancesWrapper/PrefetchBalancesWrapper'
 import { getConnection } from 'connection'
 import useENSName from 'hooks/useENSName'
 import useLast from 'hooks/useLast'