fix: Solana and WalletConnect Web3Modal conflicts (#164)

Author: arthurgeron

.changeset/eight-bears-prove.md

@@ -0,0 +1,10 @@
+---
+"@fuel-connectors/walletconnect-connector": patch
+---
+
+- Add `currentEvmAccount` method to `WalletConnectConnector`, which will return the current ethereum account connected.
+- Fixed Wallet Connect Web3Modal instances conflicting and replacing Solana's
+- Fixed issue where Wallet Connect's Web3Modal would reference a different Wagmi config instance.
+- WalletConnect connector now recovers the last active connection during initialization
+- Updated wagmi and @wagmi/core to 2.11.3
+- Updated @wagmi/connectors to 5.0.26

.changeset/fuel-labs-ci.md

@@ -0,0 +1,4 @@
+---
+"@fuels/connectors": patch
+---
+

.github/workflows/pr-release.yaml

@@ -7,7 +7,7 @@ jobs:
   release-pr:
     name: 'Release PR to npm'
     runs-on: buildjet-4vcpu-ubuntu-2204
-    # comment out if:false to enable release PR to npm
+    # Comment if:false to enable release PR to npm
     if: false
     permissions: write-all
     steps:

examples/react-app/package.json

@@ -14,8 +14,8 @@
     "@fuels/react": "0.20.0",
     "@radix-ui/react-toast": "1.1.5",
     "@tanstack/react-query": "5.35.1",
-    "@wagmi/connectors": "4.3.3",
-    "@wagmi/core": "2.9.1",
+    "@wagmi/connectors": "5.0.26",
+    "@wagmi/core": "2.12.2",
     "clsx": "2.1.1",
     "fuels": "0.92.0",
     "react": "18.3.1",

examples/react-next/package.json

@@ -11,12 +11,12 @@
     "@fuels/connectors": "workspace:*",
     "@fuels/react": "0.20.0",
     "@tanstack/react-query": "5.35.1",
-    "@wagmi/connectors": "4.3.3",
+    "@wagmi/connectors": "5.0.26",
     "fuels": "0.92.0",
     "next": "14.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "wagmi": "2.8.1"
+    "wagmi": "2.11.3"
   },
   "devDependencies": {
     "@tanstack/react-query-devtools": "5.35.1",

examples/react-next/src/components/Providers.tsx

@@ -3,34 +3,19 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-import {
-  BakoSafeConnector,
-  FuelWalletConnector,
-  FuelWalletDevelopmentConnector,
-  FueletWalletConnector,
-  SolanaConnector,
-  WalletConnectConnector,
-} from '@fuels/connectors';
+import { defaultConnectors } from '@fuels/connectors';
 import { FuelProvider } from '@fuels/react';
 
 const queryClient = new QueryClient();
 
+const fuelConfig = {
+  connectors: defaultConnectors({ devMode: true }),
+};
+
 export const Providers = ({ children }: { children: React.ReactNode }) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <FuelProvider
-        theme="dark"
-        fuelConfig={{
-          connectors: [
-            new FuelWalletConnector(),
-            new FuelWalletDevelopmentConnector(),
-            new BakoSafeConnector(),
-            new FueletWalletConnector(),
-            new WalletConnectConnector(),
-            new SolanaConnector(),
-          ],
-        }}
-      >
+      <FuelProvider theme="dark" fuelConfig={fuelConfig}>
         {children}
       </FuelProvider>
 

packages/connectors/package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@ethereumjs/util": "9.0.3",
     "@ethersproject/bytes": "5.7.0",
-    "@wagmi/core": "2.9.1",
+    "@wagmi/core": "2.12.2",
     "@web3modal/wagmi": "5.0.0",
     "viem": "2.10.2",
     "socket.io-client": "4.7.2",

packages/connectors/src/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_WC_PROJECT_ID = '00000000000000000000000000000000';

packages/connectors/src/defaultConnectors.ts

@@ -6,25 +6,26 @@ import { FueletWalletConnector } from '@fuel-connectors/fuelet-wallet';
 import { SolanaConnector } from '@fuel-connectors/solana-connector';
 import { WalletConnectConnector } from '@fuel-connectors/walletconnect-connector';
 import type { Config } from '@wagmi/core';
+import type { ProviderType } from '@web3modal/solana/dist/types/src/utils/scaffold';
 import type { FuelConnector } from 'fuels';
 import type { BurnerWalletConfig } from '../../burner-wallet-connector/src/types';
 
-const DEFAULT_WC_PROJECT_ID = '00000000000000000000000000000000';
-
 type DefaultConnectors = {
   devMode?: boolean;
   wcProjectId?: string;
   burnerWalletConfig?: BurnerWalletConfig;
   ethWagmiConfig?: Config;
+  solanaConfig?: ProviderType;
 };
 
 export function defaultConnectors({
   devMode,
-  wcProjectId = DEFAULT_WC_PROJECT_ID,
+  wcProjectId,
   burnerWalletConfig,
   ethWagmiConfig,
+  solanaConfig: _solanaConfig,
 }: DefaultConnectors = {}): Array<FuelConnector> {
-  const connectors = [
+  const connectors: Array<FuelConnector> = [
     new FuelWalletConnector(),
     new BakoSafeConnector(),
     new FueletWalletConnector(),

packages/solana-connector/src/SolanaConnector.ts

@@ -22,7 +22,8 @@ import { SOLANA_ICON, TESTNET_URL } from './constants';
 import { predicates } from './generated/predicate';
 import type { Maybe, SolanaConfig } from './types';
 import { PredicateAccount } from './utils/Predicate';
-import { createSolanaProvider } from './utils/solanaProvider';
+import { createSolanaConfig } from './utils/solanaConfig';
+import { createSolanaWeb3ModalInstance } from './utils/web3Modal';
 import { getSignatureIndex } from './utils/witness';
 
 export class SolanaConnector extends FuelConnector {
@@ -46,32 +47,42 @@ export class SolanaConnector extends FuelConnector {
   predicateAddress: string | null = null;
 
   private predicateAccount: PredicateAccount;
-  private config: SolanaConfig = {};
+  private config: SolanaConfig = {} as SolanaConfig;
   private svmAddress: string | null = null;
   private subscriptions: Array<() => void> = [];
 
-  constructor(config: SolanaConfig = {}) {
+  constructor(config: SolanaConfig) {
     super();
-
+    this.configProviders(config);
     this.predicateAccount = new PredicateAccount(
       config.predicateConfig ?? predicates['verification-predicate'],
     );
+  }
 
-    this.configProviders(config);
+  modalFactory(config?: SolanaConfig) {
+    const solanaConfig = createSolanaConfig(config?.projectId);
+
+    return createSolanaWeb3ModalInstance({
+      projectId: config?.projectId,
+      solanaConfig,
+    });
   }
 
   // createModal re-instanciates the modal to update singletons from web3modal
   createModal() {
     this.destroy();
-    const { walletConnectModal } = createSolanaProvider(this.config);
-    this.web3Modal = walletConnectModal;
+    const web3Modal = this.modalFactory(this.config);
+    this.web3Modal = web3Modal;
     ApiController.prefetch();
     this.setupWatchers();
   }
 
-  async configProviders(config: SolanaConfig = {}) {
+  providerFactory(config?: SolanaConfig) {
+    return config?.fuelProvider || FuelProvider.create(TESTNET_URL);
+  }
+  configProviders(config: SolanaConfig) {
     this.config = Object.assign(config, {
-      fuelProvider: config.fuelProvider || FuelProvider.create(TESTNET_URL),
+      fuelProvider: this.providerFactory(config),
     });
   }
 
@@ -95,23 +106,32 @@ export class SolanaConnector extends FuelConnector {
     return account ? [account] : [];
   }
 
+  // Solana Web3Modal is Canary and not yet stable
+  // It shares the same events as WalletConnect, hence validations must be made in order to avoid running connections with EVM Addresses instead of Solana Addresses
   setupWatchers() {
     this.subscriptions.push(
       this.web3Modal.subscribeEvents((event) => {
         switch (event.data.event) {
+          case 'MODAL_OPEN':
+            // Ensures that the Solana Web3Modal config is applied over pre-existing states (e.g. WC Connect Web3Modal)
+            this.createModal();
+            break;
           case 'CONNECT_SUCCESS': {
+            const address = this.web3Modal.getAddress() || '';
+
+            if (!address || address.startsWith('0x')) {
+              return;
+            }
             this.emit(this.events.connection, true);
             this.emit(
               this.events.currentAccount,
-              this.predicateAccount.getPredicateAddress(
-                this.web3Modal.getAddress() ?? '',
-              ),
+              this.predicateAccount.getPredicateAddress(address),
             );
             this.emit(
               this.events.accounts,
               this.predicateAccount.getPredicateAccounts(this.svmAccounts()),
             );
-            this.svmAddress = this.web3Modal.getAddress() ?? '';
+            this.svmAddress = address;
             break;
           }
           case 'DISCONNECT_SUCCESS': {
@@ -177,7 +197,11 @@ export class SolanaConnector extends FuelConnector {
    * ============================================================
    */
   async ping(): Promise<boolean> {
-    await this.configProviders();
+    if (!this.config?.fuelProvider) {
+      this.config = Object.assign(this.config, {
+        fuelProvider: this.providerFactory(this.config),
+      });
+    }
     return true;
   }
 

packages/solana-connector/src/constants.ts

@@ -29,8 +29,15 @@ export const solanaDevnet = {
   chain: 'solana',
 };
 
-export const SolanaChains = {
+export const solanaChains = {
   MAINNET: solana,
   TESTNET: solanaTestnet,
   DEVNET: solanaDevnet,
 };
+export const DEFAULT_PROJECT_ID = '00000000000000000000000000000000';
+
+export const DEFAULT_CHAINS = [
+  solanaChains.MAINNET,
+  solanaChains.TESTNET,
+  solanaChains.DEVNET,
+];

packages/solana-connector/src/test/solanaConnector.test.ts

@@ -1,19 +1,13 @@
 import path from 'node:path';
 import { launchNodeAndGetWallets } from '@fuel-ts/account/test-utils';
-import type { Asset, Network, Provider } from 'fuels';
-import {
-  afterAll,
-  beforeAll,
-  beforeEach,
-  describe,
-  expect,
-  test,
-} from 'vitest';
+import type { Asset, Network } from 'fuels';
+import { beforeAll, describe, expect, test } from 'vitest';
 import { SolanaConnector } from '../SolanaConnector';
-import { TESTNET_URL } from '../constants';
 
 describe('Solana Connector', () => {
-  const connector = new SolanaConnector({ projectId: '0000' });
+  const projectId = '0000';
+
+  const connector = new SolanaConnector({ projectId });
 
   const snapshotPath = path.join(__dirname, '');
 

packages/solana-connector/src/test/testConnector.ts

@@ -4,7 +4,9 @@ import { SolanaConnector } from '../index';
 
 export class testWalletConnectConnector extends SolanaConnector {
   constructor(fuelProvider: Provider) {
-    super();
+    super({
+      fuelProvider: fuelProvider,
+    });
     this.fuelProvider = fuelProvider;
   }
 

packages/solana-connector/src/types.ts

@@ -1,3 +1,4 @@
+import type { Web3Modal } from '@web3modal/solana';
 import type { ProviderType } from '@web3modal/solana/dist/types/src/utils/scaffold';
 import type { Provider as FuelProvider, JsonAbi } from 'fuels';
 
@@ -10,7 +11,6 @@ export type SolanaConfig = {
   fuelProvider?: FuelProvider | Promise<FuelProvider>;
   projectId?: string;
   predicateConfig?: SolanaPredicateConfig;
-  solanaConfig?: ProviderType;
 };
 
 export interface GetAccounts {

packages/solana-connector/src/utils/solanaConfig.ts

@@ -0,0 +1,20 @@
+import {
+  type Web3Modal,
+  createWeb3Modal,
+  defaultSolanaConfig,
+} from '@web3modal/solana';
+import { DEFAULT_CHAINS, DEFAULT_PROJECT_ID } from '../constants';
+
+export function createSolanaConfig(projectId = DEFAULT_PROJECT_ID) {
+  return defaultSolanaConfig({
+    enableInjected: true,
+    chains: DEFAULT_CHAINS,
+    projectId,
+    metadata: {
+      name: 'Web3Modal',
+      description: 'Web3Modal Laboratory',
+      url: 'https://lab.web3modal.com',
+      icons: ['https://avatars.githubusercontent.com/u/37784886'],
+    },
+  });
+}