blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

filter by spot market base

This commit is contained in:
saml33 2022-11-30 16:30:18 +11:00
parent 443858dc36
commit 02495833e5
7 changed files with 90 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apis/coingecko.ts
View File

@ -1,7 +1,7 @@
export const fetchChartData = async (
baseTokenId: string | undefined,
quoteTokenId: string | undefined,
daysToShow: number
daysToShow: string
) => {
console.log('fetching chart:', baseTokenId, quoteTokenId)

6
components/account/AccountChart.tsx
View File

@ -26,13 +26,13 @@ const AccountChart = ({
}) => {
const { t } = useTranslation('common')
const actions = mangoStore((s) => s.actions)
const [daysToShow, setDaysToShow] = useState<number>(1)
const [daysToShow, setDaysToShow] = useState<string>('1')
const loading = mangoStore((s) => s.mangoAccount.stats.performance.loading)
const handleDaysToShow = async (days: number) => {
const handleDaysToShow = async (days: string) => {
await actions.fetchAccountPerformance(
mangoAccount.publicKey.toString(),
days
parseInt(days)
)
setDaysToShow(days)
}

8
components/shared/ChartRangeButtons.tsx
View File

@ -1,10 +1,10 @@
import { FunctionComponent } from 'react'
interface ChartRangeButtonsProps {
activeValue: number
activeValue: string
className?: string
onChange: (x: number) => void
values: Array<number>
onChange: (x: string) => void
values: Array<string>
names?: Array<string>
}
@ -20,7 +20,7 @@ const ChartRangeButtons: FunctionComponent<ChartRangeButtonsProps> = ({
<div className="relative flex">
{activeValue && values.includes(activeValue) ? (
<div
className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-bkg-2`}
className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-bkg-3`}
style={{
transform: `translateX(${
values.findIndex((v) => v === activeValue) * 100

12
components/shared/DetailedAreaChart.tsx
View File

@ -30,11 +30,11 @@ dayjs.extend(relativeTime)
interface DetailedAreaChartProps {
data: any[]
daysToShow: number
daysToShow: string
hideChange?: boolean
hideChart?: () => void
loading?: boolean
setDaysToShow: (x: number) => void
setDaysToShow: (x: string) => void
tickFormat?: (x: any) => string
title?: string
xKey: string
@ -51,7 +51,7 @@ export const formatDateAxis = (date: string, days: number) => {
const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
data,
daysToShow = 1,
daysToShow = '1',
hideChange,
hideChart,
loading,
@ -183,7 +183,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
<ChartRangeButtons
activeValue={daysToShow}
names={['24H', '7D', '30D']}
values={[1, 7, 30]}
values={['1', '7', '30']}
onChange={(v) => setDaysToShow(v)}
/>
</div>
@ -252,7 +252,9 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
fontSize: 10,
}}
tickLine={false}
tickFormatter={(d) => formatDateAxis(d, daysToShow)}
tickFormatter={(d) =>
formatDateAxis(d, parseInt(daysToShow))
}
/>
<YAxis
axisLine={false}

4
components/swap/SwapTokenChart.tsx
View File

@ -76,7 +76,7 @@ const SwapTokenChart = () => {
const [baseTokenId, setBaseTokenId] = useState(inputCoingeckoId)
const [quoteTokenId, setQuoteTokenId] = useState(outputCoingeckoId)
const [mouseData, setMouseData] = useState<any>(null)
const [daysToShow, setDaysToShow] = useState(1)
const [daysToShow, setDaysToShow] = useState('1')
const { theme } = useTheme()
const [animationSettings] = useLocalStorageState(
ANIMATION_SETTINGS_KEY,
@ -245,7 +245,7 @@ const SwapTokenChart = () => {
<ChartRangeButtons
activeValue={daysToShow}
names={['24H', '7D', '30D']}
values={[1, 7, 30]}
values={['1', '7', '30']}
onChange={(v) => setDaysToShow(v)}
/>
</div>

99
components/trade/AdvancedMarketHeader.tsx
View File

@ -1,4 +1,5 @@
import Change from '@components/shared/Change'
import ChartRangeButtons from '@components/shared/ChartRangeButtons'
import FavoriteMarketButton from '@components/shared/FavoriteMarketButton'
import TabUnderline from '@components/shared/TabUnderline'
import { Popover } from '@headlessui/react'
@ -19,6 +20,21 @@ const MarketSelectDropdown = () => {
const serumMarkets = mangoStore((s) => s.serumMarkets)
const perpMarkets = mangoStore((s) => s.perpMarkets)
const [activeTab, setActiveTab] = useState('perp')
const [spotBaseFilter, setSpotBaseFilter] = useState('All')
const spotBaseTokens: string[] = useMemo(() => {
if (serumMarkets.length) {
const baseTokens: string[] = []
serumMarkets.map((m) => {
const base = m.name.split('/')[1]
if (!baseTokens.includes(base)) {
baseTokens.push(base)
}
})
return baseTokens
}
return []
}, [serumMarkets])
return (
<Popover>
@ -47,40 +63,57 @@ const MarketSelectDropdown = () => {
small
values={['perp', 'spot']}
/>
{activeTab === 'spot'
? serumMarkets?.length
? serumMarkets.map((m) => {
return (
<div
className="flex items-center justify-between py-2 px-4"
key={m.publicKey.toString()}
>
<Link
href={{
pathname: '/trade',
query: { name: m.name },
}}
shallow={true}
{activeTab === 'spot' ? (
serumMarkets?.length ? (
<>
<div className="mb-2 w-56 px-4">
<ChartRangeButtons
activeValue={spotBaseFilter}
values={['All', ...spotBaseTokens]}
onChange={(v) => setSpotBaseFilter(v)}
/>
</div>
{serumMarkets
.filter((mkt) => {
if (spotBaseFilter === 'All') {
return mkt
} else {
return mkt.name.split('/')[1] === spotBaseFilter
}
})
.map((m) => {
return (
<div
className="flex items-center justify-between py-2 px-4"
key={m.publicKey.toString()}
>
<div className="default-transition flex items-center hover:cursor-pointer hover:text-th-primary">
<MarketLogos market={m} />
<span
className={
m.name === selectedMarket?.name
? 'text-th-primary'
: ''
}
>
{m.name}
</span>
</div>
</Link>
<FavoriteMarketButton market={m} />
</div>
)
})
: null
: null}
<Link
href={{
pathname: '/trade',
query: { name: m.name },
}}
shallow={true}
>
<div className="default-transition flex items-center hover:cursor-pointer hover:text-th-primary">
<MarketLogos market={m} />
<span
className={
m.name === selectedMarket?.name
? 'text-th-primary'
: ''
}
>
{m.name}
</span>
</div>
</Link>
<FavoriteMarketButton market={m} />
</div>
)
})}
</>
) : null
) : null}
{activeTab === 'perp'
? perpMarkets?.length
? perpMarkets.map((m) => {

14
pages/token/[token].tsx
View File

@ -86,7 +86,7 @@ const Token: NextPage = () => {
const { isLoading: loadingPrices, data: coingeckoPrices } = useCoingecko()
const [chartData, setChartData] = useState<{ prices: any[] } | null>(null)
const [loadChartData, setLoadChartData] = useState(true)
const [daysToShow, setDaysToShow] = useState<number>(1)
const [daysToShow, setDaysToShow] = useState<string>('1')
const [animationSettings] = useLocalStorageState(
ANIMATION_SETTINGS_KEY,
INITIAL_ANIMATION_SETTINGS
@ -177,11 +177,11 @@ const Token: NextPage = () => {
} = coingeckoData ? coingeckoData.market_data : DEFAULT_COINGECKO_VALUES
const loadingChart = useMemo(() => {
return daysToShow == 1 ? loadingPrices : loadChartData
return daysToShow == '1' ? loadingPrices : loadChartData
}, [loadChartData, loadingPrices])
const coingeckoTokenPrices = useMemo(() => {
if (daysToShow === 1 && coingeckoPrices.length && bank) {
if (daysToShow === '1' && coingeckoPrices.length && bank) {
const tokenPriceData = coingeckoPrices.find(
(asset) => asset.symbol === bank.name
)
@ -197,8 +197,8 @@ const Token: NextPage = () => {
return []
}, [coingeckoPrices, bank, daysToShow, chartData, loadingChart])
const handleDaysToShow = async (days: number) => {
if (days !== 1) {
const handleDaysToShow = async (days: string) => {
if (days !== '1') {
try {
const response = await fetch(
`https://api.coingecko.com/api/v3/coins/${coingeckoId}/market_chart?vs_currency=usd&days=${days}`
@ -406,12 +406,12 @@ const Token: NextPage = () => {
<ChartRangeButtons
activeValue={daysToShow}
names={['24H', '7D', '30D']}
values={[1, 7, 30]}
values={['1', '7', '30']}
onChange={(v) => handleDaysToShow(v)}
/>
</div>
<PriceChart
daysToShow={daysToShow}
daysToShow={parseInt(daysToShow)}
prices={coingeckoTokenPrices}
/>
</>