feat(frontend): account analytics api integration (#1312)

* feat(frontend): account analytics api integration

* fix

Author: bayulaksana479

apps/api/src/services/v3/accounts/stats.ts

@@ -1,22 +1,19 @@
-import dayjs from 'dayjs';
-
-import type {} from 'nb-schemas';
-import {
+import type {
+  AccountBalanceStats,
   AccountBalanceStatsReq,
+  AccountFTStats,
   AccountFTStatsReq,
+  AccountNearStats,
   AccountNearStatsReq,
+  AccountStatsOverview,
   AccountStatsOverviewReq,
   AccountTxnsHeatmapReq,
-  AccountTxnStatsReq,
-} from 'nb-schemas/dist/accounts/stats/request.js';
-import response, {
-  AccountBalanceStats,
-  AccountFTStats,
-  AccountNearStats,
-  AccountStatsOverview,
   AccountTxnStats,
-} from 'nb-schemas/dist/accounts/stats/response.js';
+  AccountTxnStatsReq,
+} from 'nb-schemas';
+import response from 'nb-schemas/dist/accounts/stats/response.js';
 
+import dayjs from '#libs/dayjs';
 import { dbBalance, dbBase, dbEvents } from '#libs/pgp';
 import { msToNsTime } from '#libs/utils';
 import { responseHandler } from '#middlewares/response';

apps/frontend/src/app/[lang]/address/[address]/[tab]/page.tsx

@@ -0,0 +1,18 @@
+import { BalanceChart } from '@/components/address/analytics/balance';
+import { ErrorSuspense } from '@/components/error-suspense';
+import { fetchBalanceStats } from '@/data/address/analytics';
+
+type Props = PageProps<'/[lang]/address/[address]/analytics/balance'>;
+
+const BalancePage = async ({ params }: Props) => {
+  const { address } = await params;
+  const balancePromise = fetchBalanceStats(address);
+
+  return (
+    <ErrorSuspense fallback={<BalanceChart loading={true} />}>
+      <BalanceChart balancePromise={balancePromise} />
+    </ErrorSuspense>
+  );
+};
+
+export default BalancePage;

apps/frontend/src/app/[lang]/address/[address]/analytics/balance/page.tsx

@@ -0,0 +1,51 @@
+import { ActiveLink } from '@/components/link';
+import { TabLink } from '@/components/tab-links';
+import { TabLinks } from '@/components/tab-links';
+import { Card, CardContent } from '@/ui/card';
+import { ScrollArea, ScrollBar } from '@/ui/scroll-area';
+
+type Props = LayoutProps<'/[lang]/address/[address]/analytics'>;
+
+const AnalyticsLayout = async ({ children, params }: Props) => {
+  const { address } = await params;
+
+  return (
+    <Card>
+      <CardContent className="text-body-sm p-3">
+        <ScrollArea className="mb-2 w-full whitespace-nowrap">
+          <TabLinks>
+            <TabLink asChild>
+              <ActiveLink href={`/address/${address}/analytics`}>
+                Overview
+              </ActiveLink>
+            </TabLink>
+            <TabLink asChild>
+              <ActiveLink href={`/address/${address}/analytics/balance`}>
+                Balance
+              </ActiveLink>
+            </TabLink>
+            <TabLink asChild>
+              <ActiveLink href={`/address/${address}/analytics/txns`}>
+                Transactions
+              </ActiveLink>
+            </TabLink>
+            <TabLink asChild>
+              <ActiveLink href={`/address/${address}/analytics/near`}>
+                Near Transfers
+              </ActiveLink>
+            </TabLink>
+            <TabLink asChild>
+              <ActiveLink href={`/address/${address}/analytics/tokens`}>
+                Token Transfers
+              </ActiveLink>
+            </TabLink>
+          </TabLinks>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+        {children}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AnalyticsLayout;

apps/frontend/src/app/[lang]/address/[address]/analytics/layout.tsx

@@ -0,0 +1,18 @@
+import { NearChart } from '@/components/address/analytics/near';
+import { ErrorSuspense } from '@/components/error-suspense';
+import { fetchNearStats } from '@/data/address/analytics';
+
+type Props = PageProps<'/[lang]/address/[address]/analytics/near'>;
+
+const NearPage = async ({ params }: Props) => {
+  const { address } = await params;
+  const nearPromise = fetchNearStats(address);
+
+  return (
+    <ErrorSuspense fallback={<NearChart loading={true} />}>
+      <NearChart nearPromise={nearPromise} />
+    </ErrorSuspense>
+  );
+};
+
+export default NearPage;

apps/frontend/src/app/[lang]/address/[address]/analytics/near/page.tsx

@@ -0,0 +1,22 @@
+import Overview from '@/components/address/analytics/overview';
+import { ErrorSuspense } from '@/components/error-suspense';
+import { fetchStatsOverview, fetchTxnsHeatmap } from '@/data/address/analytics';
+
+type Props = PageProps<'/[lang]/address/[address]/analytics'>;
+
+const AnalyticsPage = async ({ params }: Props) => {
+  const { address } = await params;
+  const overviewPromise = fetchStatsOverview(address);
+  const heatmapPromise = fetchTxnsHeatmap(address);
+
+  return (
+    <ErrorSuspense fallback={<Overview loading />}>
+      <Overview
+        heatmapPromise={heatmapPromise}
+        overviewPromise={overviewPromise}
+      />
+    </ErrorSuspense>
+  );
+};
+
+export default AnalyticsPage;

apps/frontend/src/app/[lang]/address/[address]/analytics/page.tsx

@@ -0,0 +1,18 @@
+import { FTsChart } from '@/components/address/analytics/fts';
+import { ErrorSuspense } from '@/components/error-suspense';
+import { fetchFTStats } from '@/data/address/analytics';
+
+type Props = PageProps<'/[lang]/address/[address]/analytics/tokens'>;
+
+const FTsPage = async ({ params }: Props) => {
+  const { address } = await params;
+  const ftsPromise = fetchFTStats(address);
+
+  return (
+    <ErrorSuspense fallback={<FTsChart loading={true} />}>
+      <FTsChart ftsPromise={ftsPromise} />
+    </ErrorSuspense>
+  );
+};
+
+export default FTsPage;

apps/frontend/src/app/[lang]/address/[address]/analytics/tokens/page.tsx

@@ -0,0 +1,18 @@
+import { TxnsChart } from '@/components/address/analytics/txns';
+import { ErrorSuspense } from '@/components/error-suspense';
+import { fetchTxnStats } from '@/data/address/analytics';
+
+type Props = PageProps<'/[lang]/address/[address]/analytics/txns'>;
+
+const TxnsPage = async ({ params }: Props) => {
+  const { address } = await params;
+  const txnsPromise = fetchTxnStats(address);
+
+  return (
+    <ErrorSuspense fallback={<TxnsChart loading={true} />}>
+      <TxnsChart txnsPromise={txnsPromise} />
+    </ErrorSuspense>
+  );
+};
+
+export default TxnsPage;

apps/frontend/src/app/[lang]/address/[address]/analytics/txns/page.tsx

@@ -0,0 +1,19 @@
+import { AccessKeys } from '@/components/address/keys';
+import { ErrorSuspense } from '@/components/error-suspense';
+import { fetchKeyCount, fetchKeys } from '@/data/address/keys';
+
+type Props = PageProps<'/[lang]/address/[address]/keys'>;
+
+const KeysPage = async ({ params, searchParams }: Props) => {
+  const [{ address }, filters] = await Promise.all([params, searchParams]);
+  const keysPromise = fetchKeys(address, filters);
+  const keyCountPromise = fetchKeyCount(address);
+
+  return (
+    <ErrorSuspense fallback={<AccessKeys loading />}>
+      <AccessKeys keyCountPromise={keyCountPromise} keysPromise={keysPromise} />
+    </ErrorSuspense>
+  );
+};
+
+export default KeysPage;