Merge branch 'main' into pan/fix-trade-history
This commit is contained in:
tylersssss
GitHub
commit
ac2a50c1fc
|
|
@ -46,7 +46,7 @@ const TokenList = () => {
|
|||
const { group } = useMangoGroup()
|
||||
const { mangoTokens } = useJupiterMints()
|
||||
const totalInterestData = mangoStore(
|
||||
(s) => s.mangoAccount.stats.interestTotals.data
|
||||
(s) => s.mangoAccount.interestTotals.data
|
||||
)
|
||||
const { width } = useViewport()
|
||||
const showTableView = width ? width > breakpoints.md : false
|
||||
|
|
@ -304,7 +304,7 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
|
|||
const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const totalInterestData = mangoStore(
|
||||
(s) => s.mangoAccount.stats.interestTotals.data
|
||||
(s) => s.mangoAccount.interestTotals.data
|
||||
)
|
||||
const symbol = bank.name
|
||||
const oraclePrice = bank.uiPrice
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { numberCompacter } from 'utils/numbers'
|
||||
|
|
@ -11,19 +11,38 @@ const DetailedAreaChart = dynamic(
|
|||
|
||||
const AccountChart = ({
|
||||
chartToShow,
|
||||
data,
|
||||
hideChart,
|
||||
mangoAccountAddress,
|
||||
yKey,
|
||||
}: {
|
||||
chartToShow: string
|
||||
data: Array<any>
|
||||
hideChart: () => void
|
||||
mangoAccountAddress: string
|
||||
yKey: string
|
||||
}) => {
|
||||
const { t } = useTranslation('common')
|
||||
const actions = mangoStore.getState().actions
|
||||
const [daysToShow, setDaysToShow] = useState<string>('1')
|
||||
const loading = mangoStore((s) => s.mangoAccount.stats.performance.loading)
|
||||
const loading = mangoStore((s) => s.mangoAccount.performance.loading)
|
||||
const performanceData = mangoStore((s) => s.mangoAccount.performance.data)
|
||||
|
||||
useEffect(() => {
|
||||
if (mangoAccountAddress) {
|
||||
actions.fetchAccountPerformance(mangoAccountAddress, 1)
|
||||
}
|
||||
}, [actions, mangoAccountAddress])
|
||||
|
||||
const data: any = useMemo(() => {
|
||||
if (!performanceData.length) return []
|
||||
if (chartToShow === 'cumulative-interest-value') {
|
||||
performanceData.map((d) => ({
|
||||
interest_value:
|
||||
d.borrow_interest_cumulative_usd + d.deposit_interest_cumulative_usd,
|
||||
time: d.time,
|
||||
}))
|
||||
}
|
||||
return performanceData
|
||||
}, [performanceData])
|
||||
|
||||
const handleDaysToShow = async (days: string) => {
|
||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import {
|
|||
toUiDecimalsForQuote,
|
||||
} from '@blockworks-foundation/mango-v4'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import AccountActions from './AccountActions'
|
||||
import mangoStore, { PerformanceDataItem } from '@store/mangoStore'
|
||||
|
|
@ -19,7 +18,8 @@ import { useTheme } from 'next-themes'
|
|||
import { IconButton } from '../shared/Button'
|
||||
import {
|
||||
ArrowsPointingOutIcon,
|
||||
ChevronRightIcon,
|
||||
ChartBarIcon,
|
||||
ClockIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { Transition } from '@headlessui/react'
|
||||
import AccountTabs from './AccountTabs'
|
||||
|
|
@ -40,33 +40,20 @@ import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettin
|
|||
import { useViewport } from 'hooks/useViewport'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
|
||||
export async function getStaticProps({ locale }: { locale: string }) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale, [
|
||||
'common',
|
||||
'close-account',
|
||||
'trade',
|
||||
])),
|
||||
},
|
||||
}
|
||||
}
|
||||
import PnlHistoryModal from '@components/modals/PnlHistoryModal'
|
||||
|
||||
const AccountPage = () => {
|
||||
const { t } = useTranslation('common')
|
||||
const { t } = useTranslation(['common', 'account'])
|
||||
// const { connected } = useWallet()
|
||||
const { group } = useMangoGroup()
|
||||
const { mangoAccount, mangoAccountAddress } = useMangoAccount()
|
||||
const actions = mangoStore.getState().actions
|
||||
const loadPerformanceData = mangoStore(
|
||||
(s) => s.mangoAccount.stats.performance.loading
|
||||
)
|
||||
const performanceData = mangoStore(
|
||||
(s) => s.mangoAccount.stats.performance.data
|
||||
const performanceInitialLoad = mangoStore(
|
||||
(s) => s.mangoAccount.performance.initialLoad
|
||||
)
|
||||
const performanceData = mangoStore((s) => s.mangoAccount.performance.data)
|
||||
const totalInterestData = mangoStore(
|
||||
(s) => s.mangoAccount.stats.interestTotals.data
|
||||
(s) => s.mangoAccount.interestTotals.data
|
||||
)
|
||||
const [chartToShow, setChartToShow] = useState<
|
||||
'account-value' | 'cumulative-interest-value' | 'pnl' | ''
|
||||
|
|
@ -75,6 +62,7 @@ const AccountPage = () => {
|
|||
PerformanceDataItem[]
|
||||
>([])
|
||||
const [showExpandChart, setShowExpandChart] = useState<boolean>(false)
|
||||
const [showPnlHistory, setShowPnlHistory] = useState<boolean>(false)
|
||||
const { theme } = useTheme()
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.md : false
|
||||
|
|
@ -93,10 +81,10 @@ const AccountPage = () => {
|
|||
}, [actions, mangoAccountAddress])
|
||||
|
||||
useEffect(() => {
|
||||
if (mangoAccount && performanceData.length && !chartToShow) {
|
||||
if (performanceInitialLoad && !oneDayPerformanceData.length) {
|
||||
setOneDayPerformanceData(performanceData)
|
||||
}
|
||||
}, [mangoAccount, performanceData, chartToShow])
|
||||
}, [performanceInitialLoad, oneDayPerformanceData])
|
||||
|
||||
const onHoverMenu = (open: boolean, action: string) => {
|
||||
if (
|
||||
|
|
@ -115,11 +103,19 @@ const AccountPage = () => {
|
|||
const handleHideChart = () => {
|
||||
const set = mangoStore.getState().set
|
||||
set((s) => {
|
||||
s.mangoAccount.stats.performance.data = oneDayPerformanceData
|
||||
s.mangoAccount.performance.data = oneDayPerformanceData
|
||||
})
|
||||
setChartToShow('')
|
||||
}
|
||||
|
||||
const handleCloseDailyPnlModal = () => {
|
||||
const set = mangoStore.getState().set
|
||||
set((s) => {
|
||||
s.mangoAccount.performance.data = oneDayPerformanceData
|
||||
})
|
||||
setShowPnlHistory(false)
|
||||
}
|
||||
|
||||
const accountValue = useMemo(() => {
|
||||
if (!group || !mangoAccount) return 0.0
|
||||
return toUiDecimalsForQuote(mangoAccount.getEquity(group).toNumber())
|
||||
|
|
@ -139,19 +135,26 @@ const AccountPage = () => {
|
|||
}, [mangoAccount, group, accountValue])
|
||||
|
||||
const { accountPnl, accountValueChange } = useMemo(() => {
|
||||
if (accountValue && performanceData.length) {
|
||||
if (
|
||||
accountValue &&
|
||||
oneDayPerformanceData.length &&
|
||||
performanceData.length
|
||||
) {
|
||||
return {
|
||||
accountPnl: performanceData[performanceData.length - 1].pnl,
|
||||
accountValueChange: accountValue - performanceData[0].account_equity,
|
||||
accountValueChange:
|
||||
accountValue - oneDayPerformanceData[0].account_equity,
|
||||
}
|
||||
}
|
||||
return { accountPnl: 0, accountValueChange: 0 }
|
||||
}, [accountValue, performanceData])
|
||||
}, [accountValue, oneDayPerformanceData, performanceData])
|
||||
|
||||
const oneDayPnlChange = useMemo(() => {
|
||||
if (accountPnl && oneDayPerformanceData.length) {
|
||||
const startDayPnl = oneDayPerformanceData[0].pnl
|
||||
return accountPnl - startDayPnl
|
||||
const endDayPnl =
|
||||
oneDayPerformanceData[oneDayPerformanceData.length - 1].pnl
|
||||
return endDayPnl - startDayPnl
|
||||
}
|
||||
return 0.0
|
||||
}, [accountPnl, oneDayPerformanceData])
|
||||
|
|
@ -266,8 +269,8 @@ const AccountPage = () => {
|
|||
<p className="text-th-fgd-4">{t('today')}</p>
|
||||
</div>
|
||||
</div>
|
||||
{!loadPerformanceData ? (
|
||||
mangoAccount && performanceData.length ? (
|
||||
{performanceInitialLoad ? (
|
||||
oneDayPerformanceData.length ? (
|
||||
<div
|
||||
className="relative mt-4 flex h-44 items-end md:mt-0 md:h-24 md:w-48"
|
||||
onMouseEnter={() =>
|
||||
|
|
@ -283,7 +286,7 @@ const AccountPage = () => {
|
|||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
}
|
||||
data={performanceData.concat(latestAccountData)}
|
||||
data={oneDayPerformanceData.concat(latestAccountData)}
|
||||
name="accountValue"
|
||||
xKey="time"
|
||||
yKey="account_equity"
|
||||
|
|
@ -309,11 +312,11 @@ const AccountPage = () => {
|
|||
</Transition>
|
||||
</div>
|
||||
) : null
|
||||
) : (
|
||||
) : mangoAccountAddress ? (
|
||||
<SheenLoader className="mt-4 flex flex-1 md:mt-0">
|
||||
<div className="h-40 w-full rounded-md bg-th-bkg-2 md:h-24 md:w-48" />
|
||||
</SheenLoader>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-6 mb-1 lg:mt-0 lg:mb-0">
|
||||
<AccountActions />
|
||||
|
|
@ -369,7 +372,7 @@ const AccountPage = () => {
|
|||
<div className="col-span-5 flex border-t border-th-bkg-3 py-3 pl-6 lg:col-span-1 lg:border-l lg:border-t-0">
|
||||
<div id="account-step-five">
|
||||
<Tooltip
|
||||
content="The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw."
|
||||
content={t('account:tooltip-free-collateral')}
|
||||
maxWidth="20rem"
|
||||
placement="bottom"
|
||||
delay={250}
|
||||
|
|
@ -391,12 +394,12 @@ const AccountPage = () => {
|
|||
</p>
|
||||
<span className="text-xs font-normal text-th-fgd-4">
|
||||
<Tooltip
|
||||
content="Total value of collateral for trading and borrowing (including unsettled PnL)."
|
||||
content={t('account:tooltip-total-collateral')}
|
||||
maxWidth="20rem"
|
||||
placement="bottom"
|
||||
delay={250}
|
||||
>
|
||||
<span className="tooltip-underline">Total</span>:
|
||||
<span className="tooltip-underline">{t('total')}</span>:
|
||||
<span className="ml-1 font-mono text-th-fgd-2">
|
||||
{group && mangoAccount
|
||||
? formatFixedDecimals(
|
||||
|
|
@ -417,7 +420,7 @@ const AccountPage = () => {
|
|||
<div className="col-span-5 flex border-t border-th-bkg-3 py-3 pl-6 lg:col-span-1 lg:border-l lg:border-t-0">
|
||||
<div id="account-step-six">
|
||||
<Tooltip
|
||||
content="Total assets value divided by account equity value."
|
||||
content={t('account:tooltip-leverage')}
|
||||
maxWidth="20rem"
|
||||
placement="bottom"
|
||||
delay={250}
|
||||
|
|
@ -431,24 +434,43 @@ const AccountPage = () => {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className={`col-span-5 flex items-center justify-between border-t border-th-bkg-3 py-3 pl-6 pr-4 lg:col-span-1 lg:border-l lg:border-t-0 ${
|
||||
performanceData.length > 4
|
||||
? 'default-transition cursor-pointer md:hover:bg-th-bkg-2'
|
||||
: 'cursor-default'
|
||||
}`}
|
||||
onClick={() => handleChartToShow('pnl')}
|
||||
>
|
||||
<div className="col-span-5 border-t border-th-bkg-3 py-3 pl-6 pr-4 lg:col-span-1 lg:border-l lg:border-t-0">
|
||||
<div id="account-step-seven" className="flex flex-col items-start">
|
||||
<Tooltip
|
||||
content="The amount your account has made or lost."
|
||||
placement="bottom"
|
||||
delay={250}
|
||||
>
|
||||
<p className="tooltip-underline inline text-sm text-th-fgd-3 xl:text-base">
|
||||
{t('pnl')}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<Tooltip
|
||||
content={t('account:tooltip-pnl')}
|
||||
placement="bottom"
|
||||
delay={250}
|
||||
>
|
||||
<p className="tooltip-underline inline text-sm text-th-fgd-3 xl:text-base">
|
||||
{t('pnl')}
|
||||
</p>
|
||||
</Tooltip>
|
||||
{mangoAccountAddress ? (
|
||||
<div className="flex items-center space-x-3">
|
||||
{performanceData.length > 4 ? (
|
||||
<Tooltip content={t('account:pnl-chart')} delay={250}>
|
||||
<IconButton
|
||||
className="text-th-fgd-3"
|
||||
hideBg
|
||||
onClick={() => handleChartToShow('pnl')}
|
||||
>
|
||||
<ChartBarIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
<Tooltip content={t('account:pnl-history')} delay={250}>
|
||||
<IconButton
|
||||
className="text-th-fgd-3"
|
||||
hideBg
|
||||
onClick={() => setShowPnlHistory(true)}
|
||||
>
|
||||
<ClockIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="mt-1 mb-0.5 text-left text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
|
||||
{formatFixedDecimals(accountPnl, true, true)}
|
||||
</p>
|
||||
|
|
@ -457,29 +479,34 @@ const AccountPage = () => {
|
|||
<p className="text-xs text-th-fgd-4">{t('today')}</p>
|
||||
</div>
|
||||
</div>
|
||||
{performanceData.length > 4 ? (
|
||||
<ChevronRightIcon className="h-6 w-6" />
|
||||
) : null}
|
||||
</button>
|
||||
<button
|
||||
className={`col-span-5 flex items-center justify-between border-t border-th-bkg-3 py-3 pl-6 pr-4 text-left lg:col-span-1 lg:border-l lg:border-t-0 ${
|
||||
interestTotalValue > 1 || interestTotalValue < -1
|
||||
? 'default-transition cursor-pointer md:hover:bg-th-bkg-2'
|
||||
: 'cursor-default'
|
||||
}`}
|
||||
onClick={() => handleChartToShow('cumulative-interest-value')}
|
||||
>
|
||||
</div>
|
||||
<div className="col-span-5 border-t border-th-bkg-3 py-3 pl-6 pr-4 text-left lg:col-span-1 lg:border-l lg:border-t-0">
|
||||
<div id="account-step-eight">
|
||||
<Tooltip
|
||||
content="The value of interest earned (deposits) minus interest paid (borrows)."
|
||||
maxWidth="20rem"
|
||||
placement="bottom-end"
|
||||
delay={250}
|
||||
>
|
||||
<p className="tooltip-underline text-sm text-th-fgd-3 xl:text-base">
|
||||
{t('total-interest-earned')}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<Tooltip
|
||||
content={t('account:tooltip-total-interest')}
|
||||
maxWidth="20rem"
|
||||
placement="bottom-end"
|
||||
delay={250}
|
||||
>
|
||||
<p className="tooltip-underline text-sm text-th-fgd-3 xl:text-base">
|
||||
{t('total-interest-earned')}
|
||||
</p>
|
||||
</Tooltip>
|
||||
{interestTotalValue > 1 || interestTotalValue < -1 ? (
|
||||
<Tooltip content="Cumulative Interest Chart" delay={250}>
|
||||
<IconButton
|
||||
className="text-th-fgd-3"
|
||||
hideBg
|
||||
onClick={() =>
|
||||
handleChartToShow('cumulative-interest-value')
|
||||
}
|
||||
>
|
||||
<ChartBarIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="mt-1 mb-0.5 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
|
||||
{formatFixedDecimals(interestTotalValue, true, true)}
|
||||
</p>
|
||||
|
|
@ -488,42 +515,41 @@ const AccountPage = () => {
|
|||
<p className="text-xs text-th-fgd-4">{t('today')}</p>
|
||||
</div>
|
||||
</div>
|
||||
{interestTotalValue > 1 || interestTotalValue < -1 ? (
|
||||
<ChevronRightIcon className="-mt-0.5 h-6 w-6" />
|
||||
) : null}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<AccountTabs />
|
||||
{/* {!tourSettings?.account_tour_seen && isOnBoarded && connected ? (
|
||||
<AccountOnboardingTour />
|
||||
) : null} */}
|
||||
{showPnlHistory ? (
|
||||
<PnlHistoryModal
|
||||
pnlChangeToday={oneDayPnlChange}
|
||||
isOpen={showPnlHistory}
|
||||
onClose={handleCloseDailyPnlModal}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<div className="p-6 pb-0">
|
||||
{chartToShow === 'account-value' ? (
|
||||
<AccountChart
|
||||
chartToShow="account-value"
|
||||
data={performanceData}
|
||||
hideChart={handleHideChart}
|
||||
mangoAccountAddress={mangoAccountAddress}
|
||||
yKey="account_equity"
|
||||
/>
|
||||
) : chartToShow === 'pnl' ? (
|
||||
<AccountChart
|
||||
chartToShow="pnl"
|
||||
data={performanceData}
|
||||
hideChart={handleHideChart}
|
||||
mangoAccountAddress={mangoAccountAddress}
|
||||
yKey="pnl"
|
||||
/>
|
||||
) : (
|
||||
<AccountChart
|
||||
chartToShow="cumulative-interest-value"
|
||||
data={performanceData.map((d) => ({
|
||||
interest_value:
|
||||
d.borrow_interest_cumulative_usd +
|
||||
d.deposit_interest_cumulative_usd,
|
||||
time: d.time,
|
||||
}))}
|
||||
hideChart={handleHideChart}
|
||||
mangoAccountAddress={mangoAccountAddress}
|
||||
yKey="interest_value"
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
|
|||
import { useViewport } from 'hooks/useViewport'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
|
||||
import TradeHistory from '@components/trade/TradeHistory'
|
||||
|
||||
const AccountTabs = () => {
|
||||
const [activeTab, setActiveTab] = useState('balances')
|
||||
|
|
@ -23,15 +24,16 @@ const AccountTabs = () => {
|
|||
|
||||
return [
|
||||
['balances', 0],
|
||||
['trade:unsettled', unsettledTradeCount],
|
||||
['activity:activity', 0],
|
||||
['swap:swap-history', 0],
|
||||
['trade:unsettled', unsettledTradeCount],
|
||||
['trade-history', 0],
|
||||
]
|
||||
}, [unsettledPerpPositions, unsettledSpotBalances])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="border-b border-th-bkg-3">
|
||||
<div className="hide-scroll overflow-x-auto border-b border-th-bkg-3">
|
||||
<TabButtons
|
||||
activeValue={activeTab}
|
||||
onChange={(v) => setActiveTab(v)}
|
||||
|
|
@ -51,10 +53,6 @@ const TabContent = ({ activeTab }: { activeTab: string }) => {
|
|||
switch (activeTab) {
|
||||
case 'balances':
|
||||
return <TokenList />
|
||||
case 'activity:activity':
|
||||
return <ActivityFeed />
|
||||
case 'swap:swap-history':
|
||||
return <SwapHistoryTable />
|
||||
case 'trade:unsettled':
|
||||
return (
|
||||
<UnsettledTrades
|
||||
|
|
@ -62,6 +60,12 @@ const TabContent = ({ activeTab }: { activeTab: string }) => {
|
|||
unsettledPerpPositions={unsettledPerpPositions}
|
||||
/>
|
||||
)
|
||||
case 'activity:activity':
|
||||
return <ActivityFeed />
|
||||
case 'swap:swap-history':
|
||||
return <SwapHistoryTable />
|
||||
case 'trade-history':
|
||||
return <TradeHistory />
|
||||
default:
|
||||
return <TokenList />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import { useViewport } from 'hooks/useViewport'
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/legacy/image'
|
||||
import { Fragment, useCallback, useState } from 'react'
|
||||
import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
|
||||
import { PAGINATION_PAGE_LENGTH, PREFERRED_EXPLORER_KEY } from 'utils/constants'
|
||||
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
|
||||
|
|
@ -55,8 +55,12 @@ const ActivityFeedTable = ({
|
|||
s.activityFeed.loading = true
|
||||
})
|
||||
if (!mangoAccountAddress) return
|
||||
setOffset(offset + 25)
|
||||
actions.fetchActivityFeed(mangoAccountAddress, offset + 25, params)
|
||||
setOffset(offset + PAGINATION_PAGE_LENGTH)
|
||||
actions.fetchActivityFeed(
|
||||
mangoAccountAddress,
|
||||
offset + PAGINATION_PAGE_LENGTH,
|
||||
params
|
||||
)
|
||||
}, [actions, offset, params, mangoAccountAddress])
|
||||
|
||||
const getCreditAndDebit = (activity: any) => {
|
||||
|
|
@ -316,7 +320,8 @@ const ActivityFeedTable = ({
|
|||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{activityFeed.length && activityFeed.length % 25 === 0 ? (
|
||||
{activityFeed.length &&
|
||||
activityFeed.length % PAGINATION_PAGE_LENGTH === 0 ? (
|
||||
<div className="flex justify-center py-6">
|
||||
<LinkButton onClick={handleShowMore}>Show More</LinkButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
import { ModalProps } from '../../types/modal'
|
||||
import Modal from '../shared/Modal'
|
||||
import mangoStore, { PerformanceDataItem } from '@store/mangoStore'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useEffect, useMemo } from 'react'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import dayjs from 'dayjs'
|
||||
import Change from '@components/shared/Change'
|
||||
import SheenLoader from '@components/shared/SheenLoader'
|
||||
import { NoSymbolIcon } from '@heroicons/react/20/solid'
|
||||
|
||||
interface PnlChange {
|
||||
time: string
|
||||
pnlChange: number
|
||||
}
|
||||
|
||||
interface PnlHistoryModalProps {
|
||||
pnlChangeToday: number
|
||||
}
|
||||
|
||||
type ModalCombinedProps = PnlHistoryModalProps & ModalProps
|
||||
|
||||
const PnlHistoryModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
pnlChangeToday,
|
||||
}: ModalCombinedProps) => {
|
||||
const { t } = useTranslation('account')
|
||||
const { mangoAccountAddress } = useMangoAccount()
|
||||
const actions = mangoStore.getState().actions
|
||||
const loading = mangoStore((s) => s.mangoAccount.performance.loading)
|
||||
const performanceData = mangoStore((s) => s.mangoAccount.performance.data)
|
||||
|
||||
useEffect(() => {
|
||||
if (mangoAccountAddress) {
|
||||
actions.fetchAccountPerformance(mangoAccountAddress, 30)
|
||||
}
|
||||
}, [actions, mangoAccountAddress])
|
||||
|
||||
const dailyValues: PnlChange[] = useMemo(() => {
|
||||
if (!performanceData.length) return []
|
||||
|
||||
const dailyPnl = performanceData.filter((d: PerformanceDataItem) => {
|
||||
const date = new Date(d.time)
|
||||
return date.getHours() === 0
|
||||
})
|
||||
|
||||
return dailyPnl.length
|
||||
? dailyPnl
|
||||
.map((d: PerformanceDataItem, index: number) => {
|
||||
if (index < dailyPnl.length - 1) {
|
||||
return {
|
||||
time: d.time,
|
||||
pnlChange: dailyPnl[index + 1].pnl - d.pnl,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
time: performanceData[performanceData.length - 1].time,
|
||||
pnlChange: pnlChangeToday,
|
||||
}
|
||||
}
|
||||
})
|
||||
.reverse()
|
||||
: []
|
||||
}, [performanceData])
|
||||
|
||||
const pnlThisWeek = useMemo(() => {
|
||||
if (dailyValues.length) {
|
||||
const saturdayIndex = dailyValues.findIndex((d) => {
|
||||
const day = new Date(d.time).getDay()
|
||||
return day === 6
|
||||
})
|
||||
if (saturdayIndex !== -1) {
|
||||
return dailyValues
|
||||
.slice(0, saturdayIndex)
|
||||
.reduce((a, c) => a + c.pnlChange, 0)
|
||||
} else {
|
||||
return dailyValues.reduce((a, c) => a + c.pnlChange, 0)
|
||||
}
|
||||
}
|
||||
return 0
|
||||
}, [dailyValues])
|
||||
|
||||
const getLastSunday = (d: Date) => {
|
||||
return d.setDate(d.getDate() - d.getDay())
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<div className="h-96">
|
||||
<div className="flex h-full flex-col">
|
||||
<h2 className="mb-4">{t('pnl-history')}</h2>
|
||||
{loading ? (
|
||||
<div className="space-y-1.5">
|
||||
{[...Array(4)].map((x, i) => (
|
||||
<SheenLoader className="flex flex-1" key={i}>
|
||||
<div className="h-12 w-full bg-th-bkg-2" />
|
||||
</SheenLoader>
|
||||
))}
|
||||
</div>
|
||||
) : dailyValues?.length ? (
|
||||
<>
|
||||
<div className="thin-scroll overflow-auto pr-1">
|
||||
<div className="border-b border-th-bkg-3">
|
||||
{dailyValues.map((v: any) => (
|
||||
<div
|
||||
className="flex items-center justify-between border-t border-th-bkg-3 p-3"
|
||||
key={v.time + v.pnlChange}
|
||||
>
|
||||
<p>{dayjs(v.time).format('YYYY-MM-DD')}</p>
|
||||
<Change change={v.pnlChange} prefix="$" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-between rounded-md bg-th-bkg-2 p-3">
|
||||
<p>
|
||||
{t('week-starting', {
|
||||
week: dayjs(getLastSunday(new Date())).format('MM-DD'),
|
||||
})}
|
||||
</p>
|
||||
<Change change={pnlThisWeek} prefix="$" />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex h-full flex-col items-center justify-center pb-12">
|
||||
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-3" />
|
||||
<p>{t('no-pnl-history')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default PnlHistoryModal
|
||||
|
|
@ -3,7 +3,7 @@ export const UpTriangle = ({ size }: { size?: 'small' }) => (
|
|||
className={`h-0 w-0 ${
|
||||
size === 'small'
|
||||
? 'border-l-[4px] border-r-[4px] border-b-[6.92px]'
|
||||
: 'border-l-[6px] border-r-[6px] border-b-[10.39px]'
|
||||
: 'border-l-[5px] border-r-[5px] border-b-[8.65px]'
|
||||
} border-b-th-up border-l-transparent border-r-transparent`}
|
||||
/>
|
||||
)
|
||||
|
|
@ -13,7 +13,7 @@ export const DownTriangle = ({ size }: { size?: 'small' }) => (
|
|||
className={`h-0 w-0 ${
|
||||
size === 'small'
|
||||
? 'border-l-[4px] border-r-[4px] border-t-[6.92px]'
|
||||
: 'border-l-[6px] border-r-[6px] border-t-[10.39px]'
|
||||
: 'border-l-[5px] border-r-[5px] border-t-[8.65px]'
|
||||
} border-l-transparent border-r-transparent border-t-th-down`}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@ export const Table = ({
|
|||
}: {
|
||||
children: ReactNode
|
||||
className?: string
|
||||
}) => <table className={`m-0 min-w-full p-0 ${className}`}>{children}</table>
|
||||
}) => (
|
||||
<div className="thin-scroll overflow-x-auto">
|
||||
<table className={`m-0 min-w-full p-0 ${className}`}>{children}</table>
|
||||
</div>
|
||||
)
|
||||
|
||||
export const TrHead = ({
|
||||
children,
|
||||
|
|
|
|||
|
|
@ -31,10 +31,8 @@ import { useWallet } from '@solana/wallet-adapter-react'
|
|||
|
||||
const SwapHistoryTable = () => {
|
||||
const { t } = useTranslation(['common', 'settings', 'swap'])
|
||||
const swapHistory = mangoStore((s) => s.mangoAccount.stats.swapHistory.data)
|
||||
const initialLoad = mangoStore(
|
||||
(s) => s.mangoAccount.stats.swapHistory.initialLoad
|
||||
)
|
||||
const swapHistory = mangoStore((s) => s.mangoAccount.swapHistory.data)
|
||||
const initialLoad = mangoStore((s) => s.mangoAccount.swapHistory.initialLoad)
|
||||
const { connected } = useWallet()
|
||||
const { mangoTokens } = useJupiterMints()
|
||||
const [showSwapDetails, setSwapDetails] = useState('')
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { I80F48, PerpMarket } from '@blockworks-foundation/mango-v4'
|
||||
import { LinkButton } from '@components/shared/Button'
|
||||
import SheenLoader from '@components/shared/SheenLoader'
|
||||
import SideBadge from '@components/shared/SideBadge'
|
||||
import {
|
||||
Table,
|
||||
|
|
@ -14,7 +16,9 @@ import mangoStore from '@store/mangoStore'
|
|||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import useSelectedMarket from 'hooks/useSelectedMarket'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { useMemo } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import { PAGINATION_PAGE_LENGTH } from 'utils/constants'
|
||||
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import TableMarketName from './TableMarketName'
|
||||
|
|
@ -86,11 +90,17 @@ const formatTradeHistory = (
|
|||
}
|
||||
|
||||
const TradeHistory = () => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
const group = mangoStore.getState().group
|
||||
const { selectedMarket } = useSelectedMarket()
|
||||
const { mangoAccount, mangoAccountAddress } = useMangoAccount()
|
||||
const actions = mangoStore((s) => s.actions)
|
||||
const fills = mangoStore((s) => s.selectedMarket.fills)
|
||||
const tradeHistory = mangoStore((s) => s.mangoAccount.tradeHistory)
|
||||
const tradeHistory = mangoStore((s) => s.mangoAccount.tradeHistory.data)
|
||||
const loadingTradeHistory = mangoStore(
|
||||
(s) => s.mangoAccount.tradeHistory.loading
|
||||
)
|
||||
const [offset, setOffset] = useState(0)
|
||||
const { width } = useViewport()
|
||||
const showTableView = width ? width > breakpoints.md : false
|
||||
|
||||
|
|
@ -151,27 +161,35 @@ const TradeHistory = () => {
|
|||
return [...newFills, ...tradeHistory]
|
||||
}, [eventQueueFillsForAccount, tradeHistory])
|
||||
|
||||
console.log('trade history', tradeHistory)
|
||||
const handleShowMore = useCallback(() => {
|
||||
const set = mangoStore.getState().set
|
||||
set((s) => {
|
||||
s.mangoAccount.tradeHistory.loading = true
|
||||
})
|
||||
setOffset(offset + PAGINATION_PAGE_LENGTH)
|
||||
actions.fetchTradeHistory(offset + PAGINATION_PAGE_LENGTH)
|
||||
}, [actions, offset])
|
||||
|
||||
if (!selectedMarket || !group) return null
|
||||
|
||||
return mangoAccount && combinedTradeHistory.length ? (
|
||||
showTableView ? (
|
||||
<div>
|
||||
return mangoAccount &&
|
||||
(combinedTradeHistory.length || loadingTradeHistory) ? (
|
||||
<>
|
||||
{showTableView ? (
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
<Th className="text-left">Market</Th>
|
||||
<Th className="text-right">Side</Th>
|
||||
<Th className="text-right">Size</Th>
|
||||
<Th className="text-right">Price</Th>
|
||||
<Th className="text-right">Value</Th>
|
||||
<Th className="text-right">Fee</Th>
|
||||
<Th className="text-right">Time</Th>
|
||||
<Th className="text-left">{t('market')}</Th>
|
||||
<Th className="text-right">{t('trade:side')}</Th>
|
||||
<Th className="text-right">{t('trade:size')}</Th>
|
||||
<Th className="text-right">{t('price')}</Th>
|
||||
<Th className="text-right">{t('value')}</Th>
|
||||
<Th className="text-right">{t('fee')}</Th>
|
||||
<Th className="text-right">{t('date')}</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{combinedTradeHistory.map((trade: any) => {
|
||||
{combinedTradeHistory.map((trade: any, index: number) => {
|
||||
let market
|
||||
if ('market' in trade) {
|
||||
market = group.getSerum3MarketByExternalMarket(
|
||||
|
|
@ -213,7 +231,7 @@ const TradeHistory = () => {
|
|||
|
||||
return (
|
||||
<TrBody
|
||||
key={`${trade.signature || trade.marketIndex}${size}`}
|
||||
key={`${trade.signature || trade.marketIndex}${index}`}
|
||||
className="my-1 p-2"
|
||||
>
|
||||
<Td className="">
|
||||
|
|
@ -227,7 +245,7 @@ const TradeHistory = () => {
|
|||
{formatDecimal(trade.price)}
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
${formatFixedDecimals(trade.price * size)}
|
||||
${formatFixedDecimals(trade.price * size, true)}
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
<span className="font-mono">{formatDecimal(fee)}</span>
|
||||
|
|
@ -251,36 +269,64 @@ const TradeHistory = () => {
|
|||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{eventQueueFillsForAccount.map((trade: any) => {
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between border-b border-th-bkg-3 p-4"
|
||||
key={`${trade.marketIndex}`}
|
||||
>
|
||||
<div>
|
||||
<TableMarketName market={selectedMarket} />
|
||||
<div className="mt-1 flex items-center space-x-1">
|
||||
<SideBadge side={trade.side} />
|
||||
<p className="text-th-fgd-4">
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{trade.size}
|
||||
</span>
|
||||
{' for '}
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{formatDecimal(trade.price)}
|
||||
</span>
|
||||
) : (
|
||||
<div>
|
||||
{combinedTradeHistory.map((trade: any, index: number) => {
|
||||
const size = trade.size || trade.quantity
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between border-b border-th-bkg-3 p-4"
|
||||
key={`${trade.marketIndex}${index}`}
|
||||
>
|
||||
<div>
|
||||
<TableMarketName market={selectedMarket} />
|
||||
<div className="mt-1 flex items-center space-x-1">
|
||||
<SideBadge side={trade.side} />
|
||||
<p className="text-th-fgd-4">
|
||||
<span className="font-mono text-th-fgd-2">{size}</span>
|
||||
{' for '}
|
||||
<span className="font-mono text-th-fgd-2">
|
||||
{formatDecimal(trade.price)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="mb-0.5 flex items-center space-x-1.5">
|
||||
{trade.block_datetime ? (
|
||||
<TableDateDisplay
|
||||
date={trade.block_datetime}
|
||||
showSeconds
|
||||
/>
|
||||
) : (
|
||||
'Recent'
|
||||
)}
|
||||
</span>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{formatFixedDecimals(trade.price * size, true, true)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-mono">${trade.value.toFixed(2)}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{loadingTradeHistory ? (
|
||||
<div className="mt-4 space-y-1.5">
|
||||
{[...Array(4)].map((x, i) => (
|
||||
<SheenLoader className="mx-4 flex flex-1 md:mx-6" key={i}>
|
||||
<div className="h-16 w-full bg-th-bkg-2" />
|
||||
</SheenLoader>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{combinedTradeHistory.length &&
|
||||
combinedTradeHistory.length % PAGINATION_PAGE_LENGTH === 0 ? (
|
||||
<div className="flex justify-center py-6">
|
||||
<LinkButton onClick={handleShowMore}>Show More</LinkButton>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center p-8">
|
||||
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
|
||||
|
|
|
|||
|
|
@ -29,24 +29,28 @@ export const ConnectWalletButton: React.FC = () => {
|
|||
>
|
||||
<div className="relative flex h-16 w-44 bg-th-bkg-2 py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
|
||||
<div className="default-transition relative z-10 flex h-full items-center justify-center space-x-3 px-4">
|
||||
<div
|
||||
className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
|
||||
wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={wallet?.adapter.icon || selectedWallet?.adapter.icon}
|
||||
className={
|
||||
wallet?.adapter.name === 'Solflare'
|
||||
? 'h-auto w-[20px]'
|
||||
: 'h-auto w-[28px]'
|
||||
}
|
||||
alt={`${wallet?.adapter.name} icon`}
|
||||
/>
|
||||
</div>
|
||||
{connecting ? (
|
||||
<Loading className="h-[28px] w-[28px]" />
|
||||
) : (
|
||||
<div
|
||||
className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
|
||||
wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={wallet?.adapter.icon || selectedWallet?.adapter.icon}
|
||||
className={
|
||||
wallet?.adapter.name === 'Solflare'
|
||||
? 'h-auto w-[20px]'
|
||||
: 'h-auto w-[28px]'
|
||||
}
|
||||
alt={`${wallet?.adapter.name} icon`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-left">
|
||||
<div className="mb-1.5 flex justify-center font-display text-base leading-none text-th-fgd-1">
|
||||
{connecting ? <Loading className="h-4 w-4" /> : t('connect')}
|
||||
<div className="mb-1.5 flex font-display text-base leading-none text-th-fgd-1">
|
||||
{t('connect')}
|
||||
</div>
|
||||
|
||||
<div className="text-xxs font-normal leading-3 text-th-fgd-3">
|
||||
|
|
|
|||
|
|
@ -46,8 +46,12 @@ const ConnectedMenu = () => {
|
|||
state.mangoAccount.current = undefined
|
||||
state.mangoAccounts = []
|
||||
state.mangoAccount.openOrders = {}
|
||||
state.mangoAccount.stats.interestTotals = { data: [], loading: false }
|
||||
state.mangoAccount.stats.performance = { data: [], loading: false }
|
||||
state.mangoAccount.interestTotals = { data: [], loading: false }
|
||||
state.mangoAccount.performance = {
|
||||
data: [],
|
||||
loading: false,
|
||||
initialLoad: false,
|
||||
}
|
||||
})
|
||||
disconnect()
|
||||
wallet?.adapter.disconnect()
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
|
|||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale, [
|
||||
'account',
|
||||
'activity',
|
||||
'common',
|
||||
'onboarding',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"no-pnl-history": "No PnL History",
|
||||
"pnl-chart": "PnL Chart",
|
||||
"pnl-history": "PnL History",
|
||||
"tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
|
||||
"tooltip-leverage": "Total assets value divided by account equity value",
|
||||
"tooltip-pnl": "The amount your account has profited or lost",
|
||||
"tooltip-total-collateral": "Total value of collateral for trading and borrowing (including unsettled PnL)",
|
||||
"tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
|
||||
"week-starting": "Week starting {{week}}"
|
||||
}
|
||||
|
|
@ -121,6 +121,7 @@
|
|||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
|
||||
"tooltip-collateral-value": "The USD amount you can trade or borrow against",
|
||||
"total": "Total",
|
||||
"total-borrows": "Total Borrows",
|
||||
"total-borrow-value": "Total Borrow Value",
|
||||
"total-collateral": "Total Collateral",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"no-pnl-history": "No PnL History",
|
||||
"pnl-chart": "PnL Chart",
|
||||
"pnl-history": "PnL History",
|
||||
"tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
|
||||
"tooltip-leverage": "Total assets value divided by account equity value",
|
||||
"tooltip-pnl": "The amount your account has profited or lost",
|
||||
"tooltip-total-collateral": "Total value of collateral for trading and borrowing (including unsettled PnL)",
|
||||
"tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
|
||||
"week-starting": "Week starting {{week}}"
|
||||
}
|
||||
|
|
@ -121,6 +121,7 @@
|
|||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
|
||||
"tooltip-collateral-value": "The USD amount you can trade or borrow against",
|
||||
"total": "Total",
|
||||
"total-borrows": "Total Borrows",
|
||||
"total-borrow-value": "Total Borrow Value",
|
||||
"total-collateral": "Total Collateral",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"no-pnl-history": "No PnL History",
|
||||
"pnl-chart": "PnL Chart",
|
||||
"pnl-history": "PnL History",
|
||||
"tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
|
||||
"tooltip-leverage": "Total assets value divided by account equity value",
|
||||
"tooltip-pnl": "The amount your account has profited or lost",
|
||||
"tooltip-total-collateral": "Total value of collateral for trading and borrowing (including unsettled PnL)",
|
||||
"tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
|
||||
"week-starting": "Week starting {{week}}"
|
||||
}
|
||||
|
|
@ -121,6 +121,7 @@
|
|||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
|
||||
"tooltip-collateral-value": "The USD amount you can trade or borrow against",
|
||||
"total": "Total",
|
||||
"total-borrows": "Total Borrows",
|
||||
"total-borrow-value": "Total Borrow Value",
|
||||
"total-collateral": "Total Collateral",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"no-pnl-history": "No PnL History",
|
||||
"pnl-chart": "PnL Chart",
|
||||
"pnl-history": "PnL History",
|
||||
"tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
|
||||
"tooltip-leverage": "Total assets value divided by account equity value",
|
||||
"tooltip-pnl": "The amount your account has profited or lost",
|
||||
"tooltip-total-collateral": "Total value of collateral for trading and borrowing (including unsettled PnL)",
|
||||
"tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
|
||||
"week-starting": "Week starting {{week}}"
|
||||
}
|
||||
|
|
@ -121,6 +121,7 @@
|
|||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
|
||||
"tooltip-collateral-value": "The USD amount you can trade or borrow against",
|
||||
"total": "Total",
|
||||
"total-borrows": "Total Borrows",
|
||||
"total-borrow-value": "Total Borrow Value",
|
||||
"total-collateral": "Total Collateral",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"no-pnl-history": "No PnL History",
|
||||
"pnl-chart": "PnL Chart",
|
||||
"pnl-history": "PnL History",
|
||||
"tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
|
||||
"tooltip-leverage": "Total assets value divided by account equity value",
|
||||
"tooltip-pnl": "The amount your account has profited or lost",
|
||||
"tooltip-total-collateral": "Total value of collateral for trading and borrowing (including unsettled PnL)",
|
||||
"tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
|
||||
"week-starting": "Week starting {{week}}"
|
||||
}
|
||||
|
|
@ -121,6 +121,7 @@
|
|||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
|
||||
"tooltip-collateral-value": "The USD amount you can trade or borrow against",
|
||||
"total": "Total",
|
||||
"total-borrows": "Total Borrows",
|
||||
"total-borrow-value": "Total Borrow Value",
|
||||
"total-collateral": "Total Collateral",
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ import {
|
|||
INPUT_TOKEN_DEFAULT,
|
||||
LAST_ACCOUNT_KEY,
|
||||
OUTPUT_TOKEN_DEFAULT,
|
||||
PAGINATION_PAGE_LENGTH,
|
||||
RPC_PROVIDER_KEY,
|
||||
} from '../utils/constants'
|
||||
import { OrderbookL2, SpotBalances, SpotTradeHistory } from 'types'
|
||||
|
|
@ -240,15 +241,17 @@ export type MangoStore = {
|
|||
openOrders: Record<string, Order[] | PerpOrder[]>
|
||||
perpPositions: PerpPosition[]
|
||||
spotBalances: SpotBalances
|
||||
stats: {
|
||||
interestTotals: { data: TotalInterestDataItem[]; loading: boolean }
|
||||
performance: { data: PerformanceDataItem[]; loading: boolean }
|
||||
swapHistory: {
|
||||
data: SwapHistoryItem[]
|
||||
initialLoad: boolean
|
||||
}
|
||||
interestTotals: { data: TotalInterestDataItem[]; loading: boolean }
|
||||
performance: {
|
||||
data: PerformanceDataItem[]
|
||||
loading: boolean
|
||||
initialLoad: boolean
|
||||
}
|
||||
tradeHistory: SpotTradeHistory[]
|
||||
swapHistory: {
|
||||
data: SwapHistoryItem[]
|
||||
initialLoad: boolean
|
||||
}
|
||||
tradeHistory: { data: SpotTradeHistory[]; loading: boolean }
|
||||
}
|
||||
mangoAccounts: MangoAccount[]
|
||||
markets: Serum3Market[] | undefined
|
||||
|
|
@ -332,7 +335,7 @@ export type MangoStore = {
|
|||
) => Promise<void>
|
||||
fetchTokenStats: () => void
|
||||
fetchTourSettings: (walletPk: string) => void
|
||||
fetchTradeHistory: () => Promise<void>
|
||||
fetchTradeHistory: (offset?: number) => Promise<void>
|
||||
fetchWalletTokens: (walletPk: PublicKey) => Promise<void>
|
||||
connectMangoClientWithWallet: (wallet: WalletAdapter) => Promise<void>
|
||||
loadMarketFills: () => Promise<void>
|
||||
|
|
@ -385,7 +388,7 @@ const mangoStore = create<MangoStore>()(
|
|||
performance: { data: [], loading: false },
|
||||
swapHistory: { data: [], initialLoad: false },
|
||||
},
|
||||
tradeHistory: [],
|
||||
tradeHistory: { data: [], loading: true },
|
||||
},
|
||||
mangoAccounts: [],
|
||||
markets: undefined,
|
||||
|
|
@ -457,7 +460,7 @@ const mangoStore = create<MangoStore>()(
|
|||
fetchAccountInterestTotals: async (mangoAccountPk: string) => {
|
||||
const set = get().set
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.interestTotals.loading = true
|
||||
state.mangoAccount.interestTotals.loading = true
|
||||
})
|
||||
try {
|
||||
const response = await fetch(
|
||||
|
|
@ -475,12 +478,12 @@ const mangoStore = create<MangoStore>()(
|
|||
.filter((x: string) => x)
|
||||
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.interestTotals.data = stats
|
||||
state.mangoAccount.stats.interestTotals.loading = false
|
||||
state.mangoAccount.interestTotals.data = stats
|
||||
state.mangoAccount.interestTotals.loading = false
|
||||
})
|
||||
} catch {
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.interestTotals.loading = false
|
||||
state.mangoAccount.interestTotals.loading = false
|
||||
})
|
||||
console.error({
|
||||
title: 'Failed to load account interest totals',
|
||||
|
|
@ -494,7 +497,7 @@ const mangoStore = create<MangoStore>()(
|
|||
) => {
|
||||
const set = get().set
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.performance.loading = true
|
||||
state.mangoAccount.performance.loading = true
|
||||
})
|
||||
try {
|
||||
const response = await fetch(
|
||||
|
|
@ -514,18 +517,19 @@ const mangoStore = create<MangoStore>()(
|
|||
.filter((x: string) => x)
|
||||
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.performance.data = stats.reverse()
|
||||
state.mangoAccount.stats.performance.loading = false
|
||||
state.mangoAccount.performance.data = stats.reverse()
|
||||
})
|
||||
} catch (e) {
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.performance.loading = false
|
||||
})
|
||||
console.error('Failed to load account performance data', e)
|
||||
// notify({
|
||||
// title: 'Failed to load account performance data',
|
||||
// type: 'error',
|
||||
// })
|
||||
} finally {
|
||||
const hasLoaded =
|
||||
mangoStore.getState().mangoAccount.performance.initialLoad
|
||||
set((state) => {
|
||||
state.mangoAccount.performance.loading = false
|
||||
if (!hasLoaded) {
|
||||
state.mangoAccount.performance.initialLoad = true
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fetchActivityFeed: async (
|
||||
|
|
@ -541,7 +545,7 @@ const mangoStore = create<MangoStore>()(
|
|||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v4/stats/activity-feed?mango-account=${mangoAccountPk}&offset=${offset}&limit=25${
|
||||
`https://mango-transaction-log.herokuapp.com/v4/stats/activity-feed?mango-account=${mangoAccountPk}&offset=${offset}&limit=${PAGINATION_PAGE_LENGTH}${
|
||||
params ? params : ''
|
||||
}`
|
||||
)
|
||||
|
|
@ -853,12 +857,12 @@ const mangoStore = create<MangoStore>()(
|
|||
: []
|
||||
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.swapHistory.data = sortedHistory
|
||||
state.mangoAccount.stats.swapHistory.initialLoad = true
|
||||
state.mangoAccount.swapHistory.data = sortedHistory
|
||||
state.mangoAccount.swapHistory.initialLoad = true
|
||||
})
|
||||
} catch {
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.swapHistory.initialLoad = true
|
||||
state.mangoAccount.swapHistory.initialLoad = true
|
||||
})
|
||||
notify({
|
||||
title: 'Failed to load account swap history data',
|
||||
|
|
@ -1015,36 +1019,33 @@ const mangoStore = create<MangoStore>()(
|
|||
console.log('Error fetching fills:', err)
|
||||
}
|
||||
},
|
||||
async fetchTradeHistory() {
|
||||
async fetchTradeHistory(offset = 0) {
|
||||
const set = get().set
|
||||
const mangoAccount = get().mangoAccount.current
|
||||
const mangoAccountPk =
|
||||
get().mangoAccount?.current?.publicKey.toString()
|
||||
const loadedHistory =
|
||||
mangoStore.getState().mangoAccount.tradeHistory.data
|
||||
try {
|
||||
const [spotRes, perpRes] = await Promise.all([
|
||||
fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v4/stats/openbook-trades?address=${mangoAccount?.publicKey.toString()}&address-type=mango-account`
|
||||
),
|
||||
fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v4/stats/perp-trade-history?mango-account=${mangoAccount?.publicKey.toString()}&limit=1000`
|
||||
),
|
||||
])
|
||||
const spotHistory = await spotRes.json()
|
||||
const perpHistory = await perpRes.json()
|
||||
console.log('th', spotHistory, perpHistory)
|
||||
let tradeHistory: any[] = []
|
||||
if (spotHistory?.length) {
|
||||
tradeHistory = tradeHistory.concat(spotHistory)
|
||||
}
|
||||
if (perpHistory?.length) {
|
||||
tradeHistory = tradeHistory.concat(perpHistory)
|
||||
}
|
||||
const response = await fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v4/stats/trade-history?mango-account=${mangoAccountPk}&limit=${PAGINATION_PAGE_LENGTH}&offset=${offset}`
|
||||
)
|
||||
const parsedHistory = await response.json()
|
||||
const newHistory = parsedHistory.map((h: any) => h.activity_details)
|
||||
|
||||
const history =
|
||||
offset !== 0 ? loadedHistory.concat(newHistory) : newHistory
|
||||
|
||||
set((s) => {
|
||||
s.mangoAccount.tradeHistory = tradeHistory.sort(
|
||||
s.mangoAccount.tradeHistory.data = history?.sort(
|
||||
(x: any) => x.block_datetime
|
||||
)
|
||||
})
|
||||
} catch (e) {
|
||||
console.error('Unable to fetch trade history', e)
|
||||
} finally {
|
||||
set((s) => {
|
||||
s.mangoAccount.tradeHistory.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
updateConnection(endpointUrl) {
|
||||
|
|
|
|||
|
|
@ -67,3 +67,5 @@ export const MIN_SOL_BALANCE = 0.001
|
|||
export const ACCOUNT_ACTION_MODAL_HEIGHT = '506px'
|
||||
|
||||
export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '444px'
|
||||
|
||||
export const PAGINATION_PAGE_LENGTH = 25
|
||||
|
|
|
|||
Loading…
Reference in New Issue