feat(connector): Capsule connector

examples/react-app/package.json

@@ -15,6 +15,8 @@
     "@fuels/react": "workspace:*",
     "@radix-ui/react-toast": "1.1.5",
     "@tanstack/react-query": "5.35.1",
+    "@usecapsule/react-sdk": "4.10.0",
+    "@usecapsule/wagmi-v2-integration": "3.10.0",
     "@wagmi/connectors": "5.1.7",
     "@wagmi/core": "2.13.4",
     "clsx": "2.1.1",
@@ -27,6 +29,7 @@
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "4.2.1",
+    "vite-plugin-node-polyfills": "0.22.0",
     "autoprefixer": "10.4.19",
     "postcss": "8.4.38",
     "tailwindcss": "3.4.3",

examples/react-app/src/components/CapsuleClient.tsx

@@ -0,0 +1,6 @@
+import Capsule, { Environment } from '@usecapsule/react-sdk';
+
+export const capsuleClient = new Capsule(
+  Environment.BETA,
+  import.meta.env.VITE_CAPSULE_CLIENT_ID,
+);

examples/react-app/src/main.tsx

@@ -14,6 +14,9 @@ import { mainnet, sepolia } from '@wagmi/core/chains';
 import { defaultConnectors } from '@fuels/connectors';
 import { FuelProvider } from '@fuels/react';
 
+import { OAuthMethod } from '@usecapsule/react-sdk';
+import { capsuleConnector } from '@usecapsule/wagmi-v2-integration';
+
 import * as Toast from '@radix-ui/react-toast';
 
 import App from './App.tsx';
@@ -24,6 +27,8 @@ import { ConfigProvider } from './context/ConfigContext.tsx';
 
 const queryClient = new QueryClient();
 const isDev = process.env.NODE_ENV === 'development';
+import '@usecapsule/react-sdk/styles.css';
+import { capsuleClient } from './components/CapsuleClient.tsx';
 
 // ============================================================
 // WalletConnect Connector configurations
@@ -56,6 +61,17 @@ const wagmiConfig = createConfig({
       darkMode: true,
       reloadOnDisconnect: true,
     }),
+    capsuleConnector({
+      capsule: capsuleClient,
+      chains: [mainnet, sepolia],
+      appName: 'Capsule',
+      options: {},
+      nameOverride: 'Capsule',
+      oAuthMethods: Object.values(OAuthMethod),
+      disableEmailLogin: false,
+      disablePhoneLogin: false,
+      onRampTestMode: true,
+    }),
   ],
 });
 

examples/react-app/vite.config.ts

@@ -1,13 +1,33 @@
 import react from '@vitejs/plugin-react';
 import tailwindcss from 'tailwindcss';
 import { defineConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    nodePolyfills({
+      include: ['buffer', 'crypto', 'stream', 'util', 'url', 'path'],
+    }),
+  ],
   css: {
     postcss: {
       plugins: [tailwindcss()],
     },
   },
+  build: {
+    rollupOptions: {
+      external: [
+        'vite-plugin-node-polyfills/shims/process',
+        'vite-plugin-node-polyfills/shims/buffer',
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      process: 'vite-plugin-node-polyfills/shims/process',
+      buffer: 'vite-plugin-node-polyfills/shims/buffer',
+    },
+  },
 });

packages/capsule-connector/fuels.config.ts

@@ -0,0 +1,10 @@
+import { createConfig } from 'fuels';
+
+export default createConfig({
+  providerUrl: 'https://testnet.fuel.network/v1/graphql',
+  predicates: ['./predicate'],
+  output: './src/generated/tmp',
+  forcBuildFlags: ['--release'],
+  // needs the private key to deploy the predicate
+  privateKey: '0x',
+});

packages/capsule-connector/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@fuel-connectors/capsule-connector",
+  "version": "0.36.1",
+  "private": true,
+  "type": "module",
+  "files": ["dist"],
+  "main": "./dist/wallet-connector-capsule.umd.cjs",
+  "module": "./dist/wallet-connector-capsule.js",
+  "exports": {
+    ".": {
+      "import": "./dist/wallet-connector-capsule.js",
+      "require": "./dist/wallet-connector-capsule.umd.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts-only",
+    "build:watch": "tsup --watch --dts-only",
+    "ts:check": "tsc --noEmit",
+    "test": "vitest",
+    "versions:generate": "pnpm fuels build && pnpm fuels deploy && tsx ./scripts/versions.ts"
+  },
+  "peerDependencies": {
+    "@web3modal/core": ">=5.0.0",
+    "@web3modal/scaffold": ">=5.0.0",
+    "fuels": ">=0.96.1"
+  },
+  "dependencies": {
+    "@ethereumjs/util": "9.0.3",
+    "@ethersproject/bytes": "5.7.0",
+    "@solana/web3.js": "1.93.1",
+    "@web3modal/solana": "5.0.0",
+    "bs58": "6.0.0",
+    "memoizee": "0.4.15",
+    "tweetnacl": "1.0.3",
+    "@wagmi/core": "2.13.4"
+  },
+  "devDependencies": {
+    "@fuel-connectors/common": "workspace:*",
+    "@types/memoizee": "0.4.11",
+    "@usecapsule/web-sdk": "2.10.0",
+    "@web3modal/core": "5.0.0",
+    "fuels": "0.96.1",
+    "jsdom": "24.0.0",
+    "ts-loader": "9.5.1",
+    "ts-node": "10.9.2",
+    "tsup": "8.0.2",
+    "tsx": "4.9.3",
+    "typescript": "5.4.5",
+    "vite": "5.2.11",
+    "vite-plugin-dts": "3.9.1",
+    "vite-plugin-node-polyfills": "0.22.0",
+    "vitest": "2.0.2"
+  }
+}

packages/capsule-connector/predicate/Forc.lock

@@ -0,0 +1,13 @@
+[[package]]
+name = "core"
+source = "path+from-root-0F7AE5E23B79F5C1"
+
+[[package]]
+name = "std"
+source = "git+https://github.com/fuellabs/sway?tag=v0.65.1#3a9c171cd43611d7ccad94ab66a5093c6634717b"
+dependencies = ["core"]
+
+[[package]]
+name = "verification-predicate"
+source = "member"
+dependencies = ["std"]

packages/capsule-connector/predicate/Forc.toml

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

packages/capsule-connector/predicate/fuel-toolchain.toml

@@ -0,0 +1,6 @@
+[toolchain]
+channel = "latest"
+
+[components]
+fuel-core = "0.38.0"
+forc = "0.65.2"

packages/capsule-connector/predicate/src/main.sw

@@ -0,0 +1,55 @@
+predicate;
+
+use std::{
+    b512::B512,
+    constants::ZERO_B256,
+    hash::{
+        Hash,
+        sha256,
+    },
+    ecr::{
+        EcRecoverError,
+        ed_verify,
+    },
+    tx::{
+        tx_id,
+        tx_witness_data,
+    },
+    bytes::Bytes,
+};
+
+const ASCII_MAP: [u8; 16] = [
+    48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 97, 98, 99, 100, 101, 102
+];
+
+pub fn b256_to_ascii_bytes(val: b256) -> Bytes {
+    let bytes = Bytes::from(val);
+    let mut ascii_bytes = Bytes::with_capacity(64);
+    let mut idx = 0;
+
+    while idx < 32 {
+        let b = bytes.get(idx).unwrap();
+        ascii_bytes.push(ASCII_MAP[(b >> 4).as_u64()]);
+        ascii_bytes.push(ASCII_MAP[(b & 15).as_u64()]);
+	    idx = idx + 1;
+    }
+
+    ascii_bytes
+}
+
+configurable {
+    SIGNER: b256 = ZERO_B256,
+}
+
+fn main(witness_index: u64) -> bool {
+    let signature: B512 = tx_witness_data(witness_index).unwrap();
+    let encoded = b256_to_ascii_bytes(tx_id());
+    let result = ed_verify(SIGNER, signature, encoded);
+
+    if result.is_ok() {
+        return true;
+    }
+
+    // Otherwise, an invalid signature has been passed and we invalidate the Tx.
+    false
+}

packages/capsule-connector/scripts/versions.ts

@@ -0,0 +1,8 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { generateVersions } from '@fuel-connectors/common/scripts';
+
+const __filename = fileURLToPath(import.meta.url);
+const currentDir = path.dirname(__filename);
+const __dirname = path.normalize(`${currentDir}/../src/generated`);
+await generateVersions(__dirname);

packages/capsule-connector/src/CapsuleConnector.ts

@@ -0,0 +1,107 @@
+import {
+  type ConnectorConfig,
+  type EIP1193Provider,
+  type Maybe,
+  type MaybeAsync,
+  PredicateConnector,
+  type PredicateVersion,
+  type PredicateWalletAdapter,
+  type ProviderDictionary,
+  type SignedMessageCustomCurve,
+  getOrThrow,
+  getProviderUrl,
+} from '@fuel-connectors/common';
+import Capsule, { Environment } from '@usecapsule/web-sdk';
+import {
+  CHAIN_IDS,
+  type ConnectorMetadata,
+  FuelConnectorEventTypes,
+  Provider as FuelProvider,
+  type TransactionRequestLike,
+} from 'fuels';
+import { CAPSULE_ICON } from './constants';
+import type { CapsuleConfig } from './types';
+
+export class CapsuleConnector extends PredicateConnector {
+  sendTransaction(
+    _address: string,
+    _transaction: TransactionRequestLike,
+  ): Promise<string> {
+    throw new Error('sendTransaction not implemented.');
+  }
+  connect(): Promise<boolean> {
+    alert('connect');
+    throw new Error('connec2t not implemented.');
+  }
+  disconnect(): Promise<boolean> {
+    throw new Error('disconnect not implemented.');
+  }
+  protected configProviders(_config: ConnectorConfig): MaybeAsync<void> {
+    throw new Error('configProviders not implemented.');
+  }
+  protected getWalletAdapter(): PredicateWalletAdapter {
+    throw new Error('getWalletAdapter not implemented.');
+  }
+  protected getPredicateVersions(): Record<string, PredicateVersion> {
+    throw new Error('getPredicateVersions not implemented.');
+  }
+  protected getAccountAddress(): MaybeAsync<Maybe<string>> {
+    throw new Error('getAccountAddress not implemented.');
+  }
+  protected async getProviders(): Promise<ProviderDictionary> {
+    if (!this.config?.fuelProvider) {
+      this.config = Object.assign(this.config, {
+        fuelProvider: this.providerFactory(this.config),
+      });
+    }
+    if (!this.fuelProvider) {
+      this.fuelProvider = getOrThrow(
+        await this.config.fuelProvider,
+        'Fuel provider not found',
+      );
+    }
+
+    return {
+      fuelProvider: this.fuelProvider,
+    };
+  }
+
+  private providerFactory(config?: CapsuleConfig) {
+    const network = getProviderUrl(config?.chainId ?? CHAIN_IDS.fuel.testnet);
+    return config?.fuelProvider || FuelProvider.create(network);
+  }
+
+  protected async requireConnection() {
+    await this.capsule.init();
+  }
+  protected walletAccounts(): Promise<Array<string>> {
+    throw new Error('walletAccounts not implemented.');
+  }
+  signMessageCustomCurve(_message: string): Promise<SignedMessageCustomCurve> {
+    throw new Error('signMessageCustomCurve not implemented.');
+  }
+  name = 'Capsule';
+  installed = true;
+  events = FuelConnectorEventTypes;
+  metadata: ConnectorMetadata = {
+    image: CAPSULE_ICON,
+    install: {
+      action: 'Install',
+      description: 'Connect with Capsule',
+      link: 'https://usecapsule.com',
+    },
+  };
+
+  private fuelProvider!: FuelProvider;
+  private ethProvider!: EIP1193Provider;
+  private config: CapsuleConfig = {};
+  private capsule: Capsule;
+
+  constructor(config: CapsuleConfig) {
+    super();
+    this.capsule = new Capsule(
+      config.environment || Environment.BETA,
+      config.apiKey,
+    );
+  }
+}

packages/capsule-connector/src/constants.ts

@@ -0,0 +1,6 @@
+export const TESTNET_URL = 'https://testnet.fuel.network/v1/graphql';
+export const CAPSULE_ICON =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE0IiBoZWlnaHQ9IjgyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00MyAyOGEzLjMgMy4zIDAgMCAxLTQuNSAyIDMuNSAzLjUgMCAwIDEtMi00LjFsLjUtMy4xYTE4IDE4IDAgMCAwIDAtNSA4LjMgOC4zIDAgMCAwLTEuNC0zLjVjLS42LTEtMS41LTEuNy0yLjUtMi0xLjktLjgtNC0uNS02LjIuOGEyNC4yIDI0LjIgMCAwIDAtNi45IDcgNjkuNyA2OS43IDAgMCAwLTcgMTMgNzAuNSA3MC41IDAgMCAwLTQuNSAxNC4yYy0uNyA0LS44IDcuMi0uMSA5LjcuNiAyLjQgMS45IDQgMy43IDQuOCAxIC40IDIuMS41IDMuMi4zYTkgOSAwIDAgMCAzLjUtMS41IDI1LjQgMjUuNCAwIDAgMCA1LjMtNS44YzEtMS41IDIuOS0yLjEgNC41LTEuNSAxLjguOCAyLjYgMi45IDEuNiA0LjVhNTMgNTMgMCAwIDEtMTAuMSAxMi4zIDE4LjQgMTguNCAwIDAgMS02LjYgMy41IDEwIDEwIDAgMCAxLTYuMy0uNEM0LjIgNzIgMiA2OS40LjkgNjUuNkEzNCAzNCAwIDAgMSAuNiA1MWMxLTYgMy0xMi43IDYuMi0yMC4zYTg4LjIgODguMiAwIDAgMSAxMC40LTE4LjdDMjAuOCA3LjEgMjQuNCAzLjcgMjggMS44IDMxLjYtLjIgMzUtLjUgMzcuOC43YzIgLjggMy41IDIgNC43IDMuOCAxLjEgMS44IDEuOSA0IDIuMyA2LjYuNCAyLjcuMyA1LjctLjIgOS4xLS4zIDIuNC0uOSA1LTEuNyA3LjhaIiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTMxLjMgMzkuNGMuOC0xLjggMy0yLjcgNS0ybC4xLjFjMiAuOCAyLjggMyAyIDQuOC0uOCAyLTMgMi44LTQuOSAyaC0uMmMtMS45LS44LTIuOC0zLTItNC45Wk0xMDIuOCA2My45YTMzLjUgMzMuNSAwIDAgMS05LjIgMy42QTI4LjggMjguOCAwIDAgMSA3Ni4yIDY2IDI3IDI3IDAgMCAxIDYwIDQwLjVjMC00IC43LTcuNyAyLjEtMTEuMmEyNy40IDI3LjQgMCAwIDEgMzMuNy0xNmMyLjUuNyA0LjggMS43IDYuOCAzbC0xLjYgMy40YTI5IDI5IDAgMCAwLTYtMi44IDIyLjMgMjIuMyAwIDAgMC0xNi40LjggMjMuNiAyMy42IDAgMCAwLTEyLjggMTMgMjYuOCAyNi44IDAgMCAwLS4yIDE5IDIzLjIgMjMuMiAwIDAgMCAyMi4yIDE0LjggMjMuNiAyMy42IDAgMCAwIDEzLjMtNGwxLjggMy40Wk0xMjcuNCA2OC4xQTE1LjEgMTUuMSAwIDAgMSAxMTIgNTIuNGMwLTMuNC43LTYuMiAyLjItOC42YTE0IDE0IDAgMCAxIDUuOC01LjUgMTggMTggMCAwIDEgOC40LTEuOWMyLjcgMCA1LjIuOCA3LjYgMi40IDIuNCAxLjYgNC4xIDMuNiA1LjIgNmwtLjYgMS4xLjUtOC42aDMuMnYzMC4yaC0zLjZ2LTkuM2wuOCAxLjRjLS40IDEtMSAyLTEuOSAzYTE3LjYgMTcuNiAwIDAgMS03LjQgNC44Yy0xLjUuNS0zIC43LTQuOC43Wm0uOC0zYzIuMyAwIDQuMy0uNSA2LjEtMS41YTExLjggMTEuOCAwIDAgMCA2LjQtOS45di00LjNjLS40LTEuOS0xLjItMy42LTIuNS01QTEyLjkgMTIuOSAwIDAgMCAxMjIgNDFjLTIgMS0zLjQgMi41LTQuNiA0LjRhMTIuOSAxMi45IDAgMCAwLTEuNyA2LjdBMTIuNyAxMi43IDAgMCAwIDEyOC4yIDY1Wk0xNzQuNyA2OC4xYy0yLjkgMC01LjYtLjctOC0yLjJhMTQuMyAxNC4zIDAgMCAxLTUuNi02bC42LTEuM1Y4MkgxNThWMzcuMWgzLjJsLjQgOS45LS43LTIuM2MxLjMtMi40IDMuMy00LjQgNS45LTUuOWExNS43IDE1LjcgMCAwIDEgMTYuMi0uMyAxNS44IDE1LjggMCAwIDEgNy42IDEzLjljMCAzLS44IDUuNy0yLjIgOC4yYTE0LjggMTQuOCAwIDAgMS01LjcgNS41IDE2IDE2IDAgMCAxLTggMlptLS42LTNBMTIuNyAxMi43IDAgMCAwIDE4NyA1Mi40YTEyLjcgMTIuNyAwIDAgMC02LjMtMTEuMWMtMS44LTEuMi0zLjktMS43LTYuMy0xLjdhMTIuNSAxMi41IDAgMCAwLTEyLjYgMTEuNnYyLjVjLjEgMi4xLjggNCAyIDUuOCAxIDEuNyAyLjYgMy4xIDQuNCA0LjEgMS44IDEgMy44IDEuNSA2IDEuNVpNMjA4LjUgNjguMWMtMS43IDAtMy42LS4zLTUuNS0xLTEuOS0uNi0zLjQtMS42LTQuNi0zbDEuNy0yLjVjMSAxLjEgMi4yIDIgMy42IDIuN2ExMS40IDExLjQgMCAwIDAgNy45LjRjMS0uMyAyLTEgMi42LTEuOC43LS44IDEtMS45IDEtMy4zcy0uNC0yLjUtMS4yLTMuM2E4LjMgOC4zIDAgMCAwLTMtMS44IDM2IDM2IDAgMCAwLTMuOC0xLjRjLTIuMi0uNy00LTEuNy01LjUtMy0xLjQtMS4yLTItMy0yLTUuMiAwLTEuNy4zLTMgMS00LjMgMS0xLjMgMi0yLjIgMy40LTIuOSAxLjQtLjcgMy0xIDQuNy0xIDEuNiAwIDMuMi4yIDQuNy43IDEuNi41IDMgMS40IDQuMyAyLjZsLTEuNiAyLjZjLS44LTEuMS0yLTItMy4zLTIuMy0xLjMtLjQtMi41LS43LTMuNS0uN2E4IDggMCAwIDAtMi44LjVjLTEgLjQtMS44IDEtMi40IDEuNi0uNi43LTEgMS42LTEgMi43IDAgMS4yLjQgMi4yIDEgMyAuNy43IDEuNiAxLjMgMi42IDEuNyAxIC41IDIuMiAxIDMuMyAxLjMgMS41LjUgMyAxIDQuMiAxLjcgMS4zLjcgMi40IDEuNSAzLjIgMi42IDEgMSAxLjMgMi40IDEuMyA0LjJhMTAgMTAgMCAwIDEtMS4xIDQuN2MtLjggMS40LTIgMi41LTMuNSAzLjQtMS41LjctMy40IDEuMS01LjcgMS4xWk0yMzkuMyA2OC4zYy0yLjggMC01LS44LTYuOC0yLjRhOS40IDkuNCAwIDAgMS0yLjctNi42di0yMmgzLjd2MjFjMCAxLjkuNyAzLjUgMS44IDQuOCAxLjIgMS4zIDMgMiA1LjMgMiAyIDAgMy43LS40IDUuNC0xLjVhMTEuOCAxMS44IDAgMCAwIDUuNy0xMC4ydi0xNmgzLjd2MzAuMUgyNTJsLS40LTkuNS42IDJjLS41IDEuNi0xLjUgMy0yLjggNC4zYTE0LjIgMTQuMiAwIDAgMS00LjYgM2MtMS44LjctMy42IDEtNS42IDFaTTI2OS4xIDguOWgzLjZ2NTguNmgtMy42VjguOVpNMjk5LjYgNjguMWExNS40IDE1LjQgMCAwIDEtMTQtNy43IDE2LjQgMTYuNCAwIDAgMSA1LjktMjIgMTYgMTYgMCAwIDEgOC4xLTJjMy42IDAgNi43IDEgOSAzLjEgMi41IDIuMSA0LjMgNC45IDUuNCA4LjJMMjg3LjYgNThsLTEtMi42IDI0LTkuNC0uNyAxYTE0IDE0IDAgMCAwLTQtNS4yIDkuNyA5LjcgMCAwIDAtNi41LTIuM2MtMi4zIDAtNC40LjYtNi4yIDEuN2ExMyAxMyAwIDAgMC00LjUgNC42Yy0xLjEgMS45LTEuNiA0LTEuNiA2LjQgMCAyLjMuNSA0LjQgMS41IDYuNHMyLjYgMy41IDQuNSA0LjdjMS45IDEuMiA0IDEuOCA2LjUgMS44YTE1LjMgMTUuMyAwIDAgMCA4LjgtMy4zbDEuOSAyLjZhMTguOSAxOC45IDAgMCAxLTEwLjcgMy44WiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==';
+
+export const HAS_WINDOW = typeof window !== 'undefined';
+export const WINDOW = HAS_WINDOW ? window : null;

packages/capsule-connector/src/index.ts

@@ -0,0 +1,2 @@
+export * from './CapsuleConnector';
+export * from './types';

packages/capsule-connector/src/types.ts

@@ -0,0 +1,15 @@
+import type { PredicateConfig } from '@fuel-connectors/common';
+import type { Environment } from '@usecapsule/web-sdk';
+import type { Config as WagmiConfig } from '@wagmi/core';
+import type { Provider as FuelProvider, StorageAbstract } from 'fuels';
+
+export type CapsuleConfig = {
+  fuelProvider?: FuelProvider | Promise<FuelProvider>;
+  projectId?: string;
+  wagmiConfig?: WagmiConfig;
+  predicateConfig?: PredicateConfig;
+  storage?: StorageAbstract;
+  chainId?: number;
+  environment?: Environment;
+  apiKey?: string;
+};