Attempt to adept to API changes

See the API changes described here:
oasisprotocol/nexus#477

.changelog/797.internal.md

@@ -0,0 +1 @@
+Follow Nexus API changes

src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx

@@ -1,22 +1,18 @@
 import { FC } from 'react'
 import { TFunction } from 'i18next'
 import { useTranslation } from 'react-i18next'
-import startOfMonth from 'date-fns/startOfMonth'
+import endOfMonth from 'date-fns/endOfMonth'
 import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
 import { SnapshotCardDurationLabel } from '../../components/Snapshots/SnapshotCardDurationLabel'
 import { BarChart } from '../../components/charts/BarChart'
-import {
-  useGetLayerStatsActiveAccounts,
-  GetLayerStatsActiveAccountsWindowStepSeconds,
-  type ActiveAccounts as Windows,
-} from '../../../oasis-nexus/api'
+import { useGetLayerStatsActiveAccounts, type ActiveAccounts as Windows } from '../../../oasis-nexus/api'
 import {
   ChartDuration,
   chartUseQueryStaleTimeMs,
   dailyLimitWithoutBuffer,
   durationToQueryParams,
   filterHourlyActiveAccounts,
-  sumBucketsByStartDuration,
+  sumBucketsByEndDuration,
 } from '../../utils/chart-utils'
 import { SearchScope } from '../../../types/searchScope'
 
@@ -25,7 +21,7 @@ export const getActiveAccountsWindows = (duration: ChartDuration, windows: Windo
     case ChartDuration.TODAY:
       return filterHourlyActiveAccounts(windows)
     case ChartDuration.ALL_TIME:
-      return sumBucketsByStartDuration(windows, 'active_accounts', 'window_end', startOfMonth)
+      return sumBucketsByEndDuration(windows, 'active_accounts', 'window_end', endOfMonth)
     default:
       return windows
   }
@@ -70,7 +66,7 @@ const getLabels = (t: TFunction): Record<ChartDuration, string> => ({
 export const ActiveAccounts: FC<ActiveAccountsProps> = ({ scope, chartDuration }) => {
   const { t } = useTranslation()
   const labels = getLabels(t)
-  const { limit, bucket_size_seconds } = {
+  const { limit, window_size_seconds } = {
     ...durationToQueryParams[chartDuration],
     // By default we fetch data with additional buckets buffer, but it does not apply to active accounts.
     // Active accounts daily buckets are overlapping, so we cannot sum buckets like in other daily charts.
@@ -84,7 +80,7 @@ export const ActiveAccounts: FC<ActiveAccountsProps> = ({ scope, chartDuration }
     scope.layer,
     {
       limit,
-      window_step_seconds: bucket_size_seconds as GetLayerStatsActiveAccountsWindowStepSeconds,
+      window_step_seconds: window_size_seconds,
     },
     {
       query: {

src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx

@@ -27,8 +27,8 @@ export const TotalTransactions: FC<{ scope: SearchScope }> = ({ scope }) => {
     },
   })
 
-  const buckets = dailyVolumeQuery.data?.data.buckets
-    ? cumulativeSum(dailyVolumeQuery.data?.data.buckets.slice().reverse(), 'tx_volume')
+  const buckets = dailyVolumeQuery.data?.data.windows
+    ? cumulativeSum(dailyVolumeQuery.data?.data.windows.slice().reverse(), 'tx_volume')
     : undefined
 
   return (

src/app/pages/ParatimeDashboardPage/TransactionsChartCard.tsx

@@ -5,7 +5,7 @@ import {
   ChartDuration,
   chartUseQueryStaleTimeMs,
   durationToQueryParams,
-  sumBucketsByStartDuration,
+  sumBucketsByEndDuration,
 } from '../../utils/chart-utils'
 import { LineChart } from '../../components/charts/LineChart'
 import { useScreenSize } from '../../hooks/useScreensize'
@@ -38,9 +38,9 @@ const TransactionsChartCardCmp: FC<TransactionsChartCardProps> = ({ scope, chart
   })
 
   const isDailyChart = isFetched && chartDuration === ChartDuration.TODAY
-  const buckets = data?.data?.buckets
+  const buckets = data?.data?.windows
   const lineChartData = isDailyChart
-    ? sumBucketsByStartDuration(buckets, 'tx_volume', 'bucket_start', startOfHour)
+    ? sumBucketsByEndDuration(buckets, 'tx_volume', 'window_end', startOfHour)
     : buckets
   const formatParams = isDailyChart
     ? {

src/app/pages/ParatimeDashboardPage/TransactionsStats.tsx

@@ -29,8 +29,8 @@ export const TransactionsStats: FC<{ scope: SearchScope }> = ({ scope }) => {
   })
   const allTime = dailyVolumeQuery.isFetched && chartDuration === ChartDuration.ALL_TIME
   const buckets = allTime
-    ? getMonthlyBucketsDailyAverage(dailyVolumeQuery.data?.data.buckets)
-    : dailyVolumeQuery.data?.data.buckets
+    ? getMonthlyBucketsDailyAverage(dailyVolumeQuery.data?.data.windows)
+    : dailyVolumeQuery.data?.data.windows
   const formatParams = allTime
     ? {
         timestamp: {

src/app/utils/chart-utils.ts

@@ -1,7 +1,7 @@
-import startOfHour from 'date-fns/startOfHour'
-import startOfDay from 'date-fns/startOfDay'
+import endOfHour from 'date-fns/endOfHour'
+import endOfDay from 'date-fns/endOfDay'
 import isSameMonth from 'date-fns/isSameMonth'
-import startOfMonth from 'date-fns/startOfMonth'
+import endOfMonth from 'date-fns/endOfMonth'
 import { GetLayerStatsTxVolumeParams, type TxVolume, type ActiveAccounts } from '../../oasis-nexus/api'
 
 export enum ChartDuration {
@@ -15,24 +15,24 @@ export const dailyLimitWithoutBuffer = (60 / 5) * 24 // full day for 5 minutes b
 
 export const durationToQueryParams = {
   [ChartDuration.TODAY]: {
-    bucket_size_seconds: 60 * 5,
+    window_size_seconds: 60 * 5,
     limit:
       dailyLimitWithoutBuffer +
       // daily data needs additional 2 buckets to make sure we have at least full 24 buckets
       (60 / 5) * 2,
   },
   [ChartDuration.WEEK]: {
-    bucket_size_seconds: 24 * 60 * 60,
+    window_size_seconds: 24 * 60 * 60,
     limit: 7,
     offset: 1, // offset to skip the first day
   },
   [ChartDuration.MONTH]: {
-    bucket_size_seconds: 24 * 60 * 60,
+    window_size_seconds: 24 * 60 * 60,
     limit: 30, // Defined as 30 days, should be more dynamic depending on the month
     offset: 1, // offset to skip the first day
   },
   [ChartDuration.ALL_TIME]: {
-    bucket_size_seconds: 24 * 60 * 60,
+    window_size_seconds: 24 * 60 * 60,
     limit: 365, // Defined as a full year
     offset: 1, // offset to skip the first day
   },
@@ -45,20 +45,25 @@ export const chartDurationToDaysMap = {
   [ChartDuration.ALL_TIME]: 365,
 }
 
-export const chartUseQueryStaleTimeMs = durationToQueryParams[ChartDuration.TODAY].bucket_size_seconds * 1000
+export const chartUseQueryStaleTimeMs = durationToQueryParams[ChartDuration.TODAY].window_size_seconds * 1000
 
 type Buckets = TxVolume[] | undefined
 type MonthlyTxVolume = TxVolume & { numberOfItemsInGroup: number }
 
 const groupBucketsByMonth = (buckets: Buckets) => {
+  /**
+   * TODO: look into this change.
+   * We are now grouping buckets / windows based on their end time, instead of the start.
+   * Does the end result still make sense, semantically speaking?
+   */
   return buckets?.reduce((acc: MonthlyTxVolume[], cur, index, arr) => {
-    if (index > 0 && isSameMonth(new Date(cur.bucket_start), new Date(arr[index - 1].bucket_start))) {
+    if (index > 0 && isSameMonth(new Date(cur.window_end), new Date(arr[index - 1].window_end))) {
       acc[acc.length - 1].tx_volume += cur.tx_volume
       acc[acc.length - 1].numberOfItemsInGroup += 1
       return acc
     }
     acc.push({
-      bucket_start: cur.bucket_start,
+      window_end: cur.window_end,
       tx_volume: cur.tx_volume,
       numberOfItemsInGroup: 1,
     })
@@ -100,15 +105,15 @@ type StringOnly<T> = {
   [key in keyof T as T[key] extends string | undefined ? key : never]: T[key]
 }
 
-export const sumBucketsByStartDuration = <
+export const sumBucketsByEndDuration = <
   T extends NumberOnly<any> & StringOnly<any>,
   N extends keyof NumberOnly<T>,
   S extends keyof StringOnly<T>,
 >(
   buckets: T[] | undefined,
   sumKey: N,
   dateKey: S,
-  startDurationFn: typeof startOfHour | typeof startOfDay | typeof startOfMonth,
+  startDurationFn: typeof endOfHour | typeof endOfDay | typeof endOfMonth,
 ) => {
   if (!buckets) {
     return []
@@ -129,9 +134,7 @@ export const sumBucketsByStartDuration = <
   // For daily charts we want to skip the first and last buckets.
   // They are not full and we want to avoid chart drop.
   const filteredDurationMap =
-    startDurationFn === startOfHour
-      ? Object.fromEntries(Object.entries(durationMap).slice(1, -1))
-      : durationMap
+    startDurationFn === endOfHour ? Object.fromEntries(Object.entries(durationMap).slice(1, -1)) : durationMap
 
   return Object.keys(filteredDurationMap).map(key => ({
     [dateKey]: key,