feat: useUSDPrice for nft eth usd price (#7232)

* feat: useStableCointValue for nft eth usd price

* add new file

* useUSDPrice

* rename

src/nft/components/bag/BagContent.tsx

@@ -2,11 +2,10 @@ import { NFTEventName } from '@uniswap/analytics-events'
 import { sendAnalyticsEvent, Trace } from 'analytics'
 import { BagRow, PriceChangeBagRow, UnavailableAssetsHeaderRow } from 'nft/components/bag/BagRow'
 import { Column } from 'nft/components/Flex'
-import { useBag, useIsMobile } from 'nft/hooks'
+import { useBag, useIsMobile, useNativeUsdPrice } from 'nft/hooks'
 import { BagItemStatus, BagStatus } from 'nft/types'
-import { fetchPrice, formatAssetEventProperties, recalculateBagUsingPooledAssets } from 'nft/utils'
+import { formatAssetEventProperties, recalculateBagUsingPooledAssets } from 'nft/utils'
 import { useEffect, useMemo } from 'react'
-import { useQuery } from 'react-query'
 
 export const BagContent = () => {
   const bagStatus = useBag((s) => s.bagStatus)
@@ -24,7 +23,7 @@ export const BagContent = () => {
     return recalculateBagUsingPooledAssets(uncheckedItemsInBag)
   }, [uncheckedItemsInBag])
 
-  const { data: fetchedPriceData } = useQuery(['fetchPrice', {}], () => fetchPrice(), {})
+  const ethUsdPrice = useNativeUsdPrice()
 
   const { unchangedAssets, priceChangedAssets, unavailableAssets, availableItems } = useMemo(() => {
     const unchangedAssets = itemsInBag
@@ -47,7 +46,7 @@ export const BagContent = () => {
 
     if (hasAssetsInReview)
       sendAnalyticsEvent(NFTEventName.NFT_BUY_BAG_CHANGED, {
-        usd_value: fetchedPriceData,
+        usd_value: ethUsdPrice,
         bag_quantity: itemsInBag,
         ...formatAssetEventProperties(priceChangedAssets),
       })
@@ -60,7 +59,7 @@ export const BagContent = () => {
     if (bagStatus === BagStatus.CONFIRM_REVIEW && !hasAssets) {
       setBagStatus(BagStatus.ADDING_TO_BAG)
     }
-  }, [bagStatus, itemsInBag, priceChangedAssets, setBagStatus, fetchedPriceData])
+  }, [bagStatus, itemsInBag, priceChangedAssets, setBagStatus, ethUsdPrice])
 
   return (
     <>
@@ -69,7 +68,7 @@ export const BagContent = () => {
           <Trace
             name={NFTEventName.NFT_BUY_BAG_CHANGED}
             properties={{
-              usd_value: fetchedPriceData,
+              usd_value: ethUsdPrice,
               bag_quantity: itemsInBag.length,
               ...formatAssetEventProperties(unavailableAssets),
             }}
@@ -77,7 +76,7 @@ export const BagContent = () => {
           >
             <UnavailableAssetsHeaderRow
               assets={unavailableAssets}
-              usdPrice={fetchedPriceData}
+              usdPrice={ethUsdPrice}
               clearUnavailableAssets={() => setItemsInBag(availableItems)}
               didOpenUnavailableAssets={didOpenUnavailableAssets}
               setDidOpenUnavailableAssets={setDidOpenUnavailableAssets}
@@ -89,7 +88,7 @@ export const BagContent = () => {
           <PriceChangeBagRow
             key={asset.id}
             asset={asset}
-            usdPrice={fetchedPriceData}
+            usdPrice={ethUsdPrice}
             markAssetAsReviewed={markAssetAsReviewed}
             top={index === 0 && unavailableAssets.length === 0}
             isMobile={isMobile}
@@ -104,7 +103,7 @@ export const BagContent = () => {
             <BagRow
               key={asset.id}
               asset={asset}
-              usdPrice={fetchedPriceData}
+              usdPrice={ethUsdPrice}
               removeAsset={removeAssetsFromBag}
               showRemove={true}
               isMobile={isMobile}

src/nft/components/collection/Activity.tsx

@@ -4,9 +4,9 @@ import { useNftActivity } from 'graphql/data/nft/NftActivity'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { useBag, useIsMobile } from 'nft/hooks'
+import { useNativeUsdPrice } from 'nft/hooks/useUsdPrice'
 import { ActivityEvent, ActivityEventType } from 'nft/types'
-import { fetchPrice } from 'nft/utils/fetchPrice'
-import { useCallback, useEffect, useReducer, useState } from 'react'
+import { useCallback, useReducer } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import styled from 'styled-components'
 
@@ -87,13 +87,7 @@ export const Activity = ({ contractAddress, rarityVerified, collectionName, chai
   const cartExpanded = useBag((state) => state.bagExpanded)
   const toggleCart = useBag((state) => state.toggleBag)
   const isMobile = useIsMobile()
-  const [ethPriceInUSD, setEthPriceInUSD] = useState(0)
-
-  useEffect(() => {
-    fetchPrice().then((price) => {
-      setEthPriceInUSD(price || 0)
-    })
-  }, [])
+  const ethPriceInUSD = useNativeUsdPrice()
 
   const Filter = useCallback(
     function ActivityFilter({ eventType }: { eventType: ActivityEventType }) {

src/nft/components/collection/TransactionCompleteModal.tsx

@@ -10,10 +10,9 @@ import { Row } from 'nft/components/Flex'
 import { BackArrowIcon, ChevronUpIcon, LightningBoltIcon, TwitterIcon, UniIcon } from 'nft/components/icons'
 import { Overlay, stopPropagation } from 'nft/components/modals/Overlay'
 import { themeVars, vars } from 'nft/css/sprinkles.css'
-import { useIsMobile, useSendTransaction, useTransactionResponse } from 'nft/hooks'
+import { useIsMobile, useNativeUsdPrice, useSendTransaction, useTransactionResponse } from 'nft/hooks'
 import { TxResponse, TxStateType } from 'nft/types'
 import {
-  fetchPrice,
   formatEthPrice,
   formatUsdPrice,
   formatUSDPriceWithCommas,
@@ -47,7 +46,7 @@ const UploadLink = styled.a`
 `
 
 const TxCompleteModal = () => {
-  const [ethPrice, setEthPrice] = useState(3000)
+  const ethUsdPrice = useNativeUsdPrice()
   const [showUnavailable, setShowUnavailable] = useState(false)
   const txHash = useSendTransaction((state) => state.txHash)
   const purchasedWithErc20 = useSendTransaction((state) => state.purchasedWithErc20)
@@ -70,8 +69,8 @@ const TxCompleteModal = () => {
     totalUSDRefund,
     txFeeFiat,
   } = useMemo(() => {
-    return parseTransactionResponse(transactionResponse, ethPrice)
-  }, [transactionResponse, ethPrice])
+    return parseTransactionResponse(transactionResponse, ethUsdPrice)
+  }, [transactionResponse, ethUsdPrice])
 
   const toggleShowUnavailable = () => {
     setShowUnavailable(!showUnavailable)
@@ -82,12 +81,6 @@ const TxCompleteModal = () => {
     setTxState(TxStateType.New)
   }
 
-  useEffect(() => {
-    fetchPrice().then((price) => {
-      setEthPrice(price ?? 0)
-    })
-  }, [])
-
   useEffect(() => {
     useSendTransaction.subscribe((state) => (transactionStateRef.current = state.state))
   }, [])
@@ -114,7 +107,7 @@ const TxCompleteModal = () => {
                 name={NFTEventName.NFT_BUY_BAG_SUCCEEDED}
                 properties={{
                   buy_quantity: nftsPurchased.length,
-                  usd_value: parseFloat(formatEther(totalPurchaseValue)) * ethPrice,
+                  usd_value: parseFloat(formatEther(totalPurchaseValue)) * ethUsdPrice,
                   transaction_hash: txHash,
                   using_erc20: purchasedWithErc20,
                   ...formatAssetEventProperties(nftsPurchased),

src/nft/components/details/AssetPriceDetails.tsx

@@ -5,19 +5,16 @@ import { OpacityHoverState } from 'components/Common'
 import { Share } from 'components/Icons/Share'
 import { useNftBalance } from 'graphql/data/nft/NftBalance'
 import { CancelListingIcon, VerifiedIcon } from 'nft/components/icons'
-import { useBag, useProfilePageState, useSellAsset } from 'nft/hooks'
+import { useBag, useNativeUsdPrice, useProfilePageState, useSellAsset, useUsdPriceofNftAsset } from 'nft/hooks'
 import { CollectionInfoForAsset, GenieAsset, ProfilePageStateType, WalletAsset } from 'nft/types'
 import {
   ethNumberStandardFormatter,
-  fetchPrice,
   formatEthPrice,
   generateTweetForAsset,
   getMarketplaceIcon,
   timeLeft,
-  useUsdPrice,
 } from 'nft/utils'
 import { useMemo } from 'react'
-import { useQuery } from 'react-query'
 import { Link, useNavigate } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components'
 import { ExternalLink, ThemedText } from 'theme'
@@ -212,7 +209,7 @@ const MarketplaceIcon = styled(ExternalLink)`
 
 const OwnerContainer = ({ asset }: { asset: WalletAsset }) => {
   const navigate = useNavigate()
-  const { data: USDValue } = useQuery(['fetchPrice', {}], () => fetchPrice(), {})
+  const ethUsdPrice = useNativeUsdPrice()
   const setSellPageState = useProfilePageState((state) => state.setProfilePageState)
   const selectSellAsset = useSellAsset((state) => state.selectSellAsset)
   const resetSellAssets = useSellAsset((state) => state.reset)
@@ -221,8 +218,8 @@ const OwnerContainer = ({ asset }: { asset: WalletAsset }) => {
   const expirationDate = listing?.endAt ? new Date(listing.endAt) : undefined
 
   const USDPrice = useMemo(
-    () => (USDValue && asset.floor_sell_order_price ? USDValue * asset.floor_sell_order_price : undefined),
-    [USDValue, asset.floor_sell_order_price]
+    () => (ethUsdPrice && asset.floor_sell_order_price ? ethUsdPrice * asset.floor_sell_order_price : undefined),
+    [ethUsdPrice, asset.floor_sell_order_price]
   )
   const trace = useTrace()
 
@@ -324,7 +321,7 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
   const toggleBag = useBag((s) => s.toggleBag)
   const bagExpanded = useBag((s) => s.bagExpanded)
 
-  const USDPrice = useUsdPrice(asset)
+  const USDPrice = useUsdPriceofNftAsset(asset)
 
   const assetsFilter = [{ address: asset.address, tokenId: asset.tokenId }]
   const { walletAssets: ownerAssets } = useNftBalance(account ?? '', [], assetsFilter, 1)

src/nft/components/explore/TrendingCollections.tsx

 import { OpacityHoverState } from 'components/Common'
 import { HistoryDuration } from 'graphql/data/__generated__/types-and-hooks'
 import { useTrendingCollections } from 'graphql/data/nft/TrendingCollections'
-import ms from 'ms'
+import { useNativeUsdPrice } from 'nft/hooks'
 import { CollectionTableColumn, Denomination, TimePeriod, VolumeType } from 'nft/types'
-import { fetchPrice } from 'nft/utils'
 import { useMemo, useState } from 'react'
-import { useQuery } from 'react-query'
 import styled from 'styled-components'
 import { ThemedText } from 'theme'
 
@@ -94,12 +92,7 @@ const TrendingCollections = () => {
     convertTimePeriodToHistoryDuration(timePeriod)
   )
 
-  const { data: usdPrice } = useQuery(['fetchPrice', {}], () => fetchPrice(), {
-    refetchOnReconnect: false,
-    refetchOnWindowFocus: false,
-    refetchOnMount: false,
-    refetchInterval: ms(`1m`),
-  })
+  const ethUsdPrice = useNativeUsdPrice()
 
   const trendingCollectionColumns = useMemo(() => {
     if (!trendingCollectionsAreLoading && trendingCollections) {
@@ -126,10 +119,10 @@ const TrendingCollections = () => {
         sales: d.sales,
         totalSupply: d.totalSupply,
         denomination: isEthToggled ? Denomination.ETH : Denomination.USD,
-        usdPrice,
+        usdPrice: ethUsdPrice,
       }))
     } else return [] as CollectionTableColumn[]
-  }, [trendingCollections, trendingCollectionsAreLoading, isEthToggled, usdPrice])
+  }, [trendingCollections, trendingCollectionsAreLoading, isEthToggled, ethUsdPrice])
 
   return (
     <ExploreContainer>

src/nft/components/profile/list/MarketplaceRow.tsx

@@ -5,10 +5,10 @@ import { MouseoverTooltip } from 'components/Tooltip'
 import { RowsCollpsedIcon, RowsExpandedIcon } from 'nft/components/icons'
 import { getRoyalty, useHandleGlobalPriceToggle, useSyncPriceWithGlobalMethod } from 'nft/components/profile/list/utils'
 import { useSellAsset } from 'nft/hooks'
+import { useNativeUsdPrice } from 'nft/hooks/useUsdPrice'
 import { ListingMarket, WalletAsset } from 'nft/types'
 import { getMarketplaceIcon } from 'nft/utils'
 import { formatEth, formatUsdPrice } from 'nft/utils/currency'
-import { fetchPrice } from 'nft/utils/fetchPrice'
 import { Dispatch, DispatchWithoutAction, useCallback, useEffect, useMemo, useReducer, useState } from 'react'
 import styled from 'styled-components'
 import { BREAKPOINTS, ThemedText } from 'theme'
@@ -248,12 +248,7 @@ export const MarketplaceRow = ({
 }
 
 const EthPriceDisplay = ({ ethPrice = 0 }: { ethPrice?: number }) => {
-  const [ethConversion, setEthConversion] = useState(3000)
-  useEffect(() => {
-    fetchPrice().then((price) => {
-      setEthConversion(price ?? 0)
-    })
-  }, [])
+  const ethUsdPrice = useNativeUsdPrice()
 
   return (
     <Row width="100%" justify="flex-end">
@@ -261,7 +256,7 @@ const EthPriceDisplay = ({ ethPrice = 0 }: { ethPrice?: number }) => {
         {ethPrice !== 0 ? (
           <Column>
             <span>{formatEth(ethPrice)} ETH</span>
-            <ThemedText.BodyPrimary color="neutral2">{formatUsdPrice(ethPrice * ethConversion)}</ThemedText.BodyPrimary>
+            <ThemedText.BodyPrimary color="neutral2">{formatUsdPrice(ethPrice * ethUsdPrice)}</ThemedText.BodyPrimary>
           </Column>
         ) : (
           '- ETH'

src/nft/hooks/index.ts

@@ -14,5 +14,6 @@ export * from './useSendTransaction'
 export * from './useSubscribeScrollState'
 export * from './useSweep'
 export * from './useTransactionResponse'
+export * from './useUsdPrice'
 export * from './useWalletBalance'
 export * from './useWalletCollections'

src/nft/hooks/useUsdPrice.ts

+import { formatEther } from '@ethersproject/units'
+import { ChainId } from '@uniswap/sdk-core'
+import { useUSDPrice } from 'hooks/useUSDPrice'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
+import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
+import { GenieAsset } from 'nft/types'
+
+export const useNativeUsdPrice = (chainId: number = ChainId.MAINNET): number => {
+  const nativeCurrency = useNativeCurrency(chainId)
+  const parsedAmount = tryParseCurrencyAmount('1', nativeCurrency)
+  const usdcValue = useUSDPrice(parsedAmount)?.data ?? 0
+  return usdcValue
+}
+
+export function useUsdPriceofNftAsset(asset: GenieAsset): string | undefined {
+  const fetchedPriceData = useNativeUsdPrice()
+
+  return fetchedPriceData && asset?.priceInfo?.ETHPrice
+    ? (parseFloat(formatEther(asset?.priceInfo?.ETHPrice)) * fetchedPriceData).toString()
+    : ''
+}

src/nft/utils/fetchPrice.ts

-import { formatEther } from '@ethersproject/units'
-import { GenieAsset } from 'nft/types'
-import { useQuery } from 'react-query'
-
-export enum Currency {
-  ETH = 'ETH',
-  LOOKS = 'LOOKS',
-  MATIC = 'MATIC',
-}
-
-export const fetchPrice = async (currency: Currency = Currency.ETH): Promise<number | undefined> => {
-  try {
-    const response = await fetch(`https://api.coinbase.com/v2/exchange-rates?currency=${currency}`)
-    return response.json().then((j) => j.data.rates.USD)
-  } catch (e) {
-    console.error(e)
-    return
-  }
-}
-
-export function useUsdPrice(asset: GenieAsset): string | undefined {
-  const { data: fetchedPriceData } = useQuery(['fetchPrice', {}], () => fetchPrice(), {})
-
-  return fetchedPriceData && asset?.priceInfo?.ETHPrice
-    ? (parseFloat(formatEther(asset?.priceInfo?.ETHPrice)) * fetchedPriceData).toString()
-    : ''
-}

src/nft/utils/index.ts

@@ -4,7 +4,6 @@ export * from './buildSellObject'
 export * from './carousel'
 export * from './collection'
 export * from './currency'
-export * from './fetchPrice'
 export * from './formatEventProperties'
 export * from './isAudio'
 export * from './isVideo'