add logos to open orders
This commit is contained in:
parent
daf3d97dc1
commit
cd75f5c3f5
|
@ -1,21 +1,19 @@
|
||||||
import { Serum3Market } from '@blockworks-foundation/mango-v4'
|
import { Serum3Market } from '@blockworks-foundation/mango-v4'
|
||||||
import PercentageChange from '@components/shared/PercentageChange'
|
import PercentageChange from '@components/shared/PercentageChange'
|
||||||
import { Popover } from '@headlessui/react'
|
import { Popover } from '@headlessui/react'
|
||||||
import {
|
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||||||
ChevronDownIcon,
|
|
||||||
QuestionMarkCircleIcon,
|
|
||||||
} from '@heroicons/react/20/solid'
|
|
||||||
import mangoStore from '@store/mangoStore'
|
import mangoStore from '@store/mangoStore'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
import Image from 'next/image'
|
|
||||||
import { useCallback, useMemo } from 'react'
|
import { useCallback, useMemo } from 'react'
|
||||||
import { DEFAULT_MARKET_NAME } from 'utils/constants'
|
import { DEFAULT_MARKET_NAME } from 'utils/constants'
|
||||||
import { formatFixedDecimals } from 'utils/numbers'
|
import { formatFixedDecimals } from 'utils/numbers'
|
||||||
|
import MarketLogos from './MarketLogos'
|
||||||
|
|
||||||
const MarketSelectDropdown = () => {
|
const MarketSelectDropdown = () => {
|
||||||
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
|
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
|
||||||
const serumMarkets = mangoStore((s) => s.serumMarkets)
|
const serumMarkets = mangoStore((s) => s.serumMarkets)
|
||||||
const jupiterTokens = mangoStore((s) => s.jupiterTokens)
|
const jupiterTokens = mangoStore((s) => s.jupiterTokens)
|
||||||
|
const group = mangoStore((s) => s.group)
|
||||||
const set = mangoStore((s) => s.set)
|
const set = mangoStore((s) => s.set)
|
||||||
|
|
||||||
const handleSelectMarket = useCallback(
|
const handleSelectMarket = useCallback(
|
||||||
|
@ -29,13 +27,18 @@ const MarketSelectDropdown = () => {
|
||||||
)
|
)
|
||||||
|
|
||||||
const [baseLogoURI, quoteLogoURI] = useMemo(() => {
|
const [baseLogoURI, quoteLogoURI] = useMemo(() => {
|
||||||
if (jupiterTokens.length && selectedMarket) {
|
if (jupiterTokens.length && selectedMarket && group) {
|
||||||
const tokenSymbols = selectedMarket.name.split('/')
|
const baseSymbol = group.getFirstBankByTokenIndex(
|
||||||
|
selectedMarket.baseTokenIndex
|
||||||
|
).name
|
||||||
|
const quoteSymbol = group.getFirstBankByTokenIndex(
|
||||||
|
selectedMarket.quoteTokenIndex
|
||||||
|
).name
|
||||||
const baseURI = jupiterTokens.find(
|
const baseURI = jupiterTokens.find(
|
||||||
(t) => t.symbol === tokenSymbols[0]
|
(t) => t.symbol === baseSymbol
|
||||||
)!.logoURI
|
)!.logoURI
|
||||||
const quoteURI = jupiterTokens.find(
|
const quoteURI = jupiterTokens.find(
|
||||||
(t) => t.symbol === tokenSymbols[1]
|
(t) => t.symbol === quoteSymbol
|
||||||
)!.logoURI
|
)!.logoURI
|
||||||
return [baseURI, quoteURI]
|
return [baseURI, quoteURI]
|
||||||
} else {
|
} else {
|
||||||
|
@ -64,16 +67,20 @@ const MarketSelectDropdown = () => {
|
||||||
? serumMarkets.map((m) => {
|
? serumMarkets.map((m) => {
|
||||||
let baseLogoURI = ''
|
let baseLogoURI = ''
|
||||||
let quoteLogoURI = ''
|
let quoteLogoURI = ''
|
||||||
const tokenSymbols = m.name.split('/')
|
const baseSymbol = group?.getFirstBankByTokenIndex(
|
||||||
|
m.baseTokenIndex
|
||||||
|
).name
|
||||||
|
const quoteSymbol = group?.getFirstBankByTokenIndex(
|
||||||
|
m.quoteTokenIndex
|
||||||
|
).name
|
||||||
if (jupiterTokens.length) {
|
if (jupiterTokens.length) {
|
||||||
baseLogoURI = jupiterTokens.find(
|
baseLogoURI = jupiterTokens.find(
|
||||||
(t) => t.symbol === tokenSymbols[0]
|
(t) => t.symbol === baseSymbol
|
||||||
)!.logoURI
|
)!.logoURI
|
||||||
quoteLogoURI = jupiterTokens.find(
|
quoteLogoURI = jupiterTokens.find(
|
||||||
(t) => t.symbol === tokenSymbols[1]
|
(t) => t.symbol === quoteSymbol
|
||||||
)!.logoURI
|
)!.logoURI
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={m.publicKey.toString()}
|
key={m.publicKey.toString()}
|
||||||
|
@ -104,45 +111,6 @@ const MarketSelectDropdown = () => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const MarketLogos = ({
|
|
||||||
baseURI,
|
|
||||||
quoteURI,
|
|
||||||
}: {
|
|
||||||
baseURI: string
|
|
||||||
quoteURI: string
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div className="relative mr-1.5 h-5 w-[34px]">
|
|
||||||
<div className="absolute left-0 top-0">
|
|
||||||
{baseURI ? (
|
|
||||||
<Image
|
|
||||||
alt=""
|
|
||||||
className="z-10 rounded-full drop-shadow-md"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
src={baseURI}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<QuestionMarkCircleIcon className="h-5 w-5 text-th-fgd-3" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="absolute right-0 top-0">
|
|
||||||
{quoteURI ? (
|
|
||||||
<Image
|
|
||||||
alt=""
|
|
||||||
className="rounded-full opacity-70"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
src={quoteURI}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<QuestionMarkCircleIcon className="h-5 w-5 text-th-fgd-3" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const OraclePrice = () => {
|
const OraclePrice = () => {
|
||||||
const group = mangoStore((s) => s.group)
|
const group = mangoStore((s) => s.group)
|
||||||
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
|
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Serum3Side } from '@blockworks-foundation/mango-v4'
|
import { Serum3Side } from '@blockworks-foundation/mango-v4'
|
||||||
import Button, { IconButton } from '@components/shared/Button'
|
import { IconButton } from '@components/shared/Button'
|
||||||
import SideBadge from '@components/shared/SideBadge'
|
import SideBadge from '@components/shared/SideBadge'
|
||||||
import TabButtons from '@components/shared/TabButtons'
|
import TabButtons from '@components/shared/TabButtons'
|
||||||
import Tooltip from '@components/shared/Tooltip'
|
import Tooltip from '@components/shared/Tooltip'
|
||||||
|
@ -17,6 +17,7 @@ import Image from 'next/image'
|
||||||
import { useCallback, useMemo, useState } from 'react'
|
import { useCallback, useMemo, useState } from 'react'
|
||||||
import { notify } from 'utils/notifications'
|
import { notify } from 'utils/notifications'
|
||||||
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||||
|
import MarketLogos from './MarketLogos'
|
||||||
|
|
||||||
const TABS = ['Balances', 'Orders']
|
const TABS = ['Balances', 'Orders']
|
||||||
|
|
||||||
|
@ -138,6 +139,7 @@ const OpenOrders = () => {
|
||||||
const { t } = useTranslation('common')
|
const { t } = useTranslation('common')
|
||||||
const { connected } = useWallet()
|
const { connected } = useWallet()
|
||||||
const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
|
const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
|
||||||
|
const jupiterTokens = mangoStore((s) => s.jupiterTokens)
|
||||||
|
|
||||||
const handleCancelOrder = useCallback(
|
const handleCancelOrder = useCallback(
|
||||||
async (o: Order) => {
|
async (o: Order) => {
|
||||||
|
@ -197,9 +199,31 @@ const OpenOrders = () => {
|
||||||
const market = group?.getSerum3MarketByPk(
|
const market = group?.getSerum3MarketByPk(
|
||||||
new PublicKey(marketPk)
|
new PublicKey(marketPk)
|
||||||
)
|
)
|
||||||
|
let baseLogoURI = ''
|
||||||
|
let quoteLogoURI = ''
|
||||||
|
const baseSymbol = group?.getFirstBankByTokenIndex(
|
||||||
|
market!.baseTokenIndex
|
||||||
|
).name
|
||||||
|
const quoteSymbol = group?.getFirstBankByTokenIndex(
|
||||||
|
market!.quoteTokenIndex
|
||||||
|
).name
|
||||||
|
if (jupiterTokens.length) {
|
||||||
|
baseLogoURI = jupiterTokens.find(
|
||||||
|
(t) => t.symbol === baseSymbol
|
||||||
|
)!.logoURI
|
||||||
|
quoteLogoURI = jupiterTokens.find(
|
||||||
|
(t) => t.symbol === quoteSymbol
|
||||||
|
)!.logoURI
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<tr key={`${o.side}${o.size}${o.price}`} className="my-1 p-2">
|
<tr key={`${o.side}${o.size}${o.price}`} className="my-1 p-2">
|
||||||
<td>{market?.name}</td>
|
<td className="flex items-center">
|
||||||
|
<MarketLogos
|
||||||
|
baseURI={baseLogoURI}
|
||||||
|
quoteURI={quoteLogoURI}
|
||||||
|
/>
|
||||||
|
{market?.name}
|
||||||
|
</td>
|
||||||
<td className="text-right">
|
<td className="text-right">
|
||||||
<SideBadge side={o.side} />
|
<SideBadge side={o.side} />
|
||||||
</td>
|
</td>
|
||||||
|
@ -207,13 +231,7 @@ const OpenOrders = () => {
|
||||||
<td className="text-right">
|
<td className="text-right">
|
||||||
<span>
|
<span>
|
||||||
{o.price}{' '}
|
{o.price}{' '}
|
||||||
<span className="text-th-fgd-4">
|
<span className="text-th-fgd-4">{quoteSymbol}</span>
|
||||||
{market
|
|
||||||
? group?.getFirstBankByTokenIndex(
|
|
||||||
market.quoteTokenIndex
|
|
||||||
).name
|
|
||||||
: ''}
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="text-right">
|
<td className="text-right">
|
||||||
|
|
|
@ -0,0 +1,43 @@
|
||||||
|
import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
|
||||||
|
import Image from 'next/image'
|
||||||
|
|
||||||
|
const MarketLogos = ({
|
||||||
|
baseURI,
|
||||||
|
quoteURI,
|
||||||
|
}: {
|
||||||
|
baseURI: string
|
||||||
|
quoteURI: string
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="relative mr-1.5 h-5 w-[34px]">
|
||||||
|
<div className="absolute left-0 top-0">
|
||||||
|
{baseURI ? (
|
||||||
|
<Image
|
||||||
|
alt=""
|
||||||
|
className="z-10 rounded-full drop-shadow-md"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
src={baseURI}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<QuestionMarkCircleIcon className="h-5 w-5 text-th-fgd-3" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="absolute right-0 top-0">
|
||||||
|
{quoteURI ? (
|
||||||
|
<Image
|
||||||
|
alt=""
|
||||||
|
className="rounded-full opacity-60"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
src={quoteURI}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<QuestionMarkCircleIcon className="h-5 w-5 text-th-fgd-3" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MarketLogos
|
Loading…
Reference in New Issue