Merge pull request #159 from lidofinance/feature/si-1561-add-binance-…

…web3-wallet

Binance Web3 Wallet

packages/connect-wallet-modal/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @reef-knot/connect-wallet-modal
 
+## 5.3.0
+
+### Minor Changes
+
+- Add Binance Web3 Wallet
+
+### Patch Changes
+
+- Updated dependencies
+  - @reef-knot/wallets-list@2.2.0
+
 ## 5.2.2
 
 ### Patch Changes

packages/connect-wallet-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/connect-wallet-modal",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -41,7 +41,7 @@
     "@ledgerhq/hw-app-eth": "^6.37.1",
     "@ledgerhq/hw-transport-webhid": "^6.29.0",
     "@lidofinance/lido-ui": "^3.18.0",
-    "@reef-knot/wallets-list": "^2.1.0",
+    "@reef-knot/wallets-list": "^2.2.0",
     "@types/react": "18.2.45",
     "@types/react-dom": "18.2.17"
   },

packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx

@@ -5,6 +5,7 @@ import {
   ConnectWC,
   ConnectCoinbase,
   ConnectBrowser,
+  ConnectBinance,
 } from '../../connectButtons';
 import { WalletsModal } from './WalletsModal';
 import type { WalletIdsEthereum } from '@reef-knot/wallets-list';
@@ -19,6 +20,7 @@ const buttonComponentsByConnectorId: WalletsModalEthProps['buttonComponentsByCon
     walletConnect: ConnectWC,
     coinbaseWallet: ConnectCoinbase,
     ledgerHID: ConnectLedger,
+    binanceWallet: ConnectBinance,
   };
 
 const WALLETS_DISPLAY_CONFIG_DEFAULT: WalletsModalEthProps['walletsShown'] = [
@@ -39,6 +41,7 @@ const WALLETS_DISPLAY_CONFIG_DEFAULT: WalletsModalEthProps['walletsShown'] = [
   'ambire',
   'safe',
   'dappBrowserInjected',
+  'binanceWallet',
 ];
 
 const WALLETS_PINNED_CONFIG_DEFAULT: WalletsModalEthProps['walletsPinned'] = [

packages/connect-wallet-modal/src/connectButtons/ConnectBinance.tsx

@@ -0,0 +1,63 @@
+import React, { FC, useCallback } from 'react';
+import { useConnect } from 'wagmi';
+import { useDisconnect } from '@reef-knot/core-react';
+import { ConnectButton } from '../components/ConnectButton';
+import { ConnectInjectedProps } from './types';
+
+export const ConnectBinance: FC<ConnectInjectedProps> = (
+  props: ConnectInjectedProps,
+) => {
+  const {
+    onConnect,
+    onBeforeConnect,
+    shouldInvertWalletIcon,
+    metrics,
+    walletId,
+    walletName,
+    icon: WalletIcon,
+    downloadURLs,
+    detector,
+    connector,
+    ...rest
+  } = props;
+
+  const metricsOnConnect = metrics?.events?.connect?.handlers[walletId];
+  const metricsOnClick = metrics?.events?.click?.handlers[walletId];
+
+  const { connect } = useConnect();
+  const { disconnect } = useDisconnect();
+
+  const handleConnect = useCallback(() => {
+    onBeforeConnect?.();
+    metricsOnClick?.();
+    disconnect?.();
+    connect(
+      { connector },
+      {
+        onSuccess: () => {
+          onConnect?.();
+          metricsOnConnect?.();
+        },
+      },
+    );
+  }, [
+    connect,
+    connector,
+    disconnect,
+    metricsOnClick,
+    onBeforeConnect,
+    onConnect,
+    metricsOnConnect,
+  ]);
+
+  return (
+    <ConnectButton
+      {...rest}
+      icon={WalletIcon}
+      shouldInvertWalletIcon={shouldInvertWalletIcon}
+      onClick={handleConnect}
+    >
+      {walletName}
+    </ConnectButton>
+  );
+};

packages/connect-wallet-modal/src/connectButtons/index.ts

@@ -3,3 +3,4 @@ export * from './ConnectInjected';
 export * from './ConnectWC';
 export * from './ConnectCoinbase';
 export * from './ConnectBrowser';
+export * from './ConnectBinance';

packages/reef-knot/CHANGELOG.md

@@ -1,5 +1,17 @@
 # reef-knot
 
+## 5.5.0
+
+### Minor Changes
+
+- Add Binance Web3 Wallet
+
+### Patch Changes
+
+- Updated dependencies
+  - @reef-knot/connect-wallet-modal@5.3.0
+  - @reef-knot/wallets-list@2.2.0
+
 ## 5.4.0
 
 ### Minor Changes

packages/reef-knot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reef-knot",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -41,11 +41,11 @@
     "lint": "eslint --ext ts,tsx,js,mjs ."
   },
   "dependencies": {
-    "@reef-knot/connect-wallet-modal": "5.2.2",
+    "@reef-knot/connect-wallet-modal": "5.3.0",
     "@reef-knot/core-react": "4.2.0",
     "@reef-knot/web3-react": "4.0.1",
     "@reef-knot/ui-react": "2.1.3",
-    "@reef-knot/wallets-list": "2.1.0",
+    "@reef-knot/wallets-list": "2.2.0",
     "@reef-knot/wallets-helpers": "2.1.0",
     "@reef-knot/types": "2.1.0",
     "@reef-knot/ledger-connector": "4.1.0"

packages/wallets-list/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @reef-knot/wallets-list
 
+## 2.2.0
+
+### Minor Changes
+
+- Add Binance Web3 Wallet
+
+### Patch Changes
+
+- Updated dependencies
+  - @reef-knot/wallet-adapter-binance-wallet@1.1.0
+
 ## 2.1.0
 
 ### Patch Changes

packages/wallets-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/wallets-list",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -43,6 +43,7 @@
     "@reef-knot/wallet-adapter-exodus": "2.1.0",
     "@reef-knot/wallet-adapter-walletconnect": "2.0.1",
     "@reef-knot/wallet-adapter-ambire": "2.0.1",
+    "@reef-knot/wallet-adapter-binance-wallet": "1.0.0",
     "@reef-knot/wallet-adapter-bitkeep": "2.1.0",
     "@reef-knot/wallet-adapter-coin98": "2.1.0",
     "@reef-knot/wallet-adapter-brave": "2.1.0",

packages/wallets-list/src/ethereum.ts

@@ -27,6 +27,10 @@ import {
   id as idDAppBrowserInjected,
 } from '@reef-knot/wallet-adapter-dapp-browser-injected';
 import { Safe, id as idSafe } from '@reef-knot/wallet-adapter-safe';
+import {
+  BinanceWeb3Wallet,
+  id as idBinanceWallet,
+} from '@reef-knot/wallet-adapter-binance-wallet';
 
 export const WalletsListEthereum = {
   [idBrowserExtension]: BrowserExtension,
@@ -46,6 +50,7 @@ export const WalletsListEthereum = {
   [idCoinbase]: Coinbase,
   [idDAppBrowserInjected]: DAppBrowserInjected,
   [idSafe]: Safe,
+  [idBinanceWallet]: BinanceWeb3Wallet,
 } as const;
 
 export type WalletIdsEthereum = keyof Readonly<typeof WalletsListEthereum>;

packages/wallets/binance-wallet/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": [
+    "custom"
+  ],
+  "rules": {
+    "import/no-extraneous-dependencies": "warn"
+  }
+}

packages/wallets/binance-wallet/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @reef-knot/wallet-adapter-binance-wallet
+
+## 1.0.0
+
+### Minor Changes
+
+- Add Binance Web3 Wallet

packages/wallets/binance-wallet/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@reef-knot/wallet-adapter-binance-wallet",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "dist/index.d.ts"
+      ]
+    }
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/lidofinance/reef-knot",
+  "bugs": {
+    "url": "https://github.com/lidofinance/reef-knot/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "dev=on rollup -c -w",
+    "lint": "eslint --ext ts,tsx,js,mjs ."
+  },
+  "devDependencies": {
+    "@reef-knot/types": "^2.0.0",
+    "@reef-knot/wallets-helpers": "^2.0.0",
+    "@svgr/rollup": "^6.5.1",
+    "eslint-config-custom": "*"
+  },
+  "peerDependencies": {
+    "@reef-knot/types": "^2.0.0",
+    "@reef-knot/wallets-helpers": "^2.0.0",
+    "wagmi": "2.10.2"
+  },
+  "dependencies": {
+    "@binance/w3w-wagmi-connector-v2": "^1.2.3"
+  }
+}

packages/wallets/binance-wallet/rollup.config.js

@@ -0,0 +1,57 @@
+import * as process from 'node:process';
+import fs from 'node:fs';
+import ts from 'typescript';
+import { defineConfig } from 'rollup';
+import del from 'rollup-plugin-delete';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import { babel } from '@rollup/plugin-babel';
+import svgr from '@svgr/rollup';
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx', '.svg'];
+const { dependencies = {}, peerDependencies = {} } =
+  JSON.parse(fs.readFileSync('package.json', 'utf-8'));
+const commonExternal = [
+  'react/jsx-runtime',
+  // Do not include in the bundle subpath exports like:
+  /^@reef-knot\/.*/, // e.g. @reef-knot/<package>/<exports-field-entry>
+  /^reef-knot\/.*/, // e.g. reef-knot/wallets-icons/react
+];
+const external = [
+  ...commonExternal,
+  ...Object.keys({ ...dependencies, ...peerDependencies }),
+  /node_modules/
+];
+const isDevMode = process.env.dev === 'on';
+
+export default defineConfig({
+  input: './src/index',
+  output: {
+    format: 'es',
+    dir: 'dist',
+    preserveModules: true,
+    preserveModulesRoot: 'src',
+    generatedCode: 'es2015'
+  },
+  plugins: [
+    isDevMode ? null : del({ targets: 'dist/*', runOnce: true }),
+    resolve({ extensions, preferBuiltins: true }),
+    svgr({
+      typescript: true,
+      prettier: false,
+      memo: true,
+      svgo: false,
+    }),
+    typescript({
+      typescript: ts,
+      tsconfig: 'tsconfig.json',
+      check: false,
+    }),
+    babel({
+      exclude: 'node_modules/**',
+      babelHelpers: 'bundled',
+      extensions,
+    }),
+  ],
+  external,
+});

packages/wallets/binance-wallet/src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}

packages/wallets/binance-wallet/src/icons/index.ts

@@ -0,0 +1 @@
+export { default as WalletIcon } from './binance-wallet.svg';

packages/wallets/binance-wallet/src/index.ts

@@ -0,0 +1,18 @@
+import { WalletAdapterType } from '@reef-knot/types';
+import { WalletIcon } from './icons/index.js';
+import { getWagmiConnectorV2 } from '@binance/w3w-wagmi-connector-v2';
+
+export const id = 'binanceWallet';
+export const name = 'Binance Web3 Wallet';
+
+export const BinanceWeb3Wallet: WalletAdapterType = () => {
+  const binanceWalletConnector = getWagmiConnectorV2();
+
+  return {
+    walletId: id,
+    walletName: name,
+    type: binanceWalletConnector.type,
+    icon: WalletIcon,
+    createConnectorFn: binanceWalletConnector(),
+  };
+};

packages/wallets/binance-wallet/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.*"],
+  "compilerOptions": {
+    "rootDir": "src",
+  }
+}