feat: add desktop extension support for Binance Web3 Wallet

Author: aiden-cao

.changeset/moody-shrimps-melt.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': minor
+---
+
+feat: add desktop extension support for Binance Web3 Wallet

.claude/settings.local.json

@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(/tmp/comparison.txt:*)",
+      "Read(//tmp/**)",
+      "WebFetch(domain:developers.binance.com)",
+      "Bash(npm run:*)",
+      "Bash(git stash:*)",
+      "Bash(grep \"\"version\"\":*)",
+      "Bash(npx tsc:*)"
+    ]
+  }
+}

examples/nextjs/pages/_app.tsx

@@ -10,7 +10,12 @@ import {
   WalletKitProvider,
   getDefaultConfig,
 } from '@node-real/walletkit';
-import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets';
+import {
+  binanceWeb3Wallet,
+  trustWallet,
+  metaMask,
+  walletConnect,
+} from '@node-real/walletkit/wallets';
 
 const config = createConfig(
   getDefaultConfig({
@@ -22,7 +27,7 @@ const config = createConfig(
     walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
 
     chains,
-    connectors: [trustWallet(), metaMask(), walletConnect()],
+    connectors: [binanceWeb3Wallet(), trustWallet(), metaMask(), walletConnect()],
   }),
 );
 

examples/vite/src/App.tsx

@@ -8,7 +8,12 @@ import {
   WalletKitOptions,
   SwitchNetworkModal,
 } from '@node-real/walletkit';
-import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets';
+import {
+  binanceWeb3Wallet,
+  trustWallet,
+  metaMask,
+  walletConnect,
+} from '@node-real/walletkit/wallets';
 
 const config = createConfig(
   getDefaultConfig({
@@ -20,7 +25,7 @@ const config = createConfig(
     walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
 
     chains,
-    connectors: [trustWallet(), metaMask(), walletConnect()],
+    connectors: [binanceWeb3Wallet(), trustWallet(), metaMask(), walletConnect()],
   }),
 );
 

packages/walletkit/src/typings.d.ts

@@ -12,6 +12,7 @@ declare global {
     tokenpocket: any;
     okexchain: any;
     bitkeep: any;
+    binancew3w: any;
   }
 }
 

packages/walletkit/src/wallets/binanceWeb3Wallet/connector.ts

@@ -2,7 +2,8 @@ import { Chain } from 'wagmi';
 import { PartialCustomProps, WalletProps } from '..';
 import { BinanceWeb3WalletIcon, BinanceWeb3WalletTransparentIcon } from './icon';
 import { hasInjectedProvider } from '../utils';
-import { BinanceWeb3WalletConnector } from './connector';
+import { CustomConnector } from '../custom/connector';
+import { isMobile } from '@/base/utils/mobile';
 
 export const BINANCE_WEB3_WALLET_ID = 'binanceWeb3Wallet';
 export const BINANCE_WEB3_WALLET_NAME = 'Binance Web3 Wallet';
@@ -21,13 +22,24 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps {
       default: 'https://www.binance.com/en/web3wallet',
     },
     spinnerColor: undefined,
-    showQRCode: true,
+    showQRCode: false,
     isInstalled: isBinanceWeb3Wallet,
     createConnector: (chains: Chain[]) => {
-      return new BinanceWeb3WalletConnector({
+      return new CustomConnector({
+        id: BINANCE_WEB3_WALLET_ID,
         chains,
         options: {
+          name: BINANCE_WEB3_WALLET_NAME,
           shimDisconnect: true,
+          getProvider() {
+            if (typeof window === 'undefined') return;
+
+            if (isMobile()) {
+              return window.ethereum;
+            }
+
+            return window.binancew3w?.ethereum;
+          },
           ...connectorOptions,
         },
       });
@@ -44,7 +56,8 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps {
 }
 
 export function isBinanceWeb3Wallet() {
-  return hasInjectedProvider('isBinance' as any);
+  if (typeof window === 'undefined') return false;
+  return !!window.binancew3w?.ethereum || hasInjectedProvider('isBinance' as any);
 }
 
 const getDeepLink = (url: string) => {

packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx

@@ -96,7 +96,12 @@ import {
   WalletKitOptions,
   SwitchNetworkModal,
 } from '@node-real/walletkit';
-import { metaMask, trustWallet, walletConnect } from '@node-real/walletkit/wallets';
+import {
+  binanceWeb3Wallet,
+  metaMask,
+  trustWallet,
+  walletConnect,
+} from '@node-real/walletkit/wallets';
 
 const config = createConfig(
   getDefaultConfig({
@@ -108,7 +113,7 @@ const config = createConfig(
     walletConnectProjectId: 'xxx',
 
     chains,
-    connectors: [trustWallet(), metaMask(), walletConnect()],
+    connectors: [binanceWeb3Wallet(), trustWallet(), metaMask(), walletConnect()],
   }),
 );