Adding ApiRx for Tangle dApp for Real Time Data (#1788)

Co-authored-by: drewstone <[email protected]>

apps/stats-dapp/src/provider/stats-provider.tsx

@@ -265,7 +265,10 @@ export const StatsProvider: React.FC<
   useEffect(() => {
     const getPromiseApi = async (): Promise<void> => {
       const wsProvider = new WsProvider(props.polkadotEndpoint);
-      const apiPromise = await ApiPromise.create({ provider: wsProvider });
+      const apiPromise = await ApiPromise.create({
+        provider: wsProvider,
+        noInitWarn: true,
+      });
       setApi(apiPromise);
 
       // Get session height from Polkadot API

apps/tangle-dapp/.eslintrc.json

@@ -3,8 +3,11 @@
     "plugin:@nx/react-typescript",
     "next",
     "next/core-web-vitals",
-    "../../.eslintrc.json"
+    "../../.eslintrc.json",
+    "eslint:recommended"
   ],
+  "plugins": ["unused-imports", "simple-import-sort"],
+  "parser": "@typescript-eslint/parser",
   "ignorePatterns": ["!**/*", ".next/**/*"],
   "overrides": [
     {
@@ -23,7 +26,10 @@
     }
   ],
   "rules": {
-    "@next/next/no-html-link-for-pages": "off"
+    "@next/next/no-html-link-for-pages": "off",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "no-unused-vars": "off"
   },
   "env": {
     "jest": true

apps/tangle-dapp/app/api/hello/route.ts

@@ -1,3 +1,3 @@
-export async function GET(request: Request) {
+export async function GET() {
   return new Response('Hello, from API!');
 }

apps/tangle-dapp/app/layout.tsx

@@ -1,8 +1,11 @@
 import '@webb-tools/webb-ui-components/tailwind.css';
-import { Metadata } from 'next';
+
+import NextThemeProvider from '@webb-tools/api-provider-environment/NextThemeProvider';
 import { TANGLE_DAPP_URL } from '@webb-tools/webb-ui-components/constants';
+import { Metadata } from 'next';
+import type React from 'react';
+
 import { Layout } from '../containers';
-import NextThemeProvider from '@webb-tools/api-provider-environment/NextThemeProvider';
 
 export const metadata: Metadata = {
   title: {

apps/tangle-dapp/app/page.tsx

@@ -1,4 +1,5 @@
 import { Typography } from '@webb-tools/webb-ui-components';
+
 import { HeaderChipsContainer, KeyMetricsTableContainer } from '../containers';
 
 export default async function Index() {

apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,21 +1,18 @@
 'use client';
 
 import { FundsLine } from '@webb-tools/icons';
+import { getIconSizeInPixel } from '@webb-tools/icons/utils';
 import {
   Breadcrumbs as BreadcrumbsCmp,
   BreadcrumbsItem,
 } from '@webb-tools/webb-ui-components';
 import cx from 'classnames';
 import Link from 'next/link';
-import { usePathname, useRouter } from 'next/navigation';
-import { type FC, useMemo, useEffect } from 'react';
+import { type FC, useMemo } from 'react';
+
 import { BreadcrumbType } from './types';
-import { getIconSizeInPixel } from '@webb-tools/icons/utils';
 
 const Breadcrumbs: FC = () => {
-  const router = useRouter();
-  const pathname = usePathname();
-
   const breadCrumbs = useMemo<BreadcrumbType[]>(() => {
     const md = getIconSizeInPixel('md');
     const lg = getIconSizeInPixel('lg');

apps/tangle-dapp/components/Breadcrumbs/types.ts

@@ -1,7 +1,10 @@
+import type { IconBase } from '@webb-tools/icons/types';
+import type React from 'react';
+
 export type BreadcrumbType = {
   label: string;
   isLast: boolean;
-  icon: JSX.Element;
+  icon: React.ReactElement<IconBase>;
   href: string;
   className?: string;
 };

apps/tangle-dapp/components/HeaderChip/ChipValueClient.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import getRoundedDownNumberWith2Decimals from '../../utils/getRoundedDownNumberWith2Decimals';
+import dataHooks from './dataHooks';
+import { ChipType } from './types';
+
+export default function ChipValueClient(props: {
+  type: ChipType;
+  value?: number;
+}) {
+  const era = dataHooks[props.type](props.value);
+
+  return <>{getRoundedDownNumberWith2Decimals(era)}</>;
+}

apps/tangle-dapp/components/HeaderChip/HeaderChip.tsx

@@ -1,14 +1,15 @@
-import { Suspense, type FC, useMemo } from 'react';
 import {
   Chip,
+  SkeletonLoader,
   Tooltip,
   TooltipBody,
   TooltipTrigger,
   Typography,
-  SkeletonLoader,
 } from '@webb-tools/webb-ui-components';
+import { type FC, Suspense, useMemo } from 'react';
+
+import ChipValueClient from './ChipValueClient';
 import { HeaderChipItemProps } from './types';
-import { getRoundedDownNumberWith2Decimals } from '../../utils';
 
 export const HeaderChip: FC<HeaderChipItemProps> = ({
   Icon,
@@ -23,7 +24,7 @@ export const HeaderChip: FC<HeaderChipItemProps> = ({
         <Icon size="lg" className="stroke-blue-90 dark:stroke-blue-30" />
         {label}:{' '}
         <Suspense fallback={<SkeletonLoader className="w-[100px]" />}>
-          <HeaderChipValue dataFetcher={dataFetcher} />
+          <HeaderChipValue label={label} dataFetcher={dataFetcher} />
         </Suspense>
       </Chip>
     ),
@@ -46,8 +47,9 @@ export const HeaderChip: FC<HeaderChipItemProps> = ({
 
 const HeaderChipValue = async ({
   dataFetcher,
-}: Pick<HeaderChipItemProps, 'dataFetcher'>) => {
+  label,
+}: Pick<HeaderChipItemProps, 'dataFetcher' | 'label'>) => {
   const value = await dataFetcher();
 
-  return <>{getRoundedDownNumberWith2Decimals(value)}</>;
+  return <ChipValueClient type={label} value={value} />;
 };

apps/tangle-dapp/components/HeaderChip/dataHooks.ts

@@ -0,0 +1,9 @@
+import useEraCountSubscription from '../../data/HeaderChips/useEraCountSubscription';
+import useSessionCountSubscription from '../../data/HeaderChips/useSessionCountSubscription';
+
+const dataHooks = {
+  ERA: useEraCountSubscription,
+  Session: useSessionCountSubscription,
+} as const;
+
+export default dataHooks;

apps/tangle-dapp/components/HeaderChip/types.ts

@@ -1,8 +1,11 @@
-import { type IconBase } from '@webb-tools/icons/types';
+import type { IconBase } from '@webb-tools/icons/types';
+import type React from 'react';
+
+export type ChipType = 'ERA' | 'Session';
 
 export interface HeaderChipItemProps {
-  Icon: (props: IconBase) => JSX.Element;
-  label: string;
+  Icon: (props: IconBase) => React.JSX.Element;
+  label: ChipType;
   hasTooltip?: boolean;
   tooltipContent?: string;
   dataFetcher: () => Promise<number | undefined>;

apps/tangle-dapp/components/InfoIconWithTooltip/InfoIconWithTooltip.tsx

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { IconWithTooltip } from '@webb-tools/webb-ui-components';
 import { InformationLine } from '@webb-tools/icons';
+import { IconWithTooltip } from '@webb-tools/webb-ui-components';
+import { FC } from 'react';
 
 import { InfoIconWithTooltipProps } from './types';
 

apps/tangle-dapp/components/KeyMetricItem/KeyMetricItem.tsx

@@ -1,9 +1,10 @@
+import { SkeletonLoader, Typography } from '@webb-tools/webb-ui-components';
 import { FC, Suspense } from 'react';
-import { Typography, SkeletonLoader } from '@webb-tools/webb-ui-components';
+import { twMerge } from 'tailwind-merge';
+
 import { InfoIconWithTooltip } from '..';
-import { getRoundedDownNumberWith2Decimals } from '../../utils';
+import KeyMetricItemValueClient from './KeyMetricItemValueClient';
 import { MetricItemProps } from './types';
-import { twMerge } from 'tailwind-merge';
 
 export const KeyMetricItem: FC<MetricItemProps> = ({
   title,
@@ -21,42 +22,24 @@ export const KeyMetricItem: FC<MetricItemProps> = ({
       </div>
 
       <Suspense fallback={<SkeletonLoader size="lg" />}>
-        <KeyMetricItemValue {...restProps} />
+        <KeyMetricItemValue {...restProps} title={title} />
       </Suspense>
     </div>
   );
 };
 
-const KeyMetricItemValue = async (
-  props: Omit<MetricItemProps, 'title' | 'tooltip'>
-) => {
-  const { dataFetcher, prefix, suffix } = props;
+const KeyMetricItemValue = async (props: Omit<MetricItemProps, 'tooltip'>) => {
+  const { dataFetcher, prefix, suffix, title } = props;
 
   const { value1, value2 } = await dataFetcher();
 
   return (
-    <div className="flex flex-col gap-1 sm:flex-row sm:items-center">
-      <div className="flex items-center gap-0.5">
-        <Typography
-          variant="h4"
-          fw="bold"
-          className="text-mono-140 dark:text-mono-40"
-        >
-          {typeof value1 === 'number' && (prefix ?? '')}
-          {getRoundedDownNumberWith2Decimals(value1)}
-          {value2 && <> / {getRoundedDownNumberWith2Decimals(value2)}</>}
-        </Typography>
-
-        {typeof value1 === 'number' && suffix && (
-          <Typography
-            variant="h4"
-            fw="bold"
-            className="text-mono-140 dark:text-mono-40"
-          >
-            {suffix}
-          </Typography>
-        )}
-      </div>
-    </div>
+    <KeyMetricItemValueClient
+      prefix={prefix}
+      suffix={suffix}
+      value1={value1}
+      value2={value2}
+      title={title}
+    />
   );
 };

apps/tangle-dapp/components/KeyMetricItem/KeyMetricItemValueClient.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
+
+import type { MetricReturnType } from '../../types';
+import getRoundedDownNumberWith2Decimals from '../../utils/getRoundedDownNumberWith2Decimals';
+import dataHooks, { defaultHook } from './dataHooks';
+import type { MetricItemProps } from './types';
+
+function KeyMetricItemValueClient(
+  props: Pick<MetricItemProps, 'prefix' | 'suffix' | 'title'> & MetricReturnType
+) {
+  const { title, prefix, suffix, value1: value1_, value2: value2_ } = props;
+  const dataHook = dataHooks[title] ?? defaultHook;
+  const { value1, value2 } = dataHook({ value1: value1_, value2: value2_ });
+
+  return (
+    <div className="flex flex-col gap-1 sm:flex-row sm:items-center">
+      <div className="flex items-center gap-0.5">
+        <Typography
+          variant="h4"
+          fw="bold"
+          className="text-mono-140 dark:text-mono-40"
+        >
+          {typeof value1 === 'number' && (prefix ?? '')}
+          {getRoundedDownNumberWith2Decimals(value1)}
+          {value2 && <> / {getRoundedDownNumberWith2Decimals(value2)}</>}
+        </Typography>
+
+        {typeof value1 === 'number' && suffix && (
+          <Typography
+            variant="h4"
+            fw="bold"
+            className="text-mono-140 dark:text-mono-40"
+          >
+            {suffix}
+          </Typography>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default KeyMetricItemValueClient;

apps/tangle-dapp/components/KeyMetricItem/dataHooks.ts

@@ -0,0 +1,19 @@
+import {
+  useActiveAndDelegationCountSubscription,
+  useValidatorsCountSubscription,
+  useWaitingCountSubscription,
+} from '../../data';
+import type { MetricReturnType } from '../../types';
+
+const dataHooks: {
+  [key: string]: (defaultValue?: MetricReturnType) => MetricReturnType;
+} = {
+  Validators: useValidatorsCountSubscription,
+  Waiting: useWaitingCountSubscription,
+  'Active/Delegation': useActiveAndDelegationCountSubscription,
+} as const;
+
+export default dataHooks;
+
+export const defaultHook = (defaultValue: MetricReturnType = {}) =>
+  defaultValue;

apps/tangle-dapp/components/index.ts

@@ -1,5 +1,5 @@
-export * from './sideBar';
 export * from './Breadcrumbs';
 export * from './HeaderChip';
 export * from './InfoIconWithTooltip';
 export * from './KeyMetricItem';
+export * from './sideBar';

apps/tangle-dapp/components/sideBar/SideBar.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { type FC } from 'react';
 import { SideBar as SideBarCmp } from '@webb-tools/webb-ui-components';
 import { setSideBarCookieOnToggle } from '@webb-tools/webb-ui-components/next-utils';
+import { type FC } from 'react';
+
 import sideBarProps from './sideBarProps';
 
 interface SideBarProps {

apps/tangle-dapp/components/sideBar/SideBarMenu.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { FC } from 'react';
 import { SideBarMenu as SideBarMenuCmp } from '@webb-tools/webb-ui-components';
+import { FC } from 'react';
 
 import sideBarProps from './sideBarProps';
 

apps/tangle-dapp/components/sideBar/sideBarProps.ts

@@ -2,9 +2,9 @@ import {
   AppsLine,
   DocumentationIcon,
   FaucetIcon,
+  FundsLine,
   GlobalLine,
   KeyIcon,
-  FundsLine,
 } from '@webb-tools/icons';
 import {
   type SideBarFooterType,
@@ -20,8 +20,8 @@ import {
   TANGLE_MKT_URL,
   TANGLE_STANDALONE_EXPLORER_URL,
   TANGLE_TESTNET_EXPLORER_URL,
-  WEBB_TANGLE_DOCS_URL,
   WEBB_FAUCET_URL,
+  WEBB_TANGLE_DOCS_URL,
 } from '@webb-tools/webb-ui-components/constants';
 
 const sideBarItems: SideBarItemProps[] = [