feat: update to wagmi v2 (vol. 2)

.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

@@ -11,32 +11,33 @@
     "tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@emotion/cache": "^11.13.1",
-    "@emotion/react": "^11.13.3",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/material": "^5.16.7",
-    "@segment/analytics-next": "^1.75.0",
-    "@sentry/nextjs": "^7.119.1",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^5.16.11",
+    "@mui/material": "^5.16.11",
+    "@reown/appkit": "^1.6.0",
+    "@reown/appkit-adapter-wagmi": "^1.6.0",
+    "@segment/analytics-next": "^1.76.0",
+    "@sentry/nextjs": "^7.120.1",
     "@superfluid-finance/widget": "workspace:*",
-    "@web3modal/ethereum": "^2.7.1",
-    "@web3modal/react": "^2.7.1",
+    "@tanstack/react-query": "^5.62.8",
     "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",
-    "zod": "^3.23.8"
+    "viem": "^2.21.55",
+    "wagmi": "^2.14.3",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@types/node": "^22.7.5",
-    "@types/react": "^18.3.11",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.16",
     "@types/react-blockies": "^1.4.4",
     "eslint": "^8.57.1",
     "eslint-config-next": "^13.5.7",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.2"
   }
 }

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

@@ -2,9 +2,9 @@ import { Fade } from "@mui/material";
 import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
 import { Theme } from "@mui/material/styles";
+import { useAppKit, useAppKitState } from "@reown/appkit/react";
 import SuperfluidWidget from "@superfluid-finance/widget";
 import { extendedSuperTokenList } from "@superfluid-finance/widget/tokenlist";
-import { useWeb3Modal } from "@web3modal/react";
 import { NextPage } from "next";
 import Image from "next/image";
 import { useRouter } from "next/router";
@@ -23,10 +23,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 +50,8 @@ const IPFSWidgetPage: NextPage = () => {
   useFontLoader(fontFamily);
 
   const showLoader = loading && data === null;
-
   return (
-    <WagmiProviders>
+    <WagmiProviders cookies={null}>
       <DemoWalletDisconnect />
       <AutoConnect />
       {showLoader ? (

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(