Upgrade to wagmi v2

.devcontainer/devcontainer.json

@@ -5,7 +5,8 @@
   // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
   "image": "mcr.microsoft.com/devcontainers/typescript-node:1-18-bookworm",
   "features": {
-    "ghcr.io/devcontainers-contrib/features/pnpm:2": {}
+    "ghcr.io/devcontainers-contrib/features/pnpm:2": {},
+    "ghcr.io/devcontainers/features/github-cli:1": {}
   },
   "hostRequirements": {
     "cpus": 4,
@@ -21,6 +22,6 @@
   "postCreateCommand": "pnpm install && pnpm build"
   // Configure tool-specific properties.
   // "customizations": {},
-  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+
   // "remoteUser": "root"
 }

.gitignore

@@ -5,6 +5,7 @@
 # dependencies
 /node_modules
 /.pnp
+/.pnpm-store
 .pnp.js
 
 # testing

apps/hosted-widget/package.json

@@ -17,18 +17,19 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
+    "@reown/appkit": "^1.0.7",
+    "@reown/appkit-adapter-wagmi": "^1.0.7",
     "@segment/analytics-next": "^1.74.0",
     "@sentry/nextjs": "^7.119.0",
     "@superfluid-finance/widget": "workspace:*",
-    "@web3modal/ethereum": "^2.7.1",
-    "@web3modal/react": "^2.7.1",
+    "@tanstack/react-query": "^5.59.0",
     "clsx": "^2.1.1",
     "next": "13.4.19",
     "react": "^18.3.1",
     "react-blockies": "^1.4.1",
     "react-dom": "^18.3.1",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13",
+    "viem": "^2.21.18",
+    "wagmi": "^2.12.17",
     "zod": "^3.23.8"
   },
   "devDependencies": {

apps/hosted-widget/pages/[hash].tsx

@@ -4,8 +4,9 @@ import Container from "@mui/material/Container";
 import { Theme } from "@mui/material/styles";
 import SuperfluidWidget from "@superfluid-finance/widget";
 import { extendedSuperTokenList } from "@superfluid-finance/widget/tokenlist";
-import { useWeb3Modal } from "@web3modal/react";
+import { useAppKit, useAppKitState } from "@reown/appkit/react";
 import { NextPage } from "next";
+import { headers } from "next/headers";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
@@ -23,10 +24,11 @@ type TypographyOptions = Theme["typography"];
 const IPFSWidgetPage: NextPage = () => {
   const { query } = useRouter();
 
-  const { open, isOpen } = useWeb3Modal();
+  const { open } = useAppKit();
+  const { open: isOpen } = useAppKitState();
   const walletManager = useMemo(
     () => ({
-      open,
+      open: () => open(),
       isOpen,
     }),
     [open, isOpen],
@@ -49,9 +51,9 @@ const IPFSWidgetPage: NextPage = () => {
   useFontLoader(fontFamily);
 
   const showLoader = loading && data === null;
-
+  const cookies = headers().get("cookie");
   return (
-    <WagmiProviders>
+    <WagmiProviders cookies={cookies}>
       <DemoWalletDisconnect />
       <AutoConnect />
       {showLoader ? (

apps/hosted-widget/pages/demo/[[...hash]].tsx

@@ -2,7 +2,6 @@ import { Box, Container, Fade } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import SuperfluidWidget from "@superfluid-finance/widget";
 import tokenList from "@superfluid-finance/widget/tokenlist";
-import { useWeb3Modal } from "@web3modal/react";
 import { NextPage } from "next";
 import Image from "next/image";
 import { useRouter } from "next/router";
@@ -16,6 +15,7 @@ import useFontLoader from "../../src/hooks/useFontLoader";
 import useLoadFromIPFS from "../../src/hooks/useLoadFromIPFS";
 import useWalletAnalytics from "../../src/hooks/useWalletAnalytics";
 import { deleteFlow } from "../../src/utils/deleteDemoFlow";
+import { useAppKit, useAppKitState } from "@reown/appkit/react";
 
 type TypographyOptions = Theme["typography"];
 
@@ -32,10 +32,11 @@ const IPFSWidgetPage: NextPage = () => {
 
   const [randomReceiver] = useState<`0x${string}`>(generateRandomReceiver());
 
-  const { open, isOpen } = useWeb3Modal();
+  const { open } = useAppKit();
+  const { open: isOpen } = useAppKitState();
   const walletManager = useMemo(
     () => ({
-      open,
+      open: () => open(),
       isOpen,
     }),
     [open, isOpen],

apps/hosted-widget/src/hooks/useAutoConnect.ts

@@ -9,7 +9,7 @@ function useAutoConnect() {
   useEffect(() => {
     AUTOCONNECTED_CONNECTOR_IDS.forEach((connector) => {
       const connectorInstance = connectors.find(
-        (c) => c.id === connector && c.ready,
+        (c: any) => c.id === connector && c.ready,
       );
 
       if (connectorInstance) {

apps/hosted-widget/src/hooks/useWalletAnalytics.ts

@@ -1,6 +1,7 @@
 import { AnalyticsBrowser } from "@segment/analytics-next";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Address, useAccount, useNetwork } from "wagmi";
+import { Address } from "viem";
+import { useAccount } from "wagmi";
 
 const NOT_CONNECTED = {
   isConnected: false,
@@ -12,11 +13,11 @@ const useWalletAnalytics = ({
   analyticsBrowser: AnalyticsBrowser;
 }) => {
   const {
+    chain: activeChain,
     connector: activeConnector,
     isConnected,
     address: activeAccountAddress,
   } = useAccount();
-  const { chain: activeChain } = useNetwork();
   const { track, reset } = analyticsBrowser;
 
   const identify = useCallback(

apps/hosted-widget/src/providers.tsx

@@ -1,22 +1,47 @@
-import { EthereumClient } from "@web3modal/ethereum";
-import { Web3Modal } from "@web3modal/react";
-import * as React from "react";
-import { WagmiConfig } from "wagmi";
+"use client";
+import { wagmiAdapter, projectId } from "./wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createAppKit } from "@reown/appkit/react";
+import { cookieToInitialState, WagmiProvider } from "wagmi";
+import { supportedNetworks } from "@superfluid-finance/widget";
 
-import { wagmiChains, wagmiConfig, walletConnectProjectId } from "./wagmi";
+// Set up queryClient
+const queryClient = new QueryClient();
 
-const ethereumClient = new EthereumClient(wagmiConfig, wagmiChains);
+if (!projectId) {
+  throw new Error("Project ID is not defined");
+}
+
+// Create the modal
+const modal = createAppKit({
+  adapters: [wagmiAdapter],
+  projectId,
+  networks: supportedNetworks.map((c) => ({
+    id: `eip155:${c.id}` as `eip155:${number}`,
+    chainId: c.id,
+    chainNamespace: "eip155",
+    name: c.name,
+    currency: c.nativeCurrency.name,
+    explorerUrl: c.blockExplorers!.default.url,
+    rpcUrl: c.rpcUrls.default.http[0],
+  })),
+});
+
+export function WagmiProviders({
+  children,
+  cookies,
+}: {
+  children: React.ReactNode;
+  cookies: string | null;
+}) {
+  const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig, cookies);
 
-export function WagmiProviders({ children }: { children: React.ReactNode }) {
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => setMounted(true), []);
   return (
-    <WagmiConfig config={wagmiConfig}>
-      {mounted && children}
-      <Web3Modal
-        projectId={walletConnectProjectId}
-        ethereumClient={ethereumClient}
-      />
-    </WagmiConfig>
+    <WagmiProvider
+      config={wagmiAdapter.wagmiConfig}
+      initialState={initialState}
+    >
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
   );
 }

apps/hosted-widget/src/utils/deleteDemoFlow.ts

@@ -19,8 +19,7 @@ export async function deleteFlow() {
   const cfaV1Forwarder = getContract({
     address: CFAV1ForwarderAddress,
     abi: cfAv1ForwarderABI,
-    publicClient,
-    walletClient,
+    client: walletClient,
   });
 
   const executeDelete = async () => {

apps/hosted-widget/src/wagmi.ts

@@ -1,53 +1,27 @@
+import { cookieStorage, createStorage, http } from "@wagmi/core";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { supportedNetworks } from "@superfluid-finance/widget";
-import { w3mConnectors, w3mProvider } from "@web3modal/ethereum";
-import { configureChains, createConfig } from "wagmi";
-import { SafeConnector } from "wagmi/connectors/safe";
-import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
-import { publicProvider } from "wagmi/providers/public";
 
-import { superfluidRpcUrls } from "./constants";
-
-export const walletConnectProjectId =
+export const projectId =
   process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ??
   "952483bf7a0f5ace4c40eb53967f1368";
 
-const { chains, publicClient } = configureChains(supportedNetworks, [
-  jsonRpcProvider({
-    rpc: (chain) => {
-      const rpcURL =
-        superfluidRpcUrls[chain.id as keyof typeof superfluidRpcUrls];
-
-      if (!rpcURL) {
-        return null;
-      }
-
-      return {
-        http: rpcURL,
-      };
-    },
+// Set up the Wagmi Adapter (Config)
+export const wagmiAdapter = new WagmiAdapter({
+  storage: createStorage({
+    storage: cookieStorage,
   }),
-  w3mProvider({ projectId: walletConnectProjectId }),
-  publicProvider(),
-]);
-
-export const wagmiChains = chains;
-
-const safeConnector = new SafeConnector({
-  chains: wagmiChains,
-  options: {
-    allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/],
-    debug: false,
-  },
+  ssr: true,
+  projectId,
+  networks: supportedNetworks.map((c) => ({
+    id: `eip155:${c.id}` as `eip155:${number}`,
+    chainId: c.id,
+    chainNamespace: "eip155",
+    name: c.name,
+    currency: c.nativeCurrency.name,
+    explorerUrl: c.blockExplorers!.default.url,
+    rpcUrl: c.rpcUrls.default.http[0],
+  })),
 });
 
-export const wagmiConfig = createConfig({
-  autoConnect: false,
-  connectors: [
-    ...w3mConnectors({
-      projectId: walletConnectProjectId,
-      chains: wagmiChains,
-    }),
-    ...(safeConnector.ready ? [safeConnector] : []),
-  ],
-  publicClient,
-});
+export const wagmiConfig = wagmiAdapter.wagmiConfig;

apps/widget-builder/package.json

@@ -37,8 +37,8 @@
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "~7.47.0",
     "request-ip": "^3.3.0",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13",
+    "viem": "^2.21.18",
+    "wagmi": "^2.12.17",
     "zod": "^3.23.8",
     "zod-to-json-schema": "^3.23.3"
   },

apps/widget-builder/src/hooks/useWalletAnalytics.ts

@@ -1,6 +1,6 @@
 import { AnalyticsBrowser } from "@segment/analytics-next";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Address, useAccount, useNetwork } from "wagmi";
+import { Address, useAccount, useAccount } from "wagmi";
 
 const NOT_CONNECTED = {
   isConnected: false,
@@ -16,7 +16,7 @@ const useWalletAnalytics = ({
     isConnected,
     address: activeAccountAddress,
   } = useAccount();
-  const { chain: activeChain } = useNetwork();
+  const { chain: activeChain } = useAccount();
   const { track, reset } = analyticsBrowser;
 
   const identify = useCallback(