Merge pull request #253 from reservoirprotocol/ted/grwth-2719-switch-…

…to-viem-on-marketplace Upgrade to wagmi v1
reservoirprotocol · Jun 12, 2023 · 5b7efdf · 5b7efdf · vercel · Jun 12, 2023
2 parents efd6168 + 12d7c46
commit 5b7efdf
Show file tree

Hide file tree

Showing 29 changed files with 819 additions and 1,870 deletions.
diff --git a/components/buttons/AcceptBid.tsx b/components/buttons/AcceptBid.tsx
@@ -10,7 +10,12 @@ import {
 import { CSS } from '@stitches/react'
 import { SWRResponse } from 'swr'
 import { Button } from 'components/primitives'
-import { useAccount, useNetwork, useSigner, useSwitchNetwork } from 'wagmi'
+import {
+  useAccount,
+  useNetwork,
+  useWalletClient,
+  useSwitchNetwork,
+} from 'wagmi'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { ToastContext } from '../../context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
@@ -47,7 +52,7 @@ const AcceptBid: FC<Props> = ({
     chainId: marketplaceChain.id,
   })
 
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
   const { chain: activeChain } = useNetwork()
 
   const isInTheWrongNetwork = Boolean(

diff --git a/components/buttons/Bid.tsx b/components/buttons/Bid.tsx
@@ -10,10 +10,10 @@ import {
 import { CSS } from '@stitches/react'
 import { SWRResponse } from 'swr'
 import {
-  mainnet,
   useAccount,
   useNetwork,
-  useSigner,
+  useWalletClient,
+  mainnet,
   useSwitchNetwork,
 } from 'wagmi'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
@@ -49,7 +49,7 @@ const Bid: FC<Props> = ({
     chainId: marketplaceChain.id,
   })
 
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
   const { chain: activeChain } = useNetwork()
 
   const isInTheWrongNetwork = Boolean(

diff --git a/components/buttons/BuyNow.tsx b/components/buttons/BuyNow.tsx
@@ -1,6 +1,6 @@
 import React, { ComponentProps, FC, ReactNode } from 'react'
 import { SWRResponse } from 'swr'
-import { useNetwork, useSigner } from 'wagmi'
+import { useNetwork, useWalletClient } from 'wagmi'
 import { BuyModal, BuyStep, useTokens } from '@reservoir0x/reservoir-kit-ui'
 import { useSwitchNetwork } from 'wagmi'
 import { Button } from 'components/primitives'
@@ -27,7 +27,7 @@ const BuyNow: FC<Props> = ({
   buttonProps = {},
   buttonChildren,
 }) => {
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
   const { openConnectModal } = useConnectModal()
   const { chain: activeChain } = useNetwork()
   const marketplaceChain = useMarketplaceChain()

diff --git a/components/buttons/CancelBid.tsx b/components/buttons/CancelBid.tsx
@@ -2,7 +2,7 @@ import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { CancelBidModal, CancelBidStep } from '@reservoir0x/reservoir-kit-ui'
 import { FC, ReactElement, cloneElement, useContext } from 'react'
 import { SWRResponse } from 'swr'
-import { useNetwork, useSigner, useSwitchNetwork } from 'wagmi'
+import { useNetwork, useWalletClient, useSwitchNetwork } from 'wagmi'
 import { ToastContext } from '../../context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
 
@@ -21,7 +21,7 @@ const CancelBid: FC<Props> = ({ bidId, openState, trigger, mutate }) => {
     chainId: marketplaceChain.id,
   })
 
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
   const { chain: activeChain } = useNetwork()
 
   const isInTheWrongNetwork = Boolean(

diff --git a/components/buttons/CancelListing.tsx b/components/buttons/CancelListing.tsx
@@ -5,7 +5,7 @@ import {
 } from '@reservoir0x/reservoir-kit-ui'
 import { FC, ReactElement, useContext, cloneElement } from 'react'
 import { SWRResponse } from 'swr'
-import { useNetwork, useSigner, useSwitchNetwork } from 'wagmi'
+import { useNetwork, useWalletClient, useSwitchNetwork } from 'wagmi'
 import { ToastContext } from '../../context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
 
@@ -29,7 +29,7 @@ const CancelListing: FC<Props> = ({
     chainId: marketplaceChain.id,
   })
 
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
   const { chain: activeChain } = useNetwork()
 
   const isInTheWrongNetwork = Boolean(

diff --git a/components/buttons/CollectionOffer.tsx b/components/buttons/CollectionOffer.tsx
@@ -13,7 +13,7 @@ import {
   mainnet,
   useAccount,
   useNetwork,
-  useSigner,
+  useWalletClient,
   useSwitchNetwork,
 } from 'wagmi'
 import { useCollections } from '@reservoir0x/reservoir-kit-ui'
@@ -41,7 +41,7 @@ const CollectionOffer: FC<Props> = ({
   const router = useRouter()
   const marketplaceChain = useMarketplaceChain()
   const [attribute, setAttribute] = useState<Trait>(undefined)
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
   const { chain: activeChain } = useNetwork()
   const { isDisconnected } = useAccount()
   const { openConnectModal } = useConnectModal()

diff --git a/components/buttons/EditBid.tsx b/components/buttons/EditBid.tsx
@@ -3,7 +3,12 @@ import { Button } from 'components/primitives'
 import { ToastContext } from 'context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
 import { cloneElement, ComponentProps, FC, ReactNode, useContext } from 'react'
-import { useAccount, useNetwork, useSigner, useSwitchNetwork } from 'wagmi'
+import {
+  useAccount,
+  useNetwork,
+  useWalletClient,
+  useSwitchNetwork,
+} from 'wagmi'
 import { CSS } from '@stitches/react'
 import { SWRResponse } from 'swr'
 import { EditBidModal, EditBidStep } from '@reservoir0x/reservoir-kit-ui'
@@ -39,7 +44,7 @@ const EditBid: FC<Props> = ({
     chainId: marketplaceChain.id,
   })
 
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
   const { chain: activeChain } = useNetwork()
 
   const isInTheWrongNetwork = Boolean(

diff --git a/components/buttons/EditListing.tsx b/components/buttons/EditListing.tsx
@@ -3,7 +3,12 @@ import { Button } from 'components/primitives'
 import { ToastContext } from 'context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
 import { cloneElement, ComponentProps, FC, ReactNode, useContext } from 'react'
-import { useAccount, useNetwork, useSigner, useSwitchNetwork } from 'wagmi'
+import {
+  useAccount,
+  useNetwork,
+  useWalletClient,
+  useSwitchNetwork,
+} from 'wagmi'
 import { CSS } from '@stitches/react'
 import { SWRResponse } from 'swr'
 import {
@@ -42,7 +47,7 @@ const EditListing: FC<Props> = ({
     chainId: marketplaceChain.id,
   })
 
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
   const { chain: activeChain } = useNetwork()
 
   const isInTheWrongNetwork = Boolean(

diff --git a/components/buttons/List.tsx b/components/buttons/List.tsx
@@ -11,16 +11,16 @@ import {
 import { CSS } from '@stitches/react'
 import { SWRResponse } from 'swr'
 import {
-  mainnet,
   useAccount,
   useNetwork,
-  useSigner,
+  useWalletClient,
+  mainnet,
   useSwitchNetwork,
 } from 'wagmi'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { ToastContext } from 'context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
-import { constants } from 'ethers'
+import { zeroAddress } from 'viem'
 
 type ListingCurrencies = ComponentPropsWithoutRef<
   typeof ListModal
@@ -50,7 +50,7 @@ const List: FC<Props> = ({
     chainId: marketplaceChain.id,
   })
 
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
   const { chain: activeChain } = useNetwork()
 
   const isInTheWrongNetwork = Boolean(
@@ -62,7 +62,7 @@ const List: FC<Props> = ({
   if (marketplaceChain.id === mainnet.id) {
     listingCurrencies = [
       {
-        contract: constants.AddressZero,
+        contract: zeroAddress,
         symbol: 'ETH',
         coinGeckoId: 'ethereum',
       },

diff --git a/components/buttons/Sweep.tsx b/components/buttons/Sweep.tsx
@@ -2,7 +2,7 @@ import React, { ComponentProps, FC, ReactNode } from 'react'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { SweepModal, SweepStep } from '@reservoir0x/reservoir-kit-ui'
 import { useMarketplaceChain } from 'hooks'
-import { useNetwork, useSigner, useSwitchNetwork } from 'wagmi'
+import { useNetwork, useWalletClient, useSwitchNetwork } from 'wagmi'
 import { CSS } from '@stitches/react'
 import { Button } from 'components/primitives'
 import { SWRResponse } from 'swr'
@@ -22,7 +22,7 @@ const Sweep: FC<Props> = ({
   buttonChildren,
   mutate,
 }) => {
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
   const { openConnectModal } = useConnectModal()
   const { chain: activeChain } = useNetwork()
   const marketplaceChain = useMarketplaceChain()

diff --git a/components/common/ActivityTable.tsx b/components/common/ActivityTable.tsx
@@ -17,7 +17,7 @@ import { useIntersectionObserver } from 'usehooks-ts'
 import Link from 'next/link'
 import Image from 'next/image'
 import { useENSResolver, useMarketplaceChain, useTimeSince } from 'hooks'
-import { constants } from 'ethers'
+import { zeroAddress } from 'viem'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   faExternalLink,
@@ -290,8 +290,7 @@ const ActivityTableRow: FC<ActivityTableRowProps> = ({ activity }) => {
               >
                 From
               </Text>
-              {activity.fromAddress &&
-              activity.fromAddress !== constants.AddressZero ? (
+              {activity.fromAddress && activity.fromAddress !== zeroAddress ? (
                 <Link href={`/portfolio/${activity.fromAddress}`}>
                   <Text
                     style="subtitle3"
@@ -314,8 +313,7 @@ const ActivityTableRow: FC<ActivityTableRowProps> = ({ activity }) => {
               >
                 to
               </Text>
-              {activity.toAddress &&
-              activity.toAddress !== constants.AddressZero ? (
+              {activity.toAddress && activity.toAddress !== zeroAddress ? (
                 <Link href={`/portfolio/${activity.toAddress}`}>
                   <Text
                     style="subtitle3"
@@ -424,8 +422,7 @@ const ActivityTableRow: FC<ActivityTableRowProps> = ({ activity }) => {
         )}
       </TableCell>
       <TableCell css={{ minWidth: 0 }}>
-        {activity.fromAddress &&
-        activity.fromAddress !== constants.AddressZero ? (
+        {activity.fromAddress && activity.fromAddress !== zeroAddress ? (
           <Flex direction="column" align="start">
             <Text style="subtitle3" color="subtle">
               From
@@ -459,7 +456,7 @@ const ActivityTableRow: FC<ActivityTableRowProps> = ({ activity }) => {
         )}
       </TableCell>
       <TableCell css={{ minWidth: 0 }}>
-        {activity.toAddress && activity.toAddress !== constants.AddressZero ? (
+        {activity.toAddress && activity.toAddress !== zeroAddress ? (
           <Flex direction="column" align="start">
             <Text style="subtitle3" color="subtle">
               To

diff --git a/components/navbar/Wallet.tsx b/components/navbar/Wallet.tsx
@@ -9,16 +9,15 @@ import {
 } from 'components/primitives'
 import { mainnet, polygon, optimism } from 'wagmi/chains'
 import { useAccount, useContractReads, erc20ABI, useBalance } from 'wagmi'
-import { BigNumber, BigNumberish, constants } from 'ethers'
 import useCoinConversion from 'hooks/useCoinConversion'
 import { useMemo, useState } from 'react'
-import { formatUnits } from 'ethers/lib/utils.js'
+import { zeroAddress, formatUnits } from 'viem'
 
 //CONFIGURABLE: Here you may configure currencies that you want to display in the wallet menu. Native currencies,
 //like ETH/MATIC etc need to be fetched in a different way. Configure them below
 const currencies = [
   {
-    address: constants.AddressZero,
+    address: zeroAddress,
     symbol: 'ETH',
     decimals: mainnet.nativeCurrency.decimals,
     chain: {
@@ -38,7 +37,7 @@ const currencies = [
     coinGeckoId: 'weth',
   },
   {
-    address: constants.AddressZero,
+    address: zeroAddress,
     symbol: 'MATIC',
     decimals: polygon.nativeCurrency.decimals,
     chain: {
@@ -71,11 +70,11 @@ const currencies = [
 
 type EnhancedCurrency = (typeof currencies)[0] & {
   usdPrice: number
-  balance: BigNumberish
+  balance: string | number | bigint
 }
 
 const nonNativeCurrencies = currencies.filter(
-  (currency) => currency.address !== constants.AddressZero
+  (currency) => currency.address !== zeroAddress
 )
 
 const currencySymbols = currencies.map((currency) => currency.symbol).join(',')
@@ -96,6 +95,7 @@ const Wallet = () => {
     })),
     watch: true,
     enabled: address ? true : false,
+    allowFailure: false,
   })
 
   //CONFIGURABLE: Configure these by just changing the chainId to fetch native balance info, in addition to changing this
@@ -123,16 +123,16 @@ const Wallet = () => {
     }, {} as Record<string, (typeof usdConversions)[0]>)
 
     return currencies.map((currency, i) => {
-      let balance: BigNumberish = 0
-      if (currency.address === constants.AddressZero) {
+      let balance: string | number | bigint = 0n
+      if (currency.address === zeroAddress) {
         //CONFIGURABLE: Configure these to show the fetched balance results configured above in the useBalance hooks
         switch (currency.chain.id) {
           case polygon.id: {
-            balance = maticBalance.data?.value || 0
+            balance = maticBalance.data?.value || 0n
             break
           }
           case mainnet.id: {
-            balance = ethBalance.data?.value || 0
+            balance = ethBalance.data?.value || 0n
             break
           }
         }
@@ -145,8 +145,8 @@ const Wallet = () => {
         )
         balance =
           nonNativeBalances && nonNativeBalances[index]
-            ? (nonNativeBalances[index] as BigNumberish)
-            : 0
+            ? (nonNativeBalances[index] as string | number | bigint)
+            : 0n
       }
 
       const conversion =
@@ -156,7 +156,8 @@ const Wallet = () => {
             : currency.symbol.toLowerCase()
         ]
       const usdPrice =
-        +formatUnits(BigNumber.from(balance)) * (conversion?.price || 0)
+        Number(formatUnits(BigInt(balance), currency?.decimals || 18)) *
+        (conversion?.price || 0)
       return {
         ...currency,
         usdPrice,