feat: Add unverified hook warning tooltip message (#12472)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `whitelistLabeledHooksList` feature in the
PancakeSwap codebase, enhancing the handling of hooks by adding a
whitelist for certain hooks without metadata. Additionally, it optimizes
currency balance calculations using `useMemo` across several components.

### Detailed summary
- Added `whitelistLabeledHooksList` to manage whitelisted hooks.
- Introduced `whitelisted hooks` in
`packages/infinity-sdk/src/constants/hooksList/bsc.ts`.
- Updated multiple components to utilize `useMemo` for currency balance
calculations.
- Refactored `useCurrencyBalances` to improve performance.
- Enhanced `PoolTokenOverview` to check if hooks are whitelisted.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

---------

Co-authored-by: Chef Jerry <[email protected]>

Author: memoyil

.changeset/stale-kangaroos-judge.md

@@ -0,0 +1,5 @@
+---
+'@pancakeswap/infinity-sdk': patch
+---
+
+Added whitelistLabeledHooksList

apps/web/src/hooks/Tokens.ts

@@ -280,7 +280,7 @@ export function useToken(tokenAddress?: string, chainId?: number): ERC20Token |
 // otherwise returns the token
 export function useTokenByChainId(tokenAddress?: string, chainId?: number): ERC20Token | undefined | null {
   const unsupportedTokens = useUnsupportedTokens()
-  const tokens = useAllTokensByChainIds(chainId ? [chainId] : [])
+  const tokens = useAllTokensByChainIds(useMemo(() => (chainId ? [chainId] : []), [chainId]))
 
   const address = safeGetAddress(tokenAddress)
 
@@ -333,7 +333,7 @@ export function useTokensByChainId(
   chainId?: number,
 ): Record<string, ERC20Token | undefined | null> {
   const unsupportedTokens = useUnsupportedTokens()
-  const tokens = useAllTokensByChainIds(chainId ? [chainId] : [])
+  const tokens = useAllTokensByChainIds(useMemo(() => (chainId ? [chainId] : []), [chainId]))
 
   // Process addresses and separate existing tokens from ones that need to be fetched
   const processedData = useMemo(() => {

apps/web/src/state/wallet/hooks.ts

@@ -4,7 +4,7 @@ import { isSolana, NonEVMChainId } from '@pancakeswap/chains'
 import { selectedEvmWalletAtom, selectedSolanaWalletAtom } from '@pancakeswap/ui-wallets/src/state/atom'
 import useAccountActiveChain from 'hooks/useAccountActiveChain'
 import { useLocalStorage, useWallet } from '@solana/wallet-adapter-react'
-import { EvmConnectorNames, SolanaProviderLocalStorageKey, WalletAdaptedNetwork } from '@pancakeswap/ui-wallets'
+import { SolanaProviderLocalStorageKey, WalletAdaptedNetwork } from '@pancakeswap/ui-wallets'
 import { WalletName } from '@solana/wallet-adapter-base'
 import { multicallABI } from 'config/abi/Multicall'
 import { FAST_INTERVAL } from 'config/constants'
@@ -20,7 +20,6 @@ import { publicClient } from 'utils/viem'
 import { Address, erc20Abi, getAddress, isAddress } from 'viem'
 import { useAccount, useBalance } from 'wagmi'
 import { useAtomValue } from 'jotai'
-import { useSelectedWallet } from '@pancakeswap/ui-wallets/src/state/hooks'
 import { useMultipleContractSingleDataWagmi } from '../multicall/hooks'
 
 /**
@@ -104,6 +103,9 @@ export function useTokenBalance(account?: string, token?: Token): CurrencyAmount
   return tokenBalances[`${token.chainId}-${token.address}`]
 }
 
+/**
+ * Note: `currencies` should be memoized to prevent unnecessary recomputation and rerenders.
+ */
 export function useCurrencyBalances(
   account?: string,
   currencies?: (UnifiedCurrency | undefined | null)[],

apps/web/src/utils/getHookByAddress.ts

@@ -1,7 +1,10 @@
 import { ChainId } from '@pancakeswap/chains'
-import { HookData, hooksList } from '@pancakeswap/infinity-sdk'
+import { HookData, hooksList, whitelistLabeledHooksList } from '@pancakeswap/infinity-sdk'
+import { Address } from 'viem'
 import keyBy from 'lodash/keyBy'
 import memoize from 'lodash/memoize'
+import { isAddressEqual } from 'utils'
+import { ZERO_ADDRESS } from '@pancakeswap/sdk'
 
 export const getHooksMap = memoize((chainId: number) => {
   const list = hooksList[chainId] ?? []
@@ -11,3 +14,15 @@ export const getHooksMap = memoize((chainId: number) => {
 export const getHookByAddress = (chainId?: ChainId, address?: HookData['address']): HookData | undefined => {
   return chainId && address ? getHooksMap(chainId)[address.toLowerCase()] : undefined
 }
+
+export const isHookWhitelisted = memoize(
+  (chainId?: ChainId, address?: Address): boolean => {
+    if (!chainId || !address) return false
+    return Boolean(
+      isAddressEqual(address, ZERO_ADDRESS) ||
+        whitelistLabeledHooksList[chainId]?.some((addr) => isAddressEqual(addr, address)) ||
+        getHookByAddress(chainId, address),
+    )
+  },
+  (chainId, address) => `${chainId}#${address}`,
+)

apps/web/src/utils/getTokenLogoURL.ts

@@ -2,7 +2,6 @@ import { ChainId, isSolana, NonEVMChainId } from '@pancakeswap/chains'
 import { Token } from '@pancakeswap/sdk'
 import memoize from 'lodash/memoize'
 import { safeGetAddress } from 'utils'
-import { isAddress } from 'viem'
 
 const mapping = {
   [ChainId.BSC]: 'smartchain',
@@ -14,27 +13,26 @@ const mapping = {
   [NonEVMChainId.SOLANA]: 'solana',
 }
 
+const buildTrustWalletLogoURL = (address?: string, chainId?: number): string | null => {
+  if (!address || !chainId || !mapping[chainId]) return null
+
+  const formattedAddress = isSolana(chainId) ? address : safeGetAddress(address)
+
+  if (!formattedAddress) return null
+
+  return `https://assets-cdn.trustwallet.com/blockchains/${mapping[chainId]}/assets/${formattedAddress}/logo.png`
+}
+
 const getTokenLogoURL = memoize(
   (token?: Token) => {
-    if (token && mapping[token.chainId] && isAddress(token.address)) {
-      return `https://assets-cdn.trustwallet.com/blockchains/${mapping[token.chainId]}/assets/${
-        isSolana(token.chainId) ? token.address : safeGetAddress(token.address)
-      }/logo.png`
-    }
-    return null
+    if (!token) return null
+    return buildTrustWalletLogoURL(token.address, token.chainId)
   },
   (t) => `${t?.chainId}#${t?.address}`,
 )
 
 export const getTokenLogoURLByAddress = memoize(
-  (address?: string, chainId?: number) => {
-    if (address && chainId && mapping[chainId] && isAddress(address)) {
-      return `https://assets-cdn.trustwallet.com/blockchains/${mapping[chainId]}/assets/${safeGetAddress(
-        address,
-      )}/logo.png`
-    }
-    return null
-  },
+  (address?: string, chainId?: number) => buildTrustWalletLogoURL(address, chainId),
   (address, chainId) => `${chainId}#${address}`,
 )
 

apps/web/src/views/AddLiquidityInfinity/components/SubmitButton.tsx

@@ -107,7 +107,10 @@ export const SubmitButton = (props: AtomBoxProps) => {
     }),
     [depositCurrencyAmount0, depositCurrencyAmount1],
   )
-  const [currency0Balance, currency1Balance] = useCurrencyBalances(account ?? undefined, [currencyA, currencyB])
+  const [currency0Balance, currency1Balance] = useCurrencyBalances(
+    account ?? undefined,
+    useMemo(() => [currencyA, currencyB], [currencyA, currencyB]),
+  )
 
   const {
     approve: approveACallback,

apps/web/src/views/CreateLiquidityPool/components/SubmitCreateButton.tsx

@@ -178,7 +178,10 @@ export const SubmitCreateButton: React.FC<SubmitCreateButtonProps> = ({ ...boxPr
   const { binStep, lowerBinId, upperBinId, activeId } = useInfinityBinQueryState()
   const { maxBinId, minBinId } = useBinIdRange()
 
-  const [currency0Balance, currency1Balance] = useCurrencyBalances(account, [currency0, currency1])
+  const [currency0Balance, currency1Balance] = useCurrencyBalances(
+    account,
+    useMemo(() => [currency0, currency1], [currency0, currency1]),
+  )
   const {
     approve: approveACallback,
     revoke: revokeACallback,

apps/web/src/views/IncreaseLiquidity/hooks/useIncreaseForm.ts

@@ -32,7 +32,10 @@ export const useIncreaseForm = ({
   const [outputAmountRaw, setOutputAmountRaw] = useState('')
 
   const { address: account } = useAccount()
-  const [inputBalance, outputBalance] = useCurrencyBalances(account, [currency0, currency1])
+  const [inputBalance, outputBalance] = useCurrencyBalances(
+    account,
+    useMemo(() => [currency0, currency1], [currency0, currency1]),
+  )
 
   const inputAmount: CurrencyAmount<Currency> | undefined = useMemo(() => {
     return tryParseCurrencyAmount(inputAmountRaw, currency0)

apps/web/src/views/PCSLimitOrders/hooks/useLimitOrderUserBalance.ts

@@ -6,7 +6,6 @@ import { BigNumber as BN } from 'bignumber.js'
 import { formatAmount } from '@pancakeswap/utils/formatFractions'
 import { Rounding } from '@pancakeswap/swap-sdk-core'
 import { useUnifiedUSDPriceAmount } from 'hooks/useStablecoinPrice'
-import { useRouter } from 'next/router'
 import { formattedAmountsAtom } from '../state/form/inputAtoms'
 import { Field } from '../types/limitOrder.types'
 import { inputCurrencyAtom, outputCurrencyAtom } from '../state/currency/currencyAtoms'
@@ -16,14 +15,15 @@ import { MIN_BNB_VALUE, MIN_USD_VALUE } from '../constants'
  * Check token balance for Limit Order
  */
 export const useLimitOrderUserBalance = () => {
-  const router = useRouter()
   const { account } = useAccountActiveChain()
   const inputCurrency = useAtomValue(inputCurrencyAtom)
   const outputCurrency = useAtomValue(outputCurrencyAtom)
   const formattedAmounts = useAtomValue(formattedAmountsAtom)
 
-  const [inputBalance] = useCurrencyBalances(account, [inputCurrency ?? undefined])
-  const [outputBalance] = useCurrencyBalances(account, [outputCurrency ?? undefined])
+  const [inputBalance, outputBalance] = useCurrencyBalances(
+    account,
+    useMemo(() => [inputCurrency ?? undefined, outputCurrency ?? undefined], [inputCurrency, outputCurrency]),
+  )
 
   const amountUSD = useUnifiedUSDPriceAmount(
     inputCurrency ?? undefined,

apps/web/src/views/Swap/Twap/Twap.tsx

@@ -30,12 +30,12 @@ import { useQuoteContext } from 'quoter/hook/QuoteContext'
 import { multicallGasLimitAtom } from 'quoter/hook/useMulticallGasLimit'
 import { QuoteProvider } from 'quoter/QuoteProvider'
 import { createQuoteQuery } from 'quoter/utils/createQuoteQuery'
-import { memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, Suspense, useCallback, useMemo, useRef } from 'react'
 import { useCurrentBlock } from 'state/block/hooks'
 import { Field } from 'state/swap/actions'
 import { useDefaultsFromURLSearch, useSwapState } from 'state/swap/hooks'
 import { useSwapActionHandlers } from 'state/swap/useSwapActionHandlers'
-import { useCurrencyBalances } from 'state/wallet/hooks'
+import { useCurrencyBalance } from 'state/wallet/hooks'
 import { keyframes, styled } from 'styled-components'
 import { maxAmountSpend } from 'utils/maxAmountSpend'
 import { useAccount } from 'wagmi'
@@ -182,7 +182,7 @@ const TokenPanelInput = ({
   const { t } = useTranslation()
   const loadedUrlParams = useDefaultsFromURLSearch()
 
-  const [inputBalance] = useCurrencyBalances(account, [inputCurrency, outputCurrency])
+  const inputBalance = useCurrencyBalance(account, inputCurrency)
 
   const maxAmountInput = useMemo(() => maxAmountSpend(inputBalance), [inputBalance])