Upgrade Jupiter API to V2/V3 and optimize token handling (#30)

Author: ggnine-jito

components/treasuryV2/WalletList/WalletListItem/AssetList/TokenList.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import cx from 'classnames'
 
 import { AssetType, Token, Sol } from '@models/treasury/Asset'
@@ -18,23 +18,31 @@ interface Props {
 }
 
 export default function TokenList(props: Props) {
-  const tokens = props.tokens.sort((a, b) => {
-    const aTotal = a.count.multipliedBy(a.value)
-    const bTotal = b.count.multipliedBy(b.value)
+  const tokens = useMemo(() => {
+    return props.tokens.sort((a, b) => {
+      const aHasValue = a.value.isGreaterThan(0)
+      const bHasValue = b.value.isGreaterThan(0)
 
-    if (aTotal.eq(bTotal)) {
-      return b.count.comparedTo(a.count)
-    }
+      // Tokens with value come first
+      if (aHasValue && !bHasValue) return -1
+      if (!aHasValue && bHasValue) return 1
 
-    return bTotal.comparedTo(aTotal)
-  })
+      // Both have value: sort by highest value
+      if (aHasValue && bHasValue) {
+        return b.value.comparedTo(a.value)
+      }
 
-  const expandCutoff = Math.max(
-    tokens.findIndex((token) =>
-      token.value.multipliedBy(token.count).isEqualTo(0),
-    ),
-    3,
-  )
+      // Neither has value: sort by count
+      return b.count.comparedTo(a.count)
+    })
+  }, [props?.tokens])
+
+  const expandCutoff = useMemo(() => {
+    return Math.max(
+      tokens.findIndex((token) => token.value.isEqualTo(0)),
+      3,
+    )
+  }, [tokens])
 
   return (
     <Collapsible

components/treasuryV2/WalletList/WalletListItem/AssetList/TokenListItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import type { BigNumber } from 'bignumber.js'
 import cx from 'classnames'
 
@@ -17,14 +17,21 @@ interface Props {
   onSelect?(): void
 }
 
+// eslint-disable-next-line no-control-regex
+const CONTROL_CHARS_REGEX = /[\u0000-\u001F\u007F-\u009F]/g
+
 export default function TokenListItem(props: Props) {
+  const sanitizedSymbol = useMemo(() => {
+    return props.symbol?.replace(CONTROL_CHARS_REGEX, '').trim() || ''
+  }, [props.symbol])
+
   return (
     <ListItem
       className={props.className}
       name={props.name}
       rhs={
         <div className="flex items-end flex-col">
-          <div className="flex items-center space-x-1">
+          <div className="flex items-center space-x-1 text-right">
             <div className="text-xs text-fgd-1 font-bold">
               {props.amount.isLessThan(0)
                 ? formatNumber(props.amount, undefined, {})
@@ -34,9 +41,11 @@ export default function TokenListItem(props: Props) {
                   })
                 : formatNumber(props.amount)}
             </div>
-            <div className="text-xs text-fgd-1">{props.symbol}</div>
+            <div className="text-xs text-fgd-1 text-right">
+              {sanitizedSymbol}
+            </div>
           </div>
-          {props.price && (
+          {!!props.price && (
             <div className="text-xs text-white/50">
               ${formatNumber(props.amount.multipliedBy(props.price))}
             </div>

components/treasuryV2/WalletList/WalletListItem/AssetList/index.tsx

@@ -81,16 +81,17 @@ interface Props {
 
 export default function AssetList(props: Props) {
   const { indicatorTokens } = useDefi()
-  const assets = props.assets.filter(
+  const assets = useMemo(() => props.assets.filter(
     (a) =>
       a.type !== AssetType.Token ||
       !indicatorTokens.includes(a.mintAddress ?? '')
-  )
+  ), [props.assets, indicatorTokens])
   const tokensFromProps = useMemo(() => {
     return assets
       .filter(isTokenLike)
-      .sort((a, b) => b.value.comparedTo(a.value))
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO please fix, it can cause difficult bugs. You might wanna check out https://bobbyhadz.com/blog/react-hooks-exhaustive-deps for info. -@asktree
+      // .sort((a, b) => b.value.comparedTo(a.value))
+      .sort((a, b) => b.value?.toNumber() - a.value?.toNumber())
+     // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO please fix, it can cause difficult bugs. You might wanna check out https://bobbyhadz.com/blog/react-hooks-exhaustive-deps for info. -@asktree
   }, [])
   const tokensFromPropsFiltered = tokensFromProps.filter(
     (token) =>

components/treasuryV2/WalletList/WalletListItem/AssetsPreviewIconList.tsx

@@ -95,9 +95,9 @@ interface Props {
 export default function AssetsPreviewIconList(props: Props) {
   const { indicatorTokens } = useDefi()
   const nfts = useGovernanceNfts(props.governance) ?? []
-  const tokens = (props.assets.filter(
+  const tokens = props.assets.filter(
     (t) => isToken(t) && !indicatorTokens.includes(t.mintAddress ?? '')
-  ) as Token[]).sort((a, b) => b.value.comparedTo(a.value))
+  ) as Token[]
   const sol = props.assets.filter(isSol)
   const councilMint: Mint | undefined = props.assets.filter(isCouncilMint)[0]
   const communityMint: Mint | undefined =
@@ -158,14 +158,20 @@ export default function AssetsPreviewIconList(props: Props) {
   // Display the tokens next
   if (tokens.length) {
     const list = tokens.sort((a, b) => {
-      const aTotal = a.count.multipliedBy(a.value)
-      const bTotal = b.count.multipliedBy(b.value)
+      const aHasValue = a.value.isGreaterThan(0)
+      const bHasValue = b.value.isGreaterThan(0)
 
-      if (aTotal.eq(bTotal)) {
-        return b.count.comparedTo(a.count)
+      // Tokens with value come first
+      if (aHasValue && !bHasValue) return -1
+      if (!aHasValue && bHasValue) return 1
+
+      // Both have value: sort by highest value
+      if (aHasValue && bHasValue) {
+        return b.value.comparedTo(a.value)
       }
 
-      return bTotal.comparedTo(aTotal)
+      // Neither has value: sort by count
+      return b.count.comparedTo(a.count)
     })
     // Show atleast one token
     previewList.push(list[0].icon)

hooks/queries/jupiterPrice.ts

@@ -2,57 +2,46 @@ import { PublicKey } from '@solana/web3.js'
 import { useQuery } from '@tanstack/react-query'
 import queryClient from './queryClient'
 
-const URL = 'https://lite-api.jup.ag/price/v2'
+const PRICE_URL = 'https://lite-api.jup.ag/price/v3'
 
-/* example query
+/* example query - Price API V3
 # Unit price of 1 JUP & 1 SOL based on the Derived Price in USDC
-https://api.jup.ag/price/v2?ids=JUPyiwrYJFskUPiHa7hkeR8VUtAeFoSYbKedZNsDvCN,So11111111111111111111111111111111111111112
+https://lite-api.jup.ag/price/v3?ids=JUPyiwrYJFskUPiHa7hkeR8VUtAeFoSYbKedZNsDvCN,So11111111111111111111111111111111111111112
 
 {
-    "data": {
-        "So11111111111111111111111111111111111111112": {
-            "id": "So11111111111111111111111111111111111111112",
-            "type": "derivedPrice",
-            "price": "133.890945000"
-        },
-        "JUPyiwrYJFskUPiHa7hkeR8VUtAeFoSYbKedZNsDvCN": {
-            "id": "JUPyiwrYJFskUPiHa7hkeR8VUtAeFoSYbKedZNsDvCN",
-            "type": "derivedPrice",
-            "price": "0.751467"
-        }
-    },
-    "timeTaken": 0.00395219
+  "JUPyiwrYJFskUPiHa7hkeR8VUtAeFoSYbKedZNsDvCN": {
+    "usdPrice": 0.4056018512541055,
+    "blockId": 348004026,
+    "decimals": 6,
+    "priceChange24h": 0.5292887924920519
+  },
+  "So11111111111111111111111111111111111111112": {
+    "usdPrice": 147.4789340738336,
+    "blockId": 348004023,
+    "decimals": 9,
+    "priceChange24h": 1.2907622140620008
+  }
 }
 */
-/* example intentionally broken query 
-curl -X 'GET' 'https://api.jup.ag/price/v2?ids=So11111111111111111111111111111111111111112&showExtraInfo=true'
-{
-    "data": {
-        "So11111111111111111111111111111111111111112": {
-            "id": "So11111111111111111111111111111111111111112",
-            "type": "derivedPrice",
-            "price": "134.170633378"
-        },
-        "8agCopCHWdpj7mHk3JUWrzt8pHAxMiPX5hLVDJh9TXWv": null
-    },
-    "timeTaken": 0.003186833
+
+// Price API V3 Response
+type PriceV3Response = {
+  usdPrice: number
+  blockId: number
+  decimals: number
+  priceChange24h?: number
 }
-*/
 
+// Internal Price format (for backwards compatibility)
 type Price = {
   id: string // pubkey,
   // price is in USD
   price: number
-  // removed in v2 API
-  // mintSymbol: string
-  // vsToken: string // pubkey,
-  // vsTokenSymbol: string
-}
-type Response = {
-  data: Record<string, Price> //uses whatever you input (so, pubkey OR symbol). no entry if data not found
-  timeTaken: number
 }
 
+// V3 API returns direct object mapping, not wrapped in "data"
+type Response = Record<string, PriceV3Response | null>
+
 function* chunks<T>(arr: T[], n: number): Generator<T[], void> {
   for (let i = 0; i < arr.length; i += n) {
     yield arr.slice(i, i + n)
@@ -69,12 +58,20 @@ export const jupiterPriceQueryKeys = {
 }
 
 const jupQueryFn = async (mint: PublicKey) => {
-  const x = await fetch(`${URL}?ids=${mint?.toString()}`)
+  const x = await fetch(`${PRICE_URL}?ids=${mint?.toString()}`)
   const response = (await x.json()) as Response
-  const result = response.data[mint.toString()]
-  return result !== undefined
-    ? ({ found: true, result } as const)
-    : ({ found: false, result: undefined } as const)
+  const priceData = response[mint.toString()]
+  
+  // Convert V3 response to internal format
+  if (priceData && priceData.usdPrice !== undefined) {
+    const result: Price = {
+      id: mint.toString(),
+      price: priceData.usdPrice,
+    }
+    return { found: true, result } as const
+  }
+  
+  return { found: false, result: undefined } as const
 }
 
 export const useJupiterPriceByMintQuery = (mint: PublicKey | undefined) => {
@@ -111,19 +108,32 @@ export const useJupiterPricesByMintsQuery = (mints: PublicKey[]) => {
     enabled,
     queryKey: jupiterPriceQueryKeys.byMints(dedupedMints),
     queryFn: async () => {
-      const batches = [...chunks(dedupedMints, 100)]
+      const batches = [...chunks(dedupedMints, 50)] // V3 limits to 50 ids per request
       const responses = await Promise.all(
         batches.map(async (batch) => {
-          const x = await fetch(`${URL}?ids=${batch.join(',')}`)
+          const x = await fetch(`${PRICE_URL}?ids=${batch.join(',')}`)
           const response = (await x.json()) as Response
           return response
         }),
       )
-      const data = responses.reduce(
-        (acc, next) => ({ ...acc, ...next.data }),
-        {} as Response['data'],
+      
+      // Merge all batch responses
+      const mergedResponse = responses.reduce(
+        (acc, next) => ({ ...acc, ...next }),
+        {} as Response,
       )
 
+      // Convert V3 response to internal Price format
+      const data: Record<string, Price> = {}
+      Object.entries(mergedResponse).forEach(([mintAddress, priceData]) => {
+        if (priceData && priceData.usdPrice !== undefined) {
+          data[mintAddress] = {
+            id: mintAddress,
+            price: priceData.usdPrice,
+          }
+        }
+      })
+
       //override chai price if its broken
       const chaiMint = '3jsFX1tx2Z8ewmamiwSU851GzyzM2DJMq7KWW5DM8Py3'
       const chaiData = data[chaiMint]
@@ -155,9 +165,35 @@ export const getJupiterPricesByMintStrings = async (mints: string[]) => {
   const deduped = new Set(mints)
   const dedupedMints = Array.from(deduped)
   try {
-    const x = await fetch(`${URL}?ids=${dedupedMints.join(',')}`)
-    const response = (await x.json()) as Response
-    const data = response.data
+    // V3 limits to 50 ids per request
+    const batches: string[][] = []
+    for (let i = 0; i < dedupedMints.length; i += 50) {
+      batches.push(dedupedMints.slice(i, i + 50))
+    }
+
+    const responses = await Promise.all(
+      batches.map(async (batch) => {
+        const x = await fetch(`${PRICE_URL}?ids=${batch.join(',')}`)
+        return (await x.json()) as Response
+      }),
+    )
+
+    // Merge all batch responses
+    const mergedResponse = responses.reduce(
+      (acc, next) => ({ ...acc, ...next }),
+      {} as Response,
+    )
+
+    // Convert V3 response to internal Price format
+    const data: Record<string, Price> = {}
+    Object.entries(mergedResponse).forEach(([mintAddress, priceData]) => {
+      if (priceData && priceData.usdPrice !== undefined) {
+        data[mintAddress] = {
+          id: mintAddress,
+          price: priceData.usdPrice,
+        }
+      }
+    })
 
     //override chai price if its broken
     const chaiMint = '3jsFX1tx2Z8ewmamiwSU851GzyzM2DJMq7KWW5DM8Py3'
@@ -175,3 +211,4 @@ export const getJupiterPricesByMintStrings = async (mints: string[]) => {
     throw error
   }
 }
+