Merge pull request #251 from reservoirprotocol/pedro/grwth-2749-add-u…

…sdc-as-an-option-for-bidding-and-listing-on-the

Add usdc to mainnet configuration

components/buttons/Bid.tsx

@@ -1,12 +1,25 @@
 import { BidModal, BidStep } from '@reservoir0x/reservoir-kit-ui'
 import { Button } from 'components/primitives'
-import { cloneElement, ComponentProps, FC, useContext } from 'react'
+import {
+  cloneElement,
+  ComponentProps,
+  ComponentPropsWithoutRef,
+  FC,
+  useContext,
+} from 'react'
 import { CSS } from '@stitches/react'
 import { SWRResponse } from 'swr'
-import { useAccount, useNetwork, useSigner, useSwitchNetwork } from 'wagmi'
+import {
+  mainnet,
+  useAccount,
+  useNetwork,
+  useSigner,
+  useSwitchNetwork,
+} from 'wagmi'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { ToastContext } from 'context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
+import { constants } from 'ethers'
 
 type Props = {
   tokenId?: string | undefined
@@ -18,6 +31,8 @@ type Props = {
   mutate?: SWRResponse['mutate']
 }
 
+type BiddingCurrencies = ComponentPropsWithoutRef<typeof BidModal>['currencies']
+
 const Bid: FC<Props> = ({
   tokenId,
   collectionId,
@@ -48,6 +63,24 @@ const Bid: FC<Props> = ({
     </Button>
   )
 
+  // CONFIGURABLE: Here you can configure which currencies you would like to support for bidding
+  let bidCurrencies: BiddingCurrencies = undefined
+  if (marketplaceChain.id === mainnet.id) {
+    bidCurrencies = [
+      {
+        contract: constants.AddressZero,
+        symbol: 'ETH',
+        coinGeckoId: 'ethereum',
+      },
+      {
+        contract: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+        symbol: 'USDC',
+        decimals: 6,
+        coinGeckoId: 'usd-coin',
+      },
+    ]
+  }
+
   if (isDisconnected || isInTheWrongNetwork) {
     return cloneElement(trigger, {
       onClick: async () => {
@@ -70,6 +103,7 @@ const Bid: FC<Props> = ({
         collectionId={collectionId}
         trigger={trigger}
         openState={openState}
+        currencies={bidCurrencies}
         onClose={(data, stepData, currentStep) => {
           if (mutate && currentStep == BidStep.Complete) mutate()
         }}

components/buttons/CollectionOffer.tsx

@@ -1,14 +1,28 @@
 import { BidModal, BidStep, Trait } from '@reservoir0x/reservoir-kit-ui'
 import { Button } from 'components/primitives'
 import { useRouter } from 'next/router'
-import { ComponentProps, FC, useContext, useEffect, useState } from 'react'
-import { useAccount, useNetwork, useSigner, useSwitchNetwork } from 'wagmi'
+import {
+  ComponentProps,
+  ComponentPropsWithoutRef,
+  FC,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import {
+  mainnet,
+  useAccount,
+  useNetwork,
+  useSigner,
+  useSwitchNetwork,
+} from 'wagmi'
 import { useCollections } from '@reservoir0x/reservoir-kit-ui'
 import { SWRResponse } from 'swr'
 import { CSS } from '@stitches/react'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { ToastContext } from 'context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
+import { constants } from 'ethers'
 
 type Props = {
   collection: NonNullable<ReturnType<typeof useCollections>['data']>[0]
@@ -17,6 +31,8 @@ type Props = {
   buttonProps?: ComponentProps<typeof Button>
 }
 
+type BiddingCurrencies = ComponentPropsWithoutRef<typeof BidModal>['currencies']
+
 const CollectionOffer: FC<Props> = ({
   collection,
   mutate,
@@ -68,6 +84,24 @@ const CollectionOffer: FC<Props> = ({
   )
   const isAttributeModal = !!attribute
 
+  // CONFIGURABLE: Here you can configure which currencies you would like to support for bidding
+  let bidCurrencies: BiddingCurrencies = undefined
+  if (marketplaceChain.id === mainnet.id) {
+    bidCurrencies = [
+      {
+        contract: constants.AddressZero,
+        symbol: 'ETH',
+        coinGeckoId: 'ethereum',
+      },
+      {
+        contract: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+        symbol: 'USDC',
+        decimals: 6,
+        coinGeckoId: 'usd-coin',
+      },
+    ]
+  }
+
   if (isDisconnected || isInTheWrongNetwork) {
     return (
       <Button
@@ -102,6 +136,7 @@ const CollectionOffer: FC<Props> = ({
               </Button>
             }
             attribute={attribute}
+            currencies={bidCurrencies}
             onClose={(data, stepData, currentStep) => {
               if (mutate && currentStep == BidStep.Complete) mutate()
             }}

components/buttons/List.tsx

@@ -10,10 +10,17 @@ import {
 } from 'react'
 import { CSS } from '@stitches/react'
 import { SWRResponse } from 'swr'
-import { useAccount, useNetwork, useSigner, useSwitchNetwork } from 'wagmi'
+import {
+  mainnet,
+  useAccount,
+  useNetwork,
+  useSigner,
+  useSwitchNetwork,
+} from 'wagmi'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { ToastContext } from 'context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
+import { constants } from 'ethers'
 
 type ListingCurrencies = ComponentPropsWithoutRef<
   typeof ListModal
@@ -50,7 +57,23 @@ const List: FC<Props> = ({
     signer && marketplaceChain.id !== activeChain?.id
   )
 
+  // CONFIGURABLE: Here you can configure which currencies you would like to support for listing
   let listingCurrencies: ListingCurrencies = undefined
+  if (marketplaceChain.id === mainnet.id) {
+    listingCurrencies = [
+      {
+        contract: constants.AddressZero,
+        symbol: 'ETH',
+        coinGeckoId: 'ethereum',
+      },
+      {
+        contract: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+        symbol: 'USDC',
+        decimals: 6,
+        coinGeckoId: 'usd-coin',
+      },
+    ]
+  }
 
   const tokenId = token?.token?.tokenId
   const contract = token?.token?.contract

components/portfolio/BatchListings.tsx

@@ -31,6 +31,8 @@ import { useMediaQuery } from 'react-responsive'
 import { BatchListingsTableHeading } from './BatchListingsTableHeading'
 import { BatchListingsTableRow } from './BatchListingsTableRow'
 import wrappedContracts from 'utils/wrappedContracts'
+import { constants } from 'ethers'
+import { mainnet } from 'wagmi'
 
 export type BatchListing = {
   token: UserToken
@@ -105,7 +107,7 @@ const BatchListings: FC<Props> = ({
     symbol: chainCurrency.symbol,
   }
   // CONFIGURABLE: Here you can configure which currencies you would like to support for batch listing
-  const currencies: ListingCurrencies = [
+  let currencies: ListingCurrencies = [
     { ...defaultCurrency },
     {
       contract: wrappedContracts[chain.id],
@@ -114,6 +116,15 @@ const BatchListings: FC<Props> = ({
     },
   ]
 
+  if (chain.id === mainnet.id) {
+    currencies.push({
+      contract: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+      symbol: 'USDC',
+      decimals: 6,
+      coinGeckoId: 'usd-coin',
+    })
+  }
+
   const [currency, setCurrency] = useState<Currency>(
     currencies && currencies[0] ? currencies[0] : defaultCurrency
   )

package.json

@@ -28,7 +28,7 @@
     "@radix-ui/react-toggle-group": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
     "@rainbow-me/rainbowkit": "0.12.2",
-    "@reservoir0x/reservoir-kit-ui": "^0.16.6",
+    "@reservoir0x/reservoir-kit-ui": "^0.16.9",
     "@sentry/nextjs": "^7.53.1",
     "@types/uuid": "^9.0.1",
     "dayjs": "^1.11.6",

yarn.lock

@@ -2139,10 +2139,10 @@
   dependencies:
     "@react-hookz/deep-equal" "^1.0.3"
 
-"@reservoir0x/reservoir-kit-ui@^0.16.6":
-  version "0.16.8"
-  resolved "https://registry.yarnpkg.com/@reservoir0x/reservoir-kit-ui/-/reservoir-kit-ui-0.16.8.tgz#11e70272f228b55c586b5ace85083e44551b2a47"
-  integrity sha512-GaWfM2CV4Xj1wZiF5uTqtyVxlbxNt8QuWyI8yAtfEP0UwZeARLfyGAbaVGrhztbHXnHxUV+qYg8VbTa2vY5vNg==
+"@reservoir0x/reservoir-kit-ui@^0.16.8":
+  version "0.16.9"
+  resolved "https://registry.yarnpkg.com/@reservoir0x/reservoir-kit-ui/-/reservoir-kit-ui-0.16.9.tgz#c4a63922a630e3085df3549c65becb90ac7bd3a9"
+  integrity sha512-pJopkNiat29FpwE9tOnt35rIW96VEXYY3OZCCBTQVaS7NfjEpmnzqbI47yHqaZIk8YMJfq68dNbrllt/QQOr6w==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^6.1.1"
     "@fortawesome/free-solid-svg-icons" "^6.1.1"