Merge pull request #286 from node-real/feat/1x-binance-web3-wallet-extension

fix: Restore BinanceWeb3WalletConnector for mobile in-app browser compatibility

Author: aiden-cao

.changeset/lemon-bugs-try.md

@@ -0,0 +1,6 @@
+---
+'@node-real/walletkit': minor
+---
+
+fix: restore BinanceWeb3WalletConnector for mobile in-app browser compatibility  
+

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

@@ -0,0 +1,55 @@
+import { sleep } from '@/utils/common';
+import { Chain, WindowProvider } from 'wagmi';
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { BINANCE_WEB3_WALLET_ID, BINANCE_WEB3_WALLET_NAME, isBinanceWeb3Wallet } from '.';
+import { isMobile } from '@/base/utils/mobile';
+
+export type BinanceWeb3WalletConnectorOptions = Required<
+  ConstructorParameters<typeof InjectedConnector>
+>[0]['options'];
+
+export interface CustomConstructorParams {
+  chains?: Chain[];
+  options?: BinanceWeb3WalletConnectorOptions;
+}
+
+export class BinanceWeb3WalletConnector extends InjectedConnector {
+  public id = BINANCE_WEB3_WALLET_ID;
+  protected shimDisconnectKey = `${this.id}.shimDisconnect`;
+
+  constructor(props: CustomConstructorParams) {
+    const { chains, options: _options } = props ?? {};
+
+    const options = {
+      name: BINANCE_WEB3_WALLET_NAME,
+      shimDisconnect: true,
+      getProvider,
+      ..._options,
+    };
+
+    if (typeof window !== 'undefined' && isMobile() && isBinanceWeb3Wallet()) {
+      (window.ethereum as any)?.enable?.();
+    }
+
+    super({
+      chains,
+      options,
+    });
+  }
+
+  public async getProvider(): Promise<WindowProvider | undefined> {
+    await sleep();
+    return this.options.getProvider();
+  }
+}
+
+function getProvider() {
+  if (typeof window === 'undefined') return;
+
+  if (isMobile()) {
+    return window.ethereum;
+  }
+
+  // Desktop: use Binance Web3 Wallet browser extension
+  return window.binancew3w?.ethereum;
+}

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

@@ -2,8 +2,7 @@ import { Chain } from 'wagmi';
 import { PartialCustomProps, WalletProps } from '..';
 import { BinanceWeb3WalletIcon, BinanceWeb3WalletTransparentIcon } from './icon';
 import { hasInjectedProvider } from '../utils';
-import { CustomConnector } from '../custom/connector';
-import { isMobile } from '@/base/utils/mobile';
+import { BinanceWeb3WalletConnector } from './connector';
 
 export const BINANCE_WEB3_WALLET_ID = 'binanceWeb3Wallet';
 export const BINANCE_WEB3_WALLET_NAME = 'Binance Web3 Wallet';
@@ -25,21 +24,9 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps {
     showQRCode: false,
     isInstalled: isBinanceWeb3Wallet,
     createConnector: (chains: Chain[]) => {
-      return new CustomConnector({
-        id: BINANCE_WEB3_WALLET_ID,
+      return new BinanceWeb3WalletConnector({
         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,
         },
       });

website/src/pages/index.mdx

@@ -18,7 +18,7 @@ npm i @node-real/walletkit@^1 wagmi@^1 viem@^1
 
 | wallet              | mainnet | testnet |
 | ------------------- | ------- | ------- |
-| binanceWeb3Wallet() | ✅      | ❌      |
+| binanceWeb3Wallet() | ✅      | ✅      |
 | bitgetWallet()      | ✅      | ❌      |
 | coinbaseWallet()    | ✅      | ✅      |
 | metaMask()          | ✅      | ✅      |