From 02495833e5d0f7816a1d5d125ebf1a3579123463 Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 30 Nov 2022 16:30:18 +1100 Subject: [PATCH] filter by spot market base --- apis/coingecko.ts | 2 +- components/account/AccountChart.tsx | 6 +- components/shared/ChartRangeButtons.tsx | 8 +- components/shared/DetailedAreaChart.tsx | 12 +-- components/swap/SwapTokenChart.tsx | 4 +- components/trade/AdvancedMarketHeader.tsx | 99 +++++++++++++++-------- pages/token/[token].tsx | 14 ++-- 7 files changed, 90 insertions(+), 55 deletions(-) diff --git a/apis/coingecko.ts b/apis/coingecko.ts index f1a59fd3..428e9be0 100644 --- a/apis/coingecko.ts +++ b/apis/coingecko.ts @@ -1,7 +1,7 @@ export const fetchChartData = async ( baseTokenId: string | undefined, quoteTokenId: string | undefined, - daysToShow: number + daysToShow: string ) => { console.log('fetching chart:', baseTokenId, quoteTokenId) diff --git a/components/account/AccountChart.tsx b/components/account/AccountChart.tsx index 06b47b84..90434550 100644 --- a/components/account/AccountChart.tsx +++ b/components/account/AccountChart.tsx @@ -26,13 +26,13 @@ const AccountChart = ({ }) => { const { t } = useTranslation('common') const actions = mangoStore((s) => s.actions) - const [daysToShow, setDaysToShow] = useState(1) + const [daysToShow, setDaysToShow] = useState('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) } diff --git a/components/shared/ChartRangeButtons.tsx b/components/shared/ChartRangeButtons.tsx index 192162fd..c06a3228 100644 --- a/components/shared/ChartRangeButtons.tsx +++ b/components/shared/ChartRangeButtons.tsx @@ -1,10 +1,10 @@ import { FunctionComponent } from 'react' interface ChartRangeButtonsProps { - activeValue: number + activeValue: string className?: string - onChange: (x: number) => void - values: Array + onChange: (x: string) => void + values: Array names?: Array } @@ -20,7 +20,7 @@ const ChartRangeButtons: FunctionComponent = ({
{activeValue && values.includes(activeValue) ? (
v === activeValue) * 100 diff --git a/components/shared/DetailedAreaChart.tsx b/components/shared/DetailedAreaChart.tsx index ff56c8b2..5b658f9b 100644 --- a/components/shared/DetailedAreaChart.tsx +++ b/components/shared/DetailedAreaChart.tsx @@ -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 = ({ data, - daysToShow = 1, + daysToShow = '1', hideChange, hideChart, loading, @@ -183,7 +183,7 @@ const DetailedAreaChart: FunctionComponent = ({ setDaysToShow(v)} />
@@ -252,7 +252,9 @@ const DetailedAreaChart: FunctionComponent = ({ fontSize: 10, }} tickLine={false} - tickFormatter={(d) => formatDateAxis(d, daysToShow)} + tickFormatter={(d) => + formatDateAxis(d, parseInt(daysToShow)) + } /> { const [baseTokenId, setBaseTokenId] = useState(inputCoingeckoId) const [quoteTokenId, setQuoteTokenId] = useState(outputCoingeckoId) const [mouseData, setMouseData] = useState(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 = () => { setDaysToShow(v)} />
diff --git a/components/trade/AdvancedMarketHeader.tsx b/components/trade/AdvancedMarketHeader.tsx index ef704245..d3324d62 100644 --- a/components/trade/AdvancedMarketHeader.tsx +++ b/components/trade/AdvancedMarketHeader.tsx @@ -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 ( @@ -47,40 +63,57 @@ const MarketSelectDropdown = () => { small values={['perp', 'spot']} /> - {activeTab === 'spot' - ? serumMarkets?.length - ? serumMarkets.map((m) => { - return ( -
- +
+ setSpotBaseFilter(v)} + /> +
+ {serumMarkets + .filter((mkt) => { + if (spotBaseFilter === 'All') { + return mkt + } else { + return mkt.name.split('/')[1] === spotBaseFilter + } + }) + .map((m) => { + return ( +
-
- - - {m.name} - -
- - -
- ) - }) - : null - : null} + +
+ + + {m.name} + +
+ + +
+ ) + })} + + ) : null + ) : null} {activeTab === 'perp' ? perpMarkets?.length ? perpMarkets.map((m) => { diff --git a/pages/token/[token].tsx b/pages/token/[token].tsx index e8d718bf..e9ee3e85 100644 --- a/pages/token/[token].tsx +++ b/pages/token/[token].tsx @@ -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(1) + const [daysToShow, setDaysToShow] = useState('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 = () => { handleDaysToShow(v)} />