From 24458c8bed62c6cac46c4186e8b5ac6e74711131 Mon Sep 17 00:00:00 2001
From: ggnine-jito <122913584+ggnine-jito@users.noreply.github.com>
Date: Thu, 12 Dec 2024 15:09:03 -0800
Subject: [PATCH] update jup api url, update inline price showing for
 individual mint accounts so it now reliably works and presents a little beter
 styling-wise (#22)

---
 components/TreasuryAccount/AccountItem.tsx | 63 ++++++++++++++++------
 hooks/queries/jupiterPrice.ts              |  2 +-
 utils/treasuryTools.tsx                    |  2 +
 3 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/components/TreasuryAccount/AccountItem.tsx b/components/TreasuryAccount/AccountItem.tsx
index 4fdd1e30c1..643db0b188 100644
--- a/components/TreasuryAccount/AccountItem.tsx
+++ b/components/TreasuryAccount/AccountItem.tsx
@@ -3,6 +3,8 @@ import { getTreasuryAccountItemInfoV2 } from '@utils/treasuryTools'
 import { AssetAccount } from '@utils/uiTypes/assets'
 import TokenIcon from '@components/treasuryV2/icons/TokenIcon'
 import { useTokenMetadata } from '@hooks/queries/tokenMetadata'
+import { useJupiterPriceByMintQuery } from '../../hooks/queries/jupiterPrice'
+import BigNumber from 'bignumber.js'
 
 const AccountItem = ({
   governedAccountTokenAccount,
@@ -10,55 +12,84 @@ const AccountItem = ({
   governedAccountTokenAccount: AssetAccount
 }) => {
   const {
+    decimalAdjustedAmount,
     amountFormatted,
     logo,
     name,
     symbol,
-    displayPrice,
   } = getTreasuryAccountItemInfoV2(governedAccountTokenAccount)
 
+  const { data: priceData } = useJupiterPriceByMintQuery(
+    governedAccountTokenAccount.extensions.mint?.publicKey
+  )
+
   const { data } = useTokenMetadata(
     governedAccountTokenAccount.extensions.mint?.publicKey,
     !logo
   )
 
   const symbolFromMeta = useMemo(() => {
-    return data?.symbol
-  }, [data?.symbol])
+    // data.symbol is kinda weird
+    //Handle null characters, whitespace, and ensure fallback to symbol
+    const cleanSymbol = data?.symbol
+      ?.replace(/\0/g, '')  // Remove null characters
+      ?.replace(/\s+/g, ' ') // Normalize whitespace to single spaces
+      ?.trim() // Remove leading/trailing whitespace
+    
+    return cleanSymbol || symbol || ''
+  }, [data?.symbol, symbol])
+
+  const displayPrice = useMemo(() => {
+    if (!decimalAdjustedAmount || !priceData?.result?.price) return ''
+    
+    try {
+      const totalPrice = decimalAdjustedAmount * priceData.result.price
+      return new BigNumber(totalPrice).toFormat(0)
+    } catch (error) {
+      console.error('Error calculating display price:', error)
+      return ''
+    }
+  }, [priceData, decimalAdjustedAmount])
 
   return (
     <div className="flex items-center w-full p-3 border rounded-lg text-fgd-1 border-fgd-4">
       {logo ? (
         <img
           className={`flex-shrink-0 h-6 w-6 mr-2.5 mt-0.5 ${
-            governedAccountTokenAccount.isSol && 'rounded-full'
+            governedAccountTokenAccount.isSol ? 'rounded-full' : ''
           }`}
           src={logo}
           onError={({ currentTarget }) => {
-            currentTarget.onerror = null // prevents looping
+            currentTarget.onerror = null
             currentTarget.hidden = true
           }}
+          alt={`${name} logo`}
         />
       ) : (
         <TokenIcon
-          className={`flex-shrink-0 h-6 w-6 mr-2.5 mt-0.5 fill-current`}
-        ></TokenIcon>
+          className="flex-shrink-0 h-6 w-6 mr-2.5 mt-0.5 fill-current"
+        />
       )}
       <div className="w-full">
         <div className="flex items-start justify-between mb-1">
-          <div className="text-sm font-semibold text-th-fgd-1">{name}</div>
+          <div className="text-sm font-semibold text-th-fgd-1">
+            {name || 'Unknown Token'}
+          </div>
         </div>
-        <div className="text-xs text-fgd-3">
-          {amountFormatted} {symbolFromMeta ? symbolFromMeta : symbol}
+        <div className="flex flex-wrap items-center gap-1 text-xs text-fgd-3">
+          <div>
+            {amountFormatted}
+            {symbolFromMeta && ` ${symbolFromMeta}`}
+          </div>
+          {displayPrice && (
+            <div className="text-gray-600">
+              (${displayPrice})
+            </div>
+          )}
         </div>
-        {displayPrice ? (
-          <div className="mt-0.5 text-fgd-3 text-xs">≈${displayPrice}</div>
-        ) : (
-          ''
-        )}
       </div>
     </div>
   )
 }
 
-export default AccountItem
+export default AccountItem
\ No newline at end of file
diff --git a/hooks/queries/jupiterPrice.ts b/hooks/queries/jupiterPrice.ts
index 0c153837cc..915bd5d84c 100644
--- a/hooks/queries/jupiterPrice.ts
+++ b/hooks/queries/jupiterPrice.ts
@@ -2,7 +2,7 @@ import { PublicKey } from '@solana/web3.js'
 import { useQuery } from '@tanstack/react-query'
 import queryClient from './queryClient'
 
-const URL = 'https://price.jup.ag/v4/price'
+const URL = 'https://api.jup.ag/price/v2'
 
 /* example query
 GET https://price.jup.ag/v4/price?ids=SOL
diff --git a/utils/treasuryTools.tsx b/utils/treasuryTools.tsx
index dcb18f659f..6f57cd095d 100644
--- a/utils/treasuryTools.tsx
+++ b/utils/treasuryTools.tsx
@@ -59,6 +59,7 @@ export const getTreasuryAccountItemInfoV2 = (account: AssetAccount) => {
       : ''
 
   return {
+    decimalAdjustedAmount: amount,
     accountName,
     amountFormatted,
     logo,
@@ -67,5 +68,6 @@ export const getTreasuryAccountItemInfoV2 = (account: AssetAccount) => {
     info,
     symbol,
     totalPrice,
+
   }
 }