fix: Use non-subgraph fields for calculating USD prices on explore and token details pages (#6134)

* use non subgraph fields for querying usd prices

* undefined check

* remove unuecessary logoUrl field

* remove outdated test

* fix: switch recently fetched tokens to token project market & update missing chart message

---------
Co-authored-by: cartcrom <cartergcromer@gmail.com>

cypress/e2e/token-details.test.ts

@@ -49,10 +49,6 @@ describe('Token details', () => {
     // Shiba predator token, low trading volume and also has warning modal
     cy.visit('/tokens/ethereum/0xa71d0588EAf47f12B13cF8eC750430d21DF04974')
 
-    // Should have missing price chart when price unavailable (expected for this token)
-    if (cy.get('[data-cy="chart-header"]').contains('Price Unavailable')) {
-      cy.get('[data-cy="missing-chart"]').should('exist')
-    }
     // Stats should have: TVL, 24H Volume, 52W low, 52W high
     cy.get(getTestSelector('token-details-stats')).should('exist')
     cy.get(getTestSelector('token-details-stats')).within(() => {

src/components/NavBar/SuggestionRow.tsx

@@ -156,7 +156,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
     }
   }, [toggleOpen, isHovered, token, navigate, handleClick, tokenDetailsPath])
 
-  const arrow = getDeltaArrow(token.market?.pricePercentChange?.value, 18)
+  const arrow = getDeltaArrow(token.project?.markets?.[0]?.pricePercentChange?.value, 18)
 
   return (
     <Link
@@ -186,16 +186,16 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
       </Row>
 
       <Column className={styles.suggestionSecondaryContainer}>
-        {!!token.market?.price?.value && (
+        {!!token.project?.markets?.[0]?.price?.value && (
           <>
             <Row gap="4">
-              <Box className={styles.primaryText}>{formatUSDPrice(token.market.price.value)}</Box>
+              <Box className={styles.primaryText}>{formatUSDPrice(token.project.markets[0].price.value)}</Box>
             </Row>
             <PriceChangeContainer>
               <ArrowCell>{arrow}</ArrowCell>
               <ThemedText.BodySmall>
-                <DeltaText delta={token.market?.pricePercentChange?.value}>
-                  {Math.abs(token.market?.pricePercentChange?.value ?? 0).toFixed(2)}%
+                <DeltaText delta={token.project.markets[0].pricePercentChange?.value}>
+                  {Math.abs(token.project.markets[0].pricePercentChange?.value ?? 0).toFixed(2)}%
                 </DeltaText>
               </ThemedText.BodySmall>
             </PriceChangeContainer>

src/components/Tokens/TokenDetails/ChartSection.tsx

@@ -13,7 +13,7 @@ import TimePeriodSelector from './TimeSelector'
 function usePriceHistory(tokenPriceData: TokenPriceQuery): PricePoint[] | undefined {
   // Appends the current price to the end of the priceHistory array
   const priceHistory = useMemo(() => {
-    const market = tokenPriceData.token?.market
+    const market = tokenPriceData.token?.project?.markets?.[0]
     const priceHistory = market?.priceHistory?.filter(isPricePoint)
     const currentPrice = market?.price?.value
     if (Array.isArray(priceHistory) && currentPrice !== undefined) {

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -138,15 +138,6 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
   )
 
   const chartAvailable = !!prices && prices.length > 0
-  const missingPricesMessage = !chartAvailable ? (
-    prices?.length === 0 ? (
-      <>
-        <Trans>Missing price data due to recently low trading volume on Uniswap v3</Trans>
-      </>
-    ) : (
-      <Trans>Missing chart data</Trans>
-    )
-  ) : null
 
   // first price point on the x-axis of the current time period's chart
   const startingPrice = originalPrices?.[0] ?? DATA_EMPTY
@@ -287,12 +278,18 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
         ) : (
           <>
             <MissingPrice>Price Unavailable</MissingPrice>
-            <ThemedText.Caption style={{ color: theme.textTertiary }}>{missingPricesMessage}</ThemedText.Caption>
+            <ThemedText.Caption style={{ color: theme.textTertiary }}>
+              <Trans>Missing price data</Trans>
+            </ThemedText.Caption>
           </>
         )}
       </ChartHeader>
       {!chartAvailable ? (
-        <MissingPriceChart width={width} height={graphHeight} message={!!displayPrice.value && missingPricesMessage} />
+        <MissingPriceChart
+          width={width}
+          height={graphHeight}
+          message={!!displayPrice.value && <Trans>Price history unavailable</Trans>}
+        />
       ) : (
         <svg data-cy="price-chart" width={width} height={graphHeight} style={{ minWidth: '100%' }}>
           <AnimatedInLineChart

src/components/Tokens/TokenDetails/index.tsx

@@ -200,8 +200,8 @@ export default function TokenDetails({
             <StatsSection
               TVL={tokenQueryData?.market?.totalValueLocked?.value}
               volume24H={tokenQueryData?.market?.volume24H?.value}
-              priceHigh52W={tokenQueryData?.market?.priceHigh52W?.value}
-              priceLow52W={tokenQueryData?.market?.priceLow52W?.value}
+              priceHigh52W={tokenQueryData?.project?.markets?.[0]?.priceHigh52W?.value}
+              priceLow52W={tokenQueryData?.project?.markets?.[0]?.priceLow52W?.value}
             />
             <Hr />
             <AboutSection

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -438,7 +438,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
   const filterNetwork = lowercaseChainName.toUpperCase()
   const chainId = CHAIN_NAME_TO_CHAIN_ID[filterNetwork]
   const timePeriod = useAtomValue(filterTimeAtom)
-  const delta = token.market?.pricePercentChange?.value
+  const delta = token.project?.markets?.[0]?.pricePercentChange?.value
   const arrow = getDeltaArrow(delta)
   const smallArrow = getDeltaArrow(delta, 14)
   const formattedDelta = formatDelta(delta)
@@ -478,7 +478,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
           price={
             <ClickableContent>
               <PriceInfoCell>
-                {formatUSDPrice(token.market?.price?.value)}
+                {formatUSDPrice(token.project?.markets?.[0]?.price?.value)}
                 <PercentChangeInfoCell>
                   <ArrowCell>{smallArrow}</ArrowCell>
                   <DeltaText delta={delta}>{formattedDelta}</DeltaText>
@@ -509,7 +509,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
                       width={width}
                       height={height}
                       tokenData={token}
-                      pricePercentChange={token.market?.pricePercentChange?.value}
+                      pricePercentChange={token.project?.markets?.[0]?.pricePercentChange?.value}
                       sparklineMap={props.sparklineMap}
                     />
                   )

src/graphql/data/RecentlySearched.ts

@@ -34,15 +34,6 @@ gql`
       symbol
       market(currency: USD) {
         id
-        price {
-          id
-          value
-          currency
-        }
-        pricePercentChange(duration: DAY) {
-          id
-          value
-        }
         volume24H: volume(duration: DAY) {
           id
           value
@@ -53,6 +44,17 @@ gql`
         id
         logoUrl
         safetyLevel
+        markets(currencies: [USD]) {
+          id
+          price {
+            id
+            value
+          }
+          pricePercentChange(duration: DAY) {
+            id
+            value
+          }
+        }
       }
     }
   }

src/graphql/data/SearchTokens.ts

@@ -17,15 +17,6 @@ gql`
       symbol
       market(currency: USD) {
         id
-        price {
-          id
-          value
-          currency
-        }
-        pricePercentChange(duration: DAY) {
-          id
-          value
-        }
         volume24H: volume(duration: DAY) {
           id
           value
@@ -36,6 +27,17 @@ gql`
         id
         logoUrl
         safetyLevel
+        markets(currencies: [USD]) {
+          id
+          price {
+            id
+            value
+          }
+          pricePercentChange(duration: DAY) {
+            id
+            value
+          }
+        }
       }
     }
   }

src/graphql/data/Token.ts

@@ -30,24 +30,11 @@ gql`
           value
           currency
         }
-        price {
-          id
-          value
-          currency
-        }
         volume24H: volume(duration: DAY) {
           id
           value
           currency
         }
-        priceHigh52W: priceHighLow(duration: YEAR, highLow: HIGH) {
-          id
-          value
-        }
-        priceLow52W: priceHighLow(duration: YEAR, highLow: LOW) {
-          id
-          value
-        }
       }
       project {
         id
@@ -60,6 +47,22 @@ gql`
           chain
           address
         }
+        markets(currencies: [USD]) {
+          id
+          price {
+            id
+            value
+            currency
+          }
+          priceHigh52W: priceHighLow(duration: YEAR, highLow: HIGH) {
+            id
+            value
+          }
+          priceLow52W: priceHighLow(duration: YEAR, highLow: LOW) {
+            id
+            value
+          }
+        }
       }
     }
   }

src/graphql/data/TokenPrice.ts

@@ -6,16 +6,19 @@ gql`
       id
       address
       chain
-      market(currency: USD) {
+      project {
         id
-        price {
+        markets(currencies: [USD]) {
           id
-          value
-        }
-        priceHistory(duration: $duration) {
-          id
-          timestamp
-          value
+          price {
+            id
+            value
+          }
+          priceHistory(duration: $duration) {
+            id
+            timestamp
+            value
+          }
         }
       }
     }

src/graphql/data/TopTokens.ts

@@ -36,22 +36,12 @@ gql`
       standard
       market(currency: USD) {
         id
-        totalValueLocked {
-          id
-          value
-          currency
-        }
-        price {
+        volume(duration: $duration) {
           id
           value
           currency
         }
-        pricePercentChange(duration: $duration) {
-          id
-          currency
-          value
-        }
-        volume(duration: $duration) {
+        totalValueLocked {
           id
           value
           currency
@@ -60,6 +50,18 @@ gql`
       project {
         id
         logoUrl
+        markets(currencies: [USD]) {
+          id
+          price {
+            id
+            value
+          }
+          pricePercentChange(duration: $duration) {
+            id
+            currency
+            value
+          }
+        }
       }
     }
   }
@@ -71,12 +73,14 @@ gql`
       id
       address
       chain
-      market(currency: USD) {
-        id
-        priceHistory(duration: $duration) {
+      project {
+        markets(currencies: [USD]) {
           id
-          timestamp
-          value
+          priceHistory(duration: $duration) {
+            id
+            timestamp
+            value
+          }
         }
       }
     }
@@ -92,11 +96,15 @@ function useSortedTokens(tokens: TopTokens100Query['topTokens']) {
     let tokenArray = Array.from(tokens)
     switch (sortMethod) {
       case TokenSortMethod.PRICE:
-        tokenArray = tokenArray.sort((a, b) => (b?.market?.price?.value ?? 0) - (a?.market?.price?.value ?? 0))
+        tokenArray = tokenArray.sort(
+          (a, b) => (b?.project?.markets?.[0]?.price?.value ?? 0) - (a?.project?.markets?.[0]?.price?.value ?? 0)
+        )
         break
       case TokenSortMethod.PERCENT_CHANGE:
         tokenArray = tokenArray.sort(
-          (a, b) => (b?.market?.pricePercentChange?.value ?? 0) - (a?.market?.pricePercentChange?.value ?? 0)
+          (a, b) =>
+            (b?.project?.markets?.[0]?.pricePercentChange?.value ?? 0) -
+            (a?.project?.markets?.[0]?.pricePercentChange?.value ?? 0)
         )
         break
       case TokenSortMethod.TOTAL_VALUE_LOCKED:
@@ -160,7 +168,8 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
     const unwrappedTokens = sparklineQuery?.topTokens?.map((topToken) => unwrapToken(chainId, topToken))
     const map: SparklineMap = {}
     unwrappedTokens?.forEach(
-      (current) => current?.address && (map[current.address] = current?.market?.priceHistory?.filter(isPricePoint))
+      (current) =>
+        current?.address && (map[current.address] = current?.project?.markets?.[0]?.priceHistory?.filter(isPricePoint))
     )
     return map
   }, [chainId, sparklineQuery?.topTokens])

src/graphql/data/TrendingTokens.ts

@@ -16,15 +16,6 @@ gql`
       symbol
       market(currency: USD) {
         id
-        price {
-          id
-          value
-          currency
-        }
-        pricePercentChange(duration: DAY) {
-          id
-          value
-        }
         volume24H: volume(duration: DAY) {
           id
           value
@@ -35,6 +26,18 @@ gql`
         id
         logoUrl
         safetyLevel
+        markets(currencies: [USD]) {
+          id
+          price {
+            id
+            value
+          }
+          pricePercentChange(duration: DAY) {
+            id
+            currency
+            value
+          }
+        }
       }
     }
   }