Client Side Fetching for Tangle dApp (#1849)

Co-authored-by: Pavan Soratur <[email protected]>

apps/bridge-dapp/src/containers/WalletModalContainer/WalletModalContainer.tsx

@@ -2,7 +2,8 @@ import {
   useConnectWallet,
   useWebContext,
 } from '@webb-tools/api-provider-environment';
-import { useWebbUI, WalletModal } from '@webb-tools/webb-ui-components';
+import getPlatformMetaData from '@webb-tools/browser-utils/platform/getPlatformMetaData';
+import { WalletModal, useWebbUI } from '@webb-tools/webb-ui-components';
 
 export const WalletModalContainer = () => {
   const {
@@ -24,6 +25,7 @@ export const WalletModalContainer = () => {
   return (
     <WalletModal
       connectingWalletId={connectingWalletId}
+      platformId={getPlatformMetaData()?.id ?? null}
       failedWalletId={failedWalletId}
       isModalOpen={isModalOpen}
       resetState={resetState}

apps/tangle-dapp/app/layout.tsx

@@ -13,7 +13,11 @@ export const metadata: Metadata = {
     template: 'Tangle Dapp | %s',
   },
   description: 'Welcome to Tangle Dapp!',
-  metadataBase: process.env.URL ? new URL(process.env.URL) : null,
+  metadataBase: process.env.URL
+    ? new URL(process.env.URL)
+    : process.env.PORT != null
+    ? new URL(`http://localhost:${process.env.PORT}`)
+    : null,
   openGraph: {
     title: 'Tangle Dapp',
     description: 'Welcome to Tangle Dapp!',

apps/tangle-dapp/app/page.tsx

@@ -2,7 +2,7 @@ import { Typography } from '@webb-tools/webb-ui-components';
 
 import {
   HeaderChipsContainer,
-  KeyMetricsTableContainer,
+  KeyStatsContainer,
   NominatorStatsContainer,
   ValidatorTablesContainer,
 } from '../containers';
@@ -19,7 +19,7 @@ export default async function Index() {
       </div>
 
       <div className="mt-12">
-        <KeyMetricsTableContainer />
+        <KeyStatsContainer />
       </div>
 
       <div className="mt-12">

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

@@ -0,0 +1,28 @@
+'use client';
+
+import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
+
+import getRoundedDownNumberWith2Decimals from '../../utils/getRoundedDownNumberWith2Decimals';
+import dataHooks from './dataHooks';
+import type { HeaderChipItemProps } from './types';
+
+type Props = Pick<HeaderChipItemProps, 'label'>;
+
+const ChipText = ({ label }: Props) => {
+  const { isLoading, error, data } = dataHooks[label]();
+
+  return (
+    <>
+      {label}:{' '}
+      {isLoading ? (
+        <SkeletonLoader className="w-[100px]" />
+      ) : error ? (
+        'Error'
+      ) : data === null ? null : (
+        getRoundedDownNumberWith2Decimals(data)
+      )}
+    </>
+  );
+};
+
+export default ChipText;

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

@@ -1,34 +1,29 @@
 import {
   Chip,
-  SkeletonLoader,
   Tooltip,
   TooltipBody,
   TooltipTrigger,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import { type FC, Suspense, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import ChipValueClient from './ChipValueClient';
+import ChipText from './ChipText';
 import { HeaderChipItemProps } from './types';
 
 export const HeaderChip: FC<HeaderChipItemProps> = ({
   Icon,
   label,
   hasTooltip = false,
   tooltipContent,
-  dataFetcher,
 }: HeaderChipItemProps) => {
   const mainContent = useMemo(
     () => (
       <Chip color="blue">
         <Icon size="lg" className="stroke-blue-90 dark:stroke-blue-30" />
-        {label}:{' '}
-        <Suspense fallback={<SkeletonLoader className="w-[100px]" />}>
-          <HeaderChipValue label={label} dataFetcher={dataFetcher} />
-        </Suspense>
+        <ChipText label={label} />
       </Chip>
     ),
-    [Icon, label, dataFetcher]
+    [Icon, label]
   );
 
   if (hasTooltip && tooltipContent) {
@@ -44,12 +39,3 @@ export const HeaderChip: FC<HeaderChipItemProps> = ({
 
   return mainContent;
 };
-
-const HeaderChipValue = async ({
-  dataFetcher,
-  label,
-}: Pick<HeaderChipItemProps, 'dataFetcher' | 'label'>) => {
-  const value = await dataFetcher();
-
-  return <ChipValueClient type={label} value={value} />;
-};

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

@@ -8,5 +8,4 @@ export interface HeaderChipItemProps {
   label: ChipType;
   hasTooltip?: boolean;
   tooltipContent?: string;
-  dataFetcher: () => Promise<number | undefined>;
 }