= 0
+ birdeyeChange >= 0
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
@@ -153,7 +154,7 @@ const SpotMarketsTable = () => {
|
-
+
|
diff --git a/components/swap/SwapReviewRouteInfo.tsx b/components/swap/SwapReviewRouteInfo.tsx
index bff25335..898005d5 100644
--- a/components/swap/SwapReviewRouteInfo.tsx
+++ b/components/swap/SwapReviewRouteInfo.tsx
@@ -16,6 +16,7 @@ import {
AddressLookupTableAccount,
} from '@solana/web3.js'
import Decimal from 'decimal.js'
+import * as sentry from '@sentry/nextjs'
import mangoStore from '@store/mangoStore'
import Button, { IconButton } from '../shared/Button'
@@ -313,6 +314,7 @@ const SwapReviewRouteInfo = ({
await actions.reloadMangoAccount()
} catch (e) {
console.error('onSwap error: ', e)
+ sentry.captureException(e)
if (isMangoError(e)) {
notify({
title: 'Transaction failed',
diff --git a/components/swap/SwapTokenChart.tsx b/components/swap/SwapTokenChart.tsx
index 7611ae95..d6f76d0c 100644
--- a/components/swap/SwapTokenChart.tsx
+++ b/components/swap/SwapTokenChart.tsx
@@ -166,8 +166,12 @@ const SwapTokenChart = () => {
const loadSwapHistory = mangoStore((s) => s.mangoAccount.swapHistory.loading)
const [showSwaps, setShowSwaps] = useState(true)
- const coingeckoDataQuery = useQuery(
- ['chart-data', baseTokenId, quoteTokenId, daysToShow],
+ const {
+ data: coingeckoDataQuery,
+ isLoading,
+ isFetching,
+ } = useQuery(
+ ['swap-chart-data', baseTokenId, quoteTokenId, daysToShow],
() => fetchChartData(baseTokenId, quoteTokenId, daysToShow),
{
cacheTime: 1000 * 60 * 15,
@@ -178,11 +182,11 @@ const SwapTokenChart = () => {
)
const coingeckoData = useMemo(() => {
- if (!coingeckoDataQuery?.data?.length) return []
+ if (!coingeckoDataQuery || !coingeckoDataQuery.length) return []
if (!flipPrices) {
- return coingeckoDataQuery.data
+ return coingeckoDataQuery
} else {
- return coingeckoDataQuery.data.map((d: ChartDataItem) => {
+ return coingeckoDataQuery.map((d: ChartDataItem) => {
const price =
d.inputTokenPrice / d.outputTokenPrice === d.price
? d.outputTokenPrice / d.inputTokenPrice
@@ -240,7 +244,8 @@ const SwapTokenChart = () => {
}, [coingeckoData, chartSwapTimes])
const chartData = useMemo(() => {
- if (!coingeckoData.length) return []
+ if (!coingeckoData || !coingeckoData.length || coingeckoData.length < 2)
+ return []
const minTime = coingeckoData[0].time
const maxTime = coingeckoData[coingeckoData.length - 1].time
if (swapHistoryPoints.length && showSwaps) {
@@ -274,22 +279,21 @@ const SwapTokenChart = () => {
}, [inputCoingeckoId, outputCoingeckoId])
const calculateChartChange = () => {
- if (chartData?.length) {
- if (mouseData) {
- const index = chartData.findIndex((d) => d.time === mouseData.time)
- return (
- ((chartData[index]['price'] - chartData[0]['price']) /
- chartData[0]['price']) *
- 100
- )
- } else
- return (
- ((chartData[chartData.length - 1]['price'] - chartData[0]['price']) /
- chartData[0]['price']) *
- 100
- )
+ if (!chartData?.length) return 0
+ if (mouseData) {
+ const index = chartData.findIndex((d) => d.time === mouseData.time)
+ return (
+ ((chartData[index]['price'] - chartData[0]['price']) /
+ chartData[0]['price']) *
+ 100
+ )
+ } else {
+ return (
+ ((chartData[chartData.length - 1]['price'] - chartData[0]['price']) /
+ chartData[0]['price']) *
+ 100
+ )
}
- return 0
}
const swapMarketName = useMemo(() => {
@@ -307,7 +311,7 @@ const SwapTokenChart = () => {
return (
- {coingeckoDataQuery?.isLoading || coingeckoDataQuery.isFetching ? (
+ {isLoading || isFetching ? (
<>
diff --git a/components/swap/useQuoteRoutes.ts b/components/swap/useQuoteRoutes.ts
index 14c0cc43..679e7b14 100644
--- a/components/swap/useQuoteRoutes.ts
+++ b/components/swap/useQuoteRoutes.ts
@@ -160,8 +160,10 @@ export const handleGetRoutes = async (
routes: RouteInfo[]
bestRoute: RouteInfo
}[]
- ).sort(
- (a, b) => Number(b.bestRoute.outAmount) - Number(a.bestRoute.outAmount)
+ ).sort((a, b) =>
+ swapMode === 'ExactIn'
+ ? Number(b.bestRoute.outAmount) - Number(a.bestRoute.outAmount)
+ : Number(a.bestRoute.inAmount) - Number(b.bestRoute.inAmount)
)
return {
routes: sortedByBiggestOutAmount[0].routes,
diff --git a/components/token/CoingeckoStats.tsx b/components/token/CoingeckoStats.tsx
index 05d85c71..d9346aeb 100644
--- a/components/token/CoingeckoStats.tsx
+++ b/components/token/CoingeckoStats.tsx
@@ -13,6 +13,7 @@ import parse from 'html-react-parser'
import { useTranslation } from 'next-i18next'
import { useMemo, useState } from 'react'
import PriceChart from '@components/token/PriceChart'
+import { DAILY_SECONDS } from 'utils/constants'
dayjs.extend(relativeTime)
const DEFAULT_COINGECKO_VALUES = {
@@ -44,7 +45,7 @@ const fetchBirdeyePrices = async (
): Promise => {
const interval = daysToShow === '1' ? '30m' : daysToShow === '7' ? '1H' : '4H'
const queryEnd = Math.floor(Date.now() / 1000)
- const queryStart = queryEnd - parseInt(daysToShow) * 86400
+ const queryStart = queryEnd - parseInt(daysToShow) * DAILY_SECONDS
const query = `defi/history_price?address=${mint}&address_type=token&type=${interval}&time_from=${queryStart}&time_to=${queryEnd}`
const response: BirdeyeResponse = await makeApiRequest(query)
diff --git a/components/trade/AdvancedMarketHeader.tsx b/components/trade/AdvancedMarketHeader.tsx
index bfb1cfb7..05804c97 100644
--- a/components/trade/AdvancedMarketHeader.tsx
+++ b/components/trade/AdvancedMarketHeader.tsx
@@ -1,6 +1,5 @@
import { PerpMarket, Serum3Market } from '@blockworks-foundation/mango-v4'
import { IconButton, LinkButton } from '@components/shared/Button'
-import Change from '@components/shared/Change'
import { getOneDayPerpStats } from '@components/stats/PerpMarketsOverviewTable'
import { ChartBarIcon, InformationCircleIcon } from '@heroicons/react/20/solid'
import mangoStore from '@store/mangoStore'
@@ -10,9 +9,7 @@ import { useEffect, useMemo, useState } from 'react'
import { numberCompacter } from 'utils/numbers'
import MarketSelectDropdown from './MarketSelectDropdown'
import PerpFundingRate from './PerpFundingRate'
-import { useBirdeyeMarketPrices } from 'hooks/useBirdeyeMarketPrices'
import SheenLoader from '@components/shared/SheenLoader'
-import usePrevious from '@components/shared/usePrevious'
import PerpMarketDetailsModal from '@components/modals/PerpMarketDetailsModal'
import useMangoGroup from 'hooks/useMangoGroup'
import OraclePrice from './OraclePrice'
@@ -23,6 +20,7 @@ import { TickerData } from 'types'
import ManualRefresh from '@components/shared/ManualRefresh'
import { useViewport } from 'hooks/useViewport'
import { breakpoints } from 'utils/theme'
+import MarketChange from '@components/shared/MarketChange'
export const fetchSpotVolume = async () => {
try {
@@ -43,17 +41,8 @@ const AdvancedMarketHeader = ({
}) => {
const { t } = useTranslation(['common', 'trade'])
const perpStats = mangoStore((s) => s.perpStats.data)
- const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
- const {
- serumOrPerpMarket,
- price: stalePrice,
- selectedMarket,
- } = useSelectedMarket()
+ const { serumOrPerpMarket, selectedMarket } = useSelectedMarket()
const selectedMarketName = mangoStore((s) => s.selectedMarket.name)
- const [changePrice, setChangePrice] = useState(stalePrice)
- const { data: birdeyePrices, isLoading: loadingPrices } =
- useBirdeyeMarketPrices()
- const previousMarketName = usePrevious(selectedMarketName)
const [showMarketDetails, setShowMarketDetails] = useState(false)
const { group } = useMangoGroup()
const { width } = useViewport()
@@ -85,18 +74,6 @@ const AdvancedMarketHeader = ({
}
}, [group])
- const birdeyeData = useMemo(() => {
- if (
- !birdeyePrices?.length ||
- !selectedMarket ||
- selectedMarket instanceof PerpMarket
- )
- return
- return birdeyePrices.find(
- (m) => m.mint === selectedMarket.serumMarketExternal.toString()
- )
- }, [birdeyePrices, selectedMarket])
-
const oneDayPerpStats = useMemo(() => {
if (
!perpStats ||
@@ -108,36 +85,6 @@ const AdvancedMarketHeader = ({
return getOneDayPerpStats(perpStats, selectedMarketName)
}, [perpStats, selectedMarketName])
- const change = useMemo(() => {
- if (
- !changePrice ||
- !serumOrPerpMarket ||
- selectedMarketName !== previousMarketName
- )
- return 0
- if (serumOrPerpMarket instanceof PerpMarket) {
- return oneDayPerpStats.length
- ? ((changePrice - oneDayPerpStats[0].price) /
- oneDayPerpStats[0].price) *
- 100
- : 0
- } else {
- if (!birdeyeData) return 0
- return (
- ((changePrice - birdeyeData.data[0].value) /
- birdeyeData.data[0].value) *
- 100
- )
- }
- }, [
- birdeyeData,
- changePrice,
- serumOrPerpMarket,
- oneDayPerpStats,
- previousMarketName,
- selectedMarketName,
- ])
-
const perpVolume = useMemo(() => {
if (!oneDayPerpStats.length) return
return (
@@ -155,19 +102,13 @@ const AdvancedMarketHeader = ({
<>
-
+
{t('rolling-change')}
- {!loadingPrices && !loadingPerpStats ? (
-
- ) : (
-
-
-
- )}
+
{serumOrPerpMarket instanceof PerpMarket ? (
<>
diff --git a/components/trade/AdvancedTradeForm.tsx b/components/trade/AdvancedTradeForm.tsx
index a67a7dca..10bbbbc2 100644
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@@ -25,6 +25,8 @@ import NumberFormat, {
NumberFormatValues,
SourceInfo,
} from 'react-number-format'
+import * as sentry from '@sentry/nextjs'
+
import { notify } from 'utils/notifications'
import SpotSlider from './SpotSlider'
import { calculateLimitPriceForMarketOrder } from 'utils/tradeForm'
@@ -454,6 +456,7 @@ const AdvancedTradeForm = () => {
}
} catch (e) {
console.error('Place trade error:', e)
+ sentry.captureException(e)
if (!isMangoError(e)) return
notify({
title: 'There was an issue.',
diff --git a/components/trade/MarketSelectDropdown.tsx b/components/trade/MarketSelectDropdown.tsx
index 12882ab0..ecd38bcd 100644
--- a/components/trade/MarketSelectDropdown.tsx
+++ b/components/trade/MarketSelectDropdown.tsx
@@ -1,12 +1,7 @@
-// import ChartRangeButtons from '@components/shared/ChartRangeButtons'
-import Change from '@components/shared/Change'
import FavoriteMarketButton from '@components/shared/FavoriteMarketButton'
-import SheenLoader from '@components/shared/SheenLoader'
-import { getOneDayPerpStats } from '@components/stats/PerpMarketsOverviewTable'
import { Popover } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import mangoStore from '@store/mangoStore'
-import { useBirdeyeMarketPrices } from 'hooks/useBirdeyeMarketPrices'
import useMangoGroup from 'hooks/useMangoGroup'
import useSelectedMarket from 'hooks/useSelectedMarket'
import { useTranslation } from 'next-i18next'
@@ -23,6 +18,7 @@ import SoonBadge from '@components/shared/SoonBadge'
import TabButtons from '@components/shared/TabButtons'
import { PerpMarket } from '@blockworks-foundation/mango-v4'
import Loading from '@components/shared/Loading'
+import MarketChange from '@components/shared/MarketChange'
const MARKET_LINK_WRAPPER_CLASSES =
'flex items-center justify-between px-4 md:pl-6 md:pr-4'
@@ -41,11 +37,7 @@ const MarketSelectDropdown = () => {
)
const serumMarkets = mangoStore((s) => s.serumMarkets)
const allPerpMarkets = mangoStore((s) => s.perpMarkets)
- const perpStats = mangoStore((s) => s.perpStats.data)
- const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
const { group } = useMangoGroup()
- const { data: birdeyePrices, isLoading: loadingPrices } =
- useBirdeyeMarketPrices()
const [spotBaseFilter, setSpotBaseFilter] = useState('All')
const perpMarkets = useMemo(() => {
@@ -130,14 +122,7 @@ const MarketSelectDropdown = () => {
{spotOrPerp === 'perp' && perpMarkets?.length
? perpMarkets.map((m) => {
- const changeData = getOneDayPerpStats(perpStats, m.name)
const isComingSoon = m.oracleLastUpdatedSlot == 0
-
- const change = changeData.length
- ? ((m.uiPrice - changeData[0].price) /
- changeData[0].price) *
- 100
- : 0
return (
{
getDecimalCount(m.tickSize)
)}
- {!loadingPerpStats ? (
-
- ) : (
-
-
-
- )}
+
@@ -216,12 +191,6 @@ const MarketSelectDropdown = () => {
.map((x) => x)
.sort((a, b) => a.name.localeCompare(b.name))
.map((m) => {
- const birdeyeData = birdeyePrices?.length
- ? birdeyePrices.find(
- (market) =>
- market.mint === m.serumMarketExternal.toString()
- )
- : null
const baseBank = group?.getFirstBankByTokenIndex(
m.baseTokenIndex
)
@@ -238,12 +207,6 @@ const MarketSelectDropdown = () => {
getDecimalCount(market.tickSize)
).toNumber()
}
- const change =
- birdeyeData && price
- ? ((price - birdeyeData.data[0].value) /
- birdeyeData.data[0].value) *
- 100
- : 0
return (
{
) : null}
) : null}
- {!loadingPrices ? (
- change ? (
-
- ) : (
- –
- )
- ) : (
-
-
-
- )}
+
diff --git a/components/trade/OraclePrice.tsx b/components/trade/OraclePrice.tsx
index eacd8fcb..df0923f6 100644
--- a/components/trade/OraclePrice.tsx
+++ b/components/trade/OraclePrice.tsx
@@ -17,11 +17,7 @@ import relativeTime from 'dayjs/plugin/relativeTime'
import useOracleProvider from 'hooks/useOracleProvider'
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
-const OraclePrice = ({
- setChangePrice,
-}: {
- setChangePrice: (price: number) => void
-}) => {
+const OraclePrice = () => {
const {
serumOrPerpMarket,
price: stalePrice,
@@ -96,7 +92,6 @@ const OraclePrice = ({
if (selectedMarket instanceof PerpMarket) {
setPrice(uiPrice)
- setChangePrice(uiPrice)
} else {
let price
if (quoteBank && serumOrPerpMarket) {
@@ -108,7 +103,6 @@ const OraclePrice = ({
price = 0
}
setPrice(price)
- setChangePrice(price)
}
},
'processed'
@@ -118,14 +112,7 @@ const OraclePrice = ({
connection.removeAccountChangeListener(subId)
}
}
- }, [
- connection,
- selectedMarket,
- serumOrPerpMarket,
- setChangePrice,
- quoteBank,
- stalePrice,
- ])
+ }, [connection, selectedMarket, serumOrPerpMarket, quoteBank, stalePrice])
const oracleDecimals = getDecimalCount(serumOrPerpMarket?.tickSize || 0.01)
diff --git a/components/trade/Orderbook.tsx b/components/trade/Orderbook.tsx
index 5990440b..6d345d2b 100644
--- a/components/trade/Orderbook.tsx
+++ b/components/trade/Orderbook.tsx
@@ -10,7 +10,7 @@ import {
formatNumericValue,
getDecimalCount,
} from 'utils/numbers'
-import { ANIMATION_SETTINGS_KEY, USE_ORDERBOOK_FEED_KEY } from 'utils/constants'
+import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
import { useTranslation } from 'next-i18next'
import Decimal from 'decimal.js'
import { OrderbookL2 } from 'types'
@@ -220,11 +220,12 @@ const Orderbook = () => {
const [tickSize, setTickSize] = useState(0)
const [showBids, setShowBids] = useState(true)
const [showAsks, setShowAsks] = useState(true)
- const [useOrderbookFeed, setUseOrderbookFeed] = useState(
- localStorage.getItem(USE_ORDERBOOK_FEED_KEY) !== null
- ? localStorage.getItem(USE_ORDERBOOK_FEED_KEY) === 'true'
- : true
- )
+ const [useOrderbookFeed, setUseOrderbookFeed] = useState(false)
+ // const [useOrderbookFeed, setUseOrderbookFeed] = useState(
+ // localStorage.getItem(USE_ORDERBOOK_FEED_KEY) !== null
+ // ? localStorage.getItem(USE_ORDERBOOK_FEED_KEY) === 'true'
+ // : true
+ // )
const currentOrderbookData = useRef ()
const orderbookElRef = useRef(null)
diff --git a/components/trade/TradingViewChart.tsx b/components/trade/TradingViewChart.tsx
index 88145e0d..c2cfda3a 100644
--- a/components/trade/TradingViewChart.tsx
+++ b/components/trade/TradingViewChart.tsx
@@ -88,9 +88,10 @@ const TradingViewChart = () => {
const selectedMarketName = mangoStore((s) => s.selectedMarket.current?.name)
const isMobile = width ? width < breakpoints.sm : false
- const defaultProps = useMemo(
- () => ({
- symbol: selectedMarketName,
+ const defaultProps = useMemo(() => {
+ const initialMktName = mangoStore.getState().selectedMarket.current?.name
+ return {
+ symbol: initialMktName,
interval: '60' as ResolutionString,
theme: 'Dark',
container: 'tv_chart_container',
@@ -105,9 +106,8 @@ const TradingViewChart = () => {
'volume.volume.color.1': COLORS.UP[theme],
'volume.precision': 4,
},
- }),
- [theme, selectedMarketName]
- )
+ }
+ }, [theme])
const tvWidgetRef = useRef()
const orderLinesButtonRef = useRef()
diff --git a/hooks/notifications/useNotificationSettings.ts b/hooks/notifications/useNotificationSettings.ts
index ca29d3d0..60a7cfed 100644
--- a/hooks/notifications/useNotificationSettings.ts
+++ b/hooks/notifications/useNotificationSettings.ts
@@ -3,6 +3,7 @@ import NotificationCookieStore from '@store/notificationCookieStore'
import { useWallet } from '@solana/wallet-adapter-react'
import { fetchNotificationSettings } from 'apis/notifications/notificationSettings'
import { useIsAuthorized } from './useIsAuthorized'
+import { DAILY_MILLISECONDS } from 'utils/constants'
export function useNotificationSettings() {
const { publicKey } = useWallet()
@@ -18,7 +19,7 @@ export function useNotificationSettings() {
{
enabled: !!isAuth,
retry: 1,
- staleTime: 86400000,
+ staleTime: DAILY_MILLISECONDS,
}
)
}
diff --git a/hooks/use24HourChange.tsx b/hooks/use24HourChange.tsx
new file mode 100644
index 00000000..fb56c07d
--- /dev/null
+++ b/hooks/use24HourChange.tsx
@@ -0,0 +1,100 @@
+import { PerpMarket, Serum3Market } from '@blockworks-foundation/mango-v4'
+import { getOneDayPerpStats } from '@components/stats/PerpMarketsOverviewTable'
+import mangoStore from '@store/mangoStore'
+import { useQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import { useMemo } from 'react'
+import { DAILY_SECONDS, MANGO_DATA_API_URL } from 'utils/constants'
+
+dayjs.extend(utc)
+
+const fetchPrices = async (market: Serum3Market | PerpMarket | undefined) => {
+ if (!market || market instanceof PerpMarket) return
+ const { baseTokenIndex, quoteTokenIndex } = market
+ const nowTimestamp = Date.now() / 1000
+ const changePriceTimestamp = nowTimestamp - DAILY_SECONDS
+ const changePriceTime = dayjs
+ .unix(changePriceTimestamp)
+ .utc()
+ .format('YYYY-MM-DDTHH:mm:ss[Z]')
+ const promises = [
+ fetch(
+ `${MANGO_DATA_API_URL}/stats/token-price?token-index=${baseTokenIndex}&price-time=${changePriceTime}`
+ ),
+ fetch(
+ `${MANGO_DATA_API_URL}/stats/token-price?token-index=${quoteTokenIndex}&price-time=${changePriceTime}`
+ ),
+ ]
+ try {
+ const data = await Promise.all(promises)
+ const baseTokenPriceData = await data[0].json()
+ const quoteTokenPriceData = await data[1].json()
+ const baseTokenPrice = baseTokenPriceData ? baseTokenPriceData.price : 1
+ const quoteTokenPrice = quoteTokenPriceData ? quoteTokenPriceData.price : 1
+ return { baseTokenPrice, quoteTokenPrice }
+ } catch (e) {
+ console.log('failed to fetch 24hr price data', e)
+ return { baseTokenPrice: 1, quoteTokenPrice: 1 }
+ }
+}
+
+export default function use24HourChange(
+ market: Serum3Market | PerpMarket | undefined
+) {
+ const perpStats = mangoStore((s) => s.perpStats.data)
+ const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
+ const {
+ data: priceData,
+ isLoading: loadingPriceData,
+ isFetching: fetchingPriceData,
+ } = useQuery(['token-prices', market], () => fetchPrices(market), {
+ cacheTime: 1000 * 60 * 10,
+ staleTime: 1000 * 60,
+ retry: 3,
+ refetchOnWindowFocus: false,
+ enabled: market && market instanceof Serum3Market,
+ })
+
+ const [currentBasePrice, currentQuotePrice] = useMemo(() => {
+ const group = mangoStore.getState().group
+ if (!group || !market || market instanceof PerpMarket)
+ return [undefined, undefined]
+ const baseBank = group.getFirstBankByTokenIndex(market.baseTokenIndex)
+ const quoteBank = group.getFirstBankByTokenIndex(market.quoteTokenIndex)
+ return [baseBank?.uiPrice, quoteBank?.uiPrice]
+ }, [market])
+
+ const perpChange = useMemo(() => {
+ if (
+ !market ||
+ market instanceof Serum3Market ||
+ !perpStats ||
+ !perpStats.length
+ )
+ return
+ const oneDayStats = getOneDayPerpStats(perpStats, market.name)
+ const currentPrice = market.uiPrice
+ const change = oneDayStats.length
+ ? ((currentPrice - oneDayStats[0].price) / oneDayStats[0].price) * 100
+ : undefined
+ return change
+ }, [market, perpStats])
+
+ const spotChange = useMemo(() => {
+ if (!market) return
+ if (!currentBasePrice || !currentQuotePrice || !priceData) return
+ const currentPrice = currentBasePrice / currentQuotePrice
+ const oneDayPrice = priceData.baseTokenPrice / priceData.quoteTokenPrice
+ const change = ((currentPrice - oneDayPrice) / oneDayPrice) * 100
+ return change
+ }, [market, priceData])
+
+ const loading = useMemo(() => {
+ if (!market) return false
+ if (market instanceof PerpMarket) return loadingPerpStats
+ return loadingPriceData || fetchingPriceData
+ }, [market, loadingPerpStats, loadingPriceData, fetchingPriceData])
+
+ return { loading, perpChange, spotChange }
+}
diff --git a/hooks/useAccountPerformanceData.ts b/hooks/useAccountPerformanceData.ts
index f8b6f0e8..3e80b815 100644
--- a/hooks/useAccountPerformanceData.ts
+++ b/hooks/useAccountPerformanceData.ts
@@ -3,6 +3,7 @@ import { fetchAccountPerformance } from 'utils/account'
import useMangoAccount from './useMangoAccount'
import { useMemo } from 'react'
import { PerformanceDataItem } from 'types'
+import { DAILY_MILLISECONDS } from 'utils/constants'
export default function useAccountPerformanceData() {
const { mangoAccountAddress } = useMangoAccount()
@@ -28,7 +29,7 @@ export default function useAccountPerformanceData() {
const nowDate = new Date()
return performanceData.filter((d) => {
const dataTime = new Date(d.time).getTime()
- return dataTime >= nowDate.getTime() - 86400000
+ return dataTime >= nowDate.getTime() - DAILY_MILLISECONDS
})
}, [performanceData])
diff --git a/hooks/useBirdeyeMarketPrices.ts b/hooks/useBirdeyeMarketPrices.ts
index 04178d20..8b2b6a72 100644
--- a/hooks/useBirdeyeMarketPrices.ts
+++ b/hooks/useBirdeyeMarketPrices.ts
@@ -2,6 +2,7 @@ import { Serum3Market } from '@blockworks-foundation/mango-v4'
import mangoStore from '@store/mangoStore'
import { useQuery } from '@tanstack/react-query'
import { makeApiRequest } from 'apis/birdeye/helpers'
+import { DAILY_SECONDS } from 'utils/constants'
export interface BirdeyePriceResponse {
address: string
@@ -18,7 +19,7 @@ const fetchBirdeyePrices = async (
const promises = []
const queryEnd = Math.floor(Date.now() / 1000)
- const queryStart = queryEnd - 86400
+ const queryStart = queryEnd - DAILY_SECONDS
for (const mint of mints) {
const query = `defi/history_price?address=${mint}&address_type=pair&type=30m&time_from=${queryStart}&time_to=${queryEnd}`
promises.push(makeApiRequest(query))
diff --git a/next.config.js b/next.config.js
index 7e1bf3c5..16e3f90f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,5 +1,6 @@
const { i18n } = require('./next-i18next.config')
const webpack = require('webpack')
+const { withSentryConfig } = require('@sentry/nextjs')
/** @type {import('next').NextConfig} */
const nextConfig = {
@@ -37,4 +38,35 @@ const nextConfig = {
},
}
-module.exports = nextConfig
+module.exports = withSentryConfig(
+ nextConfig,
+ {
+ // For all available options, see:
+ // https://github.com/getsentry/sentry-webpack-plugin#options
+
+ // Suppresses source map uploading logs during build
+ silent: true,
+
+ org: 'mango',
+ project: 'mango-v4-ui',
+ },
+ {
+ // For all available options, see:
+ // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+ // Upload a larger set of source maps for prettier stack traces (increases build time)
+ widenClientFileUpload: true,
+
+ // Transpiles SDK to be compatible with IE11 (increases bundle size)
+ transpileClientSDK: true,
+
+ // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+ tunnelRoute: '/monitoring',
+
+ // Hides source maps from generated client bundles
+ hideSourceMaps: true,
+
+ // Automatically tree-shake Sentry logger statements to reduce bundle size
+ disableLogger: true,
+ }
+)
diff --git a/package.json b/package.json
index 6b74d823..b6073cc2 100644
--- a/package.json
+++ b/package.json
@@ -21,14 +21,14 @@
"node": ">=18.x"
},
"dependencies": {
- "@blockworks-foundation/mango-feeds": "0.1.6",
- "@blockworks-foundation/mango-v4": "^0.17.4",
+ "@blockworks-foundation/mango-feeds": "0.1.7",
+ "@blockworks-foundation/mango-v4": "^0.17.19",
"@headlessui/react": "1.6.6",
"@heroicons/react": "2.0.10",
"@metaplex-foundation/js": "0.18.3",
- "@next/font": "13.4.4",
"@project-serum/anchor": "0.25.0",
"@pythnetwork/client": "2.15.0",
+ "@sentry/nextjs": "7.58.0",
"@solana/spl-governance": "0.3.27",
"@solana/spl-token": "0.3.7",
"@solana/wallet-adapter-base": "0.9.20",
@@ -128,7 +128,8 @@
"eslint-config-next>eslint-plugin-jsx-a11y>aria-query>@babel/runtime-corejs3>core-js-pure": false,
"next-i18next>core-js": false,
"react-tsparticles": true,
- "tsparticles>tsparticles-engine": true
+ "tsparticles>tsparticles-engine": true,
+ "@sentry/nextjs>@sentry/webpack-plugin>@sentry/cli": true
}
}
}
diff --git a/pages/api/sentry-example-api.ts b/pages/api/sentry-example-api.ts
new file mode 100644
index 00000000..60dcf5a2
--- /dev/null
+++ b/pages/api/sentry-example-api.ts
@@ -0,0 +1,7 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+// A faulty API route to test Sentry's error monitoring
+export default function handler(_req: NextApiRequest, res: NextApiResponse) {
+ throw new Error('Sentry Example API Route Error')
+ res.status(200).json({ name: 'John Doe' })
+}
diff --git a/pages/sentry-example-page.tsx b/pages/sentry-example-page.tsx
new file mode 100644
index 00000000..fa4f3bf2
--- /dev/null
+++ b/pages/sentry-example-page.tsx
@@ -0,0 +1,87 @@
+import Head from 'next/head'
+import * as Sentry from '@sentry/nextjs'
+
+export default function Home() {
+ return (
+
+
+ Sentry Onboarding
+
+
+
+
+
+
+
+
+ Get started by sending us a sample error:
+
+
+
+ Next, look for the error on the{' '}
+
+ Issues Page
+
+ .
+
+
+ For more information, see{' '}
+
+ https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+
+
+ |