fix: use InjectedConnector in binance dapp browser (#2297)

* feat: update binance wallet * chore: changeset --------- Co-authored-by: zane-x <[email protected]> Co-authored-by: Daniel Sinclair <[email protected]>
rainbow-me · Jan 23, 2025 · f89eb92 · f89eb92
1 parent 0cb1977
commit f89eb92
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 45 deletions.
diff --git a/.changeset/breezy-tigers-work.md b/.changeset/breezy-tigers-work.md
@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Improved support for the Binance Wallet dApp browser
diff --git a/packages/rainbowkit/src/types/utils.ts b/packages/rainbowkit/src/types/utils.ts
@@ -23,6 +23,7 @@ export type WalletProviderFlags =
   | 'isBifrost'
   | 'isBitKeep'
   | 'isBitski'
+  | 'isBinance'
   | 'isBlockWallet'
   | 'isBraveWallet'
   | 'isCoinbaseWallet'

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/binanceWallet/binanceWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/binanceWallet/binanceWallet.ts
@@ -1,55 +1,81 @@
 import { isAndroid } from '../../../utils/isMobile';
 import type { DefaultWalletOptions, Wallet } from '../../Wallet';
+import {
+  getInjectedConnector,
+  hasInjectedProvider,
+} from '../../getInjectedConnector';
 import { getWalletConnectConnector } from '../../getWalletConnectConnector';
 
 export type BinanceWalletOptions = DefaultWalletOptions;
 
 export const binanceWallet = ({
   projectId,
   walletConnectParameters,
-}: BinanceWalletOptions): Wallet => ({
-  id: 'binance',
-  name: 'Binance Wallet',
-  iconUrl: async () => (await import('./binanceWallet.svg')).default,
-  iconBackground: '#000000',
-  downloadUrls: {
-    android: 'https://play.google.com/store/apps/details?id=com.binance.dev',
-    ios: 'https://apps.apple.com/us/app/id1436799971',
-    mobile: 'https://www.binance.com/en/download',
-    qrCode: 'https://www.binance.com/en/web3wallet',
-  },
-  mobile: {
-    getUri: (uri: string) => {
-      return isAndroid()
-        ? uri
-        : `bnc://app.binance.com/cedefi/wc?uri=${encodeURIComponent(uri)}`;
-    },
-  },
-  qrCode: {
-    getUri: (uri: string) => uri,
-    instructions: {
-      learnMoreUrl: 'https://www.binance.com/en/web3wallet',
-      steps: [
-        {
-          description: 'wallet_connectors.binance.qr_code.step1.description',
-          step: 'install',
-          title: 'wallet_connectors.binance.qr_code.step1.title',
-        },
-        {
-          description: 'wallet_connectors.binance.qr_code.step2.description',
-          step: 'create',
-          title: 'wallet_connectors.binance.qr_code.step2.title',
-        },
-        {
-          description: 'wallet_connectors.binance.qr_code.step3.description',
-          step: 'scan',
-          title: 'wallet_connectors.binance.qr_code.step3.title',
-        },
-      ],
+}: BinanceWalletOptions): Wallet => {
+  const isBinanceInjected = hasInjectedProvider({
+    flag: 'isBinance',
+  });
+  const shouldUseWalletConnect = !isBinanceInjected;
+
+  return {
+    id: 'binance',
+    name: 'Binance Wallet',
+    rdns: 'com.binance.wallet',
+    iconUrl: async () => (await import('./binanceWallet.svg')).default,
+    iconBackground: '#000000',
+    installed: !shouldUseWalletConnect ? isBinanceInjected : undefined,
+    downloadUrls: {
+      android: 'https://play.google.com/store/apps/details?id=com.binance.dev',
+      ios: 'https://apps.apple.com/us/app/id1436799971',
+      mobile: 'https://www.binance.com/en/download',
+      qrCode: 'https://www.binance.com/en/web3wallet',
     },
-  },
-  createConnector: getWalletConnectConnector({
-    projectId,
-    walletConnectParameters,
-  }),
-});
+    mobile: shouldUseWalletConnect
+      ? {
+          getUri: (uri: string) => {
+            return isAndroid()
+              ? uri
+              : `bnc://app.binance.com/cedefi/wc?uri=${encodeURIComponent(
+                  uri,
+                )}`;
+          },
+        }
+      : undefined,
+    qrCode: shouldUseWalletConnect
+      ? {
+          getUri: (uri: string) => uri,
+          instructions: {
+            learnMoreUrl: 'https://www.binance.com/en/web3wallet',
+            steps: [
+              {
+                description:
+                  'wallet_connectors.binance.qr_code.step1.description',
+                step: 'install',
+                title: 'wallet_connectors.binance.qr_code.step1.title',
+              },
+              {
+                description:
+                  'wallet_connectors.binance.qr_code.step2.description',
+                step: 'create',
+                title: 'wallet_connectors.binance.qr_code.step2.title',
+              },
+              {
+                description:
+                  'wallet_connectors.binance.qr_code.step3.description',
+                step: 'scan',
+                title: 'wallet_connectors.binance.qr_code.step3.title',
+              },
+            ],
+          },
+        }
+      : undefined,
+    createConnector: shouldUseWalletConnect
+      ? getWalletConnectConnector({
+          projectId,
+          walletConnectParameters,
+        })
+      : getInjectedConnector({
+          flag: 'isBinance',
+        }),
+  };
+};