Feat/stats frontend

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.defaultFormatter": "biomejs.biome",
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "quickfix.biome": "explicit"
   },

packages/app-explorer/package.json

@@ -42,6 +42,7 @@
     "react-json-view-lite": "1.4.0",
     "react-use": "17.5.0",
     "react-window": "1.8.10",
+    "recharts": "2.12.7",
     "tai64": "1.0.0",
     "tailwind-variants": "0.1.20",
     "wagmi": "2.12.7",

packages/app-explorer/src/app/globals.css

@@ -1,8 +1,8 @@
 :root {
   --hero-bg: #000;
+  --font-geist-mono: 'GeistMono', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Courier, monospace;
 }
 
-h1,
 h2,
 h3,
 h4,
@@ -11,6 +11,11 @@ h6 {
   font-weight: 600;
   letter-spacing: -0.025em;
 }
+
+h1,
+h2{
+  font-family: var(--font-geist-mono);
+}
 kbd {
   font-size: 0.875rem;
   font-family: var(--default-font-family);

packages/app-explorer/src/app/statistics/layout.tsx

@@ -0,0 +1,17 @@
+import { OverlayDialog, Providers } from 'app-portal';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Statistics',
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <Providers>
+      <OverlayDialog />
+      {children}
+    </Providers>
+  );
+}
+
+export const dynamic = 'force-static';

packages/app-explorer/src/app/statistics/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+import { Box, Flex } from '@fuels/ui';
+import { tv } from 'tailwind-variants';
+import { StatisticsScreen } from '~/systems/Statistics/screens/StatisticsScreen';
+
+const Statistics = () => {
+  const classes = styles();
+  return (
+    <Flex justify="center">
+      <Box className={classes.content()}>
+        <StatisticsScreen />
+      </Box>
+    </Flex>
+  );
+};
+const styles = tv({
+  slots: {
+    content: 'w-full max-w-[100%]',
+  },
+});
+export default Statistics;
+
+export const dynamic = 'force-static';

packages/app-explorer/src/systems/Statistics/actions/getAccounts.ts

@@ -0,0 +1,124 @@
+'use server';
+
+import { z } from 'zod';
+import { act } from '~/systems/Core/utils/act-server';
+import { sdk } from '~/systems/Core/utils/sdk';
+import {
+  createIntervals,
+  getUnitAndInterval,
+  processAccounts, // You would need to implement this to handle account-specific data
+} from '../utils/utils';
+
+const schema = z.object({
+  timeFilter: z.string().optional().nullable(),
+});
+
+interface AccountParams {
+  timeFilter?: string;
+}
+
+interface AccountNode {
+  __typename: 'Account';
+  timestamp: string;
+}
+
+// Common function to process account statistics
+async function fetchAccountStatistics(
+  params: AccountParams,
+  fieldName:
+    | 'accountCreationStatistics'
+    | 'cumulativeAccountCreationStatistics',
+  unit: 'minute' | 'hour' | 'day' | 'month',
+  intervalSize: number,
+  isCumulative = false,
+) {
+  const data = await (isCumulative
+    ? sdk.cumulativeAccountCreationStatistics(params)
+    : sdk.accountCreationStatistics(params));
+
+  const { nodes, offset } = extractAccountData(data, fieldName);
+
+  if (!nodes.length) {
+    return isCumulative ? { accounts: [], offset: 0 } : { accounts: [] };
+  }
+
+  const firstTimestamp = Number(nodes[0].timestamp);
+  const lastTimestamp = Number(nodes[nodes.length - 1].timestamp);
+
+  const intervalMap = createIntervals(
+    firstTimestamp,
+    lastTimestamp,
+    unit,
+    intervalSize,
+  );
+  const accounts = processAccounts(nodes, intervalMap); // Use this function for account-specific logic
+  console.log('Account Stats --->', offset, accounts);
+  if (isCumulative) {
+    return { accounts, offset };
+  }
+
+  return accounts;
+}
+
+// Helper to extract nodes and timestamps from the response
+function extractAccountData(
+  data: any,
+  fieldName: string,
+): { nodes: AccountNode[]; offset?: number } {
+  const nodes = data.data[fieldName]?.nodes || [];
+  const offset = data.data[fieldName]?.accountOffset;
+  return { nodes, offset };
+}
+
+async function getCumulativeAccountCreationStats(
+  params: AccountParams,
+  unit: 'minute' | 'hour' | 'day' | 'month',
+  intervalSize: number,
+) {
+  return fetchAccountStatistics(
+    params,
+    'cumulativeAccountCreationStatistics',
+    unit,
+    intervalSize,
+    true,
+  );
+}
+
+export async function getAccountCreationStats(
+  params: AccountParams,
+  unit: 'minute' | 'hour' | 'day' | 'month',
+  intervalSize: number,
+) {
+  return fetchAccountStatistics(
+    params,
+    'accountCreationStatistics',
+    unit,
+    intervalSize,
+  );
+}
+
+export const getAccountStats = act(schema, async ({ timeFilter }) => {
+  const params = { timeFilter: timeFilter } as { timeFilter?: string };
+  const { unit, intervalSize } = getUnitAndInterval(params.timeFilter || '');
+  console.log('Hello its is called');
+
+  return getAccountCreationStats(params, unit, intervalSize);
+});
+
+export const getDailyAccountCreationStats = act(
+  schema,
+  async ({ timeFilter }) => {
+    const params = { timeFilter: timeFilter } as { timeFilter?: string };
+    console.log('The timefilter for the new accounts', timeFilter);
+
+    // Use 'day' as the unit and 1 as the interval size
+    return getAccountCreationStats(params, 'day', 1);
+  },
+);
+
+export const getCumulativeAccountStats = act(schema, async ({ timeFilter }) => {
+  const params = { timeFilter: timeFilter } as { timeFilter?: string };
+  const { unit, intervalSize } = getUnitAndInterval(params.timeFilter || '');
+
+  return getCumulativeAccountCreationStats(params, unit, intervalSize);
+});

packages/app-explorer/src/systems/Statistics/actions/getBlocks.ts

@@ -0,0 +1,62 @@
+'use server';
+
+import { z } from 'zod';
+import { act } from '~/systems/Core/utils/act-server';
+import { sdk } from '~/systems/Core/utils/sdk';
+import { DateHelper } from '../utils/date';
+import { createIntervals, getUnitAndInterval } from '../utils/utils';
+
+const schema = z.object({
+  timeFilter: z.string().optional().nullable(),
+});
+
+export const getBlockStats = act(schema, async ({ timeFilter }) => {
+  const params = { timeFilter: timeFilter } as {
+    timeFilter?: string;
+  };
+  const data = await sdk.blockRewardStatistics(params);
+
+  if (!data.data.blockRewardStatistics.nodes) {
+    return {};
+  }
+  const { unit, intervalSize } = getUnitAndInterval(params.timeFilter || '');
+  const nodes = data.data.blockRewardStatistics.nodes;
+  const firstTimestamp = Number(DateHelper.tai64toDate(nodes[0].timestamp));
+  const lastTimestamp = Number(
+    DateHelper.tai64toDate(nodes[nodes.length - 1].timestamp),
+  );
+
+  const intervals = createIntervals(
+    firstTimestamp,
+    lastTimestamp,
+    unit,
+    intervalSize,
+  );
+
+  const intervalMap = intervals.map((interval) => ({
+    start: interval.start.toISOString(),
+    end: interval.end.toISOString(),
+    count: 0,
+    totalRewards: 0,
+  }));
+
+  // Process blocks and put them into the correct interval
+  nodes.forEach((block) => {
+    const blockTimestamp = Number(DateHelper.tai64toDate(block.timestamp));
+    const blockReward = Number(block.reward);
+
+    // Find the correct interval for the current block
+    for (const interval of intervalMap) {
+      const intervalStart = new Date(interval.start).getTime();
+      const intervalEnd = new Date(interval.end).getTime();
+
+      if (blockTimestamp >= intervalStart && blockTimestamp < intervalEnd) {
+        // Increment count and add the reward to totalRewards
+        interval.count += 1;
+        interval.totalRewards += blockReward;
+        break; // Block has been assigned to the correct interval, no need to check further
+      }
+    }
+  });
+  return intervalMap;
+});

packages/app-explorer/src/systems/Statistics/actions/getTransactions.ts

@@ -0,0 +1,131 @@
+'use server';
+
+import { z } from 'zod';
+import { act } from '~/systems/Core/utils/act-server';
+import { sdk } from '~/systems/Core/utils/sdk';
+import { DateHelper } from '../utils/date';
+import {
+  createIntervals,
+  getUnitAndInterval,
+  processTransactions,
+} from '../utils/utils';
+
+const schema = z.object({
+  timeFilter: z.string().optional().nullable(),
+});
+
+interface TransactionParams {
+  timeFilter?: string;
+}
+
+interface TransactionNode {
+  __typename: 'TransactionFee';
+  fee: string;
+  timestamp: string;
+}
+
+// Common function to process transaction statistics
+async function fetchTransactionStatistics(
+  params: TransactionParams,
+  fieldName:
+    | 'transactionsFeeStatistics'
+    | 'cumulativeTransactionsFeeStatistics',
+  unit: 'minute' | 'hour' | 'day' | 'month',
+  intervalSize: number,
+  isCumulative = false,
+) {
+  const data = await (isCumulative
+    ? sdk.cumulativeTransactionsFeeStatistics(params)
+    : sdk.transactionsFeeStatistics(params));
+
+  const { nodes, offset } = extractTransactionData(data, fieldName);
+
+  if (!nodes.length) {
+    return isCumulative
+      ? { transactions: [], offset: 0 }
+      : { transactions: [] };
+  }
+
+  const firstTimestamp = Number(DateHelper.tai64toDate(nodes[0].timestamp));
+  const lastTimestamp = Number(
+    DateHelper.tai64toDate(nodes[nodes.length - 1].timestamp),
+  );
+
+  const intervalMap = createIntervals(
+    firstTimestamp,
+    lastTimestamp,
+    unit,
+    intervalSize,
+  );
+  const transactions = processTransactions(nodes, intervalMap);
+
+  if (isCumulative) {
+    return { transactions, offset };
+  }
+
+  return transactions;
+}
+
+// Helper to extract nodes and timestamps from the response
+function extractTransactionData(
+  data: any,
+  fieldName: string,
+): { nodes: TransactionNode[]; offset?: number } {
+  const nodes = data.data[fieldName]?.nodes || [];
+  const offset = data.data[fieldName]?.transactionOffset;
+  return { nodes, offset };
+}
+
+async function getCumulativeTransactionFeeStats(
+  params: TransactionParams,
+  unit: 'minute' | 'hour' | 'day' | 'month',
+  intervalSize: number,
+) {
+  return fetchTransactionStatistics(
+    params,
+    'cumulativeTransactionsFeeStatistics',
+    unit,
+    intervalSize,
+    true,
+  );
+}
+
+export async function getTransactionFeeStats(
+  params: TransactionParams,
+  unit: 'minute' | 'hour' | 'day' | 'month',
+  intervalSize: number,
+) {
+  return fetchTransactionStatistics(
+    params,
+    'transactionsFeeStatistics',
+    unit,
+    intervalSize,
+  );
+}
+
+export const getTransactionStats = act(schema, async ({ timeFilter }) => {
+  const params = { timeFilter: timeFilter } as { timeFilter?: string };
+  const { unit, intervalSize } = getUnitAndInterval(params.timeFilter || '');
+
+  return getTransactionFeeStats(params, unit, intervalSize);
+});
+
+export const getDailyTransactionFeeStats = act(
+  schema,
+  async ({ timeFilter }) => {
+    const params = { timeFilter: timeFilter } as { timeFilter?: string };
+
+    // Use 'day' as the unit and 1 as the interval size
+    return getTransactionFeeStats(params, 'day', 1);
+  },
+);
+
+export const getCumulativeTransactionStats = act(
+  schema,
+  async ({ timeFilter }) => {
+    const params = { timeFilter: timeFilter } as { timeFilter?: string };
+    const { unit, intervalSize } = getUnitAndInterval(params.timeFilter || '');
+
+    return getCumulativeTransactionFeeStats(params, unit, intervalSize);
+  },
+);