From 5557adacc3ad41045f39c569f3f359f6e54aaeff Mon Sep 17 00:00:00 2001
From: Trung-Tin Pham <60747384+AtelyPham@users.noreply.github.com>
Date: Tue, 24 Oct 2023 01:44:56 +0700
Subject: [PATCH] Adding ApiRx for Tangle dApp for Real Time Data (#1788)

Co-authored-by: drewstone <drewstone329@gmail.com>
---
 .../src/provider/stats-provider.tsx           |   5 +-
 apps/tangle-dapp/.eslintrc.json               |  10 ++-
 apps/tangle-dapp/app/api/hello/route.ts       |   2 +-
 apps/tangle-dapp/app/layout.tsx               |   7 +-
 apps/tangle-dapp/app/page.tsx                 |   1 +
 .../components/Breadcrumbs/Breadcrumbs.tsx    |   9 +-
 .../components/Breadcrumbs/types.ts           |   5 +-
 .../components/HeaderChip/ChipValueClient.tsx |  14 ++++
 .../components/HeaderChip/HeaderChip.tsx      |  14 ++--
 .../components/HeaderChip/dataHooks.ts        |   9 ++
 .../components/HeaderChip/types.ts            |   9 +-
 .../InfoIconWithTooltip.tsx                   |   4 +-
 .../KeyMetricItem/KeyMetricItem.tsx           |  45 ++++------
 .../KeyMetricItemValueClient.tsx              |  44 ++++++++++
 .../components/KeyMetricItem/dataHooks.ts     |  19 +++++
 apps/tangle-dapp/components/index.ts          |   2 +-
 .../components/sideBar/SideBar.tsx            |   3 +-
 .../components/sideBar/SideBarMenu.tsx        |   2 +-
 .../components/sideBar/sideBarProps.ts        |   4 +-
 apps/tangle-dapp/constants/polkadot.ts        |  44 +++++++++-
 .../HeaderChipsContainer.tsx                  |   1 +
 .../KeyMetricsTableContainer.tsx              |   5 +-
 apps/tangle-dapp/containers/Layout/Layout.tsx |   5 +-
 apps/tangle-dapp/containers/index.ts          |   4 +-
 .../data/HeaderChips/getEraCount.ts           |  15 ++--
 .../data/HeaderChips/getSessionCount.ts       |  11 ++-
 .../HeaderChips/useEraCountSubscription.ts    |  43 ++++++++++
 .../useSessionCountSubscription.ts            |  40 +++++++++
 .../getActiveAndDelegationCount.ts            |  10 +--
 .../TopLevelStats/getIdealStakedPercentage.ts |   9 +-
 .../TopLevelStats/getInflationPercentage.ts   |   9 +-
 .../data/TopLevelStats/getValidatorsCount.ts  |   8 +-
 .../data/TopLevelStats/getWaitingCount.ts     |   8 +-
 apps/tangle-dapp/data/TopLevelStats/index.ts  |   7 +-
 ...useActiveAndDelegationCountSubscription.ts |  78 ++++++++++++++++++
 .../useValidatorsCountSubscription.ts         |  55 ++++++++++++
 .../useWaitingCountSubscription.ts            |  45 ++++++++++
 apps/tangle-dapp/next.config.js               |   2 +
 apps/tangle-dapp/public/favicon.ico           | Bin 15086 -> 0 bytes
 apps/tangle-dapp/public/favicon.png           | Bin 0 -> 1506 bytes
 apps/tangle-dapp/tsconfig.json                |   2 +
 apps/tangle-dapp/utils/calculateInflation.ts  |   2 +-
 .../getRoundedDownNumberWith2Decimals.ts      |   6 +-
 apps/tangle-dapp/utils/index.ts               |   2 +-
 .../substrate/on-chain-config.ts              |  24 +++---
 .../src/ext-provider/polkadot-provider.ts     |   2 +-
 libs/polkadot-api-provider/src/mt-utils.ts    |   3 -
 .../src/webb-provider.ts                      |   2 +-
 .../src/webb-provider/bridge-api.ts           |   2 +-
 .../src/webb-provider/crowdloan.ts            |   2 +-
 .../src/webb-provider/ecdsa-claims.ts         |   2 +-
 .../src/webb-provider/wrap-unwrap.ts          |   2 +-
 libs/react-hooks/src/types.ts                 |   6 +-
 .../components/Accordion/AccordionItem.tsx    |   2 +-
 .../components/AvatarGroup/AvatarGroup.tsx    |   1 +
 .../src/components/Banner/Banner.tsx          |   1 -
 .../BridgeInputs/ShieldedAssetInput.tsx       |   2 +-
 .../CopyWithTooltip/CopyWithTooltip.tsx       |   2 +-
 .../src/components/FeeDetails/FeeDetails.tsx  |   2 +-
 .../src/components/Input/types.ts             |   3 +-
 .../src/components/KeyCard/KeyCard.tsx        |   5 +-
 .../components/ListCard/RelayerListCard.tsx   |   4 +-
 .../Notification/NotificationContext.tsx      |  11 +--
 .../src/components/SideBar/SideBar.tsx        |  10 +--
 .../src/components/Slider/Slider.tsx          |   2 +-
 .../src/components/Tooltip/Tooltip.tsx        |   1 -
 .../WebsiteFooter/WebsiteFooter.tsx           |  13 +--
 .../ConfirmationCard/DepositConfirm.tsx       |  12 ---
 .../containers/DepositCard/DepositCard.tsx    |   9 +-
 package.json                                  |   2 +-
 .../on-chain-utils/fetchAnchorMetadata.ts     |   2 +-
 yarn.lock                                     |  36 ++++++++
 72 files changed, 590 insertions(+), 194 deletions(-)
 create mode 100644 apps/tangle-dapp/components/HeaderChip/ChipValueClient.tsx
 create mode 100644 apps/tangle-dapp/components/HeaderChip/dataHooks.ts
 create mode 100644 apps/tangle-dapp/components/KeyMetricItem/KeyMetricItemValueClient.tsx
 create mode 100644 apps/tangle-dapp/components/KeyMetricItem/dataHooks.ts
 create mode 100644 apps/tangle-dapp/data/HeaderChips/useEraCountSubscription.ts
 create mode 100644 apps/tangle-dapp/data/HeaderChips/useSessionCountSubscription.ts
 create mode 100644 apps/tangle-dapp/data/TopLevelStats/useActiveAndDelegationCountSubscription.ts
 create mode 100644 apps/tangle-dapp/data/TopLevelStats/useValidatorsCountSubscription.ts
 create mode 100644 apps/tangle-dapp/data/TopLevelStats/useWaitingCountSubscription.ts
 delete mode 100644 apps/tangle-dapp/public/favicon.ico
 create mode 100644 apps/tangle-dapp/public/favicon.png

diff --git a/apps/stats-dapp/src/provider/stats-provider.tsx b/apps/stats-dapp/src/provider/stats-provider.tsx
index ff5e40e21a..e4c4545631 100644
--- a/apps/stats-dapp/src/provider/stats-provider.tsx
+++ b/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
diff --git a/apps/tangle-dapp/.eslintrc.json b/apps/tangle-dapp/.eslintrc.json
index 38ebb785b4..faf8216565 100644
--- a/apps/tangle-dapp/.eslintrc.json
+++ b/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
diff --git a/apps/tangle-dapp/app/api/hello/route.ts b/apps/tangle-dapp/app/api/hello/route.ts
index de70bac64e..3bbf325cbf 100644
--- a/apps/tangle-dapp/app/api/hello/route.ts
+++ b/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!');
 }
diff --git a/apps/tangle-dapp/app/layout.tsx b/apps/tangle-dapp/app/layout.tsx
index 7577fbca36..dd0d592b1e 100644
--- a/apps/tangle-dapp/app/layout.tsx
+++ b/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: {
diff --git a/apps/tangle-dapp/app/page.tsx b/apps/tangle-dapp/app/page.tsx
index 8eebe5f7a7..10486e829e 100644
--- a/apps/tangle-dapp/app/page.tsx
+++ b/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() {
diff --git a/apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx b/apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx
index db4f150ee6..4a07a5decb 100644
--- a/apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/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');
diff --git a/apps/tangle-dapp/components/Breadcrumbs/types.ts b/apps/tangle-dapp/components/Breadcrumbs/types.ts
index 47053b33b9..74a819f073 100644
--- a/apps/tangle-dapp/components/Breadcrumbs/types.ts
+++ b/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;
 };
diff --git a/apps/tangle-dapp/components/HeaderChip/ChipValueClient.tsx b/apps/tangle-dapp/components/HeaderChip/ChipValueClient.tsx
new file mode 100644
index 0000000000..ddf46595c6
--- /dev/null
+++ b/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)}</>;
+}
diff --git a/apps/tangle-dapp/components/HeaderChip/HeaderChip.tsx b/apps/tangle-dapp/components/HeaderChip/HeaderChip.tsx
index b16c31ce47..687415d84e 100644
--- a/apps/tangle-dapp/components/HeaderChip/HeaderChip.tsx
+++ b/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} />;
 };
diff --git a/apps/tangle-dapp/components/HeaderChip/dataHooks.ts b/apps/tangle-dapp/components/HeaderChip/dataHooks.ts
new file mode 100644
index 0000000000..f2067521bf
--- /dev/null
+++ b/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;
diff --git a/apps/tangle-dapp/components/HeaderChip/types.ts b/apps/tangle-dapp/components/HeaderChip/types.ts
index 6d4c8e7a09..522b969029 100644
--- a/apps/tangle-dapp/components/HeaderChip/types.ts
+++ b/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>;
diff --git a/apps/tangle-dapp/components/InfoIconWithTooltip/InfoIconWithTooltip.tsx b/apps/tangle-dapp/components/InfoIconWithTooltip/InfoIconWithTooltip.tsx
index 082465cbc4..5bb39ae753 100644
--- a/apps/tangle-dapp/components/InfoIconWithTooltip/InfoIconWithTooltip.tsx
+++ b/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';
 
diff --git a/apps/tangle-dapp/components/KeyMetricItem/KeyMetricItem.tsx b/apps/tangle-dapp/components/KeyMetricItem/KeyMetricItem.tsx
index e9b2bc5339..609c595529 100644
--- a/apps/tangle-dapp/components/KeyMetricItem/KeyMetricItem.tsx
+++ b/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}
+    />
   );
 };
diff --git a/apps/tangle-dapp/components/KeyMetricItem/KeyMetricItemValueClient.tsx b/apps/tangle-dapp/components/KeyMetricItem/KeyMetricItemValueClient.tsx
new file mode 100644
index 0000000000..2a0a64fe82
--- /dev/null
+++ b/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;
diff --git a/apps/tangle-dapp/components/KeyMetricItem/dataHooks.ts b/apps/tangle-dapp/components/KeyMetricItem/dataHooks.ts
new file mode 100644
index 0000000000..8369f00ab7
--- /dev/null
+++ b/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;
diff --git a/apps/tangle-dapp/components/index.ts b/apps/tangle-dapp/components/index.ts
index e98436e559..4d91dae4ec 100644
--- a/apps/tangle-dapp/components/index.ts
+++ b/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';
diff --git a/apps/tangle-dapp/components/sideBar/SideBar.tsx b/apps/tangle-dapp/components/sideBar/SideBar.tsx
index c26e07de19..413c6e44fc 100644
--- a/apps/tangle-dapp/components/sideBar/SideBar.tsx
+++ b/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 {
diff --git a/apps/tangle-dapp/components/sideBar/SideBarMenu.tsx b/apps/tangle-dapp/components/sideBar/SideBarMenu.tsx
index eacd69e530..6cb4752771 100644
--- a/apps/tangle-dapp/components/sideBar/SideBarMenu.tsx
+++ b/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';
 
diff --git a/apps/tangle-dapp/components/sideBar/sideBarProps.ts b/apps/tangle-dapp/components/sideBar/sideBarProps.ts
index 158f2b22fb..aa2cd68457 100644
--- a/apps/tangle-dapp/components/sideBar/sideBarProps.ts
+++ b/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[] = [
diff --git a/apps/tangle-dapp/constants/polkadot.ts b/apps/tangle-dapp/constants/polkadot.ts
index 17e53346b6..edda9237ce 100644
--- a/apps/tangle-dapp/constants/polkadot.ts
+++ b/apps/tangle-dapp/constants/polkadot.ts
@@ -1,16 +1,52 @@
-import { ApiPromise, WsProvider } from '@polkadot/api';
+import { ApiPromise, ApiRx, WsProvider } from '@polkadot/api';
 import { TANGLE_RPC_ENDPOINT } from '@webb-tools/webb-ui-components/constants';
+import { firstValueFrom } from 'rxjs';
 
-export const getPolkadotApi = async (
+const apiPromiseCache = new Map<string, ApiPromise>();
+
+export const getPolkadotApiPromise = async (
   endpoint: string = TANGLE_RPC_ENDPOINT
 ): Promise<ApiPromise | undefined> => {
+  if (apiPromiseCache.has(endpoint)) {
+    return apiPromiseCache.get(endpoint);
+  }
+
   try {
     const wsProvider = new WsProvider(endpoint);
-    const apiPromise = await ApiPromise.create({ provider: wsProvider });
+    const apiPromise = await ApiPromise.create({
+      provider: wsProvider,
+      noInitWarn: true,
+    });
+
+    apiPromiseCache.set(endpoint, apiPromise);
 
     return apiPromise;
   } catch (e) {
     console.error(e);
-    return undefined;
+  }
+};
+
+const apiRxCache = new Map<string, ApiRx>();
+
+export const getPolkadotApiRx = async (
+  endpoint: string = TANGLE_RPC_ENDPOINT
+): Promise<ApiRx | undefined> => {
+  if (apiRxCache.has(endpoint)) {
+    return apiRxCache.get(endpoint);
+  }
+
+  try {
+    const provider = new WsProvider(endpoint);
+    const api = new ApiRx({
+      provider,
+      noInitWarn: true,
+    });
+
+    const apiRx = await firstValueFrom(api.isReady);
+    apiRxCache.set(endpoint, apiRx);
+
+    return apiRx;
+  } catch (error) {
+    console.error(error);
   }
 };
diff --git a/apps/tangle-dapp/containers/HeaderChipsContainer/HeaderChipsContainer.tsx b/apps/tangle-dapp/containers/HeaderChipsContainer/HeaderChipsContainer.tsx
index 4754148e24..ba1375906f 100644
--- a/apps/tangle-dapp/containers/HeaderChipsContainer/HeaderChipsContainer.tsx
+++ b/apps/tangle-dapp/containers/HeaderChipsContainer/HeaderChipsContainer.tsx
@@ -1,4 +1,5 @@
 import { BlockIcon } from '@webb-tools/icons';
+
 import { HeaderChip } from '../../components';
 import { getEraCount, getSessionCount } from '../../data';
 
diff --git a/apps/tangle-dapp/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx b/apps/tangle-dapp/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx
index 02ce1ce964..7c2e59e7fb 100644
--- a/apps/tangle-dapp/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx
+++ b/apps/tangle-dapp/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx
@@ -1,12 +1,13 @@
 import cx from 'classnames';
 import { cache } from 'react';
+
 import { KeyMetricItem } from '../../components/KeyMetricItem';
 import {
-  getValidatorsCount,
-  getWaitingCount,
   getActiveAndDelegationCount,
   getIdealStakedPercentage,
   getInflationPercentage,
+  getValidatorsCount,
+  getWaitingCount,
 } from '../../data';
 
 const getValidatorsCountData = cache(getValidatorsCount);
diff --git a/apps/tangle-dapp/containers/Layout/Layout.tsx b/apps/tangle-dapp/containers/Layout/Layout.tsx
index 0d9f712670..b1ed16e059 100644
--- a/apps/tangle-dapp/containers/Layout/Layout.tsx
+++ b/apps/tangle-dapp/containers/Layout/Layout.tsx
@@ -1,7 +1,8 @@
-import React, { type PropsWithChildren, type FC } from 'react';
 import { Footer } from '@webb-tools/webb-ui-components';
 import { getSideBarStateFromCookie } from '@webb-tools/webb-ui-components/next-utils';
-import { SideBar, SideBarMenu, Breadcrumbs } from '../../components';
+import React, { type FC, type PropsWithChildren } from 'react';
+
+import { Breadcrumbs, SideBar, SideBarMenu } from '../../components';
 
 const Layout: FC<PropsWithChildren> = ({ children }) => {
   const isSideBarInitiallyExpanded = getSideBarStateFromCookie();
diff --git a/apps/tangle-dapp/containers/index.ts b/apps/tangle-dapp/containers/index.ts
index 023ce56eb6..b477883eb0 100644
--- a/apps/tangle-dapp/containers/index.ts
+++ b/apps/tangle-dapp/containers/index.ts
@@ -1,3 +1,3 @@
-export { Layout } from './Layout';
-export * from './KeyMetricsTableContainer';
 export * from './HeaderChipsContainer';
+export * from './KeyMetricsTableContainer';
+export { Layout } from './Layout';
diff --git a/apps/tangle-dapp/data/HeaderChips/getEraCount.ts b/apps/tangle-dapp/data/HeaderChips/getEraCount.ts
index d79865d2cf..1ec2887fb0 100644
--- a/apps/tangle-dapp/data/HeaderChips/getEraCount.ts
+++ b/apps/tangle-dapp/data/HeaderChips/getEraCount.ts
@@ -1,16 +1,19 @@
-import { getPolkadotApi } from '../../constants';
+import { getPolkadotApiPromise } from '../../constants';
 
 export const getEraCount = async (): Promise<number> => {
-  const api = await getPolkadotApi();
+  const api = await getPolkadotApiPromise();
 
   if (!api) return NaN;
 
   try {
-    let activeEra = await api.query.staking.activeEra();
-    activeEra = JSON.parse(JSON.stringify(activeEra)).index;
+    const activeEra = await api.query.staking.activeEra();
+    const value = activeEra.unwrapOr(null);
+    if (value == null) {
+      return NaN;
+    }
 
-    return Number(activeEra.toString());
-  } catch (e: any) {
+    return value.index.toNumber();
+  } catch (e) {
     console.error(e);
 
     return NaN;
diff --git a/apps/tangle-dapp/data/HeaderChips/getSessionCount.ts b/apps/tangle-dapp/data/HeaderChips/getSessionCount.ts
index f728d7354b..9a1cdf4d16 100644
--- a/apps/tangle-dapp/data/HeaderChips/getSessionCount.ts
+++ b/apps/tangle-dapp/data/HeaderChips/getSessionCount.ts
@@ -1,18 +1,17 @@
-import { getPolkadotApi } from '../../constants';
+import { getPolkadotApiPromise } from '../../constants';
 
 export const getSessionCount = async (): Promise<number> => {
-  const api = await getPolkadotApi();
+  const api = await getPolkadotApiPromise();
 
   if (!api) return NaN;
 
   try {
-    const currentDKGPublicKey: any = await api.query.dkg.dkgPublicKey();
+    const currentDKGPublicKey = await api.query.dkg.dkgPublicKey();
     const currentSessionNumber = currentDKGPublicKey[0];
 
-    return Number(currentSessionNumber.toString());
-  } catch (e: any) {
+    return currentSessionNumber.toNumber();
+  } catch (e) {
     console.error(e);
-
     return NaN;
   }
 };
diff --git a/apps/tangle-dapp/data/HeaderChips/useEraCountSubscription.ts b/apps/tangle-dapp/data/HeaderChips/useEraCountSubscription.ts
new file mode 100644
index 0000000000..10a497a149
--- /dev/null
+++ b/apps/tangle-dapp/data/HeaderChips/useEraCountSubscription.ts
@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { Subscription } from 'rxjs';
+
+import { getPolkadotApiRx } from '../../constants/polkadot';
+
+export default function useEraCountSubscription(defaultValue?: number) {
+  const [era, setEra] = useState(() => defaultValue);
+
+  useEffect(() => {
+    let isMounted = true;
+    let sub: Subscription | null = null;
+
+    const apiRx = getPolkadotApiRx();
+
+    apiRx.then((api) => {
+      if (!api) {
+        return;
+      }
+
+      sub = api.query.staking.activeEra().subscribe((nextEra) => {
+        const activeEra = nextEra.unwrapOr(null);
+        if (activeEra == null) {
+          return;
+        }
+
+        const idx = activeEra.index.toNumber();
+
+        if (isMounted) {
+          setEra(idx);
+        }
+      });
+    });
+
+    return () => {
+      isMounted = false;
+      sub?.unsubscribe();
+    };
+  }, []);
+
+  return era;
+}
diff --git a/apps/tangle-dapp/data/HeaderChips/useSessionCountSubscription.ts b/apps/tangle-dapp/data/HeaderChips/useSessionCountSubscription.ts
new file mode 100644
index 0000000000..318653938d
--- /dev/null
+++ b/apps/tangle-dapp/data/HeaderChips/useSessionCountSubscription.ts
@@ -0,0 +1,40 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { Subscription } from 'rxjs';
+
+import { getPolkadotApiRx } from '../../constants/polkadot';
+
+function useSessionCountSubscription(defaultValue = NaN) {
+  const [session, setSession] = useState(defaultValue);
+
+  useEffect(() => {
+    let isMounted = true;
+    let sub: Subscription | null = null;
+
+    const apiRx = getPolkadotApiRx();
+
+    apiRx.then((api) => {
+      if (!api) {
+        return;
+      }
+
+      sub = api.query.dkg.dkgPublicKey().subscribe((currentDKGPublicKey) => {
+        const currentSessionNumber = currentDKGPublicKey[0];
+
+        if (isMounted) {
+          setSession(currentSessionNumber.toNumber());
+        }
+      });
+    });
+
+    return () => {
+      isMounted = false;
+      sub?.unsubscribe();
+    };
+  }, []);
+
+  return session;
+}
+
+export default useSessionCountSubscription;
diff --git a/apps/tangle-dapp/data/TopLevelStats/getActiveAndDelegationCount.ts b/apps/tangle-dapp/data/TopLevelStats/getActiveAndDelegationCount.ts
index 843de72a24..bbe9e7dd67 100644
--- a/apps/tangle-dapp/data/TopLevelStats/getActiveAndDelegationCount.ts
+++ b/apps/tangle-dapp/data/TopLevelStats/getActiveAndDelegationCount.ts
@@ -1,9 +1,9 @@
-import { getPolkadotApi } from '../../constants';
+import { getPolkadotApiPromise } from '../../constants';
 import { MetricReturnType } from '../../types';
 
 export const getActiveAndDelegationCount =
   async (): Promise<MetricReturnType> => {
-    const api = await getPolkadotApi();
+    const api = await getPolkadotApiPromise();
 
     if (!api) return { value1: NaN, value2: NaN };
 
@@ -19,7 +19,7 @@ export const getActiveAndDelegationCount =
       const currentValidators = await api.query.session.validators();
 
       // Collection of unique nominator addresses - Set is used to avoid duplicates, as a nominator can nominate multiple validators
-      const activeNominators = new Set();
+      const activeNominators = new Set<string>();
 
       // For each validator, get their nominators
       for (const validator of currentValidators) {
@@ -36,9 +36,9 @@ export const getActiveAndDelegationCount =
 
       return {
         value1: activeNominatorsCount,
-        value2: Number(totalNominatorCount.toString()),
+        value2: totalNominatorCount.toNumber(),
       };
-    } catch (e: any) {
+    } catch (e) {
       console.error(e);
 
       return { value1: NaN, value2: NaN };
diff --git a/apps/tangle-dapp/data/TopLevelStats/getIdealStakedPercentage.ts b/apps/tangle-dapp/data/TopLevelStats/getIdealStakedPercentage.ts
index 7e162f68cf..16d96737b4 100644
--- a/apps/tangle-dapp/data/TopLevelStats/getIdealStakedPercentage.ts
+++ b/apps/tangle-dapp/data/TopLevelStats/getIdealStakedPercentage.ts
@@ -1,10 +1,11 @@
-import { getPolkadotApi } from '../../constants';
 import { BN_ZERO } from '@polkadot/util';
-import { calculateInflation } from '../../utils';
+
+import { getPolkadotApiPromise } from '../../constants';
 import { MetricReturnType } from '../../types';
+import { calculateInflation } from '../../utils';
 
 export const getIdealStakedPercentage = async (): Promise<MetricReturnType> => {
-  const api = await getPolkadotApi();
+  const api = await getPolkadotApiPromise();
 
   if (!api)
     return {
@@ -19,7 +20,7 @@ export const getIdealStakedPercentage = async (): Promise<MetricReturnType> => {
     return {
       value1: idealStakePercentage,
     };
-  } catch (e: any) {
+  } catch (e) {
     console.error(e);
 
     return {
diff --git a/apps/tangle-dapp/data/TopLevelStats/getInflationPercentage.ts b/apps/tangle-dapp/data/TopLevelStats/getInflationPercentage.ts
index f51c4047f6..423be9cae7 100644
--- a/apps/tangle-dapp/data/TopLevelStats/getInflationPercentage.ts
+++ b/apps/tangle-dapp/data/TopLevelStats/getInflationPercentage.ts
@@ -1,10 +1,11 @@
-import { getPolkadotApi } from '../../constants';
 import { BN_ZERO } from '@polkadot/util';
-import { calculateInflation } from '../../utils';
+
+import { getPolkadotApiPromise } from '../../constants';
 import { MetricReturnType } from '../../types';
+import { calculateInflation } from '../../utils';
 
 export const getInflationPercentage = async (): Promise<MetricReturnType> => {
-  const api = await getPolkadotApi();
+  const api = await getPolkadotApiPromise();
 
   if (!api)
     return {
@@ -19,7 +20,7 @@ export const getInflationPercentage = async (): Promise<MetricReturnType> => {
     return {
       value1: inflationPercentage,
     };
-  } catch (e: any) {
+  } catch (e) {
     console.error(e);
 
     return {
diff --git a/apps/tangle-dapp/data/TopLevelStats/getValidatorsCount.ts b/apps/tangle-dapp/data/TopLevelStats/getValidatorsCount.ts
index 73bb04b38a..44ae21a611 100644
--- a/apps/tangle-dapp/data/TopLevelStats/getValidatorsCount.ts
+++ b/apps/tangle-dapp/data/TopLevelStats/getValidatorsCount.ts
@@ -1,8 +1,8 @@
-import { getPolkadotApi } from '../../constants';
+import { getPolkadotApiPromise } from '../../constants';
 import { MetricReturnType } from '../../types';
 
 export const getValidatorsCount = async (): Promise<MetricReturnType> => {
-  const api = await getPolkadotApi();
+  const api = await getPolkadotApiPromise();
 
   if (!api)
     return {
@@ -19,9 +19,9 @@ export const getValidatorsCount = async (): Promise<MetricReturnType> => {
 
     return {
       value1: activeValidatorsCount,
-      value2: Number(totalValidatorsCount.toString()),
+      value2: totalValidatorsCount.toNumber(),
     };
-  } catch (e: any) {
+  } catch (e) {
     console.error(e);
 
     return {
diff --git a/apps/tangle-dapp/data/TopLevelStats/getWaitingCount.ts b/apps/tangle-dapp/data/TopLevelStats/getWaitingCount.ts
index a42bc17008..a5177a6c99 100644
--- a/apps/tangle-dapp/data/TopLevelStats/getWaitingCount.ts
+++ b/apps/tangle-dapp/data/TopLevelStats/getWaitingCount.ts
@@ -1,8 +1,8 @@
-import { getPolkadotApi } from '../../constants';
+import { getPolkadotApiPromise } from '../../constants';
 import { MetricReturnType } from '../../types';
 
 export const getWaitingCount = async (): Promise<MetricReturnType> => {
-  const api = await getPolkadotApi();
+  const api = await getPolkadotApiPromise();
 
   if (!api)
     return {
@@ -13,9 +13,9 @@ export const getWaitingCount = async (): Promise<MetricReturnType> => {
     const waitingInfo = await api.derive.staking.waitingInfo();
 
     return {
-      value1: Number(waitingInfo.waiting.length.toString()),
+      value1: waitingInfo.waiting.length,
     };
-  } catch (e: any) {
+  } catch (e) {
     console.error(e);
 
     return {
diff --git a/apps/tangle-dapp/data/TopLevelStats/index.ts b/apps/tangle-dapp/data/TopLevelStats/index.ts
index 19202ff420..6496cb52c4 100644
--- a/apps/tangle-dapp/data/TopLevelStats/index.ts
+++ b/apps/tangle-dapp/data/TopLevelStats/index.ts
@@ -1,5 +1,8 @@
-export * from './getValidatorsCount';
 export * from './getActiveAndDelegationCount';
-export * from './getWaitingCount';
 export * from './getIdealStakedPercentage';
 export * from './getInflationPercentage';
+export * from './getValidatorsCount';
+export * from './getWaitingCount';
+export { default as useActiveAndDelegationCountSubscription } from './useActiveAndDelegationCountSubscription';
+export { default as useValidatorsCountSubscription } from './useValidatorsCountSubscription';
+export { default as useWaitingCountSubscription } from './useWaitingCountSubscription';
diff --git a/apps/tangle-dapp/data/TopLevelStats/useActiveAndDelegationCountSubscription.ts b/apps/tangle-dapp/data/TopLevelStats/useActiveAndDelegationCountSubscription.ts
new file mode 100644
index 0000000000..c0097101e9
--- /dev/null
+++ b/apps/tangle-dapp/data/TopLevelStats/useActiveAndDelegationCountSubscription.ts
@@ -0,0 +1,78 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { firstValueFrom, type Subscription } from 'rxjs';
+
+import { getPolkadotApiRx } from '../../constants/polkadot';
+import { MetricReturnType } from '../../types';
+
+function useActiveAndDelegationCountSubscription(
+  defaultValue: MetricReturnType = {}
+): MetricReturnType {
+  const [value1, setValue1] = useState(defaultValue.value1);
+  const [value2, setValue2] = useState(defaultValue.value2);
+
+  useEffect(() => {
+    let isMounted = true;
+    let sub: Subscription | null = null;
+
+    const apiRx = getPolkadotApiRx();
+
+    apiRx.then((api) => {
+      if (!api) {
+        return;
+      }
+
+      sub = api.query.session.validators().subscribe(async (validators) => {
+        try {
+          const [totalNominator, activeEraRes] = await Promise.all([
+            firstValueFrom(api.query.staking.counterForNominators()),
+            firstValueFrom(api.query.staking.activeEra()),
+          ] as const);
+
+          const activeEra = activeEraRes.unwrapOr(null);
+          if (activeEra == null) {
+            console.warn('activeEra is null');
+            return;
+          }
+
+          const currentEra = activeEra.index;
+
+          // Collection of unique nominator addresses - Set is used to avoid duplicates, as a nominator can nominate multiple validators
+          const activeNominators = new Set<string>();
+
+          for (const validator of validators) {
+            const exposure = await firstValueFrom(
+              api.query.staking.erasStakers(currentEra, validator)
+            );
+
+            exposure.others.forEach((nominator) => {
+              activeNominators.add(nominator.who.toString());
+            });
+          }
+
+          if (!isMounted) {
+            return;
+          }
+
+          setValue1(activeNominators.size);
+          setValue2(totalNominator.toNumber());
+        } catch (error) {
+          console.error(error);
+        }
+      });
+    });
+
+    return () => {
+      isMounted = false;
+      sub?.unsubscribe();
+    };
+  }, []);
+
+  return {
+    value1,
+    value2,
+  };
+}
+
+export default useActiveAndDelegationCountSubscription;
diff --git a/apps/tangle-dapp/data/TopLevelStats/useValidatorsCountSubscription.ts b/apps/tangle-dapp/data/TopLevelStats/useValidatorsCountSubscription.ts
new file mode 100644
index 0000000000..0fb5312542
--- /dev/null
+++ b/apps/tangle-dapp/data/TopLevelStats/useValidatorsCountSubscription.ts
@@ -0,0 +1,55 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { firstValueFrom, type Subscription } from 'rxjs';
+
+import { getPolkadotApiRx } from '../../constants/polkadot';
+import { MetricReturnType } from '../../types';
+
+function useValidatorCountSubscription(
+  defaultValue: MetricReturnType = {}
+): MetricReturnType {
+  const [value1, setValue1] = useState(defaultValue.value1);
+  const [value2, setValue2] = useState(defaultValue.value2);
+
+  useEffect(() => {
+    let isMounted = true;
+    let sub: Subscription | null = null;
+
+    const apiRx = getPolkadotApiRx();
+
+    apiRx.then((api) => {
+      if (!api) {
+        return;
+      }
+
+      sub = api.query.session.validators().subscribe(async (validators) => {
+        try {
+          const overview = await firstValueFrom(api.derive.staking.overview());
+          const totalValidatorsCount = overview.validatorCount;
+
+          if (!isMounted) {
+            return;
+          }
+
+          setValue1(validators.length);
+          setValue2(totalValidatorsCount.toNumber());
+        } catch (error) {
+          console.error(error);
+        }
+      });
+    });
+
+    return () => {
+      isMounted = false;
+      sub?.unsubscribe();
+    };
+  }, []);
+
+  return {
+    value1,
+    value2,
+  };
+}
+
+export default useValidatorCountSubscription;
diff --git a/apps/tangle-dapp/data/TopLevelStats/useWaitingCountSubscription.ts b/apps/tangle-dapp/data/TopLevelStats/useWaitingCountSubscription.ts
new file mode 100644
index 0000000000..d00248eb35
--- /dev/null
+++ b/apps/tangle-dapp/data/TopLevelStats/useWaitingCountSubscription.ts
@@ -0,0 +1,45 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { type Subscription } from 'rxjs';
+
+import { getPolkadotApiRx } from '../../constants/polkadot';
+import { MetricReturnType } from '../../types';
+
+function useWaitingCountSubscription(
+  defaultValue: MetricReturnType = {}
+): MetricReturnType {
+  const [value1, setValue1] = useState(defaultValue.value1);
+
+  useEffect(() => {
+    let isMounted = true;
+    let sub: Subscription | null = null;
+
+    const apiRx = getPolkadotApiRx();
+
+    apiRx.then((api) => {
+      if (!api) {
+        return;
+      }
+
+      sub = api.derive.staking.waitingInfo().subscribe((waitingInfo) => {
+        if (!isMounted) {
+          return;
+        }
+
+        setValue1(waitingInfo.waiting.length);
+      });
+    });
+
+    return () => {
+      isMounted = false;
+      sub?.unsubscribe();
+    };
+  }, []);
+
+  return {
+    value1,
+  };
+}
+
+export default useWaitingCountSubscription;
diff --git a/apps/tangle-dapp/next.config.js b/apps/tangle-dapp/next.config.js
index 33a52c6887..8289d06f2f 100644
--- a/apps/tangle-dapp/next.config.js
+++ b/apps/tangle-dapp/next.config.js
@@ -9,6 +9,8 @@ const nextConfigBase = require('../../next.config.js');
 const nextConfig = {
   ...nextConfigBase,
 
+  reactStrictMode: true,
+
   // at default environment variable is only accessible by the server, resulting in hydration mismatch
   // make environment variable accessible by both the server and client
   env: {},
diff --git a/apps/tangle-dapp/public/favicon.ico b/apps/tangle-dapp/public/favicon.ico
deleted file mode 100644
index 317ebcb2336e0833a22dddf0ab287849f26fda57..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15086
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
X*GBfq^a!*Sks)$E_17kl@BRM)`^nwN

diff --git a/apps/tangle-dapp/public/favicon.png b/apps/tangle-dapp/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..055e8634fd0c09bbd557903ee0045136e69b9282
GIT binary patch
literal 1506
zcmV<81s(c{P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1$RkAK~#7F?N`rl
z8&wdVdAoK<OH^~<5Ke{zCnSt|s)W?-xggRjLc~Q;TLh@Cgk(V|-cU-EmNY3UQlWx4
z>H&#MTT*dDaRsMJLFPYjFL0||g48Cv`-bnmee10A)5;Yla(2D@-pn`iX1*B{{nv%_
zU&2}x#G1y0`3<}&i+QMs%vH>vay!^P<LrZP%yvz0efG}jfV8o{9qDB1dN|zK0-*6h
zG6w}U+15b1MwF!2{PUa<3o`dyQx0(cIn(Ud=Zhcq05sl9=5VQ{o=}`H-NW+Vj8db-
z(_HowJ}M&ROxb#onu(V@u--9`CW>DZ*33$Ykp3qjzN@sXS{<G>^s*3-r63GY{_fiO
z;sl3h;wmX#un&nloTy{rb?(q6nXbaPCv%!)%!Zq(^~nu&%)C1{8T|zC&slebm;N5{
zuY6zU)y+C;;p4I<wTuW@N3^0hdFoxg4C8?fqgKyvXS|mqRVft;vJ9vdcwoYH^5L^<
z50!Wg7ygyGi^bEli@YB`4j3S8WLSPtEE3o_i?nt#ZUHp83!^n_oK3)!s?vPQMieeZ
zQ8Yz+$hB~|1?M})CiYcS_5!F%G=NOr;Cn!S&nA`60RX%R@Jw1-*Df9WlLi(*7Bzwh
zaEooqOC>yma~?oM%N+wC@^PZVPuuEaUK(Vt$phFd+jJrN75nv~s}5o%w*~>B*HzP2
z1LB8s7_oa3|Mx+RBhQu{u^^D@rY*w@r?p9}z}0ETWH@fyG07v;U{68fIRN++wVI23
zDPe7bY`(8ZzO^sinj{a{r$eHtA|6PNsFZR7|NPZd;ka)Xuki^k>Um}!M-iLwRLvq~
z<K*=S#$Yj5R3XKtw(S@4JS|7S07q<8v?Hb*@gP6!mBk@a^5g1(!h~D4As0@?sBs$C
ziUV9rDH}@0UVRLiH;__px=z#v08NgfmDSV5{e3O*^!&x)R%WvgKwiR{l;{cdSB8p8
zROC`b*82uP1=f(rr$YYCY}uOmH<a7AM&0>&Q^H$iM*w@tWGxEeR>SrHrjuV>@td>{
zQM6ytX)f4!YudN?JH6Ph9F@eQ$aotyE&PH`j~MoKsb1Tmd~p<OgC4<!i6~(98f3U$
zWl2bV38!;Ce{1h|h&Humw+2awnZV=b>_vaE4}fVhL!K;P(O5Qk^cnBn%cjiVxgx|J
z?&iV74KU55SU5Kya@QWg5X&vB2rMGzu9jpG-KK4Kd2X{~FIMiJxq$)2QflN;M`=A}
zo||K_nWfXcobEk@n^({>#?z2<)r;aXZjSMEHLhZcSa9C7*EOF&*Xz(O^7$zljlE<k
z@%Sa}>7nQ;3@B^<GdrDgCiObz0rtSUTsFus#8ffAsI!i146pBL+&ZM_uu2{58oD%L
z^$#XT_u4lzGu%P)o=l@DU{<LbJrx(?)<**vH^QP{w@MOv6ct>uX{imecXp=GLf`0^
zO~{1+?U=gCCN>W=4}3Nuheh*YL=KHqR?uj=F0q2z$Lp0rbRZW>mP5=G0sw790}rKQ
z=e}KJ<{cSPl!T@j&~%K7A8>P3Ty-Ep=k_vQucOq_5p6;v>Tq5!_QrjY<()tn;~<<b
zv0;?$03s`mZ~Ud%>7fv<we3nUID3A5p=SEXHZoa{UPaUvI5mzWl%@^D<+qY12x2_z
zVmOc6Ae=ukhJ|8y&d2d?B%AlOlDnGqU#8?@U&>LD$1@&aGhN5jLXthu8#<3de~_)g
z{;QW~inSgSUV1y3M{S?Y|DfoR3UeO`Y3>2r==o_LY)eo*mQ?Alr^HW<XV`jT!Vf|T
zu@FBZP#t{?C)>^g8*I5@z&ha0HRntRQN8ozKzutt5Bx9x0z8`53Iw$vnE(I)07*qo
IM6N<$g1VQ-o&W#<

literal 0
HcmV?d00001

diff --git a/apps/tangle-dapp/tsconfig.json b/apps/tangle-dapp/tsconfig.json
index ed471941f8..5357d0b7ee 100644
--- a/apps/tangle-dapp/tsconfig.json
+++ b/apps/tangle-dapp/tsconfig.json
@@ -6,6 +6,8 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "resolveJsonModule": true,
diff --git a/apps/tangle-dapp/utils/calculateInflation.ts b/apps/tangle-dapp/utils/calculateInflation.ts
index 208d6cfc35..3c7710ae59 100644
--- a/apps/tangle-dapp/utils/calculateInflation.ts
+++ b/apps/tangle-dapp/utils/calculateInflation.ts
@@ -1,6 +1,6 @@
 import { ApiPromise } from '@polkadot/api';
-import { BN, BN_MILLION } from '@polkadot/util';
 import { getInflationParams } from '@polkadot/apps-config';
+import { BN, BN_MILLION } from '@polkadot/util';
 
 // Source - https://github.com/polkadot-js/apps/blob/80759592b9f01996e67175e5dd4bdd89b58322ad/packages/react-hooks/src/useInflation.ts#L19C50-L19C50
 export const calculateInflation = (
diff --git a/apps/tangle-dapp/utils/getRoundedDownNumberWith2Decimals.ts b/apps/tangle-dapp/utils/getRoundedDownNumberWith2Decimals.ts
index 0ee668d562..3cf9d628a9 100644
--- a/apps/tangle-dapp/utils/getRoundedDownNumberWith2Decimals.ts
+++ b/apps/tangle-dapp/utils/getRoundedDownNumberWith2Decimals.ts
@@ -1,10 +1,10 @@
 import { getRoundedAmountString } from '@webb-tools/webb-ui-components/utils';
 
-export const getRoundedDownNumberWith2Decimals: (
-  number: number | undefined
-) => string = (number: number | undefined) => {
+const getRoundedDownNumberWith2Decimals = (number: number | undefined) => {
   return getRoundedAmountString(number, 2, {
     roundingFunction: Math.floor,
     totalLength: 0,
   });
 };
+
+export default getRoundedDownNumberWith2Decimals;
diff --git a/apps/tangle-dapp/utils/index.ts b/apps/tangle-dapp/utils/index.ts
index 1d9aaba742..55d5636dd7 100644
--- a/apps/tangle-dapp/utils/index.ts
+++ b/apps/tangle-dapp/utils/index.ts
@@ -1,2 +1,2 @@
 export * from './calculateInflation';
-export * from './getRoundedDownNumberWith2Decimals';
+export { default as getRoundedDownNumberWith2Decimals } from './getRoundedDownNumberWith2Decimals';
diff --git a/libs/dapp-config/src/on-chain-config/substrate/on-chain-config.ts b/libs/dapp-config/src/on-chain-config/substrate/on-chain-config.ts
index 12ba3f7683..79214759de 100644
--- a/libs/dapp-config/src/on-chain-config/substrate/on-chain-config.ts
+++ b/libs/dapp-config/src/on-chain-config/substrate/on-chain-config.ts
@@ -1,30 +1,26 @@
 import '@webb-tools/protocol-substrate-types';
+import '@webb-tools/tangle-substrate-types';
 
-import { ApiPromise } from '@polkadot/api';
-import { Option } from '@polkadot/types';
+import type { ApiPromise } from '@polkadot/api';
+import type { Option } from '@polkadot/types';
 import {
   PalletAssetRegistryAssetDetails,
   PalletAssetRegistryAssetMetadata,
 } from '@polkadot/types/lookup';
 import { ChainType, parseTypedChainId } from '@webb-tools/sdk-core';
-
-import { ChainAddressConfig } from '../../anchors';
+import type { ChainAddressConfig } from '../../anchors';
 import { chainsConfig } from '../../chains';
 import { DEFAULT_DECIMALS, DEFAULT_NATIVE_INDEX } from '../../constants';
 import { CurrencyConfig } from '../../currencies';
-import { ICurrency } from '../../types';
-import { CurrencyResponse, OnChainConfigBase } from '../on-chain-config-base';
+import type { ICurrency } from '../../types';
+import {
+  OnChainConfigBase,
+  type CurrencyResponse,
+} from '../on-chain-config-base';
 
 // the singleton instance of the EVM on-chain config with lazy initialization
 let SubstrateOnChainConfigInstance: SubstrateOnChainConfig;
 
-// Cache the currencies config
-let cachedCurrenciesConfig: {
-  currenciesConfig: Record<number, CurrencyConfig>;
-  fungibleToWrappableMap: Map<number, Map<number, Set<number>>>;
-  anchorConfig: Record<number, ChainAddressConfig>;
-};
-
 export class SubstrateOnChainConfig extends OnChainConfigBase {
   private constructor() {
     super();
@@ -338,7 +334,7 @@ export class SubstrateOnChainConfig extends OnChainConfigBase {
       existedFungibleToWrappableMap,
       existedAnchorConfig
     );
-    cachedCurrenciesConfig = config;
+
     return config;
   }
 }
diff --git a/libs/polkadot-api-provider/src/ext-provider/polkadot-provider.ts b/libs/polkadot-api-provider/src/ext-provider/polkadot-provider.ts
index 08908c4b79..6d4aaf861a 100644
--- a/libs/polkadot-api-provider/src/ext-provider/polkadot-provider.ts
+++ b/libs/polkadot-api-provider/src/ext-provider/polkadot-provider.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import '@webb-tools/protocol-substrate-types';
+import '@webb-tools/tangle-substrate-types';
 
 import { ApiPromise, WsProvider } from '@polkadot/api';
 import {
diff --git a/libs/polkadot-api-provider/src/mt-utils.ts b/libs/polkadot-api-provider/src/mt-utils.ts
index 9616758045..bb4cd085f9 100644
--- a/libs/polkadot-api-provider/src/mt-utils.ts
+++ b/libs/polkadot-api-provider/src/mt-utils.ts
@@ -1,7 +1,4 @@
-import '@webb-tools/protocol-substrate-types';
-
 import { Note } from '@webb-tools/sdk-core';
-
 import { ApiPromise } from '@polkadot/api';
 import { hexToU8a, u8aToHex } from '@polkadot/util';
 
diff --git a/libs/polkadot-api-provider/src/webb-provider.ts b/libs/polkadot-api-provider/src/webb-provider.ts
index 2c33cf7b1b..5c3da4fd03 100644
--- a/libs/polkadot-api-provider/src/webb-provider.ts
+++ b/libs/polkadot-api-provider/src/webb-provider.ts
@@ -1,7 +1,7 @@
 // Copyright 2022 @webb-tools/
 // SPDX-License-Identifier: Apache-2.0
 import '@webb-tools/api-derive';
-import '@webb-tools/protocol-substrate-types';
+import '@webb-tools/tangle-substrate-types';
 
 import {
   ApiInitHandler,
diff --git a/libs/polkadot-api-provider/src/webb-provider/bridge-api.ts b/libs/polkadot-api-provider/src/webb-provider/bridge-api.ts
index 9d2563355b..c059fc785d 100644
--- a/libs/polkadot-api-provider/src/webb-provider/bridge-api.ts
+++ b/libs/polkadot-api-provider/src/webb-provider/bridge-api.ts
@@ -2,7 +2,7 @@
 // Copyright 2022 @webb-tools/
 // SPDX-License-Identifier: Apache-2.0
 
-import '@webb-tools/protocol-substrate-types';
+import '@webb-tools/tangle-substrate-types';
 
 import { Currency } from '@webb-tools/abstract-api-provider';
 import { BridgeApi } from '@webb-tools/abstract-api-provider';
diff --git a/libs/polkadot-api-provider/src/webb-provider/crowdloan.ts b/libs/polkadot-api-provider/src/webb-provider/crowdloan.ts
index 4be49b686a..014eca1b3f 100644
--- a/libs/polkadot-api-provider/src/webb-provider/crowdloan.ts
+++ b/libs/polkadot-api-provider/src/webb-provider/crowdloan.ts
@@ -9,7 +9,7 @@ import {
   CrowdloanFundInfo,
 } from '@webb-tools/abstract-api-provider/crowdloan';
 import { WebbError, WebbErrorCodes } from '@webb-tools/dapp-types/WebbError';
-import '@webb-tools/protocol-substrate-types';
+import '@webb-tools/tangle-substrate-types';
 
 import { LoggerService } from '@webb-tools/app-util';
 
diff --git a/libs/polkadot-api-provider/src/webb-provider/ecdsa-claims.ts b/libs/polkadot-api-provider/src/webb-provider/ecdsa-claims.ts
index 164ed7d554..929ac04f2c 100644
--- a/libs/polkadot-api-provider/src/webb-provider/ecdsa-claims.ts
+++ b/libs/polkadot-api-provider/src/webb-provider/ecdsa-claims.ts
@@ -1,4 +1,4 @@
-import '@webb-tools/protocol-substrate-types';
+import '@webb-tools/tangle-substrate-types';
 
 import { ECDSAClaims } from '@webb-tools/abstract-api-provider/ecdsa-claims';
 import { WebbError, WebbErrorCodes } from '@webb-tools/dapp-types/WebbError';
diff --git a/libs/polkadot-api-provider/src/webb-provider/wrap-unwrap.ts b/libs/polkadot-api-provider/src/webb-provider/wrap-unwrap.ts
index 96ec56fb5f..cc4927ea6e 100644
--- a/libs/polkadot-api-provider/src/webb-provider/wrap-unwrap.ts
+++ b/libs/polkadot-api-provider/src/webb-provider/wrap-unwrap.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import '@webb-tools/api-derive';
-import '@webb-tools/protocol-substrate-types';
+import '@webb-tools/tangle-substrate-types';
 
 import {
   Amount,
diff --git a/libs/react-hooks/src/types.ts b/libs/react-hooks/src/types.ts
index 878e8ef7e8..094ee87923 100644
--- a/libs/react-hooks/src/types.ts
+++ b/libs/react-hooks/src/types.ts
@@ -6,11 +6,7 @@
 // TODO: Resolve the below issue with new types package.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import {
-  AccountId,
-  CurrencyId,
-  // @ts-ignore
-} from '@webb-tools/protocol-substrate-types/interfaces';
+import { AccountId, CurrencyId } from '@webb-tools/tangle-substrate-types';
 
 export type CallParam = any;
 
diff --git a/libs/webb-ui-components/src/components/Accordion/AccordionItem.tsx b/libs/webb-ui-components/src/components/Accordion/AccordionItem.tsx
index adc7015e23..2e36314555 100644
--- a/libs/webb-ui-components/src/components/Accordion/AccordionItem.tsx
+++ b/libs/webb-ui-components/src/components/Accordion/AccordionItem.tsx
@@ -2,7 +2,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { AccordionContentProps, AccordionItemProps } from './types';
+import { AccordionItemProps } from './types';
 
 /**
  * The style wrapper around Radix Accordion, must use inside `<Accordion></Accordion>` tag
diff --git a/libs/webb-ui-components/src/components/AvatarGroup/AvatarGroup.tsx b/libs/webb-ui-components/src/components/AvatarGroup/AvatarGroup.tsx
index 0e4e5557ab..bf694d2d55 100644
--- a/libs/webb-ui-components/src/components/AvatarGroup/AvatarGroup.tsx
+++ b/libs/webb-ui-components/src/components/AvatarGroup/AvatarGroup.tsx
@@ -48,6 +48,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
         <div className="translate-x-1">
           {children.slice(0, max).map((child, index) => {
             return React.cloneElement(child, {
+              key: index,
               ...child.props,
               size: 'md',
               className: 'mx-[-4px] last:mx-0',
diff --git a/libs/webb-ui-components/src/components/Banner/Banner.tsx b/libs/webb-ui-components/src/components/Banner/Banner.tsx
index 43376623bd..45fb57583d 100644
--- a/libs/webb-ui-components/src/components/Banner/Banner.tsx
+++ b/libs/webb-ui-components/src/components/Banner/Banner.tsx
@@ -27,7 +27,6 @@ export const Banner = React.forwardRef<HTMLDivElement, BannerPropsType>(
       buttonText,
       buttonProps,
       buttonClassName: buttonClassNameProp,
-      children,
       className: bannerClassNameProp,
       dappName,
       bannerText,
diff --git a/libs/webb-ui-components/src/components/BridgeInputs/ShieldedAssetInput.tsx b/libs/webb-ui-components/src/components/BridgeInputs/ShieldedAssetInput.tsx
index 904e9cc5c8..0f8b38190d 100644
--- a/libs/webb-ui-components/src/components/BridgeInputs/ShieldedAssetInput.tsx
+++ b/libs/webb-ui-components/src/components/BridgeInputs/ShieldedAssetInput.tsx
@@ -1,5 +1,5 @@
 import { getRoundedAmountString } from '../../utils';
-import { ChevronRight, TokenIcon } from '@webb-tools/icons';
+import { ChevronRight } from '@webb-tools/icons';
 import { Typography } from '../../typography';
 import cx from 'classnames';
 import { forwardRef, useMemo } from 'react';
diff --git a/libs/webb-ui-components/src/components/CopyWithTooltip/CopyWithTooltip.tsx b/libs/webb-ui-components/src/components/CopyWithTooltip/CopyWithTooltip.tsx
index 83f9ca1a1b..9dc504fe35 100644
--- a/libs/webb-ui-components/src/components/CopyWithTooltip/CopyWithTooltip.tsx
+++ b/libs/webb-ui-components/src/components/CopyWithTooltip/CopyWithTooltip.tsx
@@ -1,5 +1,5 @@
 import { FileCopyLine } from '@webb-tools/icons';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useCopyable } from '../../hooks';
 
diff --git a/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx b/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx
index b20ad7baed..b3297434fa 100644
--- a/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx
+++ b/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx
@@ -4,7 +4,7 @@ import {
   TokenIcon,
 } from '@webb-tools/icons';
 import cx from 'classnames';
-import { cloneElement, forwardRef, useEffect } from 'react';
+import { cloneElement, forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Typography } from '../../typography/Typography';
 import numberToString from '../../utils/numberToString';
diff --git a/libs/webb-ui-components/src/components/Input/types.ts b/libs/webb-ui-components/src/components/Input/types.ts
index 881180cd7e..28d84d576b 100644
--- a/libs/webb-ui-components/src/components/Input/types.ts
+++ b/libs/webb-ui-components/src/components/Input/types.ts
@@ -1,5 +1,4 @@
-import { PropsOf, IWebbComponentBase } from '../../types';
-import { EventHandler } from 'react';
+import { IWebbComponentBase, PropsOf } from '../../types';
 
 type OmittedKeys = 'disabled' | 'required' | 'readOnly' | 'size' | 'onChange';
 
diff --git a/libs/webb-ui-components/src/components/KeyCard/KeyCard.tsx b/libs/webb-ui-components/src/components/KeyCard/KeyCard.tsx
index 4de55aeaf1..8dd07a8f82 100644
--- a/libs/webb-ui-components/src/components/KeyCard/KeyCard.tsx
+++ b/libs/webb-ui-components/src/components/KeyCard/KeyCard.tsx
@@ -1,8 +1,7 @@
-import { Typography } from '../../typography';
-import React, { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { Typography } from '../../typography';
 
-import { Button } from '../buttons';
 import { CopyWithTooltip } from '../CopyWithTooltip';
 import { KeyCardProps } from './types';
 
diff --git a/libs/webb-ui-components/src/components/ListCard/RelayerListCard.tsx b/libs/webb-ui-components/src/components/ListCard/RelayerListCard.tsx
index b112d6fb4b..3f003e2c85 100644
--- a/libs/webb-ui-components/src/components/ListCard/RelayerListCard.tsx
+++ b/libs/webb-ui-components/src/components/ListCard/RelayerListCard.tsx
@@ -1,9 +1,10 @@
 import { ExternalLinkLine, Search } from '@webb-tools/icons';
 import cx from 'classnames';
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { Typography } from '../../typography';
 import { shortenString } from '../../utils';
 
+import { getFlexBasic } from '@webb-tools/icons/utils';
 import { Avatar } from '../Avatar';
 import { Input } from '../Input';
 import { RadioGroup, RadioItem } from '../Radio';
@@ -12,7 +13,6 @@ import { Button } from '../buttons';
 import { ListCardWrapper } from './ListCardWrapper';
 import { ListItem } from './ListItem';
 import { RelayerListCardProps } from './types';
-import { getFlexBasic } from '@webb-tools/icons/utils';
 
 /**
  * The relayer list card component
diff --git a/libs/webb-ui-components/src/components/Notification/NotificationContext.tsx b/libs/webb-ui-components/src/components/Notification/NotificationContext.tsx
index c9db5300c2..2af3540cf6 100644
--- a/libs/webb-ui-components/src/components/Notification/NotificationContext.tsx
+++ b/libs/webb-ui-components/src/components/Notification/NotificationContext.tsx
@@ -18,12 +18,13 @@ export type NotificationContextProps = {
   remove(key: SnackbarKey): void;
 };
 
-export const NotificationCTXDefaultValue = {
-  addToQueue(opts: Omit<SnackBarOpts, 'close'>): SnackbarKey {
+export const NotificationCTXDefaultValue: NotificationContextProps = {
+  addToQueue(): SnackbarKey {
     return 0;
   },
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  remove(key: SnackbarKey) {},
-};
+  remove() {
+    // do nothing
+  },
+} as const satisfies NotificationContextProps;
 export const NotificationContext =
   React.createContext<NotificationContextProps>(NotificationCTXDefaultValue);
diff --git a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx
index 315687a299..78c93316f8 100644
--- a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx
+++ b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import { WebbLogoIcon, TangleIcon } from '@webb-tools/icons';
+import { TangleIcon, WebbLogoIcon } from '@webb-tools/icons';
 import cx from 'classnames';
-import { FC, forwardRef, useState } from 'react';
+import { FC, forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import useLocalStorageState from 'use-local-storage-state';
 import { SideBarFooter, SideBarItems, SideBarLogo } from '.';
+import { SIDEBAR_OPEN_KEY } from '../../constants';
 import { LogoProps } from '../Logo/types';
 import { SidebarProps } from './types';
-import { SIDEBAR_OPEN_KEY } from '../../constants';
 
 /**
  * Sidebar Navigation Menu Component
@@ -50,13 +50,9 @@ export const SideBar = forwardRef<HTMLDivElement, SidebarProps>(
       }
     );
 
-    const [isHovering, setIsHovering] = useState(false);
-
     return (
       <div
         className={cx('flex gap-2 top-0 left-0 z-50 relative', className)}
-        onMouseEnter={() => setIsHovering(true)}
-        onMouseLeave={() => setIsHovering(false)}
         {...props}
         ref={ref}
       >
diff --git a/libs/webb-ui-components/src/components/Slider/Slider.tsx b/libs/webb-ui-components/src/components/Slider/Slider.tsx
index 6f2a0f489a..dbc5a58a0d 100644
--- a/libs/webb-ui-components/src/components/Slider/Slider.tsx
+++ b/libs/webb-ui-components/src/components/Slider/Slider.tsx
@@ -1,6 +1,6 @@
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import cx from 'classnames';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { SliderProps, SliderThumbProps } from './types';
diff --git a/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx b/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx
index be9fab0245..3b28d38d7e 100644
--- a/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx
+++ b/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx
@@ -1,6 +1,5 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import cx from 'classnames';
-import { cloneElement, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { TooltipBodyProps, TooltipProps, TooltipTriggerProps } from './types';
diff --git a/libs/webb-ui-components/src/components/WebsiteFooter/WebsiteFooter.tsx b/libs/webb-ui-components/src/components/WebsiteFooter/WebsiteFooter.tsx
index f88eac652a..df569aac0b 100644
--- a/libs/webb-ui-components/src/components/WebsiteFooter/WebsiteFooter.tsx
+++ b/libs/webb-ui-components/src/components/WebsiteFooter/WebsiteFooter.tsx
@@ -1,22 +1,13 @@
-import {
-  Common2Icon,
-  DiscordFill,
-  GithubFill,
-  LinkedInFill,
-  TelegramFill,
-  TwitterFill,
-  YouTubeFill,
-} from '@webb-tools/icons';
 import { IconBase } from '@webb-tools/icons/types';
+import capitalize from 'lodash/capitalize';
 import Link from 'next/link';
 import { ComponentProps, useState } from 'react';
-import capitalize from 'lodash/capitalize';
 
 import {
   BRIDGE_URL,
+  DKG_STATS_URL,
   SOCIAL_ICONS_RECORD,
   SOCIAL_URLS_RECORD,
-  DKG_STATS_URL,
   TANGLE_MKT_URL,
   WEBB_AVAIABLE_SOCIALS,
   WEBB_CAREERS_URL,
diff --git a/libs/webb-ui-components/src/containers/ConfirmationCard/DepositConfirm.tsx b/libs/webb-ui-components/src/containers/ConfirmationCard/DepositConfirm.tsx
index ab956e76f1..1577b1fb09 100644
--- a/libs/webb-ui-components/src/containers/ConfirmationCard/DepositConfirm.tsx
+++ b/libs/webb-ui-components/src/containers/ConfirmationCard/DepositConfirm.tsx
@@ -57,18 +57,6 @@ export const DepositConfirm = forwardRef<HTMLDivElement, DepositConfirmProps>(
       return `${formatedAmount} ${symbolStr}`;
     }, [amount, fungibleTokenSymbol, wrappableTokenSymbol]);
 
-    const feeContent = useMemo(() => {
-      if (typeof fee === 'number' || typeof fee === 'string') {
-        const formatedFee =
-          typeof fee === 'number'
-            ? getRoundedAmountString(fee, 3, { roundingFunction: Math.round })
-            : fee;
-        return `${formatedFee} ${feeToken ?? ''}`;
-      }
-
-      return '--';
-    }, [fee, feeToken]);
-
     return (
       <div
         {...props}
diff --git a/libs/webb-ui-components/src/containers/DepositCard/DepositCard.tsx b/libs/webb-ui-components/src/containers/DepositCard/DepositCard.tsx
index ce02b4e8ab..a1fbd426ab 100644
--- a/libs/webb-ui-components/src/containers/DepositCard/DepositCard.tsx
+++ b/libs/webb-ui-components/src/containers/DepositCard/DepositCard.tsx
@@ -7,10 +7,9 @@ import {
   BridgeInputGroup,
   Button,
   ChainInput,
+  ConnectWalletMobileButton,
   InfoItem,
   TokenInput,
-  ConnectWalletMobileButton,
-  Alert,
 } from '../../components';
 import { useCheckMobile } from '../../hooks';
 import { getRoundedAmountString } from '../../utils';
@@ -35,7 +34,7 @@ export const DepositCard = forwardRef<HTMLDivElement, DepositCardProps>(
     ref
   ) => {
     const { isMobile } = useCheckMobile();
-    const { amount, fee } = useMemo(() => {
+    const { amount } = useMemo(() => {
       const amount = !amountInputProps.amount
         ? '--'
         : `${getRoundedAmountString(Number(amountInputProps.amount), 3, {
@@ -71,7 +70,7 @@ export const DepositCard = forwardRef<HTMLDivElement, DepositCardProps>(
           <BridgeInputGroup className="flex flex-col space-y-2">
             <ChainInput {...sourceChainProps} chainType="source" />
 
-            <div className="hidden lg:flex space-x-2">
+            <div className="hidden space-x-2 lg:flex">
               <TokenInput
                 {...tokenInputProps}
                 className="grow shrink-0 basis-1"
@@ -87,7 +86,7 @@ export const DepositCard = forwardRef<HTMLDivElement, DepositCardProps>(
               )}
             </div>
 
-            <div className="flex lg:hidden gap-2">
+            <div className="flex gap-2 lg:hidden">
               <TokenInput title="Deposit" className="grow shrink-0 basis-1" />
               <TokenInput
                 title="Shielded Pool"
diff --git a/package.json b/package.json
index 4a128eb885..84a2186820 100644
--- a/package.json
+++ b/package.json
@@ -212,8 +212,8 @@
     "@webb-tools/app-util": "0.1.4-126",
     "@webb-tools/contracts": "0.5.47",
     "@webb-tools/interfaces": "0.5.47",
-    "@webb-tools/protocol-substrate-types": "0.0.10",
     "@webb-tools/sdk-core": "0.1.4-126",
+    "@webb-tools/tangle-substrate-types": "^0.4.4",
     "@webb-tools/test-utils": "0.1.4-126",
     "@webb-tools/tokens": "1.0.8",
     "@webb-tools/utils": "0.5.39",
diff --git a/tools/scripts/utils/on-chain-utils/fetchAnchorMetadata.ts b/tools/scripts/utils/on-chain-utils/fetchAnchorMetadata.ts
index 8af74de2d7..99d6b92f56 100644
--- a/tools/scripts/utils/on-chain-utils/fetchAnchorMetadata.ts
+++ b/tools/scripts/utils/on-chain-utils/fetchAnchorMetadata.ts
@@ -18,7 +18,7 @@ import {
   ZERO_BIG_INT,
 } from '@webb-tools/dapp-config/src/constants';
 import { AnchorMetadata, ICurrency } from '@webb-tools/dapp-config/src/types';
-import '@webb-tools/protocol-substrate-types';
+import '@webb-tools/tangle-substrate-types';
 import { ResourceId } from '@webb-tools/sdk-core/proposals/ResourceId.js';
 import { hexToU8a, u8aToHex } from '@webb-tools/utils';
 import getViemClient from '@webb-tools/web3-api-provider/src/utils/getViemClient';
diff --git a/yarn.lock b/yarn.lock
index 647944602d..a6f2080db8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11156,6 +11156,42 @@
     ffjavascript "^0.2.57"
     snarkjs "^0.6.10"
 
+"@webb-tools/tangle-substrate-types@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@webb-tools/tangle-substrate-types/-/tangle-substrate-types-0.4.4.tgz#a2ded83f17877e6f5b81243890e200b793807004"
+  integrity sha512-gSfYO8Qk0NnBcOUemUsOvg5X70mLg/6MBmQjIkncI6HJSzPWp84nePvtx1H8fk9YE/X8PDpftTNoa50amyrPMQ==
+  dependencies:
+    "@babel/cli" "^7.20.7"
+    "@babel/core" "^7.20.12"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
+    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
+    "@babel/plugin-proposal-optional-chaining" "^7.20.7"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.20.0"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-transform-regenerator" "^7.20.5"
+    "@babel/plugin-transform-runtime" "^7.19.6"
+    "@babel/preset-env" "^7.20.2"
+    "@babel/preset-react" "^7.18.6"
+    "@babel/preset-typescript" "^7.18.6"
+    "@babel/register" "^7.18.9"
+    "@babel/runtime" "^7.20.13"
+    "@open-web3/orml-types" "^1.1.3"
+    "@polkadot/api-derive" "10.3.2"
+    "@polkadot/dev" "^0.72.42"
+    "@polkadot/typegen" "10.3.2"
+    "@polkadot/types" "10.3.2"
+    babel-jest "^29.4.1"
+    babel-plugin-module-extension-resolver "^1.0.0"
+    babel-plugin-module-resolver "^5.0.0"
+    babel-plugin-styled-components "^2.0.7"
+    fs-extra "^11.1.1"
+    glob2base "^0.0.12"
+    minimatch "^7.4.2"
+    mkdirp "^2.1.5"
+
 "@webb-tools/test-utils@0.1.4-126":
   version "0.1.4-126"
   resolved "https://registry.yarnpkg.com/@webb-tools/test-utils/-/test-utils-0.1.4-126.tgz#a6d829cd256a339423b27587b93ccc6454bd0d25"