Upgrade to latest wagmi version

apps/web/.env

@@ -4,4 +4,4 @@
 NEXT_PUBLIC_UPLOAD_API=https://upload-api.zora.co
 NEXT_PUBLIC_IPFS_GATEWAY=https://ipfs.decentralized-content.com
 NEXT_PUBLIC_CHAIN_ID=5
-NEXT_PUBLIC_NETWORK_TYPE=mainnet
+NEXT_PUBLIC_NETWORK_TYPE=testnet

apps/web/package.json

@@ -21,15 +21,14 @@
     "@farcaster/hub-nodejs": "^0.8.0",
     "@fontsource/inter": "4.5.10",
     "@fontsource/londrina-solid": "^4.5.9",
-    "@rainbow-me/rainbowkit": "^0.12.15",
+    "@rainbow-me/rainbowkit": "^1.0.8",
     "@sentry/nextjs": "^7.15.0",
     "@types/lodash": "^4.14.186",
     "@types/react-portal": "^4.0.4",
     "@types/tinycolor2": "^1.4.3",
     "@vanilla-extract/next-plugin": "^2.0.2",
     "@vanilla-extract/recipes": "^0.2.5",
     "@vercel/og": "^0.4.0",
-    "@wagmi/core": "0.10.15",
     "@zoralabs/nouns-protocol": "1.2.0",
     "@zoralabs/zord": "workspace:*",
     "analytics": "workspace:*",
@@ -63,7 +62,8 @@
     "remark-gfm": "^3.0.1",
     "swr": "^1.3.0",
     "tinycolor2": "^1.4.2",
-    "wagmi": "0.12.17",
+    "viem": "^1.6.0",
+    "wagmi": "1.3.10",
     "yup": "^0.32.9",
     "zustand": "^4.3.3"
   },
@@ -90,7 +90,7 @@
     "eslint-config-custom": "workspace:*",
     "jsdom": "^20.0.1",
     "tsconfig": "workspace:*",
-    "typescript": "^4.9.4",
+    "typescript": "^5.1.6",
     "vite": "^4.1.4",
     "vite-plugin-svgr": "^2.4.0",
     "vitest": "^0.27.3"

apps/web/src/components/Fields/SmartInput.tsx

@@ -6,7 +6,6 @@ import useSWR from 'swr'
 
 import { Icon } from 'src/components/Icon'
 import SWR_KEYS from 'src/constants/swrKeys'
-import { useLayoutStore } from 'src/stores'
 import { getEnsName } from 'src/utils/ens'
 import { isEmpty } from 'src/utils/helpers'
 
@@ -62,11 +61,9 @@ const SmartInput: React.FC<SmartInputProps> = ({
   disableWheelEvent = type === 'number',
   isAddress,
 }) => {
-  const { provider } = useLayoutStore()
-
   const { data: ensName } = useSWR(
     isAddress ? [SWR_KEYS.ENS, value] : null,
-    async () => await getEnsName(value as string, provider)
+    async () => await getEnsName(value as string)
   )
 
   /*

apps/web/src/data/contract/chains.ts

@@ -13,20 +13,18 @@ const TESTNET_CHAINS = [mainnet, goerli, optimismGoerli, baseGoerli, zoraGoerli]
 
 const AVAILIBLE_CHAINS = PUBLIC_IS_TESTNET ? TESTNET_CHAINS : MAINNET_CHAINS
 
-const { chains, provider } = configureChains(
+const { chains, publicClient } = configureChains(
   [...AVAILIBLE_CHAINS],
   [
     alchemyProvider({
       apiKey: process.env.NEXT_PUBLIC_ALCHEMY_ID as string,
-      stallTimeout: 1000,
     }),
     jsonRpcProvider({
       rpc: (chain) => ({
         http: RPC_URL[chain.id as CHAIN_ID],
       }),
-      stallTimeout: 1000,
     }),
   ]
 )
 
-export { chains, provider }
+export { chains, publicClient }

apps/web/src/data/contract/client.ts → apps/web/src/data/contract/config.ts

@@ -1,18 +1,18 @@
 import { getDefaultWallets } from '@rainbow-me/rainbowkit'
-import { createClient } from 'wagmi'
+import { createConfig } from 'wagmi'
 
 import { PUBLIC_WALLLET_CONNECT_PROJECT_ID } from 'src/constants/walletconnect'
 
-import { chains, provider } from './chains'
+import { chains, publicClient } from './chains'
 
 const { connectors } = getDefaultWallets({
   appName: 'Nouns builder',
   chains,
   projectId: PUBLIC_WALLLET_CONNECT_PROJECT_ID,
 })
 
-export const client = createClient({
+export const config = createConfig({
   autoConnect: true,
   connectors,
-  provider,
+  publicClient,
 })

apps/web/src/data/contract/requests/getDAOAddresses.ts

@@ -1,8 +1,9 @@
-import { readContract } from '@wagmi/core'
 import { ethers } from 'ethers'
+import { readContract } from 'wagmi/actions'
 
 import { PUBLIC_MANAGER_ADDRESS } from 'src/constants/addresses'
 import { AddressType, CHAIN_ID } from 'src/typings'
+import { unpackOptionalArray } from 'src/utils/helpers'
 
 import { managerAbi } from '../abis'
 
@@ -15,17 +16,19 @@ const getDAOAddresses = async (chainId: CHAIN_ID, tokenAddress: AddressType) =>
     chainId,
   })
 
+  const [metadata, auction, treasury, governor] = unpackOptionalArray(addresses, 4)
+
   const hasMissingAddresses = Object.values(addresses).includes(
     ethers.constants.AddressZero
   )
   if (hasMissingAddresses) return null
 
   return {
     token: tokenAddress,
-    auction: addresses.auction,
-    governor: addresses.governor,
-    metadata: addresses.metadata,
-    treasury: addresses.treasury,
+    auction,
+    governor,
+    metadata,
+    treasury,
   }
 }
 

apps/web/src/data/contract/requests/getPropertyItemsCount.ts

@@ -1,5 +1,4 @@
-import { readContract, readContracts } from '@wagmi/core'
-import { BigNumber } from 'ethers'
+import { readContract, readContracts } from 'wagmi/actions'
 
 import { AddressType, CHAIN_ID } from 'src/typings'
 
@@ -13,7 +12,7 @@ export const getPropertyItemsCount = async (
   const propertiesCount = await readContract({
     ...baseParams,
     functionName: 'propertiesCount',
-  }).then((x) => x.toNumber())
+  }).then((x) => Number(x))
 
   const contracts = Array(propertiesCount)
     .fill(0)
@@ -26,11 +25,12 @@ export const getPropertyItemsCount = async (
     })
 
   const propertyItemsCount = (await readContracts({
+    allowFailure: false,
     contracts,
-  })) as BigNumber[]
+  })) as bigint[]
 
   return {
     propertiesCount,
-    propertyItemsCount: propertyItemsCount.map((x) => x.toNumber()),
+    propertyItemsCount: propertyItemsCount.map((x) => Number(x)),
   }
 }

apps/web/src/data/contract/requests/getProposalState.ts

@@ -1,4 +1,4 @@
-import { readContract } from '@wagmi/core'
+import { readContract } from 'wagmi/actions'
 
 import { AddressType, BytesType, CHAIN_ID } from 'src/typings'
 

apps/web/src/data/contract/requests/getToken.ts

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/nextjs'
-import { readContract } from '@wagmi/core'
-import { BigNumber } from 'ethers'
 import { base64 } from 'ethers/lib/utils'
+import { readContract } from 'wagmi/actions'
 
 import { tokenAbi } from 'src/data/contract/abis'
 import {
@@ -30,7 +29,7 @@ const readTokenContractData = async (
     abi: tokenAbi,
     address: tokenAddress,
     functionName: 'tokenURI',
-    args: [BigNumber.from(id)],
+    args: [BigInt(id)],
     chainId,
   })
 

apps/web/src/data/contract/server.config.ts

@@ -0,0 +1,7 @@
+import { createConfig } from 'wagmi'
+
+import { publicClient } from './chains'
+
+createConfig({
+  publicClient,
+})

apps/web/src/data/subgraph/requests/getBids.ts

@@ -0,0 +1,17 @@
+import { formatEther } from 'viem'
+
+import { CHAIN_ID } from 'src/typings'
+
+import { SDK } from '../client'
+import { AuctionBidFragment } from '../sdk.generated'
+
+export const getBids = async (chainId: CHAIN_ID, collection: string, tokenId: string) => {
+  return SDK.connect(chainId)
+    .auctionBids({ id: `${collection.toLowerCase()}:${tokenId}` })
+    .then((x) =>
+      x.auction?.bids?.map((bid: AuctionBidFragment) => ({
+        ...bid,
+        amount: formatEther(bid.amount),
+      }))
+    )
+}

apps/web/src/hooks/useEnsData.ts

@@ -10,7 +10,7 @@ export const useEnsData = (address?: string) => {
   })
 
   const { data: ensAvatar } = useEnsAvatar({
-    address: address as `0x${string}`,
+    name: ensName,
     chainId: CHAIN_ID.ETHEREUM,
   })
 

apps/web/src/hooks/useVotes.ts

@@ -17,23 +17,24 @@ export const useVotes = ({
 }) => {
   const { data, isLoading } = useContractReads({
     enabled: !!collectionAddress && !!governorAddress && !!signerAddress,
+    allowFailure: false,
     contracts: [
       {
-        address: collectionAddress,
+        address: collectionAddress as AddressType,
         abi: tokenAbi,
         functionName: 'getVotes',
         args: [signerAddress as AddressType],
         chainId,
       },
       {
-        address: collectionAddress,
+        address: collectionAddress as AddressType,
         abi: tokenAbi,
         functionName: 'delegates',
         args: [signerAddress as AddressType],
         chainId,
       },
       {
-        address: governorAddress,
+        address: governorAddress as AddressType,
         abi: governorAbi,
         functionName: 'proposalThreshold',
         chainId,
@@ -54,8 +55,8 @@ export const useVotes = ({
   return {
     isLoading,
     isDelegating: delegates !== signerAddress,
-    isOwner: votes.toNumber() > 0,
-    hasThreshold: votes.toNumber() > proposalThreshold.toNumber(),
-    proposalVotesRequired: proposalThreshold.toNumber() + 1,
+    isOwner: votes > 0,
+    hasThreshold: votes > proposalThreshold,
+    proposalVotesRequired: proposalThreshold + BigInt(1),
   }
 }

apps/web/src/layouts/LayoutWrapper.tsx

@@ -2,34 +2,20 @@ import { Box, Stack } from '@zoralabs/zord'
 import { isBlocked } from 'blocklist'
 import { useRouter } from 'next/router'
 import React, { ReactNode } from 'react'
-import { useSigner } from 'wagmi'
+import { useAccount } from 'wagmi'
 
 import { Skull } from 'src/components/Skull'
 import { PUBLIC_DEFAULT_CHAINS } from 'src/constants/defaultChains'
-import { useDaoStore } from 'src/modules/dao'
 import { useLayoutStore } from 'src/stores'
 import { useChainStore } from 'src/stores/useChainStore'
-import { getProvider } from 'src/utils/provider'
 
 import { DefaultLayout } from './DefaultLayout'
 
 export function LayoutWrapper({ children }: { children: ReactNode }) {
-  const { data: signer, status } = useSigner()
-  const { setSigner, setProvider, setSignerAddress } = useLayoutStore()
   const { setIsMobile } = useLayoutStore()
-  const { addresses } = useDaoStore()
-  const { chain, setChain } = useChainStore()
+  const { setChain } = useChainStore()
   const { query } = useRouter()
-
-  // store signer, signerAddress and provider in store
-  React.useEffect(() => {
-    if (status === 'success') {
-      setProvider(signer?.provider ?? getProvider(chain.id))
-      setSigner(signer)
-      //@ts-ignore
-      setSignerAddress(signer?._address)
-    }
-  }, [status, chain.id, signer, setProvider, addresses, setSigner, setSignerAddress])
+  const { address } = useAccount()
 
   // add mobile flag to layout store
   React.useEffect(() => {
@@ -59,7 +45,7 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {
   }
 
   //@ts-ignore
-  if (isBlocked(signer?._address))
+  if (isBlocked(address))
     return (
       <DefaultLayout>
         <Stack align={'center'} py={'x32'}>