save chart and price direction on flip price
This commit is contained in:
parent
37d9b1ce0a
commit
306e1f0fdf
|
@ -17,15 +17,18 @@ export const fetchChartData = async (
|
||||||
baseTokenId: string | undefined,
|
baseTokenId: string | undefined,
|
||||||
quoteTokenId: string | undefined,
|
quoteTokenId: string | undefined,
|
||||||
daysToShow: string,
|
daysToShow: string,
|
||||||
|
flipPrices: boolean,
|
||||||
): Promise<ChartDataItem[]> => {
|
): Promise<ChartDataItem[]> => {
|
||||||
if (!baseTokenId || !quoteTokenId) return []
|
if (!baseTokenId || !quoteTokenId) return []
|
||||||
|
const baseId = !flipPrices ? baseTokenId : quoteTokenId
|
||||||
|
const quoteId = !flipPrices ? quoteTokenId : baseTokenId
|
||||||
try {
|
try {
|
||||||
const [inputResponse, outputResponse] = await Promise.all([
|
const [inputResponse, outputResponse] = await Promise.all([
|
||||||
fetch(
|
fetch(
|
||||||
`https://api.coingecko.com/api/v3/coins/${baseTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`,
|
`https://api.coingecko.com/api/v3/coins/${baseId}/ohlc?vs_currency=usd&days=${daysToShow}`,
|
||||||
),
|
),
|
||||||
fetch(
|
fetch(
|
||||||
`https://api.coingecko.com/api/v3/coins/${quoteTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`,
|
`https://api.coingecko.com/api/v3/coins/${quoteId}/ohlc?vs_currency=usd&days=${daysToShow}`,
|
||||||
),
|
),
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|
|
@ -28,12 +28,12 @@ import SellTokenInput from './SellTokenInput'
|
||||||
import BuyTokenInput from './BuyTokenInput'
|
import BuyTokenInput from './BuyTokenInput'
|
||||||
import { notify } from 'utils/notifications'
|
import { notify } from 'utils/notifications'
|
||||||
import * as sentry from '@sentry/nextjs'
|
import * as sentry from '@sentry/nextjs'
|
||||||
import { SwapChartSettings, isMangoError } from 'types'
|
import { isMangoError } from 'types'
|
||||||
import Button, { IconButton } from '@components/shared/Button'
|
import Button, { IconButton } from '@components/shared/Button'
|
||||||
import Loading from '@components/shared/Loading'
|
import Loading from '@components/shared/Loading'
|
||||||
import TokenLogo from '@components/shared/TokenLogo'
|
import TokenLogo from '@components/shared/TokenLogo'
|
||||||
import InlineNotification from '@components/shared/InlineNotification'
|
import InlineNotification from '@components/shared/InlineNotification'
|
||||||
import { handleFlipPrices } from './SwapTokenChart'
|
import { getPairChartSettings, handleFlipPrices } from './SwapTokenChart'
|
||||||
import Select from '@components/forms/Select'
|
import Select from '@components/forms/Select'
|
||||||
import useIpAddress from 'hooks/useIpAddress'
|
import useIpAddress from 'hooks/useIpAddress'
|
||||||
import { Bank } from '@blockworks-foundation/mango-v4'
|
import { Bank } from '@blockworks-foundation/mango-v4'
|
||||||
|
@ -119,13 +119,13 @@ const LimitSwapForm = ({
|
||||||
|
|
||||||
const flipPrices = useMemo(() => {
|
const flipPrices = useMemo(() => {
|
||||||
if (!swapChartSettings.length || !inputBank || !outputBank) return false
|
if (!swapChartSettings.length || !inputBank || !outputBank) return false
|
||||||
const pairSettings = swapChartSettings.find(
|
const pairSettings = getPairChartSettings(
|
||||||
(chart: SwapChartSettings) =>
|
swapChartSettings,
|
||||||
chart.pair.includes(inputBank.name) &&
|
inputBank.name,
|
||||||
chart.pair.includes(outputBank.name),
|
outputBank.name,
|
||||||
)
|
)
|
||||||
if (pairSettings) {
|
if (pairSettings) {
|
||||||
return pairSettings.flipPrices
|
return pairSettings.quote === inputBank.name
|
||||||
} else return false
|
} else return false
|
||||||
}, [swapChartSettings, inputBank, outputBank])
|
}, [swapChartSettings, inputBank, outputBank])
|
||||||
|
|
||||||
|
|
|
@ -54,27 +54,49 @@ import useThemeWrapper from 'hooks/useThemeWrapper'
|
||||||
|
|
||||||
dayjs.extend(relativeTime)
|
dayjs.extend(relativeTime)
|
||||||
|
|
||||||
|
export const getPairChartSettings = (
|
||||||
|
swapChartSettings: SwapChartSettings[],
|
||||||
|
inputToken: string,
|
||||||
|
outputToken: string,
|
||||||
|
) => {
|
||||||
|
const pairSettings = swapChartSettings.find(
|
||||||
|
(chart: SwapChartSettings) =>
|
||||||
|
chart.pair.includes(inputToken) && chart.pair.includes(outputToken),
|
||||||
|
)
|
||||||
|
return pairSettings
|
||||||
|
}
|
||||||
|
|
||||||
export const handleFlipPrices = (
|
export const handleFlipPrices = (
|
||||||
flip: boolean,
|
flip: boolean,
|
||||||
// flipPrices: boolean,
|
|
||||||
inputToken: string | undefined,
|
inputToken: string | undefined,
|
||||||
outputToken: string | undefined,
|
outputToken: string | undefined,
|
||||||
swapChartSettings: SwapChartSettings[],
|
swapChartSettings: SwapChartSettings[],
|
||||||
setSwapChartSettings: (settings: SwapChartSettings[]) => void,
|
setSwapChartSettings: (settings: SwapChartSettings[]) => void,
|
||||||
) => {
|
) => {
|
||||||
if (!inputToken || !outputToken) return
|
if (!inputToken || !outputToken) return
|
||||||
if (flip) {
|
|
||||||
|
const pairSettings = getPairChartSettings(
|
||||||
|
swapChartSettings,
|
||||||
|
inputToken,
|
||||||
|
outputToken,
|
||||||
|
)
|
||||||
|
|
||||||
|
const base = flip ? outputToken : inputToken
|
||||||
|
const quote = flip ? inputToken : outputToken
|
||||||
|
|
||||||
|
if (pairSettings) {
|
||||||
|
pairSettings.base = base
|
||||||
|
pairSettings.quote = quote
|
||||||
|
setSwapChartSettings([...swapChartSettings])
|
||||||
|
} else {
|
||||||
setSwapChartSettings([
|
setSwapChartSettings([
|
||||||
...swapChartSettings,
|
...swapChartSettings,
|
||||||
{ pair: `${inputToken}/${outputToken}`, flipPrices: true },
|
{
|
||||||
|
pair: `${outputToken}/${inputToken}`,
|
||||||
|
base: base,
|
||||||
|
quote: quote,
|
||||||
|
},
|
||||||
])
|
])
|
||||||
} else {
|
|
||||||
setSwapChartSettings(
|
|
||||||
swapChartSettings.filter(
|
|
||||||
(chart: SwapChartSettings) =>
|
|
||||||
!chart.pair.includes(inputToken) && !chart.pair.includes(outputToken),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -229,13 +251,13 @@ const SwapTokenChart = () => {
|
||||||
|
|
||||||
const flipPrices = useMemo(() => {
|
const flipPrices = useMemo(() => {
|
||||||
if (!swapChartSettings.length || !inputBank || !outputBank) return false
|
if (!swapChartSettings.length || !inputBank || !outputBank) return false
|
||||||
const pairSettings = swapChartSettings.find(
|
const pairSettings = getPairChartSettings(
|
||||||
(chart: SwapChartSettings) =>
|
swapChartSettings,
|
||||||
chart.pair.includes(inputBank.name) &&
|
inputBank.name,
|
||||||
chart.pair.includes(outputBank.name),
|
outputBank.name,
|
||||||
)
|
)
|
||||||
if (pairSettings) {
|
if (pairSettings) {
|
||||||
return pairSettings.flipPrices
|
return pairSettings.quote === inputBank.name
|
||||||
} else return false
|
} else return false
|
||||||
}, [swapChartSettings, inputBank, outputBank])
|
}, [swapChartSettings, inputBank, outputBank])
|
||||||
|
|
||||||
|
@ -246,7 +268,7 @@ const SwapTokenChart = () => {
|
||||||
return !flipPrices
|
return !flipPrices
|
||||||
? `${outputSymbol}/${inputSymbol}`
|
? `${outputSymbol}/${inputSymbol}`
|
||||||
: `${inputSymbol}/${outputSymbol}`
|
: `${inputSymbol}/${outputSymbol}`
|
||||||
}, [flipPrices, inputBank, inputCoingeckoId, outputBank])
|
}, [flipPrices, inputBank, outputBank])
|
||||||
|
|
||||||
const handleSwapMouseEnter = useCallback(
|
const handleSwapMouseEnter = useCallback(
|
||||||
(
|
(
|
||||||
|
@ -363,12 +385,12 @@ const SwapTokenChart = () => {
|
||||||
)
|
)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data: coingeckoDataQuery,
|
data: coingeckoData,
|
||||||
isLoading,
|
isLoading,
|
||||||
isFetching,
|
isFetching,
|
||||||
} = useQuery(
|
} = useQuery(
|
||||||
['swap-chart-data', baseTokenId, quoteTokenId, daysToShow],
|
['swap-chart-data', baseTokenId, quoteTokenId, daysToShow, flipPrices],
|
||||||
() => fetchChartData(baseTokenId, quoteTokenId, daysToShow),
|
() => fetchChartData(baseTokenId, quoteTokenId, daysToShow, flipPrices),
|
||||||
{
|
{
|
||||||
cacheTime: 1000 * 60 * 15,
|
cacheTime: 1000 * 60 * 15,
|
||||||
staleTime: 1000 * 60 * 1,
|
staleTime: 1000 * 60 * 1,
|
||||||
|
@ -377,21 +399,6 @@ const SwapTokenChart = () => {
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
const coingeckoData = useMemo(() => {
|
|
||||||
if (!coingeckoDataQuery || !coingeckoDataQuery.length) return []
|
|
||||||
if (!flipPrices) {
|
|
||||||
return coingeckoDataQuery
|
|
||||||
} else {
|
|
||||||
return coingeckoDataQuery.map((d: ChartDataItem) => {
|
|
||||||
const price =
|
|
||||||
d.inputTokenPrice / d.outputTokenPrice === d.price
|
|
||||||
? d.outputTokenPrice / d.inputTokenPrice
|
|
||||||
: d.inputTokenPrice / d.outputTokenPrice
|
|
||||||
return { ...d, price: price }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}, [flipPrices, coingeckoDataQuery])
|
|
||||||
|
|
||||||
const chartSwapTimes = useMemo(() => {
|
const chartSwapTimes = useMemo(() => {
|
||||||
if (
|
if (
|
||||||
loadSwapHistory ||
|
loadSwapHistory ||
|
||||||
|
@ -415,7 +422,8 @@ const SwapTokenChart = () => {
|
||||||
}, [swapHistory, loadSwapHistory, inputBank, outputBank])
|
}, [swapHistory, loadSwapHistory, inputBank, outputBank])
|
||||||
|
|
||||||
const swapHistoryPoints = useMemo(() => {
|
const swapHistoryPoints = useMemo(() => {
|
||||||
if (!coingeckoData.length || !chartSwapTimes.length) return []
|
if (!coingeckoData || !coingeckoData.length || !chartSwapTimes.length)
|
||||||
|
return []
|
||||||
return chartSwapTimes.map((x) => {
|
return chartSwapTimes.map((x) => {
|
||||||
const makeChartDataItem = { inputTokenPrice: 1, outputTokenPrice: 1 }
|
const makeChartDataItem = { inputTokenPrice: 1, outputTokenPrice: 1 }
|
||||||
const index = coingeckoData.findIndex((d) => d.time > x) // find index of data point with x value greater than highlight x
|
const index = coingeckoData.findIndex((d) => d.time > x) // find index of data point with x value greater than highlight x
|
||||||
|
|
|
@ -468,6 +468,7 @@ export interface ContributionDetails {
|
||||||
}
|
}
|
||||||
|
|
||||||
export type SwapChartSettings = {
|
export type SwapChartSettings = {
|
||||||
flipPrices: boolean
|
|
||||||
pair: string
|
pair: string
|
||||||
|
base: string
|
||||||
|
quote: string
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue