feat: Add Bako predicates to EVM wallet connector

.changeset/bako-predicate-integration.md

@@ -0,0 +1,11 @@
+---
+"@fuel-connectors/bako-predicate-connector": minor
+"@fuel-connectors/walletconnect-connector": minor
+---
+
+feat: Add Bako predicate connector integration for EVM wallets
+
+- Add new `@fuel-connectors/bako-predicate-connector` package that manages predicate versions and communicates with Bako servers
+- Update `walletconnect-connector` to extend from the new bako predicate connector
+- Enable EVM connector wallets to be accessed through the Bako interface
+- Add backward compatibility support for legacy predicates

.changeset/privy-provider-refactor.md

@@ -0,0 +1,14 @@
+---
+"@fuels/react": minor
+"@fuel-connectors/common": patch
+---
+
+refactor: Move Privy provider to @fuels/react package
+
+- Add `PrivyInternalProvider` component for managing Privy app initialization and configuration
+- Add `PrivyEventsWatcher` component for monitoring Privy authentication state changes
+- Implement `PrivyAuthObserver` for subscribing to Privy login/logout events
+- Add Privy type definitions and configuration constants to `@fuels/react`
+- Export Privy types from `@fuel-connectors/common`: `PrivyAuthEventTypes` enum and `IPrivyAuthObserver` interface
+- Simplify `FuelProvider` to conditionally render Privy providers based on `socialLogin` configuration
+- Improve provider hierarchy and separation of concerns

.changeset/social-connector-integration.md

@@ -0,0 +1,13 @@
+---
+"@fuel-connectors/social-connector": minor
+"@fuels/connectors": patch
+"@fuels/react": minor
+---
+
+feat: Add social login connector via Privy
+
+- Add new `@fuel-connectors/social-connector` package for social authentication (Google/Email) via Privy
+- Extends `PredicateConnector` from `bako-predicate-connector` to leverage Bako Safe integration
+- Export `SocialConnector` and types from `@fuels/connectors` bundle
+- Move Privy provider configuration to `@fuels/react` package with `PrivyInternalProvider` and `PrivyEventsWatcher` utilities
+- Add Privy as a peer dependency in `@fuels/react`

.github/workflows/pr-tests.yml

@@ -138,10 +138,14 @@ jobs:
         run: pnpm build:connectors
 
       - name: Install Playwright Dependencies
-        run: pnpm dlx playwright@1.48.2 install-deps
+        run: |
+          pnpm dlx playwright@1.48.2 install-deps
+          pnpm dlx playwright@1.57.0 install-deps
 
       - name: Install Chromium
-        run: pnpm dlx playwright@1.48.2 install chromium
+        run: |
+          pnpm dlx playwright@1.48.2 install chromium
+          pnpm dlx playwright@1.57.0 install chromium
 
       - name: Build Synpress cache
         run: xvfb-run pnpm setup:synpress

Forc.lock

@@ -1,3 +1,7 @@
+[[package]]
+name = "core"
+source = "path+from-root-6A8836696D55BC6E"
+
 [[package]]
 name = "counter"
 source = "member"
@@ -29,7 +33,8 @@ dependencies = ["std"]
 
 [[package]]
 name = "std"
-source = "git+https://github.com/fuellabs/sway?tag=v0.68.1#7e1bc152face6f1ae20b4274d98446100920e573"
+source = "git+https://github.com/fuellabs/sway?tag=v0.66.5#94a066652468b4afa3bd396dacef482ed590976b"
+dependencies = ["core"]
 
 [[package]]
 name = "sway_libs"

e2e-tests/react-next/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev -p 3002",
+    "build": "next build",
     "start": "next start"
   },
   "dependencies": {
@@ -18,6 +19,7 @@
     "clsx": "2.1.1",
     "connectkit": "1.8.2",
     "next": "14.2.26",
+    "viem": "2.20.1",
     "wagmi": "2.12.7"
   },
   "devDependencies": {

e2e-tests/react-next/src/app/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { defaultConnectors } from '@fuels/connectors';
 import { FuelProvider } from '@fuels/react';
 import { coinbaseWallet, walletConnect } from '@wagmi/connectors';
@@ -17,7 +18,10 @@ import COUNTER_CONTRACT_ID_TESTNET from 'react-app/src/types/contract-ids-testne
 const CHAIN_ID_NAME = process.env
   .NEXT_PUBLIC_CHAIN_ID_NAME as keyof typeof CHAIN_IDS.fuel;
 const CHAIN_ID = CHAIN_IDS.fuel[CHAIN_ID_NAME] || 0;
-const PROVIDER_URL = process.env.NEXT_PUBLIC_PROVIDER_URL;
+// Use a fallback for build time when env vars are not available
+const PROVIDER_URL =
+  process.env.NEXT_PUBLIC_PROVIDER_URL ||
+  'https://testnet.fuel.network/v1/graphql';
 
 const CUSTOM_TRANSFER_AMOUNT = process.env.NEXT_PUBLIC_CUSTOM_TRANSFER_AMOUNT;
 const FALLBACK_TRANSFER_AMOUNT =
@@ -30,10 +34,6 @@ const CUSTOM_ASSET_ID = process.env.NEXT_PUBLIC_CUSTOM_ASSET_ID ?? undefined;
 const CUSTOM_ASSET_SYMBOL =
   process.env.NEXT_PUBLIC_CUSTOM_ASSET_SYMBOL ?? 'ETH';
 
-if (!PROVIDER_URL) {
-  throw new Error(`PROVIDER_URL is not set: ${PROVIDER_URL}`);
-}
-
 function getContractId() {
   switch (CHAIN_ID_NAME) {
     case 'mainnet':

e2e-tests/react-next/tsconfig.json

@@ -24,6 +24,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }

e2e-tests/runner/package.json

@@ -18,7 +18,7 @@
     "start:react-next": "pnpm --filter @e2e-tests/react-next dev",
     "start:servers": "pnpm run start:react-app & pnpm run start:react-next",
     "deploy:contracts": "sh ./scripts/deployLocal.sh",
-    "deploy:contracts:ci": "sh ./scripts/deployCI.sh",
+    "deploy:contracts:ci": "bash ./scripts/deployCI.sh",
     "setup:synpress": "synpress examples/synpress/metamask && synpress --phantom examples/synpress/phantom"
   },
   "devDependencies": {

e2e-tests/runner/scripts/deployCI.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Get the directory where the script is located
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)/scripts"
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 
 echo "Build contracts"
 pnpm fuels build 

examples/react-app/src/main.tsx

@@ -1,8 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { counter as COUNTER_CONTRACT_ID_LOCAL } from './types/contract-ids-local.json';
-import { counter as COUNTER_CONTRACT_ID_MAINNET } from './types/contract-ids-mainnet.json';
-import { counter as COUNTER_CONTRACT_ID_TESTNET } from './types/contract-ids-testnet.json';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -80,16 +77,6 @@ const NETWORKS: NetworkConfig[] = [
   },
 ];
 
-const FUEL_CONFIG: FuelConfig = {
-  connectors: defaultConnectors({
-    devMode: true,
-    wcProjectId: WC_PROJECT_ID,
-    ethWagmiConfig: wagmiConfig,
-    chainId: CHAIN_ID,
-    fuelProvider: new Provider(PROVIDER_URL),
-  }),
-};
-
 const config: Config = {
   explorerUrl: EXPLORER_URL,
   providerUrl: PROVIDER_URL,
@@ -100,10 +87,26 @@ const config: Config = {
   assetSymbol: CUSTOM_ASSET_SYMBOL,
 };
 
+// Create fuel config with all connectors
+const fuelConfig: FuelConfig = {
+  connectors: defaultConnectors({
+    devMode: true,
+    wcProjectId: WC_PROJECT_ID,
+    ethWagmiConfig: wagmiConfig,
+    chainId: CHAIN_ID,
+    fuelProvider: new Provider(PROVIDER_URL),
+  }),
+};
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <FuelProvider theme="dark" networks={NETWORKS} fuelConfig={FUEL_CONFIG}>
+      <FuelProvider
+        theme="dark"
+        networks={NETWORKS}
+        fuelConfig={fuelConfig}
+        socialLogin
+      >
         <ConfigProvider config={config}>
           <Toast.Provider>
             <App />
@@ -115,7 +118,6 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         </ConfigProvider>
         <ScreenSizeIndicator />
       </FuelProvider>
-
       {isDev && <ReactQueryDevtools initialIsOpen={false} />}
     </QueryClientProvider>
   </React.StrictMode>,

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

@@ -42,7 +42,12 @@ export const FuelProviders = ({ children }: { children: React.ReactNode }) => {
       >
         Switch theme {theme}
       </button>
-      <FuelProvider theme={theme} fuelConfig={FUEL_CONFIG} networks={NETWORKS}>
+      <FuelProvider
+        theme={theme}
+        fuelConfig={FUEL_CONFIG}
+        networks={NETWORKS}
+        socialLogin
+      >
         {children}
       </FuelProvider>
     </>

examples/react-next/tsconfig.json

@@ -22,6 +22,12 @@
     },
     "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }

package.json

@@ -65,7 +65,14 @@
   },
   "packageManager": "pnpm@9.5.0",
   "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "@wagmi/connectors": "5.1.7"
+      }
+    },
     "overrides": {
+      "js-yaml@<3.14.2": "3.14.2",
+      "uglify-js@<2.6.0": ">=2.6.0",
       "braces@<3.0.3": ">=3.0.3",
       "ws@>=8.0.0 <8.17.1": ">=8.17.1",
       "ws@>=7.0.0 <7.5.10": ">=7.5.10",
@@ -80,8 +87,16 @@
       "@babel/runtime@<7.26.10": ">=7.26.10",
       "@babel/helpers@<7.26.10": ">=7.26.10",
       "image-size@<1.2.1": ">=1.2.1",
-      "vite@>=5.0.0 <5.4.18": ">=5.4.18",
-      "form-data@>=4.0.0 <4.0.4": ">=4.0.4"
+      "vite@>=5.0.0 <=5.4.20": "5.4.21",
+      "form-data@>=4.0.0 <4.0.4": ">=4.0.4",
+      "next@>=13.0.0 <14.2.35": "14.2.35",
+      "axios@>=1.0.0 <1.12.0": ">=1.12.0",
+      "glob@>=10.2.0 <10.5.0": ">=10.5.0",
+      "playwright@<1.55.1": ">=1.55.1",
+      "@metamask/sdk@>=0.16.0 <=0.33.0": ">=0.33.1",
+      "@metamask/sdk-communication-layer@>=0.16.0 <=0.33.0": ">=0.33.1",
+      "wagmi": "2.12.7",
+      "@wagmi/connectors": "5.1.7"
     }
   }
 }

packages/bako-predicate-connector/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@fuel-connectors/bako-predicate-connector",
+  "version": "0.44.1",
+  "private": true,
+  "files": ["dist"],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup --dts",
+    "build:watch": "tsup --watch --dts",
+    "ts:check": "tsc --noEmit",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "fuels": "0.102.0"
+  },
+  "dependencies": {
+    "@ethersproject/bytes": "5.7.0",
+    "@solana/web3.js": "1.93.2",
+    "bakosafe": "0.6.0",
+    "bs58": "6.0.0",
+    "memoizee": "0.4.15",
+    "socket.io-client": "4.7.2",
+    "tweetnacl": "1.0.3",
+    "viem": "2.20.1"
+  },
+  "devDependencies": {
+    "@types/memoizee": "0.4.11",
+    "terser": "5.31.0",
+    "tsup": "8.0.2",
+    "typescript": "5.4.5",
+    "vitest": "2.1.9"
+  }
+}

packages/bako-predicate-connector/src/FakeAccount.ts

@@ -0,0 +1,68 @@
+import { Keypair } from '@solana/web3.js';
+import nacl from 'tweetnacl';
+import { type PrivateKeyAccount, privateKeyToAccount } from 'viem/accounts';
+import type { Hash, Option } from './types';
+
+export interface FakeAccount {
+  generate: () => void;
+  getAddress: () => Option<string, Hash>;
+  getRawAddress: () => Uint8Array;
+  signMessage: (
+    message: Option<string, Uint8Array, Hash>,
+  ) => Promise<Option<string, Uint8Array, Hash>>;
+}
+
+export class EthereumFakeAccount implements FakeAccount {
+  private account!: PrivateKeyAccount;
+  constructor() {
+    this.generate();
+  }
+
+  generate = (): void => {
+    this.account = privateKeyToAccount(
+      '0x0000000000000000000000000000000000000000000000000000000000000001',
+    );
+  };
+
+  getAddress = (): Option<string, Hash> => this.account.address;
+  getRawAddress = (): Uint8Array =>
+    Buffer.from(this.account.address.slice(2), 'hex');
+
+  signMessage = (
+    message: Option<string, Uint8Array, Hash>,
+  ): Promise<Option<string, Uint8Array, Hash>> => {
+    return this.account.signMessage({
+      message: message as string,
+    });
+  };
+}
+
+export class SolanaFakeAccount implements FakeAccount {
+  private keypair!: Keypair;
+  constructor() {
+    this.generate();
+  }
+
+  generate = (): void => {
+    this.keypair = Keypair.generate();
+  };
+
+  getAddress = (): Option<string, Hash> => this.keypair.publicKey.toString();
+  getRawAddress = (): Uint8Array => this.keypair.publicKey.toBytes();
+
+  private getSmallTxId = (
+    message: Option<string, Uint8Array, Hash>,
+  ): Uint8Array => {
+    const txIdNo0x = message.slice(2);
+    const idBytes = `${txIdNo0x.slice(0, 16)}${txIdNo0x.slice(-16)}`;
+    return new TextEncoder().encode(idBytes);
+  };
+
+  signMessage = (
+    message: Option<string, Uint8Array, Hash>,
+  ): Promise<Option<string, Uint8Array, Hash>> => {
+    return Promise.resolve(
+      nacl.sign.detached(this.getSmallTxId(message), this.keypair.secretKey),
+    );
+  };
+}