Merge pull request #350 from ourzora/wagmi-upgrade

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:*",
@@ -64,7 +63,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"
   },
@@ -91,7 +91,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/BridgeModal/BridgeForm.tsx

@@ -1,12 +1,12 @@
 import { useConnectModal } from '@rainbow-me/rainbowkit'
-import { sendTransaction } from '@wagmi/core'
 import { Box, Button, Flex, Heading, Text } from '@zoralabs/zord'
-import { parseEther } from 'ethers/lib/utils.js'
 import { Formik } from 'formik'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useState } from 'react'
+import { parseEther } from 'viem'
 import { useAccount, useBalance, useNetwork, useSwitchNetwork } from 'wagmi'
+import { sendTransaction, waitForTransaction } from 'wagmi/actions'
 
 import Input from 'src/components/Input/Input'
 import { L2ChainType, PUBLIC_L1_BRIDGE_ADDRESS } from 'src/constants/addresses'
@@ -59,14 +59,11 @@ export const BridgeForm = () => {
 
     setLoading(true)
     try {
-      const { wait } = await sendTransaction({
-        request: {
-          to: PUBLIC_L1_BRIDGE_ADDRESS[l2Chain.id as L2ChainType],
-          value: parseEther(values.amount.toString()),
-        },
-        mode: 'recklesslyUnprepared',
+      const { hash } = await sendTransaction({
+        to: PUBLIC_L1_BRIDGE_ADDRESS[l2Chain.id as L2ChainType],
+        value: parseEther(values.amount.toString()),
       })
-      await wait()
+      await waitForTransaction({ hash })
     } catch (err) {
       console.log('err', err)
     } finally {

apps/web/src/components/ContractButton.tsx

@@ -30,7 +30,7 @@ export const ContractButton = ({
 
   const handleClickWithValidation = () => {
     if (!userAddress) return openConnectModal?.()
-    if (canUserBridge && userBalance?.value.eq(0)) return openBridgeModal()
+    if (canUserBridge && userBalance?.decimals === 0) return openBridgeModal()
     if (userChain?.id !== appChain.id) return handleSwitchNetwork()
     handleClick()
   }

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,25 @@
+import * as Sentry from '@sentry/nextjs'
+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) => {
+  try {
+    return SDK.connect(chainId)
+      .auctionBids({ id: `${collection.toLowerCase()}:${tokenId}` })
+      .then((x) =>
+        x.auction?.bids?.map((bid: AuctionBidFragment) => ({
+          ...bid,
+          amount: formatEther(bid.amount),
+        }))
+      )
+  } catch (error) {
+    console.error(error)
+    Sentry.captureException(error)
+    await Sentry.flush(2000)
+    return undefined
+  }
+}

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),
   }
 }