Feat: upgrade turboETH to wagmi V2 (#190)

* feat: upgrade turboETH to wagmi V2

* feat: add enabled param to simulate hooks

* fix: remove goerli chains

.env.example

@@ -19,6 +19,9 @@ NEXT_PUBLIC_LIVEPEER_API_KEY=
 # Website URL
 NEXT_PUBLIC_SITE_URL=
 
+# WalletConnect Project: https://cloud.walletconnect.com/
+NEXT_PUBLIC_WC_PROJECT_ID=
+
 # -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 # Private Variables
 # -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

app/(general)/integration/erc20/[chainId]/[address]/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Address } from "wagmi"
+import { type Address } from "viem"
 
 import { ERC20Read } from "@/integrations/erc20/components/erc20-read"
 

app/(general)/integration/etherscan/page.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link"
 import { turboIntegrations } from "@/data/turbo-integrations"
 import { LuBook } from "react-icons/lu"
-import { useNetwork } from "wagmi"
+import { useAccount } from "wagmi"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
@@ -26,7 +26,7 @@ import { IsSignedIn } from "@/integrations/siwe/components/is-signed-in"
 import { IsSignedOut } from "@/integrations/siwe/components/is-signed-out"
 
 export default function EtherscanPage() {
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
   const { isLoading, data } = useEtherscanAccountTransactions({
     chainId: chain?.id || 1,
   })

app/dashboard/transactions/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useNetwork } from "wagmi"
+import { useAccount } from "wagmi"
 
 import { useUser } from "@/lib/hooks/use-user"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
@@ -40,7 +40,7 @@ export default function PageDashboardTransactions() {
 
 const Table = () => {
   const { user } = useUser()
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
   const { isLoading, data } = useEtherscanAccountTransactions(
     {
       chainId: chain?.id || 1,

components/app/app-users-table.tsx

@@ -1,5 +1,5 @@
 import { HTMLAttributes, useMemo } from "react"
-import { Address } from "wagmi"
+import { type Address } from "viem"
 
 import { Address as AddressComponent } from "@/components/blockchain/address"
 import type { Users } from "@/app/api/app/users/route"

components/blockchain/address.tsx

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from "react"
-import { useNetwork, type Address as AddressType } from "wagmi"
+import { type Address as AddressType } from "viem"
+import { useAccount } from "wagmi"
 
 import { LinkComponent } from "../shared/link-component"
 
@@ -16,7 +17,7 @@ export const Address = ({
   isLink,
   ...props
 }: AddressProps) => {
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
   const blockExplorerUrl = chain?.blockExplorers?.default.url
   const formattedAddress = truncate
     ? `${address.slice(0, 6)}...${address.slice(-4)}`

components/blockchain/block-explorer-link.tsx

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from "react"
-import { Address, useNetwork } from "wagmi"
+import { type Address } from "viem"
+import { useAccount } from "wagmi"
 
 import { cn } from "@/lib/utils"
 
@@ -17,7 +18,7 @@ export const BlockExplorerLink = ({
   type = "address",
   ...props
 }: BlockExplorerLinkProps) => {
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
   const blockExplorer = chain?.blockExplorers?.default
 
   if (!address) return null

components/blockchain/handle-wallet-events.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { ReactNode } from "react"
-import { useAccount } from "wagmi"
+import { useAccountEffect } from "wagmi"
 
 import { useUser } from "@/lib/hooks/use-user"
 import { siweLogout } from "@/integrations/siwe/actions/siwe-logout"
@@ -12,7 +12,7 @@ interface HandleWalletEventsProps {
 
 export const HandleWalletEvents = ({ children }: HandleWalletEventsProps) => {
   const { mutateUser } = useUser()
-  useAccount({
+  useAccountEffect({
     async onDisconnect() {
       await siweLogout()
       await mutateUser()

components/blockchain/network-status.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import Link from "next/link"
-import { useBlockNumber, useNetwork } from "wagmi"
+import { useAccount, useBlockNumber } from "wagmi"
 
 import { cn } from "@/lib/utils"
 import { GetNetworkColor } from "@/lib/utils/get-network-color"
@@ -18,7 +18,7 @@ const badgeVariants: Record<ReturnType<typeof GetNetworkColor>, string> = {
 
 export function NetworkStatus() {
   const { data } = useBlockNumber()
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
   const blockExplorerUrl = chain?.blockExplorers?.default.url
 
   if (!chain || !blockExplorerUrl) return null

components/blockchain/wallet-nonce.tsx

@@ -1,20 +1,13 @@
 import { HTMLAttributes } from "react"
-import { useAccount, usePublicClient, useQuery } from "wagmi"
+import { useAccount, useTransactionCount } from "wagmi"
 
 type WalletNonceProps = Omit<HTMLAttributes<HTMLSpanElement>, "children">
 
 export const WalletNonce = ({ className, ...props }: WalletNonceProps) => {
-  const publicClient = usePublicClient()
   const { address } = useAccount()
 
-  const { data: nonce } = useQuery(["wallet-nonce", address, publicClient], {
-    queryFn: async () => {
-      if (!publicClient || !address) return
-      return await publicClient.getTransactionCount({
-        address,
-      })
-    },
-    enabled: !!address && !!publicClient,
+  const { data: nonce } = useTransactionCount({
+    address,
   })
 
   return (

components/providers/rainbow-kit.tsx

@@ -2,56 +2,42 @@
 
 import "@rainbow-me/rainbowkit/styles.css"
 
-import { ReactNode } from "react"
+import { type ReactNode } from "react"
+import { env } from "@/env.mjs"
 import {
-  connectorsForWallets,
   darkTheme,
+  getDefaultConfig,
   lightTheme,
   RainbowKitProvider,
 } from "@rainbow-me/rainbowkit"
-import {
-  coinbaseWallet,
-  injectedWallet,
-  metaMaskWallet,
-  rainbowWallet,
-  walletConnectWallet,
-} from "@rainbow-me/rainbowkit/wallets"
-import { createConfig, WagmiConfig } from "wagmi"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { WagmiProvider } from "wagmi"
 
-import { chains, publicClient, webSocketPublicClient } from "@/config/networks"
+import { chains, transports } from "@/config/networks"
 import { siteConfig } from "@/config/site"
 import { useColorMode } from "@/lib/state/color-mode"
 
-const connectors = connectorsForWallets([
-  {
-    groupName: "Recommended",
-    wallets: [
-      injectedWallet({ chains }),
-      metaMaskWallet({ chains }),
-      rainbowWallet({ chains }),
-      coinbaseWallet({ chains, appName: siteConfig.name }),
-      walletConnectWallet({ chains }),
-    ],
-  },
-])
-
-const wagmiConfig = createConfig({
-  autoConnect: true,
-  connectors,
-  publicClient,
-  webSocketPublicClient,
+const wagmiConfig = getDefaultConfig({
+  appName: siteConfig.title,
+  projectId: env.NEXT_PUBLIC_WC_PROJECT_ID,
+  chains,
+  transports,
+  ssr: true,
 })
 
+const queryClient = new QueryClient()
+
 export function RainbowKit({ children }: { children: ReactNode }) {
   const [colorMode] = useColorMode()
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider
-        chains={chains}
-        theme={colorMode == "dark" ? darkTheme() : lightTheme()}
-      >
-        {children}
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider
+          theme={colorMode == "dark" ? darkTheme() : lightTheme()}
+        >
+          {children}
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   )
 }

components/providers/root-provider.tsx

@@ -1,15 +1,13 @@
 "use client"
 
 import { ReactNode } from "react"
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { ThemeProvider } from "next-themes"
 import { Provider as RWBProvider } from "react-wrap-balancer"
 
 import { useIsMounted } from "@/lib/hooks/use-is-mounted"
 import HandleWalletEvents from "@/components/blockchain/handle-wallet-events"
 import { RainbowKit } from "@/components/providers/rainbow-kit"
 
-const queryClient = new QueryClient()
 interface RootProviderProps {
   children: ReactNode
 }
@@ -23,13 +21,11 @@ export default function RootProvider({ children }: RootProviderProps) {
       enableSystem
       disableTransitionOnChange
     >
-      <QueryClientProvider client={queryClient}>
-        <RWBProvider>
-          <RainbowKit>
-            <HandleWalletEvents>{children}</HandleWalletEvents>
-          </RainbowKit>
-        </RWBProvider>
-      </QueryClientProvider>
+      <RWBProvider>
+        <RainbowKit>
+          <HandleWalletEvents>{children}</HandleWalletEvents>
+        </RainbowKit>
+      </RWBProvider>
     </ThemeProvider>
   ) : null
 }