Add Binance web3 wallet on Ethereum

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0-0",
+    "@binance/w3w-wagmi-connector-v2": "^1.2.4-alpha.0",
     "@bancor/carbon-sdk": "0.0.103-DEV",
     "@cloudflare/workers-types": "^4.20230717.0",
     "@ethersproject/abi": "^5.0.0",
@@ -131,4 +132,4 @@
     "vite-bundle-analyzer": "^0.15.2"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

src/components/common/WalletIcon.tsx

@@ -6,6 +6,7 @@ import { ReactComponent as IconGnosisLogo } from 'assets/logos/gnosis.svg';
 import { ReactComponent as IconImposterLogo } from 'assets/logos/imposter.svg';
 import { ReactComponent as IconMetaMaskLogo } from 'assets/logos/metamask.svg';
 import { ReactComponent as IconWalletConnectLogo } from 'assets/logos/walletConnect.svg';
+import { ReactComponent as IconBinanceLogo } from 'assets/logos/binanceWallet.svg';
 import { ReactComponent as IconWallet } from 'assets/icons/wallet.svg';
 
 type Props = {
@@ -51,6 +52,8 @@ export const WalletIcon = ({
       return <IconCompassWalletLogo className={className} />;
     case 'Seif Wallet':
       return <IconSeifWalletLogo className={className} />;
+    case 'Binance Web3 Wallet':
+      return <IconBinanceLogo className={className} />;
     default:
       return <IconWallet className={className} />;
   }

src/config/ethereum/common.ts

@@ -32,7 +32,13 @@ export const commonConfig: AppConfig = {
     simulatorRepo: 'https://github.com/bancorprotocol/carbon-simulator',
     duneDashboard: 'https://dune.com/bancor/carbon-by-bancor',
   },
-  selectedConnectors: ['MetaMask', 'WalletConnect', 'Coinbase Wallet', 'Safe'],
+  selectedConnectors: [
+    'MetaMask',
+    'WalletConnect',
+    'Coinbase Wallet',
+    'Safe',
+    'Binance',
+  ],
   blockedConnectors: ['Tailwind', 'Compass Wallet', 'Seif'],
   walletConnectProjectId: 'f9d8863ab6c03f2293d7d56d7c0c0853',
   isSimulatorEnabled: true,

src/index.tsx

@@ -8,6 +8,7 @@ import { LazyMotion } from 'libs/motion';
 import { QueryProvider } from 'libs/queries';
 import { RouterProvider, router } from 'libs/routing';
 import 'init-sentry';
+import 'utils/buffer';
 import 'fonts.css';
 import 'index.css';
 import 'init-config';

src/libs/wagmi/connectors.ts

@@ -16,6 +16,7 @@ import {
   currentChain,
 } from 'libs/wagmi';
 import { externalLinks } from 'libs/routing';
+import { getWagmiConnectorV2 } from '@binance/w3w-wagmi-connector-v2';
 
 const PLACEHOLDER_TAG = '_placeholder';
 
@@ -61,6 +62,9 @@ const createPlaceholderConnector = ({
 
 const getDefaultConnector = (connectorType: SelectableConnectionName) => {
   switch (connectorType) {
+    case 'Binance':
+      const binanceConnector = getWagmiConnectorV2();
+      return binanceConnector();
     case 'Compass Wallet':
       return createPlaceholderConnector({
         name: 'Compass Wallet',

src/libs/wagmi/wagmi.types.ts

@@ -13,6 +13,7 @@ export const selectableConnectionNames = [
   'Tailwind',
   'Compass Wallet',
   'Seif',
+  'Binance',
 ] as const;
 
 export type SelectableConnectionName =

src/utils/buffer.ts

@@ -0,0 +1,3 @@
+import { Buffer } from 'buffer';
+
+window.Buffer = window?.Buffer || Buffer;