FuelLabs · helciofranco · Jan 28, 2025 · Jan 29, 2025 · Jan 29, 2025 · Jan 29, 2025
@@ -0,0 +1,10 @@
+---
+"@fuel-connectors/reown-connector": minor
+"@fuel-connectors/svm-predicates": minor
+"@fuel-connectors/evm-connector": minor
+"@fuels/connectors": minor
+"@fuel-connectors/common": minor
+"@fuels/react": minor
+---
+
+Remove `WalletConnectorConnector` and `SolanaConnector`, replacing them with `ReownConnector`.
@@ -0,0 +1,10 @@
+---
+"@fuel-connectors/reown-connector": minor
+"@fuel-connectors/svm-predicates": minor
+"@fuel-connectors/evm-connector": minor
+"@fuels/connectors": minor
+"@fuel-connectors/common": minor
+"@fuels/react": minor
+---
+
+Add `ReownConnector` to handle both Ethereum and Solana wallets with the latest `@appkit/reown`.
@@ -129,10 +129,10 @@ jobs:
         run: pnpm fuels build && pnpm fuels deploy
         working-directory: packages/evm-predicates
 
-      - name: Build & Deploy Solana Predicates
+      - name: Build & Deploy SVM Predicates
         run: pnpm fuels build && pnpm fuels deploy
         if: false # @TODO: Phantom CRX is currently broken, so we're skipping this step for now
-        working-directory: packages/solana-connector
+        working-directory: packages/svm-predicates
 
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps chromium

@@ -2,8 +2,7 @@
 const nextConfig = {
   transpilePackages: ['@fuels/connectors', '@fuels/react'],
   webpack: (config) => {
-    // https://github.com/WalletConnect/walletconnect-monorepo/issues/1908
-    // https://docs.walletconnect.com/web3modal/nextjs/about#extra-configuration
+    // https://docs.reown.com/appkit/next/core/installation#extra-configuration
     config.externals.push('pino-pretty', 'lokijs', 'encoding');
 
     return config;

@@ -11,14 +11,15 @@
     "@fuels/connectors": "workspace:*",
     "@fuels/react": "workspace:*",
     "@radix-ui/react-toast": "1.1.5",
+    "@reown/appkit": "1.6.5",
+    "@reown/appkit-adapter-solana": "1.6.5",
+    "@reown/appkit-adapter-wagmi": "1.6.5",
     "@tanstack/react-query": "5.35.1",
-    "@wagmi/connectors": "5.1.7",
-    "@wagmi/core": "2.13.4",
     "fuels": "0.96.1",
     "clsx": "2.1.1",
-    "connectkit": "1.8.2",
     "next": "14.2.22",
-    "wagmi": "2.12.7"
+    "viem": "2.22.17",
+    "wagmi": "2.14.9"
   },
   "devDependencies": {
     "@tanstack/react-query-devtools": "5.35.1",

@@ -6,27 +6,28 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type React from 'react';
 
+const queryClient = new QueryClient();
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const queryClient = new QueryClient();
-  const isDev = process.env.NODE_ENV === 'development';
-
   return (
     <html lang="en">
       <body>
         <QueryClientProvider client={queryClient}>
           <Toast.Provider>
             {children}
+
             <Toast.Viewport
               id="toast-viewport"
               className="fixed bottom-0 right-0 z-[100] m-0 flex w-[420px] max-w-[100vw] list-none flex-col gap-[10px] p-[var(--viewport-padding)] outline-none [--viewport-padding:_25px]"
             />
             <Toast.Root />
           </Toast.Provider>
-          {isDev && <ReactQueryDevtools initialIsOpen={false} />}
+
+          <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
       </body>
     </html>

@@ -1,15 +1,18 @@
 'use client';
 import { defaultConnectors } from '@fuels/connectors';
 import { FuelProvider } from '@fuels/react';
-import { coinbaseWallet, walletConnect } from '@wagmi/connectors';
-import { http, createConfig, injected } from '@wagmi/core';
-import { mainnet, sepolia } from '@wagmi/core/chains';
+import { createAppKit } from '@reown/appkit';
+import { SolanaAdapter } from '@reown/appkit-adapter-solana';
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
+import { type AppKitNetwork, mainnet, sepolia } from '@reown/appkit/networks';
 import { CHAIN_IDS, Provider, bn } from 'fuels';
 import App from 'react-app/src/App';
 import { ConfigProvider } from 'react-app/src/context/ConfigContext';
 import COUNTER_CONTRACT_ID_LOCAL from 'react-app/src/types/contract-ids-local.json';
 import COUNTER_CONTRACT_ID_MAINNET from 'react-app/src/types/contract-ids-mainnet.json';
 import COUNTER_CONTRACT_ID_TESTNET from 'react-app/src/types/contract-ids-testnet.json';
+import { http } from 'wagmi';
+import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors';
 
 const CHAIN_ID_NAME = process.env
   .NEXT_PUBLIC_CHAIN_ID_NAME as keyof typeof CHAIN_IDS.fuel;
@@ -38,6 +41,13 @@ const EXPLORER_URL_MAP: Record<keyof typeof CHAIN_IDS.fuel, string> = {
   mainnet: 'https://app-mainnet.fuel.network',
 };
 
+const METADATA = {
+  name: 'Wallet Demo',
+  description: 'Fuel Wallets Demo',
+  url: 'https://connectors.fuel.network',
+  icons: ['https://connectors.fuel.network/logo_white.png'],
+};
+
 const NETWORKS = [
   {
     chainId: CHAIN_ID,
@@ -47,15 +57,12 @@ const NETWORKS = [
 
 const WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID || '';
 
-const METADATA = {
-  name: 'Wallet Demo',
-  description: 'Fuel Wallets Demo',
-  url: 'https://connectors.fuel.network',
-  icons: ['https://connectors.fuel.network/logo_white.png'],
-};
+const networks: [AppKitNetwork, ...AppKitNetwork[]] = [mainnet, sepolia];
 
-const wagmiConfig = createConfig({
-  chains: [mainnet, sepolia],
+const solanaWeb3JsAdapter = new SolanaAdapter();
+const wagmiAdapter = new WagmiAdapter({
+  networks,
+  projectId: WC_PROJECT_ID,
   transports: {
     [mainnet.id]: http(),
     [sepolia.id]: http(),
@@ -77,11 +84,25 @@ const wagmiConfig = createConfig({
   ],
 });
 
+const appkit = createAppKit({
+  adapters: [wagmiAdapter, solanaWeb3JsAdapter],
+  enableWalletConnect: !!WC_PROJECT_ID,
+  projectId: WC_PROJECT_ID,
+  networks: networks,
+  allowUnsupportedChain: false,
+  allWallets: 'ONLY_MOBILE',
+  features: {
+    email: false,
+    socials: false,
+    analytics: false,
+  },
+});
+
 const FUEL_CONFIG = {
   connectors: defaultConnectors({
     devMode: true,
     wcProjectId: WC_PROJECT_ID,
-    ethWagmiConfig: wagmiConfig,
+    appkit,
     chainId: CHAIN_ID,
     fuelProvider: Provider.create(PROVIDER_URL),
   }),

@@ -21,7 +21,7 @@ const { VITE_FUEL_PROVIDER_URL, VITE_WALLET_SECRET } = process.env as Record<
   string
 >;
 
-test.describe('WalletConnectConnector', () => {
+test.describe('ReownConnector', () => {
   let metamask: MetaMask;
   test.slow();
   test.beforeEach(async ({ context, extensionId, metamaskPage, page }) => {
@@ -37,7 +37,11 @@ test.describe('WalletConnectConnector', () => {
   const commonConnect: ConnectorFunctions['connect'] = async (page) => {
     const connectButton = getButtonByText(page, 'Connect Wallet', true);
     await connectButton.click();
-    await getByAriaLabel(page, 'Connect to Ethereum Wallets', true).click();
+    await getByAriaLabel(
+      page,
+      'Connect to Ethereum / Solana Wallets',
+      true,
+    ).click();
     await page.getByText('Proceed').click();
     await getButtonByText(page, 'MetaMask', true).click();
     await metamask.connectToDapp();

@@ -16,6 +16,8 @@ import phantomExtended from './phantom/phantom';
 import { test } from './setup';
 
 // @TODO: Phantom CRX is currently broken, so we're skipping this step for now
+// When someone fixes it, we should move it to "ReownConnector" because SolanaConnector doesn't exist anymore
+// Find this PR to see more details and understand better.
 test.skip('SolanaConnector', () => {
   test.slow();
 

@@ -14,13 +14,16 @@
     "@fuels/connectors": "workspace:*",
     "@fuels/react": "workspace:*",
     "@radix-ui/react-toast": "1.1.5",
+    "@reown/appkit": "1.6.5",
+    "@reown/appkit-adapter-solana": "1.6.5",
+    "@reown/appkit-adapter-wagmi": "1.6.5",
     "@tanstack/react-query": "5.35.1",
-    "@wagmi/connectors": "5.1.7",
-    "@wagmi/core": "2.13.4",
     "clsx": "2.1.1",
     "fuels": "0.96.1",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "viem": "2.22.17",
+    "wagmi": "2.14.9"
   },
   "devDependencies": {
     "@tanstack/react-query-devtools": "5.35.1",

@@ -1,5 +1,5 @@
 import type { BN } from 'fuels';
-import React, { createContext, useContext, type ReactNode } from 'react';
+import { type ReactNode, createContext, useContext } from 'react';
 
 interface Config {
   explorerUrl: string;

@@ -4,45 +4,57 @@ import { counter as COUNTER_CONTRACT_ID_LOCAL } from './types/contract-ids-local
 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';
-
-import { coinbaseWallet, walletConnect } from '@wagmi/connectors';
-import { http, createConfig, injected } from '@wagmi/core';
-import { mainnet, sepolia } from '@wagmi/core/chains';
-
 import { defaultConnectors } from '@fuels/connectors';
 import { FuelProvider, type NetworkConfig } from '@fuels/react';
+import {
+  type AppKitNetwork,
+  mainnet,
+  sepolia,
+  solana,
+  solanaDevnet,
+  solanaTestnet,
+} from '@reown/appkit/networks';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors';
 
 import * as Toast from '@radix-ui/react-toast';
 
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
+import { CHAIN_IDS, type FuelConfig, Provider, bn } from 'fuels';
 import App from './App.tsx';
 import ScreenSizeIndicator from './components/screensize-indicator.tsx';
-import './index.css';
-import { CHAIN_IDS, type FuelConfig, Provider, bn } from 'fuels';
 import { ConfigProvider } from './context/ConfigContext.tsx';
+import './index.css';
+import { createAppKit } from '@reown/appkit';
+import { SolanaAdapter } from '@reown/appkit-adapter-solana';
 
 const queryClient = new QueryClient();
-const isDev = process.env.NODE_ENV === 'development';
 
 // ============================================================
-// WalletConnect Connector configurations
-// https://docs.walletconnect.com/web3modal/javascript/about
+// ReOwn Custom Connectors configurations
+// https://docs.reown.com/appkit/javascript/core/custom-connectors
 // ============================================================
 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(),
-  },
+const networks: [AppKitNetwork, ...AppKitNetwork[]] = [
+  mainnet,
+  sepolia,
+  solana,
+  solanaTestnet,
+  solanaDevnet,
+];
+
+const wagmiAdapter = new WagmiAdapter({
+  networks,
   syncConnectedChain: true,
+  projectId: WC_PROJECT_ID,
   connectors: [
     injected({ shimDisconnect: false }),
     walletConnect({
@@ -59,6 +71,22 @@ const wagmiConfig = createConfig({
   ],
 });
 
+const solanaWeb3JsAdapter = new SolanaAdapter();
+
+const appkit = createAppKit({
+  adapters: [wagmiAdapter, solanaWeb3JsAdapter],
+  enableWalletConnect: !!WC_PROJECT_ID,
+  projectId: WC_PROJECT_ID,
+  networks,
+  allowUnsupportedChain: false,
+  allWallets: 'ONLY_MOBILE',
+  features: {
+    email: false,
+    socials: false,
+    analytics: false,
+  },
+});
+
 const CHAIN_ID_NAME = import.meta.env
   .VITE_CHAIN_ID_NAME as keyof typeof CHAIN_IDS.fuel;
 const PROVIDER_URL = import.meta.env.VITE_FUEL_PROVIDER_URL;
@@ -80,7 +108,7 @@ const FUEL_CONFIG: FuelConfig = {
   connectors: defaultConnectors({
     devMode: true,
     wcProjectId: WC_PROJECT_ID,
-    ethWagmiConfig: wagmiConfig,
+    appkit,
     chainId: CHAIN_ID,
     fuelProvider: Provider.create(PROVIDER_URL),
   }),
@@ -133,7 +161,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         <ScreenSizeIndicator />
       </FuelProvider>
 
-      {isDev && <ReactQueryDevtools initialIsOpen={false} />}
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   </React.StrictMode>,
 );
@@ -2,8 +2,7 @@
 const nextConfig = {
   transpilePackages: ['@fuels/connectors', '@fuels/react'],
   webpack: (config) => {
-    // https://github.com/WalletConnect/walletconnect-monorepo/issues/1908
-    // https://docs.walletconnect.com/web3modal/nextjs/about#extra-configuration
+    // https://docs.reown.com/appkit/next/core/installation#extra-configuration
     config.externals.push('pino-pretty', 'lokijs', 'encoding');
 
     return config;

@@ -10,13 +10,16 @@
   "dependencies": {
     "@fuels/connectors": "workspace:*",
     "@fuels/react": "workspace:*",
+    "@reown/appkit": "1.6.5",
+    "@reown/appkit-adapter-solana": "1.6.5",
+    "@reown/appkit-adapter-wagmi": "1.6.5",
     "@tanstack/react-query": "5.35.1",
-    "connectkit": "1.8.2",
     "fuels": "0.96.1",
     "next": "14.2.22",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "wagmi": "2.12.7"
+    "viem": "2.22.17",
+    "wagmi": "2.14.9"
   },
   "devDependencies": {
     "@tanstack/react-query-devtools": "5.35.1",