fix: Add token to wallet in mobile and avoid extension conflicts (#11092

)

<!--
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 focuses on refactoring the wallet functionality in the
application. It replaces the previous synchronous token registration
check with an asynchronous approach and introduces a more structured
method for determining wallet compatibility and displaying wallet icons.

### Detailed summary
- Renamed `canRegisterToken` to `checkWalletCanRegisterToken` for
clarity.
- Changed `checkWalletCanRegisterToken` to an asynchronous function
using `Connector`.
- Introduced `useWalletCanRegisterToken` for querying token registration
support.
- Created `useWalletIcon` for fetching and displaying wallet icons based
on the connector.
- Updated `AddToWalletButton` to use the new hooks for token
registration and wallet icons.

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

<!-- end pr-codex -->

apps/web/src/components/AddToWallet/AddToWalletButton.tsx

@@ -15,7 +15,9 @@ import {
 import { Address } from 'viem'
 import { watchAsset } from 'viem/actions'
 import { useAccount, useWalletClient } from 'wagmi'
-import { canRegisterToken } from '../../utils/wallet'
+import { useQuery } from '@tanstack/react-query'
+import { checkWalletCanRegisterToken } from 'utils/wallet'
+import { useCallback } from 'react'
 import { BAD_SRCS } from '../Logo/constants'
 
 export enum AddToWalletTextOptions {
@@ -53,28 +55,65 @@ const getWalletText = (textOptions: AddToWalletTextOptions, tokenSymbol: string
   )
 }
 
-const getWalletIcon = (marginTextBetweenLogo: string, name?: string) => {
-  const iconProps = {
-    width: '16px',
-    ...(marginTextBetweenLogo && { ml: marginTextBetweenLogo }),
-  }
-  if (name && Icons[name]) {
-    const Icon = Icons[name]
-    return <Icon {...iconProps} />
-  }
-  if (window?.ethereum?.isTrust) {
-    return <TrustWalletIcon {...iconProps} />
-  }
-  if (window?.ethereum?.isCoinbaseWallet) {
-    return <CoinbaseWalletIcon {...iconProps} />
-  }
-  if (window?.ethereum?.isTokenPocket) {
-    return <TokenPocketIcon {...iconProps} />
-  }
-  if (window?.ethereum?.isMetaMask) {
-    return <MetamaskIcon {...iconProps} />
-  }
-  return <MetamaskIcon {...iconProps} />
+const useWalletIcon = (marginTextBetweenLogo: string, enabled = false) => {
+  const { connector } = useAccount()
+  return useQuery({
+    queryKey: ['walletIcon', connector?.uid],
+    queryFn: async () => {
+      if (!connector) {
+        return undefined
+      }
+
+      const name = connector?.name
+
+      const iconProps = {
+        width: '16px',
+        ...(marginTextBetweenLogo && { ml: marginTextBetweenLogo }),
+      }
+
+      if (name && Icons[name]) {
+        const Icon = Icons[name]
+        return <Icon {...iconProps} />
+      }
+
+      try {
+        if (typeof connector.getProvider !== 'function') {
+          return undefined
+        }
+
+        const provider = (await connector.getProvider()) as any
+
+        if (provider.isTrust) {
+          return <TrustWalletIcon {...iconProps} />
+        }
+        if (provider.isCoinbaseWallet) {
+          return <CoinbaseWalletIcon {...iconProps} />
+        }
+        if (provider.isTokenPocket) {
+          return <TokenPocketIcon {...iconProps} />
+        }
+        return <MetamaskIcon {...iconProps} />
+      } catch (error) {
+        console.error('Error fetching provider for wallet icon', error)
+      }
+      return undefined
+    },
+    enabled: Boolean(enabled && connector),
+    staleTime: Infinity,
+    retry: false,
+  })
+}
+
+const useWalletCanRegisterToken = () => {
+  const { connector } = useAccount()
+  const { data } = useQuery({
+    queryKey: ['walletSupportsTokenRegistration', connector?.uid],
+    queryFn: () => checkWalletCanRegisterToken(connector!),
+    enabled: Boolean(connector),
+    retry: false,
+  })
+
+  return { isCanRegisterToken: data ?? false }
 }
 
 const AddToWalletButton: React.FC<AddToWalletButtonProps & ButtonProps> = ({
@@ -92,12 +131,33 @@ const AddToWalletButton: React.FC<AddToWalletButtonProps & ButtonProps> = ({
   const { t } = useTranslation()
   const { connector, isConnected } = useAccount()
   const { data: walletClient } = useWalletClient()
-  const isCanRegisterToken = canRegisterToken()
+  const { isCanRegisterToken } = useWalletCanRegisterToken()
+  const { data: walletIcon } = useWalletIcon(marginTextBetweenLogo, isCanRegisterToken)
 
   const { targetRef, tooltipVisible, tooltip } = useTooltip(t('Add to your wallet'), {
     placement: tooltipPlacement,
+    avoidToStopPropagation: true,
   })
 
+  const handleOnClick = useCallback(async () => {
+    const image = tokenLogo ? (BAD_SRCS[tokenLogo] ? undefined : tokenLogo) : undefined
+    if (!walletClient || !tokenAddress || !tokenSymbol || !tokenDecimals) return
+    try {
+      await watchAsset(walletClient, {
+        // TODO: Add more types
+        type: 'ERC20',
+        options: {
+          address: tokenAddress as Address,
+          symbol: tokenSymbol,
+          image,
+          decimals: tokenDecimals,
+        },
+      })
+    } catch (error) {
+      console.error('Error watchAsset', error)
+    }
+  }, [tokenLogo, walletClient, tokenAddress, tokenSymbol, tokenDecimals])
+
   if (!walletClient) return null
   if (connector && connector.name === 'Binance') return null
   if (!(connector && isConnected)) return null
@@ -106,26 +166,9 @@ const AddToWalletButton: React.FC<AddToWalletButtonProps & ButtonProps> = ({
   return (
     <>
       <Flex alignItems="center" justifyContent="center" ref={targetRef} ml={ml} mr={mr}>
-        <Button
-          {...props}
-          title={t('Add to your wallet')}
-          onClick={() => {
-            const image = tokenLogo ? (BAD_SRCS[tokenLogo] ? undefined : tokenLogo) : undefined
-            if (!tokenAddress || !tokenSymbol || !tokenDecimals) return
-            watchAsset(walletClient, {
-              // TODO: Add more types
-              type: 'ERC20',
-              options: {
-                address: tokenAddress as Address,
-                symbol: tokenSymbol,
-                image,
-                decimals: tokenDecimals,
-              },
-            })
-          }}
-        >
+        <Button {...props} title={t('Add to your wallet')} onClick={handleOnClick}>
           {getWalletText(textOptions, tokenSymbol, t)}
-          {getWalletIcon(marginTextBetweenLogo, connector?.name)}
+          {walletIcon}
         </Button>
       </Flex>
       {tooltipVisible && tooltip}

apps/web/src/utils/wallet.ts

@@ -1,10 +1,18 @@
-// Set of helper functions to facilitate wallet setup
+import { Connector } from 'wagmi'
 
-export const canRegisterToken = () =>
-  typeof window !== 'undefined' &&
-  // @ts-ignore
-  !window?.ethereum?.isSafePal &&
-  (window?.ethereum?.isMetaMask ||
-    window?.ethereum?.isTrust ||
-    window?.ethereum?.isCoinbaseWallet ||
-    window?.ethereum?.isTokenPocket)
+export const checkWalletCanRegisterToken = async (connector: Connector) => {
+  try {
+    if (typeof connector.getProvider !== 'function') return false
+
+    const provider = (await connector.getProvider()) as any
+
+    return Boolean(
+      provider &&
+        !provider.isSafePal &&
+        (provider.isMetaMask || provider.isTrust || provider.isCoinbaseWallet || provider.isTokenPocket),
+    )
+  } catch (error) {
+    console.error(error, 'Error determining wallet token registration support')
+    return false
+  }
+}