feat: add deeplink support for binance web3 wallet on bitcoin (#4748)

Author: 0xmkh

.changeset/smart-lions-fail.md

@@ -0,0 +1,29 @@
+---
+'@reown/appkit-controllers': patch
+'pay-test-exchange': patch
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-codemod': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-pay': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-testing': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-universal-connector': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Added support for opening Binance Web3 Wallet via deeplink for Bitcoin

packages/controllers/src/utils/MobileWallet.ts

@@ -1,6 +1,6 @@
 import { ConstantsUtil } from '@reown/appkit-common'
 
-import type { ChainControllerState } from '../controllers/ChainController.js'
+import { ChainController, type ChainControllerState } from '../controllers/ChainController.js'
 
 /*
  * Exclude wallets that do not support relay connections but have custom deeplink mechanisms
@@ -20,6 +20,17 @@ export const CUSTOM_DEEPLINK_WALLETS = {
   COINBASE: {
     id: 'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa',
     url: 'https://go.cb-w.com'
+  },
+  /*
+   * Got details from their npm package:
+   * https://www.npmjs.com/package/@binance/w3w-utils?activeTab=code
+   * https://developers.binance.com/docs/binance-w3w/evm-compatible-provider#getdeeplink
+   */
+  BINANCE: {
+    id: '8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4',
+    appId: 'yFK5FCqYprrXDiVFbhyRx7',
+    deeplink: 'bnc://app.binance.com/mp/app',
+    url: 'https://app.binance.com/en/download'
   }
 }
 
@@ -56,5 +67,32 @@ export const MobileWalletUtil = {
         window.location.href = `${CUSTOM_DEEPLINK_WALLETS.COINBASE.url}/dapp?cb_url=${encodedHref}`
       }
     }
+
+    /*
+     * Binance Web3 Wallet doesn't support WalletConnect for Bitcoin.
+     * For now we use their deeplink to open the in-app browser instead.
+     */
+    if (namespace === ConstantsUtil.CHAIN.BITCOIN) {
+      if (id === CUSTOM_DEEPLINK_WALLETS.BINANCE.id && !('binancew3w' in window)) {
+        const activeCaipNetwork = ChainController.state.activeCaipNetwork
+
+        const startPagePath = window.btoa('/pages/browser/index')
+        const startPageQuery = window.btoa(
+          `url=${encodedHref}&defaultChainId=${activeCaipNetwork?.id ?? 1}`
+        )
+
+        const deeplink = new URL(CUSTOM_DEEPLINK_WALLETS.BINANCE.deeplink)
+
+        deeplink.searchParams.set('appId', CUSTOM_DEEPLINK_WALLETS.BINANCE.appId)
+        deeplink.searchParams.set('startPagePath', startPagePath)
+        deeplink.searchParams.set('startPageQuery', startPageQuery)
+
+        const universalLink = new URL(CUSTOM_DEEPLINK_WALLETS.BINANCE.url)
+
+        universalLink.searchParams.set('_dp', window.btoa(deeplink.toString()))
+
+        window.location.href = universalLink.toString()
+      }
+    }
   }
 }

packages/controllers/tests/utils/MobileWallet.test.ts

@@ -12,10 +12,15 @@ const mockWindow = {
   }
 }
 
+const actualWindow = window
+
 describe('MobileWalletUtil', () => {
   beforeEach(() => {
     vi.restoreAllMocks()
-    vi.stubGlobal('window', { location: { href: ORIGINAL_HREF } })
+    vi.stubGlobal('window', {
+      ...actualWindow,
+      location: { href: ORIGINAL_HREF }
+    })
 
     mockChainControllerState({ activeChain: ConstantsUtil.CHAIN.SOLANA })
   })
@@ -33,6 +38,26 @@ describe('MobileWalletUtil', () => {
     expect(window.location.href).toBe(expectedUrl)
   })
 
+  it('should redirect to Binance Web3 Wallet when Binance is not installed', () => {
+    MobileWalletUtil.handleMobileDeeplinkRedirect(
+      CUSTOM_DEEPLINK_WALLETS.BINANCE.id,
+      ConstantsUtil.CHAIN.BITCOIN
+    )
+
+    const actualUrl = new URL(window.location.href)
+    const actualDpEncoded = actualUrl.searchParams.get('_dp')!
+    const actualDp = new URL(atob(actualDpEncoded))
+
+    const encodedHref = encodeURIComponent(ORIGINAL_HREF)
+    const expectedStartPagePath = window.btoa('/pages/browser/index')
+    const expectedStartPageQuery = window.btoa(`url=${encodedHref}&defaultChainId=1`)
+
+    expect(actualUrl.origin + actualUrl.pathname).toBe(CUSTOM_DEEPLINK_WALLETS.BINANCE.url)
+    expect(actualDp.searchParams.get('appId')).toBe(CUSTOM_DEEPLINK_WALLETS.BINANCE.appId)
+    expect(actualDp.searchParams.get('startPagePath')).toBe(expectedStartPagePath)
+    expect(actualDp.searchParams.get('startPageQuery')).toBe(expectedStartPageQuery)
+  })
+
   it('should not redirect when Phantom is installed', () => {
     vi.stubGlobal('window', {
       ...mockWindow,
@@ -48,6 +73,21 @@ describe('MobileWalletUtil', () => {
     expect(window.location.href).toBe(originalHref)
   })
 
+  it('should not redirect when Binance Web3 Wallet is installed', () => {
+    vi.stubGlobal('window', {
+      ...mockWindow,
+      binancew3w: {}
+    })
+
+    const originalHref = window.location.href
+    MobileWalletUtil.handleMobileDeeplinkRedirect(
+      CUSTOM_DEEPLINK_WALLETS.BINANCE.id,
+      ConstantsUtil.CHAIN.BITCOIN
+    )
+
+    expect(window.location.href).toBe(originalHref)
+  })
+
   it('should redirect to Coinbase Wallet when it is not installed', () => {
     MobileWalletUtil.handleMobileDeeplinkRedirect(
       CUSTOM_DEEPLINK_WALLETS.COINBASE.id,