feat: multichain wallet modal (pancakeswap#12121)

<!--
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 enhancing wallet connectivity and user experience
within the PancakeSwap platform, particularly for Solana and EVM
wallets. It introduces new components, updates existing ones, and
improves error handling and wallet management.

### Detailed summary
- Added `Solflare` to wallet options.
- Introduced `WalletConnectorNotFoundError` and `WalletSwitchChainError`
classes.
- Updated wallet versioning across multiple packages.
- Enhanced `QRCode` component to accept dynamic sizes.
- Improved `ConnectedWalletsButton` for better account display.
- Updated state management for wallet visibility.
- Added `useSolanaLogin` hook for Solana wallet integration.
- Introduced wallet filtering logic for EVM and Solana.
- Refactored various components to support new wallet configurations.

> The following files were skipped due to too many changes:
`packages/ui-wallets/src/config/installed.ts`,
`packages/ui-wallets/src/components/SolanaProvider/index.tsx`,
`apps/web/src/views/Gift/components/GiftInfoDetailView.tsx`,
`apps/web/src/hooks/useAuth.tsx`,
`packages/ui-wallets/src/components/SocialLoginButton.tsx`,
`apps/web/src/wallet/WalletProvider.tsx`, `apps/web/src/utils/wagmi.ts`,
`apps/web/src/components/WalletModalV2/ReceiveOptionsView.tsx`,
`apps/web/src/components/WalletModalManager.tsx`,
`packages/ui-wallets/src/atom.ts`,
`apps/web/src/wallet/SolanaProvider.tsx`,
`packages/ui-wallets/src/types.ts`,
`apps/web/src/hooks/useAddressBalance.ts`,
`packages/ui-wallets/src/components/WalletSelect/WalletSelect.tsx`,
`packages/ui-wallets/src/state/atom.ts`,
`apps/web/src/views/Gift/components/ClaimGiftView.tsx`,
`packages/ui-wallets/src/components/SocialLogin.tsx`,
`packages/ui-wallets/src/components/WalletSelect/WalletSelectSection.tsx`,
`packages/ui-wallets/src/components/WalletSelect/MoreWalletSection.tsx`,
`apps/web/src/state/wallet/hooks.ts`,
`apps/web/src/views/SwapSimplify/InfinitySwap/FormMainInfinity.tsx`,
`apps/web/src/hooks/useSolanaTokenList.ts`,
`packages/ui-wallets/src/components/PreviewSection/NotInstalled.tsx`,
`packages/localization/src/config/translations.json`,
`apps/web/src/components/WalletModalV2/ConnectedWallets.tsx`,
`apps/web/src/components/Menu/UserMenu/index.tsx`,
`apps/gamification/config/wallet.ts`,
`packages/ui-wallets/src/components/WalletSelect/WalletChainSelect.tsx`,
`apps/web/src/config/wallet.ts`,
`packages/ui-wallets/src/components/MultichainWalletModal/MultichainWalletModal.tsx`,
`packages/ui-wallets/src/components/MultichainWalletModal/ModalContent.tsx`,
`apps/web/src/components/WalletModalV2/WalletModal.tsx`,
`packages/ui-wallets/src/config/wallets.ts`, `pnpm-lock.yaml`

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

<!-- end pr-codex -->

---------

Co-authored-by: chef-ryan <ryan@pancakeswap.com>
Co-authored-by: ChefEric <173023571+chef-eric@users.noreply.github.com>
Co-authored-by: chefphilip <chef.philip@pancakeswap.com>
Co-authored-by: memoyil <2213635+memoyil@users.noreply.github.com>
Co-authored-by: Chef Penguin <169036504+thechefpenguin@users.noreply.github.com>
Co-authored-by: chefjackson <116779127+chefjackson@users.noreply.github.com>
Co-authored-by: denis-orbs <101042147+denis-orbs@users.noreply.github.com>
Co-authored-by: PancakeSwap Bot <dev@pancakeswap.com>
Co-authored-by: Chef Yogi <99634186+Chef-Yogi@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: 11 people

.vscode/settings.json

@@ -50,6 +50,7 @@
     "sepolia",
     "SNBNB",
     "solana",
+    "Solflare",
     "stableswap",
     "stylelint",
     "tanstack",

apps/aptos/components/ConnectWalletButton.tsx

@@ -1,6 +1,5 @@
 import { Trans, useTranslation } from '@pancakeswap/localization'
-import { WalletModalV2 } from '@pancakeswap/ui-wallets'
-import { WalletModalV2Props } from '@pancakeswap/ui-wallets/src/types'
+import { LegacyWalletConfig, LegacyWalletModal, LegacyWalletModalProps } from '@pancakeswap/ui-wallets'
 import { Button, type ButtonProps } from '@pancakeswap/uikit'
 import { ConnectorNames, TOP_WALLET_MAP, wallets } from 'config/wallets'
 import { useAuth } from 'hooks/useAuth'
@@ -16,9 +15,9 @@ export const ConnectWalletButton = ({ children, ...props }: ButtonProps) => {
     setOpen(true)
   }
 
-  const handleLogin: WalletModalV2Props<ConnectorNames>['login'] = useCallback(
-    async (connectorID: ConnectorNames) => {
-      return login(connectorID).then((res) => ({
+  const handleLogin: LegacyWalletModalProps<ConnectorNames>['login'] = useCallback(
+    async (wallet: LegacyWalletConfig<ConnectorNames>) => {
+      return login(wallet.connectorId).then((res) => ({
         accounts: res?.account?.address ? [res.account?.address] : ([] as unknown as readonly [string, ...string[]]),
         chainId: res?.network,
       }))
@@ -31,7 +30,7 @@ export const ConnectWalletButton = ({ children, ...props }: ButtonProps) => {
       <Button width="100%" onClick={handleClick} {...props}>
         {children || <Trans>Connect Wallet</Trans>}
       </Button>
-      <WalletModalV2
+      <LegacyWalletModal
         fullSize={false}
         mevDocLink={null}
         docText={t('Learn How to Create and Connect')}

apps/aptos/config/wallets.ts

@@ -1,4 +1,4 @@
-import { WalletConfigV2, WalletIds } from '@pancakeswap/ui-wallets'
+import { LegacyWalletConfig, LegacyWalletIds } from '@pancakeswap/ui-wallets'
 
 export enum ConnectorNames {
   Petra = 'petra',
@@ -12,9 +12,9 @@ export enum ConnectorNames {
   Msafe = 'msafe',
 }
 
-export const wallets: WalletConfigV2<ConnectorNames>[] = [
+export const wallets: LegacyWalletConfig<ConnectorNames>[] = [
   {
-    id: WalletIds.Petra,
+    id: LegacyWalletIds.Petra,
     title: 'Petra',
     icon: '/images/wallets/petra.png',
     get installed() {
@@ -26,7 +26,7 @@ export const wallets: WalletConfigV2<ConnectorNames>[] = [
     },
   },
   {
-    id: WalletIds.Martian,
+    id: LegacyWalletIds.Martian,
     title: 'Martian',
     icon: '/images/wallets/martian.png',
     get installed() {
@@ -38,7 +38,7 @@ export const wallets: WalletConfigV2<ConnectorNames>[] = [
     },
   },
   {
-    id: WalletIds.Pontem,
+    id: LegacyWalletIds.Pontem,
     title: 'Pontem',
     icon: '/images/wallets/pontem.png',
     get installed() {
@@ -50,7 +50,7 @@ export const wallets: WalletConfigV2<ConnectorNames>[] = [
     },
   },
   {
-    id: WalletIds.TrustWallet,
+    id: LegacyWalletIds.Trust,
     title: 'Trust Wallet',
     icon: 'https://pancakeswap.finance/images/wallets/trust.png',
     get installed() {
@@ -60,7 +60,7 @@ export const wallets: WalletConfigV2<ConnectorNames>[] = [
     connectorId: ConnectorNames.TrustWallet,
   },
   {
-    id: WalletIds.SafePal,
+    id: LegacyWalletIds.SafePal,
     title: 'SafePal',
     icon: 'https://pancakeswap.finance/images/wallets/safepal.png',
     get installed() {
@@ -72,7 +72,7 @@ export const wallets: WalletConfigV2<ConnectorNames>[] = [
     },
   },
   {
-    id: WalletIds.Msafe,
+    id: LegacyWalletIds.Msafe,
     title: 'Msafe',
     icon: '/images/wallets/msafe.png',
     get installed() {
@@ -94,6 +94,6 @@ export const wallets: WalletConfigV2<ConnectorNames>[] = [
   },
 ]
 
-export const TOP_WALLET_MAP: WalletConfigV2<ConnectorNames>[] = [WalletIds.Pontem, WalletIds.Petra]
+export const TOP_WALLET_MAP: LegacyWalletConfig<ConnectorNames>[] = [LegacyWalletIds.Pontem, LegacyWalletIds.Petra]
   .map((id) => wallets.find((w) => w.id === id))
-  .filter((w): w is WalletConfigV2<ConnectorNames> => Boolean(w))
+  .filter((w): w is LegacyWalletConfig<ConnectorNames> => Boolean(w))

apps/gamification/components/ConnectWalletButton.tsx

@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from '@pancakeswap/localization'
-import { WalletConfigV2, WalletModalV2 } from '@pancakeswap/ui-wallets'
+import { LegacyWalletConfig, LegacyWalletModal } from '@pancakeswap/ui-wallets'
 import { Button, ButtonProps } from '@pancakeswap/uikit'
 import { ConnectorNames, createWallets, getDocLink, TOP_WALLET_MAP } from 'config/wallet'
 import { useActiveChainId } from 'hooks/useActiveChainId'
@@ -33,7 +33,7 @@ const ConnectWalletButton = ({ children, ...props }: ButtonProps) => {
       TOP_WALLET_MAP[chainId]
         ? TOP_WALLET_MAP[chainId]
             .map((id) => wallets.find((w) => w.id === id))
-            .filter<WalletConfigV2<ConnectorNames>>((w): w is WalletConfigV2<ConnectorNames> => Boolean(w))
+            .filter<LegacyWalletConfig<ConnectorNames>>((w): w is LegacyWalletConfig<ConnectorNames> => Boolean(w))
         : [],
     [wallets, chainId],
   )
@@ -50,7 +50,7 @@ const ConnectWalletButton = ({ children, ...props }: ButtonProps) => {
           z-index: 99;
         }
       `}</style>
-      <WalletModalV2
+      <LegacyWalletModal
         topWallets={topWallets}
         mevDocLink={null}
         docText={t('Learn How to Connect')}

apps/gamification/config/wallet.ts

@@ -1,6 +1,6 @@
 import { isCyberWallet } from '@cyberlab/cyber-app-sdk'
 import { ChainId } from '@pancakeswap/chains'
-import { WalletConfigV2, WalletIds } from '@pancakeswap/ui-wallets'
+import { LegacyWalletConfig, LegacyWalletIds } from '@pancakeswap/ui-wallets'
 import { WalletFilledIcon } from '@pancakeswap/uikit'
 import safeGetWindow from '@pancakeswap/utils/safeGetWindow'
 import { getTrustWalletProvider } from '@pancakeswap/wagmi/connectors/trustWallet'
@@ -24,13 +24,13 @@ export enum ConnectorNames {
   CyberWallet = 'cyberWallet',
 }
 
-export const TOP_WALLET_MAP: { [chainId: number]: WalletIds[] } = {
-  [ChainId.BSC]: [WalletIds.Metamask, WalletIds.Trust, WalletIds.Okx, WalletIds.BinanceW3W],
-  [ChainId.ETHEREUM]: [WalletIds.Metamask, WalletIds.Trust, WalletIds.Okx],
-  [ChainId.POLYGON_ZKEVM]: [WalletIds.Metamask, WalletIds.Trust, WalletIds.Okx],
-  [ChainId.ZKSYNC]: [WalletIds.Metamask, WalletIds.Trust, WalletIds.Okx],
-  [ChainId.ARBITRUM_ONE]: [WalletIds.Metamask, WalletIds.Trust, WalletIds.Okx],
-  [ChainId.BASE]: [WalletIds.Metamask, WalletIds.Trust, WalletIds.Okx],
+export const TOP_WALLET_MAP: { [chainId: number]: LegacyWalletIds[] } = {
+  [ChainId.BSC]: [LegacyWalletIds.Metamask, LegacyWalletIds.Trust, LegacyWalletIds.Okx, LegacyWalletIds.BinanceW3W],
+  [ChainId.ETHEREUM]: [LegacyWalletIds.Metamask, LegacyWalletIds.Trust, LegacyWalletIds.Okx],
+  [ChainId.POLYGON_ZKEVM]: [LegacyWalletIds.Metamask, LegacyWalletIds.Trust, LegacyWalletIds.Okx],
+  [ChainId.ZKSYNC]: [LegacyWalletIds.Metamask, LegacyWalletIds.Trust, LegacyWalletIds.Okx],
+  [ChainId.ARBITRUM_ONE]: [LegacyWalletIds.Metamask, LegacyWalletIds.Trust, LegacyWalletIds.Okx],
+  [ChainId.BASE]: [LegacyWalletIds.Metamask, LegacyWalletIds.Trust, LegacyWalletIds.Okx],
 }
 
 const createQrCode =
@@ -95,11 +95,11 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
 }: {
   chainId: number
   connect: ConnectMutateAsync<config, context>
-}): WalletConfigV2<ConnectorNames>[] => {
+}): LegacyWalletConfig<ConnectorNames>[] => {
   const qrCode = createQrCode(chainId, connect)
   return [
     {
-      id: WalletIds.Metamask,
+      id: LegacyWalletIds.Metamask,
       title: 'Metamask',
       icon: `${ASSET_CDN}/web/wallets/metamask.png`,
       get installed() {
@@ -112,7 +112,7 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       downloadLink: 'https://metamask.app.link/dapp/pancakeswap.finance/',
     },
     {
-      id: WalletIds.Trust,
+      id: LegacyWalletIds.Trust,
       title: 'Trust Wallet',
       icon: `${ASSET_CDN}/web/wallets/trust.png`,
       connectorId: ConnectorNames.TrustWallet,
@@ -128,7 +128,7 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       qrCode,
     },
     {
-      id: WalletIds.Okx,
+      id: LegacyWalletIds.Okx,
       title: 'OKX Wallet',
       icon: `${ASSET_CDN}/web/wallets/okx-wallet.png`,
       connectorId: ConnectorNames.Injected,
@@ -145,7 +145,7 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       qrCode,
     },
     {
-      id: WalletIds.BinanceW3W,
+      id: LegacyWalletIds.BinanceW3W,
       title: 'Binance Wallet',
       icon: `${ASSET_CDN}/web/wallets/binance-w3w.png`,
       connectorId: isBinanceWeb3WalletInstalled() ? ConnectorNames.Injected : ConnectorNames.BinanceW3W,
@@ -158,19 +158,19 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       },
     },
     {
-      id: WalletIds.Coinbase,
+      id: LegacyWalletIds.Coinbase,
       title: 'Coinbase Wallet',
       icon: `${ASSET_CDN}/web/wallets/coinbase.png`,
       connectorId: ConnectorNames.WalletLink,
     },
     {
-      id: WalletIds.Walletconnect,
+      id: LegacyWalletIds.Walletconnect,
       title: 'WalletConnect',
       icon: `${ASSET_CDN}/web/wallets/walletconnect.png`,
       connectorId: ConnectorNames.WalletConnect,
     },
     {
-      id: WalletIds.Opera,
+      id: LegacyWalletIds.Opera,
       title: 'Opera Wallet',
       icon: `${ASSET_CDN}/web/wallets/opera.png`,
       connectorId: ConnectorNames.Injected,
@@ -180,7 +180,7 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       downloadLink: 'https://www.opera.com/crypto/next',
     },
     {
-      id: WalletIds.Brave,
+      id: LegacyWalletIds.Brave,
       title: 'Brave Wallet',
       icon: `${ASSET_CDN}/web/wallets/brave.png`,
       connectorId: ConnectorNames.Injected,
@@ -190,7 +190,7 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       downloadLink: 'https://brave.com/wallet/',
     },
     {
-      id: WalletIds.Rabby,
+      id: LegacyWalletIds.Rabby,
       title: 'Rabby Wallet',
       icon: `${ASSET_CDN}/web/wallets/rabby.png`,
       get installed() {
@@ -206,7 +206,7 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       qrCode,
     },
     {
-      id: WalletIds.Math,
+      id: LegacyWalletIds.Math,
       title: 'MathWallet',
       icon: `${ASSET_CDN}/web/wallets/mathwallet.png`,
       connectorId: ConnectorNames.Injected,
@@ -216,7 +216,7 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       qrCode,
     },
     {
-      id: WalletIds.Tokenpocket,
+      id: LegacyWalletIds.Tokenpocket,
       title: 'TokenPocket',
       icon: `${ASSET_CDN}/web/wallets/tokenpocket.png`,
       connectorId: ConnectorNames.Injected,
@@ -226,7 +226,7 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       qrCode,
     },
     {
-      id: WalletIds.SafePal,
+      id: LegacyWalletIds.SafePal,
       title: 'SafePal',
       icon: `${ASSET_CDN}/web/wallets/safepal.png`,
       connectorId: ConnectorNames.Injected,
@@ -237,7 +237,7 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       qrCode,
     },
     {
-      id: WalletIds.Coin98,
+      id: LegacyWalletIds.Coin98,
       title: 'Coin98',
       icon: `${ASSET_CDN}/web/wallets/coin98.png`,
       connectorId: ConnectorNames.Injected,
@@ -247,7 +247,7 @@ const walletsConfig = <config extends Config = Config, context = unknown>({
       qrCode,
     },
     {
-      id: WalletIds.Cyberwallet,
+      id: LegacyWalletIds.Cyberwallet,
       title: 'CyberWallet',
       icon: `${ASSET_CDN}/web/wallets/cyberwallet.png`,
       connectorId: ConnectorNames.CyberWallet,
@@ -289,7 +289,7 @@ export const createWallets = <config extends Config = Config, context = unknown>
         ...config,
         // add injected icon if none of injected type wallets installed
         {
-          id: WalletIds.Injected,
+          id: LegacyWalletIds.Injected,
           title: 'Injected',
           icon: WalletFilledIcon,
           connectorId: ConnectorNames.Injected,

apps/gamification/hooks/useAuth.tsx

@@ -1,6 +1,6 @@
 import { ChainId } from '@pancakeswap/chains'
 import { useTranslation } from '@pancakeswap/localization'
-import { WalletConnectorNotFoundError, WalletSwitchChainError } from '@pancakeswap/ui-wallets'
+import { LegacyWalletConfig, WalletConnectorNotFoundError, WalletSwitchChainError } from '@pancakeswap/ui-wallets'
 import replaceBrowserHistory from '@pancakeswap/utils/replaceBrowserHistory'
 import { CHAIN_QUERY_NAME } from 'config/chains'
 import { ConnectorNames } from 'config/wallet'
@@ -17,8 +17,8 @@ const useAuth = () => {
   const { t } = useTranslation()
 
   const login = useCallback(
-    async (connectorID: ConnectorNames) => {
-      const findConnector = connectors.find((c) => c.id === connectorID)
+    async (wallet: LegacyWalletConfig<ConnectorNames>) => {
+      const findConnector = connectors.find((c) => c.id === wallet.connectorId)
       try {
         if (!findConnector) return undefined
 

apps/solana/package.json

@@ -63,15 +63,15 @@
     "@solana/spl-token": "~0.4.9",
     "@solana/spl-token-0.4": "npm:@solana/spl-token@0.4.0",
     "@solana/spl-token-registry": "~0.2.4574",
-    "@solana/wallet-adapter-base": "^0.9.23",
-    "@solana/wallet-adapter-exodus": "^0.1.18",
-    "@solana/wallet-adapter-glow": "^0.1.18",
-    "@solana/wallet-adapter-react": "0.15.36",
-    "@solana/wallet-adapter-react-ui": "0.9.36",
-    "@solana/wallet-adapter-slope": "^0.5.21",
-    "@solana/wallet-adapter-wallets": "^0.19.32",
+    "@solana/wallet-adapter-base": "catalog:",
+    "@solana/wallet-adapter-exodus": "catalog:",
+    "@solana/wallet-adapter-glow": "catalog:",
+    "@solana/wallet-adapter-react": "catalog:",
+    "@solana/wallet-adapter-react-ui": "catalog:",
+    "@solana/wallet-adapter-slope": "catalog:",
+    "@solana/wallet-adapter-wallets": "catalog:",
     "@solana/web3.js": "catalog:",
-    "@solflare-wallet/wallet-adapter": "^1.0.3",
+    "@solflare-wallet/wallet-adapter": "catalog:",
     "@tanstack/query-core": "^5.62.16",
     "@tanstack/react-query": "^5.52.1",
     "@tiplink/wallet-adapter": "^2.1.19",

apps/web/package.json

@@ -35,10 +35,10 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.797.0",
-    "@bnb-chain/canonical-bridge-sdk": "0.7.2",
-    "@bnb-chain/canonical-bridge-widget": "0.10.3",
     "@binance/w3w-utils": "1.1.7",
     "@binance/w3w-wagmi-connector-v2": "^1.2.8",
+    "@bnb-chain/canonical-bridge-sdk": "0.7.2",
+    "@bnb-chain/canonical-bridge-widget": "0.10.3",
     "@cyberlab/cyber-app-sdk": "v3.0.0-beta.5",
     "@datadog/browser-logs": "^5.8.0",
     "@datadog/browser-rum": "^5.8.0",
@@ -95,22 +95,21 @@
     "@solana/spl-token": "~0.4.9",
     "@solana/spl-token-0.4": "npm:@solana/spl-token@0.4.0",
     "@solana/spl-token-registry": "~0.2.4574",
-    "@solana/wallet-adapter-base": "^0.9.23",
-    "@solana/wallet-adapter-exodus": "^0.1.18",
-    "@solana/wallet-adapter-glow": "^0.1.18",
-    "@solana/wallet-adapter-react": "0.15.36",
-    "@solana/wallet-adapter-react-ui": "0.9.36",
-    "@solana/wallet-adapter-slope": "^0.5.21",
-    "@solana/wallet-adapter-wallets": "^0.19.32",
+    "@solana/wallet-adapter-base": "catalog:",
+    "@solana/wallet-adapter-exodus": "catalog:",
+    "@solana/wallet-adapter-glow": "catalog:",
+    "@solana/wallet-adapter-react": "catalog:",
+    "@solana/wallet-adapter-react-ui": "catalog:",
+    "@solana/wallet-adapter-slope": "catalog:",
+    "@solana/wallet-adapter-wallets": "catalog:",
     "@solana/web3.js": "catalog:",
-    "@solflare-wallet/wallet-adapter": "^1.0.3",
+    "@solflare-wallet/wallet-adapter": "catalog:",
     "@tanstack/react-query": "^5.52.1",
     "@vanilla-extract/next-plugin": "^2.3.0",
     "@vercel/functions": "catalog:",
     "@wagmi/core": "2.10.5",
     "@wallchain/sdk": "^0.6.8",
     "@walletconnect/notify-client": "^1.0.0",
-    "@walletconnect/solana-adapter": "^0.0.5",
     "@web3inbox/core": "1.2.0",
     "@web3inbox/react": "1.2.0",
     "@yornaath/batshit": "^0.9.0",