fix account performance data

2023-02-11 23:40:23 +11:00 · 2023-02-11 23:40:23 +11:00 · 508c4213a1
parent 0974463f00
commit 508c4213a1
7 changed files with 83 additions and 156 deletions
--- a/components/account/AccountChart.tsx
+++ b/components/account/AccountChart.tsx
@ -1,7 +1,6 @@
-import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
 import { useTranslation } from 'next-i18next'
-import { useEffect, useMemo, useState } from 'react'
-import mangoStore from '@store/mangoStore'
+import { useMemo, useState } from 'react'
+import { PerformanceDataItem } from '@store/mangoStore'
 import dynamic from 'next/dynamic'
 import { formatYAxis } from 'utils/formatting'
 const DetailedAreaChart = dynamic(
@ -11,73 +10,39 @@ const DetailedAreaChart = dynamic(

 const AccountChart = ({
  chartToShow,
+  data,
  hideChart,
-  mangoAccountAddress,
  yKey,
 }: {
  chartToShow: string
+  data: PerformanceDataItem[]
  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.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 []
+  const chartData: any = useMemo(() => {
+    if (!data.length) return []
    if (chartToShow === 'cumulative-interest-value') {
-      performanceData.map((d) => ({
+      data.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
-    if (mangoAccount) {
-      await actions.fetchAccountPerformance(
-        mangoAccount.publicKey.toString(),
-        parseInt(days)
-      )
-      setDaysToShow(days)
-    }
-  }
-
-  const currentValue = useMemo(() => {
-    const mangoAccount = mangoStore.getState().mangoAccount.current
-    const group = mangoStore.getState().group
-    if (group && mangoAccount && chartToShow === 'account-value') {
-      const currentAccountValue = toUiDecimalsForQuote(
-        mangoAccount.getEquity(group).toNumber()
-      )
-      const time = Date.now()
-      return [{ account_equity: currentAccountValue, time: time }]
-    }
-    return []
-  }, [chartToShow])
+    return data
+  }, [data])

  return (
    <DetailedAreaChart
-      data={data.concat(currentValue)}
+      data={chartData}
      daysToShow={daysToShow}
      heightClass="h-[calc(100vh-200px)]"
      loaderHeightClass="h-[calc(100vh-116px)]"
      hideChart={hideChart}
-      loading={loading}
      prefix="$"
-      setDaysToShow={handleDaysToShow}
+      setDaysToShow={setDaysToShow}
      tickFormat={(x) => `$${formatYAxis(x)}`}
      title={t(chartToShow)}
      xKey="time"
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@ -44,10 +44,10 @@ const AccountPage = () => {
  const { t } = useTranslation(['common', 'account'])
  // const { connected } = useWallet()
  const { group } = useMangoGroup()
-  const { mangoAccount, mangoAccountAddress, initialLoad } = useMangoAccount()
+  const { mangoAccount, mangoAccountAddress } = useMangoAccount()
  const actions = mangoStore.getState().actions
-  const performanceInitialLoad = mangoStore(
-    (s) => s.mangoAccount.performance.initialLoad
+  const performanceLoading = mangoStore(
+    (s) => s.mangoAccount.performance.loading
  )
  const performanceData = mangoStore((s) => s.mangoAccount.performance.data)
  const totalInterestData = mangoStore(
@ -56,9 +56,6 @@ const AccountPage = () => {
  const [chartToShow, setChartToShow] = useState<
    'account-value' | 'cumulative-interest-value' | 'pnl' | ''
  >('')
-  const [oneDayPerformanceData, setOneDayPerformanceData] = useState<
-    PerformanceDataItem[]
-  >([])
  const [showExpandChart, setShowExpandChart] = useState<boolean>(false)
  const [showPnlHistory, setShowPnlHistory] = useState<boolean>(false)
  const { theme } = useTheme()
@ -72,26 +69,21 @@ const AccountPage = () => {
  )

  useEffect(() => {
-    if (mangoAccountAddress || (!initialLoad && !mangoAccountAddress)) {
-      const set = mangoStore.getState().set
-      set((s) => {
-        s.mangoAccount.performance.initialLoad = false
-      })
-      setOneDayPerformanceData([])
-      actions.fetchAccountPerformance(mangoAccountAddress, 1)
+    if (mangoAccountAddress) {
+      console.log('fired')
+      actions.fetchAccountPerformance(mangoAccountAddress, 31)
      actions.fetchAccountInterestTotals(mangoAccountAddress)
    }
-  }, [actions, initialLoad, mangoAccountAddress])
+  }, [actions, mangoAccountAddress])

-  useEffect(() => {
-    if (
-      performanceData.length &&
-      performanceInitialLoad &&
-      !oneDayPerformanceData.length
-    ) {
-      setOneDayPerformanceData(performanceData)
-    }
-  }, [performanceInitialLoad, oneDayPerformanceData, performanceData])
+  const oneDayPerformanceData: PerformanceDataItem[] | [] = useMemo(() => {
+    if (!performanceData || !performanceData.length) return []
+    const nowDate = new Date()
+    return performanceData.filter((d) => {
+      const dataTime = new Date(d.time).getTime()
+      return dataTime >= nowDate.getTime() - 86400000
+    })
+  }, [performanceData])

  const onHoverMenu = (open: boolean, action: string) => {
    if (
@ -108,10 +100,6 @@ const AccountPage = () => {
  }

  const handleHideChart = () => {
-    const set = mangoStore.getState().set
-    set((s) => {
-      s.mangoAccount.performance.data = oneDayPerformanceData
-    })
    setChartToShow('')
  }

@ -172,15 +160,16 @@ const AccountPage = () => {

  const oneDayInterestChange = useMemo(() => {
    if (oneDayPerformanceData.length) {
-      const startDayInterest =
-        oneDayPerformanceData[0].borrow_interest_cumulative_usd +
-        oneDayPerformanceData[0].deposit_interest_cumulative_usd
+      const first = oneDayPerformanceData[0]
+      const latest = oneDayPerformanceData[oneDayPerformanceData.length - 1]

-      const latest = oneDayPerformanceData.length - 1
+      const startDayInterest =
+        first.borrow_interest_cumulative_usd +
+        first.deposit_interest_cumulative_usd

      const endDayInterest =
-        oneDayPerformanceData[latest].borrow_interest_cumulative_usd +
-        oneDayPerformanceData[latest].deposit_interest_cumulative_usd
+        latest.borrow_interest_cumulative_usd +
+        latest.deposit_interest_cumulative_usd

      return endDayInterest - startDayInterest
    }
@ -209,18 +198,18 @@ const AccountPage = () => {

  const latestAccountData = useMemo(() => {
    if (!accountValue || !performanceData.length) return []
-    const latestIndex = performanceData.length - 1
+    const latestDataItem = performanceData[performanceData.length - 1]
    return [
      {
        account_equity: accountValue,
        time: dayjs(Date.now()).toISOString(),
        borrow_interest_cumulative_usd:
-          performanceData[latestIndex].borrow_interest_cumulative_usd,
+          latestDataItem.borrow_interest_cumulative_usd,
        deposit_interest_cumulative_usd:
-          performanceData[latestIndex].deposit_interest_cumulative_usd,
-        pnl: performanceData[latestIndex].pnl,
-        spot_value: performanceData[latestIndex].spot_value,
-        transfer_balance: performanceData[latestIndex].transfer_balance,
+          latestDataItem.deposit_interest_cumulative_usd,
+        pnl: latestDataItem.pnl,
+        spot_value: latestDataItem.spot_value,
+        transfer_balance: latestDataItem.transfer_balance,
      },
    ]
  }, [accountValue, performanceData])
@ -267,10 +256,10 @@ const AccountPage = () => {
            </div>
            <div className="flex items-center space-x-1.5">
              <Change change={accountValueChange} prefix="$" />
-              <p className="text-th-fgd-4">24h Change</p>
+              <p className="text-xs text-th-fgd-4">{t('rolling-change')}</p>
            </div>
          </div>
-          {performanceInitialLoad ? (
+          {!performanceLoading ? (
            oneDayPerformanceData.length ? (
              <div
                className="relative mt-4 flex h-40 items-end md:mt-0 md:h-24 md:w-48"
@ -482,10 +471,10 @@ const AccountPage = () => {
                isUsd={true}
              />
            </p>
-            {/* <div className="flex space-x-1">
+            <div className="flex space-x-1.5">
              <Change change={oneDayPnlChange} prefix="$" size="small" />
-              <p className="text-xs text-th-fgd-4">{t('today')}</p>
-            </div> */}
+              <p className="text-xs text-th-fgd-4">{t('rolling-change')}</p>
+            </div>
          </div>
        </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">
@ -522,9 +511,9 @@ const AccountPage = () => {
                isUsd={true}
              />
            </p>
-            <div className="flex space-x-1">
+            <div className="flex space-x-1.5">
              <Change change={oneDayInterestChange} prefix="$" size="small" />
-              <p className="text-xs text-th-fgd-4">{t('today')}</p>
+              <p className="text-xs text-th-fgd-4">{t('rolling-change')}</p>
            </div>
          </div>
        </div>
@ -546,22 +535,22 @@ const AccountPage = () => {
      {chartToShow === 'account-value' ? (
        <AccountChart
          chartToShow="account-value"
+          data={performanceData.concat(latestAccountData)}
          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}
          hideChart={handleHideChart}
-          mangoAccountAddress={mangoAccountAddress}
          yKey="interest_value"
        />
      )}
--- a/components/borrow/BorrowPage.tsx
+++ b/components/borrow/BorrowPage.tsx
@ -7,7 +7,6 @@ import { useTranslation } from 'next-i18next'
 import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
 import FlipNumbers from 'react-flip-numbers'
 import Button from '@components/shared/Button'
-import mangoStore from '@store/mangoStore'
 import { formatCurrencyValue } from 'utils/numbers'
 import { useEffect, useMemo, useState } from 'react'
 import YourBorrowsTable from './YourBorrowsTable'
@ -47,17 +46,6 @@ const BorrowPage = () => {
    ANIMATION_SETTINGS_KEY,
    INITIAL_ANIMATION_SETTINGS
  )
-  const actions = mangoStore((s) => s.actions)
-
-  useEffect(() => {
-    if (mangoAccountAddress) {
-      const set = mangoStore.getState().set
-      set((s) => {
-        s.mangoAccount.performance.initialLoad = false
-      })
-      actions.fetchAccountPerformance(mangoAccountAddress, 1)
-    }
-  }, [actions, mangoAccountAddress])

  const filteredBanks = useMemo(() => {
    if (banks.length) {
--- a/components/shared/ChartRangeButtons.tsx
+++ b/components/shared/ChartRangeButtons.tsx
@ -16,38 +16,36 @@ const ChartRangeButtons: FunctionComponent<ChartRangeButtonsProps> = ({
  names,
 }) => {
  return (
-    <div>
-      <div className="relative flex">
-        {activeValue && values.includes(activeValue) ? (
-          <div
-            className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-bkg-3`}
-            style={{
-              transform: `translateX(${
-                values.findIndex((v) => v === activeValue) * 100
-              }%)`,
-              width: `${100 / values.length}%`,
-            }}
-          />
-        ) : null}
-        {values.map((v, i) => (
-          <button
-            className={`${className} default-transition relative h-6 w-1/2 cursor-pointer rounded-md px-3 text-center text-xs
+    <div className="relative flex">
+      {activeValue && values.includes(activeValue) ? (
+        <div
+          className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-bkg-3`}
+          style={{
+            transform: `translateX(${
+              values.findIndex((v) => v === activeValue) * 100
+            }%)`,
+            width: `${100 / values.length}%`,
+          }}
+        />
+      ) : null}
+      {values.map((v, i) => (
+        <button
+          className={`${className} default-transition relative h-6 cursor-pointer rounded-md px-3 text-center text-xs
              ${
                v === activeValue
                  ? `text-th-active`
                  : `text-th-fgd-3 md:hover:text-th-active`
              }
            `}
-            key={`${v}${i}`}
-            onClick={() => onChange(v)}
-            style={{
-              width: `${100 / values.length}%`,
-            }}
-          >
-            {names ? names[i] : v}
-          </button>
-        ))}
-      </div>
+          key={`${v}${i}`}
+          onClick={() => onChange(v)}
+          style={{
+            width: `${100 / values.length}%`,
+          }}
+        >
+          {names ? names[i] : v}
+        </button>
+      ))}
    </div>
  )
 }
--- a/components/shared/DetailedAreaChart.tsx
+++ b/components/shared/DetailedAreaChart.tsx
@ -101,17 +101,14 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({

  const filteredData = useMemo(() => {
    if (!data.length) return []
-    if (daysToShow !== '30') {
-      const seconds = Number(daysToShow) * 86400
-      const filtered = data.filter((d: any) => {
-        const dataTime = new Date(d[xKey]).getTime() / 1000
-        const now = new Date().getTime() / 1000
-        const limit = now - seconds
-        return dataTime >= limit
-      })
-      return filtered
-    }
-    return data
+    const start = Number(daysToShow) * 86400000
+    const filtered = data.filter((d: any) => {
+      const dataTime = new Date(d[xKey]).getTime()
+      const now = new Date().getTime()
+      const limit = now - start
+      return dataTime >= limit
+    })
+    return filtered
  }, [data, daysToShow])

  const calculateChartChange = () => {
--- a/components/wallet/ConnectedMenu.tsx
+++ b/components/wallet/ConnectedMenu.tsx
@ -49,8 +49,7 @@ const ConnectedMenu = () => {
      state.mangoAccount.interestTotals = { data: [], loading: false }
      state.mangoAccount.performance = {
        data: [],
-        loading: false,
-        initialLoad: false,
+        loading: true,
      }
    })
    disconnect()
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@ -268,7 +268,6 @@ export type MangoStore = {
    performance: {
      data: PerformanceDataItem[]
      loading: boolean
-      initialLoad: boolean
    }
    swapHistory: {
      data: SwapHistoryItem[]
@ -411,7 +410,7 @@ const mangoStore = create<MangoStore>()(
        perpPositions: [],
        spotBalances: {},
        interestTotals: { data: [], loading: false },
-        performance: { data: [], loading: false, initialLoad: false },
+        performance: { data: [], loading: true },
        swapHistory: { data: [], loading: true },
        tradeHistory: { data: [], loading: true },
      },
@ -521,9 +520,6 @@ const mangoStore = create<MangoStore>()(
          range: number
        ) => {
          const set = get().set
-          set((state) => {
-            state.mangoAccount.performance.loading = true
-          })
          try {
            const response = await fetch(
              `${MANGO_DATA_API_URL}/stats/performance_account?mango-account=${mangoAccountPk}&start-date=${dayjs()
@ -547,13 +543,8 @@ const mangoStore = create<MangoStore>()(
          } catch (e) {
            console.error('Failed to load account performance data', e)
          } finally {
-            const hasLoaded =
-              mangoStore.getState().mangoAccount.performance.initialLoad
            set((state) => {
              state.mangoAccount.performance.loading = false
-              if (!hasLoaded) {
-                state.mangoAccount.performance.initialLoad = true
-              }
            })
          }
        },