feat: binanceWallet (#2072)

.changeset/loud-lobsters-behave.md

@@ -0,0 +1,6 @@
+---
+"@rainbow-me/rainbowkit": patch
+"site": patch
+---
+
+Added Binance Web3 Wallet support with `binanceWallet` wallet connector

packages/example/src/wagmi.ts

@@ -2,6 +2,7 @@ import { type Chain, getDefaultConfig } from '@rainbow-me/rainbowkit';
 import {
   argentWallet,
   bifrostWallet,
+  binanceWallet,
   bitgetWallet,
   bitskiWallet,
   bitverseWallet,
@@ -179,6 +180,7 @@ export const config = getDefaultConfig({
         bitverseWallet,
         bloomWallet,
         bybitWallet,
+        binanceWallet,
         clvWallet,
         compassWallet,
         coin98Wallet,

packages/rainbowkit/src/locales/en_US.json

@@ -389,6 +389,23 @@
       }
     },
 
+    "binance": {
+      "qr_code": {
+        "step1": {
+          "description": "We recommend putting Binance on your home screen for faster access to your wallet.",
+          "title": "Open the Binance app"
+        },
+        "step2": {
+          "description": "You can easily backup your wallet using our backup feature on your phone.",
+          "title": "Create or Import a Wallet"
+        },
+        "step3": {
+          "description": "After you scan, a connection prompt will appear for you to connect your wallet.",
+          "title": "Tap the WalletConnect button"
+        }
+      }
+    },
+
     "coin98": {
       "qr_code": {
         "step1": {

packages/rainbowkit/src/wallets/walletConnectors/binanceWallet/binanceWallet.ts

@@ -0,0 +1,55 @@
+import { isAndroid } from '../../../utils/isMobile';
+import { DefaultWalletOptions, Wallet } from '../../Wallet';
+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',
+        },
+      ],
+    },
+  },
+  createConnector: getWalletConnectConnector({
+    projectId,
+    walletConnectParameters,
+  }),
+});

packages/rainbowkit/src/wallets/walletConnectors/index.ts

@@ -1,5 +1,6 @@
 import { argentWallet } from './argentWallet/argentWallet';
 import { bifrostWallet } from './bifrostWallet/bifrostWallet';
+import { binanceWallet } from './binanceWallet/binanceWallet';
 import { bitgetWallet } from './bitgetWallet/bitgetWallet';
 import { bitskiWallet } from './bitskiWallet/bitskiWallet';
 import { bitverseWallet } from './bitverseWallet/bitverseWallet';
@@ -63,6 +64,7 @@ export {
   bloomWallet,
   bybitWallet,
   braveWallet,
+  binanceWallet,
   clvWallet,
   coin98Wallet,
   coinbaseWallet,

site/data/en-US/docs/custom-wallet-list.mdx

@@ -146,6 +146,12 @@ import { bybitWallet } from '@rainbow-me/rainbowkit/wallets';
 import { braveWallet } from '@rainbow-me/rainbowkit/wallets';
 ```
 
+#### Binance Web3 Wallet
+
+```tsx
+import { binanceWallet } from '@rainbow-me/rainbowkit/wallets';
+```
+
 #### Coinbase
 
 This wallet connector supports both the Coinbase Wallet app and extension, as well as Coinbase Smart Wallet on Web.