fix: add custom connectors for injected wallets

lidofinance · Nov 24, 2023 · cb71296 · cb71296
1 parent 8d40c7d
commit cb71296
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 46 deletions.
diff --git a/packages/connect-wallet-modal/src/components/WalletsModalForEth/WalletsModalForEth.tsx b/packages/connect-wallet-modal/src/components/WalletsModalForEth/WalletsModalForEth.tsx
@@ -17,6 +17,7 @@ import { WalletsModalForEthProps } from './types';
 import { WALLET_IDS, WalletId } from '../../constants';
 
 const walletsButtons: { [K in WalletId | string]: React.ComponentType } = {
+  default: ConnectInjected,
   injected: ConnectInjected,
   walletConnect: ConnectWC,
   [WALLET_IDS.METAMASK]: ConnectMetamask,
@@ -32,7 +33,8 @@ function getWalletButton(
   reactKey: string,
   props: ButtonsCommonProps,
 ) {
-  return React.createElement(walletsButtons[walletId], {
+  const component = walletsButtons[walletId] ?? walletsButtons.default;
+  return React.createElement(component, {
     key: reactKey,
     ...props,
   });

diff --git a/packages/wallets/bitkeep/src/index.ts b/packages/wallets/bitkeep/src/index.ts
@@ -1,5 +1,5 @@
 import { WalletAdapterType } from '@reef-knot/types';
-import { Ethereum as EthereumTypeWagmi } from '@wagmi/core';
+import { Ethereum as EthereumTypeWagmi, Chain } from '@wagmi/core';
 import { InjectedConnector } from 'wagmi/connectors/injected';
 import WalletIcon from './icons/bitget.svg';
 
@@ -11,6 +11,19 @@ declare global {
   }
 }
 
+export class BitgetConnector extends InjectedConnector {
+  readonly id = 'bitget';
+  readonly name = 'Bitget';
+  constructor(chains: Chain[]) {
+    super({
+      chains,
+      options: {
+        getProvider: () => globalThis.window?.bitkeep?.ethereum,
+      },
+    });
+  }
+}
+
 export const Bitget: WalletAdapterType = ({ chains }) => ({
   walletName: 'Bitget',
   // The current metrics implementation is based on walletId,
@@ -21,13 +34,7 @@ export const Bitget: WalletAdapterType = ({ chains }) => ({
   downloadURLs: {
     default: 'https://web3.bitget.com/',
   },
-  connector: new InjectedConnector({
-    chains,
-    options: {
-      name: 'Bitget',
-      getProvider: () => globalThis.window?.bitkeep?.ethereum,
-    },
-  }),
+  connector: new BitgetConnector(chains),
 });
 
 // BitKeep is the previous name of the wallet.

diff --git a/packages/wallets/brave/src/index.ts b/packages/wallets/brave/src/index.ts
@@ -1,5 +1,5 @@
 import { WalletAdapterType } from '@reef-knot/types';
-import { Ethereum as EthereumTypeWagmi } from '@wagmi/core';
+import { Ethereum as EthereumTypeWagmi, Chain } from '@wagmi/core';
 import { InjectedConnector } from 'wagmi/connectors/injected';
 import { WalletIcon } from './icons/index.js';
 
@@ -9,6 +9,20 @@ declare global {
   }
 }
 
+export class BraveConnector extends InjectedConnector {
+  readonly id = 'brave';
+  readonly name = 'Brave';
+  constructor(chains: Chain[]) {
+    super({
+      chains,
+      options: {
+        getProvider: () =>
+          globalThis.window?.braveEthereum || globalThis.window?.ethereum,
+      },
+    });
+  }
+}
+
 export const Brave: WalletAdapterType = ({ chains }) => ({
   walletName: 'Brave',
   walletId: 'brave',
@@ -19,12 +33,5 @@ export const Brave: WalletAdapterType = ({ chains }) => ({
   downloadURLs: {
     default: 'https://brave.com/wallet/',
   },
-  connector: new InjectedConnector({
-    chains,
-    options: {
-      name: 'Brave',
-      getProvider: () =>
-        globalThis.window?.braveEthereum || globalThis.window?.ethereum,
-    },
-  }),
+  connector: new BraveConnector(chains),
 });
diff --git a/packages/wallets/coin98/src/index.ts b/packages/wallets/coin98/src/index.ts
@@ -1,5 +1,5 @@
 import { WalletAdapterType } from '@reef-knot/types';
-import { Ethereum as EthereumTypeWagmi } from '@wagmi/core';
+import { Ethereum as EthereumTypeWagmi, Chain } from '@wagmi/core';
 import { InjectedConnector } from 'wagmi/connectors/injected';
 import WalletIcon from './icons/coin98.svg';
 
@@ -17,6 +17,20 @@ declare global {
   }
 }
 
+export class Coin98Connector extends InjectedConnector {
+  readonly id = 'coin98';
+  readonly name = 'Coin98';
+  constructor(chains: Chain[]) {
+    super({
+      chains,
+      options: {
+        getProvider: () =>
+          globalThis.window?.coin98?.provider || globalThis.window?.ethereum,
+      },
+    });
+  }
+}
+
 export const Coin98: WalletAdapterType = ({ chains }) => ({
   walletName: 'Coin98',
   walletId: 'coin98',
@@ -29,12 +43,5 @@ export const Coin98: WalletAdapterType = ({ chains }) => ({
     ios: 'https://ios.coin98.com',
     android: 'https://android.coin98.com',
   },
-  connector: new InjectedConnector({
-    chains,
-    options: {
-      name: 'Coin98',
-      getProvider: () =>
-        globalThis.window?.coin98?.provider || globalThis.window?.ethereum,
-    },
-  }),
+  connector: new Coin98Connector(chains),
 });
diff --git a/packages/wallets/exodus/src/index.ts b/packages/wallets/exodus/src/index.ts
@@ -1,7 +1,7 @@
 import { WalletAdapterType } from '@reef-knot/types';
-import { Ethereum as EthereumTypeWagmi } from '@wagmi/core';
-import { InjectedConnector } from 'wagmi/connectors/injected';
 import WalletIcon from './icons/exodus.svg';
+import { Ethereum as EthereumTypeWagmi, Chain } from '@wagmi/core';
+import { InjectedConnector } from '@wagmi/connectors/injected';
 
 declare global {
   interface Ethereum extends EthereumTypeWagmi {
@@ -12,6 +12,20 @@ declare global {
   }
 }
 
+export class ExodusConnector extends InjectedConnector {
+  readonly id = 'exodus';
+  readonly name = 'Exodus';
+  constructor(chains: Chain[]) {
+    super({
+      chains,
+      options: {
+        getProvider: () =>
+          globalThis.window?.exodus?.ethereum || globalThis.window?.ethereum,
+      },
+    });
+  }
+}
+
 export const Exodus: WalletAdapterType = ({ chains }) => ({
   walletName: 'Exodus',
   walletId: 'exodus',
@@ -21,12 +35,5 @@ export const Exodus: WalletAdapterType = ({ chains }) => ({
   downloadURLs: {
     default: 'https://www.exodus.com/download/',
   },
-  connector: new InjectedConnector({
-    chains,
-    options: {
-      name: 'Exodus',
-      getProvider: () =>
-        globalThis.window?.exodus?.ethereum || globalThis.window?.ethereum,
-    },
-  }),
+  connector: new ExodusConnector(chains),
 });
diff --git a/packages/wallets/okx/src/index.ts b/packages/wallets/okx/src/index.ts
@@ -1,5 +1,5 @@
 import { WalletAdapterType } from '@reef-knot/types';
-import { Ethereum as EthereumTypeWagmi } from '@wagmi/core';
+import { Ethereum as EthereumTypeWagmi, Chain } from '@wagmi/core';
 import { InjectedConnector } from 'wagmi/connectors/injected';
 import WalletIcon from './icons/okx.svg';
 import WalletIconInverted from './icons/okx-inverted.svg';
@@ -16,6 +16,20 @@ declare global {
   }
 }
 
+export class OkxConnector extends InjectedConnector {
+  readonly id = 'okx';
+  readonly name = 'OKX Wallet';
+  constructor(chains: Chain[]) {
+    super({
+      chains,
+      options: {
+        getProvider: () =>
+          globalThis.window?.okxwallet || globalThis.window?.ethereum,
+      },
+    });
+  }
+}
+
 export const Okx: WalletAdapterType = ({ chains }) => ({
   walletName: 'OKX Wallet',
   walletId: 'okx',
@@ -29,12 +43,5 @@ export const Okx: WalletAdapterType = ({ chains }) => ({
   downloadURLs: {
     default: 'https://www.okx.com/download',
   },
-  connector: new InjectedConnector({
-    chains,
-    options: {
-      name: 'OKX Wallet',
-      getProvider: () =>
-        globalThis.window?.okxwallet || globalThis.window?.ethereum,
-    },
-  }),
+  connector: new OkxConnector(chains),
 });