Replace web3-react with wagmi and add seif, tailwind and compass wallet connectors

package.json

@@ -14,6 +14,7 @@
     "@playwright/test": "^1.43.1",
     "@sentry/react": "^7.48.0",
     "@sentry/vite-plugin": "^0.7.2",
+    "@tailwindzone/connect-web3-react": "^1.0.0",
     "@tanstack/react-query": "^4.14.5",
     "@tanstack/react-query-devtools": "^4.14.5",
     "@tanstack/react-router": "^1.4.9",
@@ -37,13 +38,15 @@
     "@typescript-eslint/parser": "^5.59.9",
     "@vitejs/plugin-react": "^3.1.0",
     "@walletconnect/ethereum-provider": "^2.9.2",
-    "@web3-react/coinbase-wallet": "8.2.2",
-    "@web3-react/core": "8.2.2",
-    "@web3-react/gnosis-safe": "8.2.3",
-    "@web3-react/metamask": "8.2.3",
-    "@web3-react/network": "8.2.2",
-    "@web3-react/types": "8.2.2",
-    "@web3-react/walletconnect-v2": "^8.5.0",
+    "@web3-react/coinbase-wallet": "8.2.3",
+    "@web3-react/core": "8.2.3",
+    "@web3-react/eip1193": "8.2.3",
+    "@web3-react/empty": "^8.2.3",
+    "@web3-react/gnosis-safe": "8.2.4",
+    "@web3-react/metamask": "8.2.4",
+    "@web3-react/network": "8.2.3",
+    "@web3-react/types": "8.2.3",
+    "@web3-react/walletconnect-v2": "8.5.1",
     "autoprefixer": "^10.4.12",
     "body-scroll-lock": "^4.0.0-beta.0",
     "buffer": "^6.0.3",
@@ -127,4 +130,4 @@
   "devDependencies": {
     "@types/d3": "^7.4.3"
   }
-}
+}

src/components/core/menu/mainMenu/MainMenuRightWallet.tsx

@@ -3,6 +3,9 @@ import { ReactComponent as IconWallet } from 'assets/icons/wallet.svg';
 import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 import { ReactComponent as IconCopy } from 'assets/icons/copy.svg';
 import { ReactComponent as IconCoinbaseLogo } from 'assets/logos/coinbase.svg';
+import { ReactComponent as IconCompassWalletLogo } from 'assets/logos/compassWallet.svg';
+import { ReactComponent as IconTailwindWalletLogo } from 'assets/logos/tailwindWallet.svg';
+import { ReactComponent as IconSeifWalletLogo } from 'assets/logos/seifWallet.svg';
 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';
@@ -39,6 +42,12 @@ const WalletIcon = ({ isImposter }: { isImposter: boolean }) => {
       return <IconCoinbaseLogo {...iconProps} />;
     case 'gnosisSafe':
       return <IconGnosisLogo {...iconProps} />;
+    case 'tailwindWallet':
+      return <IconTailwindWalletLogo {...iconProps} />;
+    case 'compassWallet':
+      return <IconCompassWalletLogo {...iconProps} />;
+    case 'seifWallet':
+      return <IconSeifWalletLogo {...iconProps} />;
     default:
       return <IconWallet {...iconProps} />;
   }

src/config/sei/common.ts

@@ -12,7 +12,13 @@ export const commonConfig: AppConfig = {
   mode: 'development',
   appUrl: 'https://sei.carbondefi.xyz',
   carbonApi: 'https://sei-api.carbondefi.xyz/v1/',
-  selectableConnectionTypes: ['injected', 'coinbaseWallet'],
+  selectableConnectionTypes: [
+    'injected',
+    'coinbaseWallet',
+    'tailwindWallet',
+    'compassWallet',
+    'seifWallet',
+  ],
   walletConnectProjectId: '',
   isSimulatorEnabled: false,
   policiesLastUpdated: '27 May, 2024',
@@ -49,7 +55,7 @@ export const commonConfig: AppConfig = {
       voucher: '0xA4682A2A5Fe02feFF8Bd200240A41AD0E6EaF8d5',
     },
     utils: {
-      multicall: '0xe033Bed7cae4114Af84Be1e9F1CA7DEa07Dfe1Cf',
+      multicall: '0xcA11bde05977b3631167028862bE2a173976CA11',
     },
   },
   tokenListOverride: [

src/libs/web3/noconnector.ts

@@ -0,0 +1,34 @@
+import { Actions, Connector } from '@web3-react/types';
+
+export interface NoConnectorArgs {
+  actions: Actions;
+  name: string;
+  url: string;
+}
+
+export class NoConnectorError extends Error {
+  public constructor(name: string) {
+    super(`${name} not installed, redirecting to website...`);
+    this.name = NoConnectorError.name;
+    Object.setPrototypeOf(this, NoConnectorError.prototype);
+  }
+}
+
+export class NoConnector extends Connector {
+  /** {@inheritdoc Connector.provider} */
+  public declare readonly provider: undefined;
+  name: string;
+  url: string;
+
+  constructor({ actions, name, url }: NoConnectorArgs) {
+    super(actions);
+    this.name = name;
+    this.url = url;
+  }
+  public activate() {
+    setTimeout(() => {
+      window.open(this.url, '_blank');
+    }, 3000);
+    throw new NoConnectorError(this.name);
+  }
+}

src/libs/web3/web3.connectors.ts

@@ -1,22 +1,29 @@
+import { StaticJsonRpcProvider } from '@ethersproject/providers';
 import { initializeConnector } from '@web3-react/core';
+import { CoinbaseWallet } from '@web3-react/coinbase-wallet';
+import { EIP1193 } from '@web3-react/eip1193';
 import { MetaMask } from '@web3-react/metamask';
 import { WalletConnect } from '@web3-react/walletconnect-v2';
 import { Network } from '@web3-react/network';
 import { GnosisSafe } from '@web3-react/gnosis-safe';
-import { CoinbaseWallet } from '@web3-react/coinbase-wallet';
-import {
-  RPC_HEADERS,
-  RPC_URLS,
-  SupportedChainId,
-} from 'libs/web3/web3.constants';
-import { Connection } from 'libs/web3/web3.types';
+import { TailwindConnector } from '@tailwindzone/connect-web3-react';
 import iconMetaMask from 'assets/logos/metamask.svg';
 import iconWalletConnect from 'assets/logos/walletConnect.svg';
 import iconCoinbase from 'assets/logos/coinbase.svg';
+import iconTailwindWallet from 'assets/logos/tailwindWallet.svg';
+import iconCompassWallet from 'assets/logos/compassWallet.svg';
+import iconSeifWallet from 'assets/logos/seifWallet.svg';
 import iconGnosis from 'assets/logos/gnosis.svg';
 import carbonLogo from 'assets/logos/carbon.svg';
-import { StaticJsonRpcProvider } from '@ethersproject/providers';
 import config from 'config';
+import {
+  RPC_HEADERS,
+  RPC_URLS,
+  SupportedChainId,
+} from 'libs/web3/web3.constants';
+import { Connection } from 'libs/web3/web3.types';
+import { getInjectedProvider } from 'libs/web3/web3.utils';
+import { NoConnector } from 'libs/web3/noconnector';
 
 const onError = (error: Error) => {
   console.debug(`web3-react error: ${error}`);
@@ -52,9 +59,18 @@ export const networkConnection: Connection = {
 // INJECTED CONNECTOR
 // ********************************** //
 
-const [web3Injected, web3InjectedHooks] = initializeConnector<MetaMask>(
-  (actions) => new MetaMask({ actions, onError })
-);
+const [web3Injected, web3InjectedHooks] = getInjectedProvider('ethereum')
+  ? initializeConnector<MetaMask>(
+      (actions) => new MetaMask({ actions, onError })
+    )
+  : initializeConnector<NoConnector>(
+      (actions) =>
+        new NoConnector({
+          actions,
+          name: 'Metamask',
+          url: 'https://metamask.io/',
+        })
+    );
 export const injectedConnection: Connection = {
   connector: web3Injected,
   hooks: web3InjectedHooks,
@@ -136,3 +152,84 @@ export const coinbaseWalletConnection: Connection = {
   name: 'Coinbase Wallet',
   logoUrl: iconCoinbase,
 };
+
+// ********************************** //
+// Tailwind WALLET CONNECTOR
+// ********************************** //
+
+const [web3TailwindWallet, web3TailwindWalletHooks] =
+  initializeConnector<TailwindConnector>(
+    (actions) => new TailwindConnector({ actions })
+  );
+
+export const tailwindWalletConnection: Connection = {
+  connector: web3TailwindWallet,
+  hooks: web3TailwindWalletHooks,
+  type: 'tailwindWallet',
+  name: 'Tailwind Wallet',
+  logoUrl: iconTailwindWallet,
+};
+
+// ********************************** //
+// Compass WALLET CONNECTOR
+// ********************************** //
+
+export const [web3CompassWallet, web3CompassWalletHooks] = getInjectedProvider(
+  'compassEvm',
+  'isCompassWallet'
+)
+  ? initializeConnector<EIP1193>(
+      (actions) =>
+        new EIP1193({
+          actions,
+          provider: getInjectedProvider('compassEvm', 'isCompassWallet'),
+        })
+    )
+  : initializeConnector<NoConnector>(
+      (actions) =>
+        new NoConnector({
+          actions,
+          name: 'Compass Wallet',
+          url: 'https://compasswallet.io/',
+        })
+    );
+
+export const compassWalletConnection: Connection = {
+  connector: web3CompassWallet,
+  hooks: web3CompassWalletHooks,
+  type: 'compassWallet',
+  name: 'Compass Wallet',
+  logoUrl: iconCompassWallet,
+};
+
+// ********************************** //
+// Seif WALLET CONNECTOR
+// ********************************** //
+
+export const [web3SeifWallet, web3SeifWalletHooks] = getInjectedProvider(
+  '__seif',
+  '__seif'
+)
+  ? initializeConnector<EIP1193>(
+      (actions) =>
+        new EIP1193({
+          actions,
+          provider: getInjectedProvider('__seif', '__seif'),
+        })
+    )
+  : initializeConnector<NoConnector>(
+      (actions) =>
+        new NoConnector({
+          actions,
+          name: 'Seif Wallet',
+          url: 'https://seif.passkeywallet.com/',
+        })
+    );
+
+export const seifWalletConnection: Connection = {
+  connector: web3SeifWallet,
+  hooks: web3SeifWalletHooks,
+  type: 'seifWallet',
+  name: 'Seif Wallet',
+  logoUrl: iconSeifWallet,
+};

src/libs/web3/web3.constants.ts

@@ -47,7 +47,10 @@ export type selectableConnectionType =
   | 'injected'
   | 'walletConnect'
   | 'coinbaseWallet'
-  | 'gnosisSafe';
+  | 'gnosisSafe'
+  | 'tailwindWallet'
+  | 'compassWallet'
+  | 'seifWallet';
 
 export type ConnectionType = 'network' | selectableConnectionType;
 

src/libs/web3/web3.utils.ts

@@ -5,6 +5,9 @@ import {
   injectedConnection,
   networkConnection,
   walletConnectConnection,
+  tailwindWalletConnection,
+  compassWalletConnection,
+  seifWalletConnection,
 } from 'libs/web3/web3.connectors';
 import { lsService } from 'services/localeStorage';
 import { UAParser } from 'ua-parser-js';
@@ -16,6 +19,28 @@ const { type } = parser.getDevice();
 
 export const isMobile = type === 'mobile' || type === 'tablet';
 
+/**
+ * Get the injected wallet provider in window
+ * Returns window.ethereum if window.ethereum exists, window.ethereum[flag], is true and window.ethereum is not metamask
+ * Otherwise, returns window[walletObject]
+ *
+ * @param flag name of the flag in window.ethereum to check. If undefined, will not check this flag and default to walletObject
+ * @param walletObject name of the object in window that the injected provider will populate
+ * @returns Injected provider in wallet or undefined if not present
+ */
+export function getInjectedProvider(walletObject: string, flag?: string) {
+  if (typeof window === 'undefined') return;
+  if (window.ethereum && flag && (window as any).ethereum[flag]) {
+    return window.ethereum;
+  }
+
+  if ((window as any)[walletObject]) {
+    return (window as any)[walletObject];
+  }
+
+  return;
+}
+
 // Interface to add new chain to injected wallets as per EIP-3085 (https://github.com/ethereum/EIPs/blob/master/EIPS/eip-3085.md)
 export interface AddChainParameter {
   chainId: number; // EIP-3085 specifies hex string but web3-react expects number
@@ -29,7 +54,6 @@ export interface AddChainParameter {
   blockExplorerUrls?: string[];
   iconUrls?: string[];
 }
-
 export const getChainInfo = (): AddChainParameter => {
   return {
     chainId: config.network.chainId,
@@ -51,6 +75,9 @@ const connections: Record<ConnectionType, Connection> = {
   walletConnect: walletConnectConnection,
   gnosisSafe: gnosisSafeConnection,
   network: networkConnection,
+  tailwindWallet: tailwindWalletConnection,
+  compassWallet: compassWalletConnection,
+  seifWallet: seifWalletConnection,
 };
 
 export const getConnection = (c: ConnectionType) => connections[c];