Skip to content

Commit

Permalink
update jup api url, update inline price showing for individual mint a…
Browse files Browse the repository at this point in the history
…ccounts so it now reliably works and presents a little beter styling-wise (#22)
  • Loading branch information
ggnine-jito authored Dec 12, 2024
1 parent f9586e0 commit 24458c8
Showing 3 changed files with 50 additions and 17 deletions.
63 changes: 47 additions & 16 deletions components/TreasuryAccount/AccountItem.tsx
Original file line number Diff line number Diff line change
@@ -3,62 +3,93 @@ 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,
}: {
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
2 changes: 1 addition & 1 deletion hooks/queries/jupiterPrice.ts
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions utils/treasuryTools.tsx
Original file line number Diff line number Diff line change
@@ -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,

}
}

0 comments on commit 24458c8

Please sign in to comment.