2022-10-26 03:49:05 -07:00
|
|
|
import { Serum3Market, PerpMarket } from '@blockworks-foundation/mango-v4'
|
2022-11-18 11:11:06 -08:00
|
|
|
import useJupiterMints from 'hooks/useJupiterMints'
|
2022-09-26 04:53:49 -07:00
|
|
|
import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
|
2022-10-28 14:46:38 -07:00
|
|
|
import Image from 'next/legacy/image'
|
2022-10-02 20:14:26 -07:00
|
|
|
import { useMemo } from 'react'
|
2022-11-20 12:32:38 -08:00
|
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
2022-12-09 14:58:49 -08:00
|
|
|
import LogoWithFallback from '@components/shared/LogoWithFallback'
|
2022-09-26 04:53:49 -07:00
|
|
|
|
2022-11-29 20:01:55 -08:00
|
|
|
const MarketLogos = ({
|
|
|
|
market,
|
|
|
|
small,
|
|
|
|
}: {
|
|
|
|
market: Serum3Market | PerpMarket
|
|
|
|
small?: boolean
|
|
|
|
}) => {
|
2022-11-20 12:32:38 -08:00
|
|
|
const { group } = useMangoGroup()
|
2022-11-18 11:11:06 -08:00
|
|
|
const { mangoTokens } = useJupiterMints()
|
2022-10-02 20:14:26 -07:00
|
|
|
|
|
|
|
const logos = useMemo(() => {
|
2022-11-18 11:11:06 -08:00
|
|
|
if (!group || !mangoTokens.length || !market)
|
2022-10-02 20:14:26 -07:00
|
|
|
return { baseLogoURI: '', quoteLogoURI: '' }
|
2022-10-10 19:16:13 -07:00
|
|
|
|
|
|
|
let jupiterBaseToken, jupiterQuoteToken
|
|
|
|
if (market instanceof Serum3Market) {
|
|
|
|
const baseBank = group.getFirstBankByTokenIndex(market.baseTokenIndex)
|
|
|
|
const quoteBank = group.getFirstBankByTokenIndex(market.quoteTokenIndex)
|
|
|
|
|
2022-11-18 11:11:06 -08:00
|
|
|
jupiterBaseToken = mangoTokens.find(
|
2022-10-10 19:16:13 -07:00
|
|
|
(t) => t.address === baseBank.mint.toString()
|
|
|
|
)
|
2022-11-18 11:11:06 -08:00
|
|
|
jupiterQuoteToken = mangoTokens.find(
|
2022-10-10 19:16:13 -07:00
|
|
|
(t) => t.address === quoteBank.mint.toString()
|
|
|
|
)
|
|
|
|
} else {
|
2022-11-19 12:10:32 -08:00
|
|
|
jupiterBaseToken =
|
2023-01-18 03:18:57 -08:00
|
|
|
mangoTokens.find(
|
|
|
|
(t) => t.symbol.toUpperCase() === market.name.split('-')[0]
|
|
|
|
) ||
|
|
|
|
mangoTokens.find((t) =>
|
|
|
|
t.symbol.toUpperCase()?.includes(market.name.split('-')[0])
|
|
|
|
)
|
2022-10-10 19:16:13 -07:00
|
|
|
}
|
2022-10-02 20:14:26 -07:00
|
|
|
const baseLogoURI = jupiterBaseToken ? jupiterBaseToken.logoURI : ''
|
|
|
|
const quoteLogoURI = jupiterQuoteToken ? jupiterQuoteToken.logoURI : ''
|
|
|
|
return {
|
|
|
|
baseLogoURI,
|
|
|
|
quoteLogoURI,
|
2022-12-09 14:58:49 -08:00
|
|
|
name: market.name.split(/-|\//)[0],
|
2022-10-02 20:14:26 -07:00
|
|
|
}
|
2022-11-18 11:11:06 -08:00
|
|
|
}, [group, mangoTokens, market])
|
2022-10-10 19:16:13 -07:00
|
|
|
|
2022-09-26 04:53:49 -07:00
|
|
|
return (
|
2022-10-26 03:49:05 -07:00
|
|
|
<div
|
2022-12-11 17:11:31 -08:00
|
|
|
className={`relative ${small ? 'mr-1.5 h-4' : 'mr-2 h-5'} ${
|
2022-11-29 20:01:55 -08:00
|
|
|
market instanceof Serum3Market
|
|
|
|
? small
|
|
|
|
? 'w-[27px]'
|
|
|
|
: 'w-[34px]'
|
|
|
|
: small
|
|
|
|
? 'w-[16px]'
|
|
|
|
: 'w-[20px]'
|
2022-10-26 03:49:05 -07:00
|
|
|
}`}
|
|
|
|
>
|
2022-12-12 02:56:06 -08:00
|
|
|
<div className="absolute left-0 top-0 z-10">
|
2022-12-09 14:58:49 -08:00
|
|
|
<LogoWithFallback
|
|
|
|
alt=""
|
2022-12-15 20:45:01 -08:00
|
|
|
className="flex-shrink-0 drop-shadow-md"
|
2022-12-09 14:58:49 -08:00
|
|
|
width={small ? '16' : '20'}
|
|
|
|
height={small ? '16' : '20'}
|
2022-12-09 15:08:15 -08:00
|
|
|
src={logos.baseLogoURI || `/icons/${logos?.name?.toLowerCase()}.svg`}
|
|
|
|
fallback={
|
|
|
|
<QuestionMarkCircleIcon
|
|
|
|
className={`${small ? 'h-4 w-4' : 'h-5 w-5'} text-th-fgd-3`}
|
|
|
|
/>
|
|
|
|
}
|
2022-12-09 14:58:49 -08:00
|
|
|
/>
|
2022-09-26 04:53:49 -07:00
|
|
|
</div>
|
|
|
|
<div className="absolute right-0 top-0">
|
2022-10-10 19:16:13 -07:00
|
|
|
{logos.quoteLogoURI && market instanceof Serum3Market ? (
|
2022-09-26 04:53:49 -07:00
|
|
|
<Image
|
|
|
|
alt=""
|
2022-12-15 20:45:01 -08:00
|
|
|
className="flex-shrink-0 opacity-60"
|
2022-11-29 20:01:55 -08:00
|
|
|
width={small ? '16' : '20'}
|
|
|
|
height={small ? '16' : '20'}
|
2022-10-02 20:14:26 -07:00
|
|
|
src={logos.quoteLogoURI}
|
2022-09-26 04:53:49 -07:00
|
|
|
/>
|
2022-10-26 03:49:05 -07:00
|
|
|
) : market instanceof PerpMarket ? null : (
|
2022-11-29 20:01:55 -08:00
|
|
|
<QuestionMarkCircleIcon
|
2022-12-15 20:45:01 -08:00
|
|
|
className={`${
|
|
|
|
small ? 'h-4 w-4' : 'h-5 w-5'
|
|
|
|
} flex-shrink-0 text-th-fgd-3`}
|
2022-11-29 20:01:55 -08:00
|
|
|
/>
|
2022-09-26 04:53:49 -07:00
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default MarketLogos
|