feat: add Wallet Connect connector (#61)

Co-authored-by: Pedro Pereira <pedro.2108@hotmail.com>

.changeset/eighty-ducks-think.md

@@ -0,0 +1,6 @@
+---
+"@fuel-connectors/walletconnect-connector": patch
+"@fuels/connectors": patch
+---
+
+rename connector name and implement all methods

.github/workflows/pr.yaml

@@ -58,7 +58,6 @@ jobs:
       - uses: FuelLabs/github-actions/setups/node@master
         with:
           pnpm-version: 8.9.0
-
       - run: pnpm audit --prod
 
   lint:

examples/react-app/.gitignore

@@ -0,0 +1 @@
+.env

examples/react-app/package.json

@@ -12,6 +12,8 @@
     "@fuels/react": "0.18.1",
     "@radix-ui/react-toast": "1.1.5",
     "@tanstack/react-query": "5.28.8",
+    "@wagmi/connectors": "4.1.24",
+    "@wagmi/core": "2.0.1",
     "clsx": "2.1.0",
     "fuels": "0.79.0",
     "react": "18.2.0",

examples/react-app/src/App.tsx

@@ -46,7 +46,7 @@ export default function App() {
                     <img
                       src={currentConnector.logo}
                       alt={currentConnector.title}
-                      className="w-20"
+                      className="w-20 h-20"
                     />
                   )}
                 </div>

examples/react-app/src/main.tsx

@@ -4,7 +4,16 @@ import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-import { defaultConnectors } from '@fuels/connectors';
+import { coinbaseWallet, walletConnect } from '@wagmi/connectors';
+import { http, createConfig, injected } from '@wagmi/core';
+import { mainnet, sepolia } from '@wagmi/core/chains';
+
+import {
+  FuelWalletConnector,
+  FuelWalletDevelopmentConnector,
+  FueletWalletConnector,
+  WalletConnectConnector,
+} from '@fuels/connectors';
 import { FuelProvider } from '@fuels/react';
 
 import * as Toast from '@radix-ui/react-toast';
@@ -15,13 +24,54 @@ import './index.css';
 
 const queryClient = new QueryClient();
 
+// ============================================================
+// WalletConnect Connector configurations
+// https://docs.walletconnect.com/web3modal/javascript/about
+// ============================================================
+const WC_PROJECT_ID = import.meta.env.VITE_APP_WC_PROJECT_ID;
+const METADATA = {
+  name: 'Wallet Demo',
+  description: 'Fuel Wallets Demo',
+  url: location.href,
+  icons: ['https://connectors.fuel.network/logo_white.png'],
+};
+const wagmiConfig = createConfig({
+  chains: [mainnet, sepolia],
+  transports: {
+    [mainnet.id]: http(),
+    [sepolia.id]: http(),
+  },
+  connectors: [
+    injected({ shimDisconnect: false }),
+    walletConnect({
+      projectId: WC_PROJECT_ID,
+      metadata: METADATA,
+      showQrModal: false,
+    }),
+    coinbaseWallet({
+      appName: METADATA.name,
+      appLogoUrl: METADATA.icons[0],
+      darkMode: true,
+      reloadOnDisconnect: true,
+    }),
+  ],
+});
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <FuelProvider
         theme="dark"
         fuelConfig={{
-          connectors: defaultConnectors({ devMode: true }),
+          connectors: [
+            new FuelWalletConnector(),
+            new FueletWalletConnector(),
+            new WalletConnectConnector({
+              wagmiConfig,
+              projectId: WC_PROJECT_ID,
+            }),
+            new FuelWalletDevelopmentConnector(),
+          ],
         }}
       >
         <Toast.Provider>

examples/react-app/src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_WC_PROJECT_ID: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

packages/connectors/package.json

@@ -25,6 +25,7 @@
     "@fuel-connectors/fuel-wallet": "workspace:*",
     "@fuel-connectors/fuelet-wallet": "workspace:*",
     "@fuel-connectors/evm-connector": "workspace:*",
+    "@fuel-connectors/walletconnect-connector": "workspace:*",
     "@fuel-connectors/burner-wallet-connector": "workspace:*",
     "fuels": "0.79.0",
     "terser": "5.29.2",

packages/connectors/src/defaultConnectors.ts

@@ -1,8 +1,8 @@
 import { BurnerWalletConnector } from '@fuel-connectors/burner-wallet-connector';
-import { EVMWalletConnector } from '@fuel-connectors/evm-connector';
 import { FuelWalletDevelopmentConnector } from '@fuel-connectors/fuel-development-wallet';
 import { FuelWalletConnector } from '@fuel-connectors/fuel-wallet';
 import { FueletWalletConnector } from '@fuel-connectors/fuelet-wallet';
+import { WalletConnectConnector } from '@fuel-connectors/walletconnect-connector';
 import type { FuelConnector } from 'fuels';
 
 type DefaultConnectors = {
@@ -15,7 +15,7 @@ export function defaultConnectors({
   const connectors = [
     new FuelWalletConnector(),
     new FueletWalletConnector(),
-    new EVMWalletConnector(),
+    new WalletConnectConnector(),
     new BurnerWalletConnector(),
   ];
 

packages/connectors/src/index.ts

@@ -3,4 +3,5 @@ export * from '@fuel-connectors/fuel-development-wallet';
 export * from '@fuel-connectors/fuel-wallet';
 export * from '@fuel-connectors/fuelet-wallet';
 export * from '@fuel-connectors/evm-connector';
+export * from '@fuel-connectors/walletconnect-connector';
 export * from '@fuel-connectors/burner-wallet-connector';

packages/evm-connector/src/EvmWalletConnector.ts

@@ -68,7 +68,7 @@ export class EVMWalletConnector extends FuelConnector {
   async configProviders(config: EVMWalletConnectorConfig = {}) {
     this.config = Object.assign(config, {
       fuelProvider: config.fuelProvider || Provider.create(BETA_5_URL),
-      ethProvider: config.ethProvider || window.ethereum,
+      ethProvider: config.ethProvider || WINDOW?.ethereum,
     });
   }
 
@@ -77,7 +77,7 @@ export class EVMWalletConnector extends FuelConnector {
       setInterval(() => {
         if (WINDOW?.ethereum) {
           clearInterval(this._ethereumEvents);
-          window.dispatchEvent(
+          WINDOW.dispatchEvent(
             new CustomEvent('FuelConnector', { detail: this }),
           );
         }

packages/walletconnect-connector/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@fuel-connectors/walletconnect-connector",
+  "version": "0.0.1",
+  "type": "module",
+  "files": ["dist"],
+  "main": "./dist/wallet-connector-walletconnect.umd.cjs",
+  "module": "./dist/wallet-connector-walletconnect.js",
+  "exports": {
+    ".": {
+      "import": "./dist/wallet-connector-walletconnect.js",
+      "require": "./dist/wallet-connector-walletconnect.umd.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build:forc": "pnpm fuels-forc build --release --path ./predicate",
+    "build:resources": "pnpm run build:forc && tsx ./scripts/generatePredicateResources.ts",
+    "build": "tsup --dts-only",
+    "build:watch": "pnpm run build:resources && tsup --watch --dts-only",
+    "ts:check": "tsc --noEmit",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "fuels": ">=0.77.0"
+  },
+  "dependencies": {
+    "@ethereumjs/util": "^9.0.1",
+    "@ethersproject/bytes": "^5.7.0",
+    "@wagmi/core": "2.6.15",
+    "@web3modal/wagmi": "4.1.5",
+    "memoizee": "^0.4.15",
+    "viem": "2.9.9"
+  },
+  "devDependencies": {
+    "@fuel-ts/account": "^0.79.0",
+    "@fuel-ts/forc": "0.79.0",
+    "@fuel-ts/fuel-core": "^0.79.0",
+    "@types/memoizee": "^0.4.11",
+    "fuels": "^0.79.0",
+    "jsdom": "24.0.0",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "tsup": "8.0.2",
+    "tsx": "^4.7.0",
+    "typescript": "5.4.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.6.4",
+    "vitest": "^1.4.0"
+  }
+}

packages/walletconnect-connector/predicate/Forc.lock

@@ -0,0 +1,13 @@
+[[package]]
+name = "core"
+source = "path+from-root-566CA1D5F8BEAFBF"
+
+[[package]]
+name = "predicate"
+source = "member"
+dependencies = ["std"]
+
+[[package]]
+name = "std"
+source = "git+https://github.com/fuellabs/sway?tag=v0.49.3#0dc6570377ee9c4a6359ade597fa27351e02a728"
+dependencies = ["core"]

packages/walletconnect-connector/predicate/Forc.toml

@@ -0,0 +1,5 @@
+[project]
+authors = ["Fuel Labs <contact@fuel.sh>"]
+entry = "main.sw"
+license = "Apache-2.0"
+name = "predicate"

packages/walletconnect-connector/predicate/out/release/predicate-abi.json

@@ -0,0 +1,65 @@
+{
+  "types": [
+    {
+      "typeId": 0,
+      "type": "b256",
+      "components": null,
+      "typeParameters": null
+    },
+    {
+      "typeId": 1,
+      "type": "bool",
+      "components": null,
+      "typeParameters": null
+    },
+    {
+      "typeId": 2,
+      "type": "struct EvmAddress",
+      "components": [
+        {
+          "name": "value",
+          "type": 0,
+          "typeArguments": null
+        }
+      ],
+      "typeParameters": null
+    },
+    {
+      "typeId": 3,
+      "type": "u64",
+      "components": null,
+      "typeParameters": null
+    }
+  ],
+  "functions": [
+    {
+      "inputs": [
+        {
+          "name": "witness_index",
+          "type": 3,
+          "typeArguments": null
+        }
+      ],
+      "name": "main",
+      "output": {
+        "name": "",
+        "type": 1,
+        "typeArguments": null
+      },
+      "attributes": null
+    }
+  ],
+  "loggedTypes": [],
+  "messagesTypes": [],
+  "configurables": [
+    {
+      "name": "SIGNER",
+      "configurableType": {
+        "name": "",
+        "type": 2,
+        "typeArguments": []
+      },
+      "offset": 1952
+    }
+  ]
+}

packages/walletconnect-connector/predicate/out/release/predicate-bin-root

@@ -0,0 +1 @@
+0xad8bfa6ad9c15d9d57af61964c2372ed1fa1ace00aeefbc8ed5cf07192510d68