chore: adds seo to dkg stats-dapp

apps/stats-dapp/src/containers/Layout/Layout.tsx

@@ -138,31 +138,23 @@ export const Layout: FC<PropsWithChildren> = ({ children }) => {
   );
 
   return (
-    <div
-      className={cx(
-        'flex flex-col min-h-screen',
-        "bg-[url('assets/stats-bg.jpeg')] dark:bg-[url('assets/stats-dark-bg.jpeg')]",
-        'bg-no-repeat bg-cover bg-fixed'
-      )}
-    >
+    <div className={cx('w-full mx-auto flex-1 bg-body')}>
       <Header
         selectedNetwork={selectedNetwork}
         setUserSelectedNetwork={setUserSelectedNetwork}
         selectedNetworkType={selectedNetworkType}
         setSelectedNetworkType={setSelectedNetworkType}
       />
 
-      <div className="flex-1 overflow-hidden">
-        <ApolloProvider client={apolloClient}>
-          <StatsProvider
-            subqueryEndpoint={subqueryEndpoint}
-            polkadotEndpoint={polkadotEndpoint}
-          >
-            <NavBoxInfoContainer />
-            <main className="max-w-[1160px] mx-auto">{children}</main>
-          </StatsProvider>
-        </ApolloProvider>
-      </div>
+      <ApolloProvider client={apolloClient}>
+        <StatsProvider
+          subqueryEndpoint={subqueryEndpoint}
+          polkadotEndpoint={polkadotEndpoint}
+        >
+          <NavBoxInfoContainer />
+          <main className="max-w-[1160px] mx-auto">{children}</main>
+        </StatsProvider>
+      </ApolloProvider>
 
       <div className="max-w-[1160px] mx-auto">
         <Footer logoType="tangle" />

apps/stats-dapp/src/index.tsx

@@ -1,3 +1,4 @@
+import './styles.css';
 import '@webb-tools/webb-ui-components/tailwind.css';
 import * as Sentry from '@sentry/react';
 import { BrowserTracing } from '@sentry/tracing';

apps/stats-dapp/src/provider/hooks/useAuthorities.ts

@@ -301,7 +301,7 @@ export function useAuthorities(
 
   const authoritiesUptime = useAuthorityUptimesQuery({
     pollInterval: 1000,
-    fetchPolicy: 'network-only',
+    fetchPolicy: 'cache-and-network',
   });
 
   const authoritiesUptimes = useMemo(() => {
@@ -385,7 +385,7 @@ export function useAuthorities(
       })
       .subscribe(setAuthorities);
     return () => subscription.unsubscribe();
-  }, [query]);
+  }, [query, authoritiesUptimes, authorityReputations]);
 
   return authorities;
 }
@@ -559,7 +559,7 @@ export function useAuthority(pageQuery: AuthorityQuery): AuthorityDetails {
       })
       .subscribe(setStats);
     return () => subscription.unsubscribe();
-  }, [queryValidatorOfSession]);
+  }, [queryValidatorOfSession, authorityReputations]);
   return useMemo(() => ({ stats, keyGens }), [stats, keyGens]);
 }
 

apps/stats-dapp/src/provider/hooks/useKeys.ts

@@ -23,6 +23,7 @@ import {
   SessionKeyStatus,
   Threshold,
 } from './types';
+import { useReputations } from './useReputation';
 
 /**
  *  Public key shared content
@@ -446,13 +447,15 @@ export function useKey(id: string): PublicKeyDetailsPage {
 
   const authoritiesUptime = useAuthorityUptimesQuery({
     pollInterval: 1000,
-    fetchPolicy: 'network-only',
+    fetchPolicy: 'cache-and-network',
   });
 
   const authoritiesUptimes = useMemo(() => {
     return authoritiesUptime.data?.authorityUpTimes?.nodes;
   }, [authoritiesUptime]);
 
+  const authorityReputations = useReputations();
+
   useEffect(() => {
     call({
       variables: {
@@ -470,7 +473,6 @@ export function useKey(id: string): PublicKeyDetailsPage {
 
   useEffect(() => {
     const subscription = query.observable
-
       .map((res): Loadable<PublicKeyDetails> => {
         if (res.data) {
           const publicKey = res.data.publicKey;
@@ -496,7 +498,10 @@ export function useKey(id: string): PublicKeyDetailsPage {
                 account: auth.id,
                 id: auth.id,
                 location: 'any',
-                reputation: Number(auth.reputation) * Math.pow(10, -7),
+                reputation:
+                  (Number(auth.reputation) /
+                    authorityReputations.highestReputationScore) *
+                  100,
                 uptime: uptime,
               };
             });
@@ -553,7 +558,7 @@ export function useKey(id: string): PublicKeyDetailsPage {
         setKey(val);
       });
     return () => subscription.unsubscribe();
-  }, [callSessionKeys, query, activeSession, sessionHeight, blockTime]);
+  }, [callSessionKeys, query, activeSession, sessionHeight, blockTime, authoritiesUptimes]);
 
   useEffect(() => {
     const subscription = sessionKeysQuery.observable

apps/stats-dapp/src/public/index.html

@@ -2,15 +2,52 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+
+    <title>Tangle Statistics</title>
+
     <link rel="icon" href="./favicon.png" />
-    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
-    <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="./logo.png" />
-    <meta name="description" content="webb statistics" />
-    <meta name="keywords" content="webb, webb network, polkadot, edgeware, substrate, blockchain" />
-    <script defer data-domain="stats.tangle.tools" src="https://plausible.io/js/script.js"></script>
-    <link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
-    <title>Tangle Statistics</title>
+
+    <meta name="theme-color" content="#2B2F40" />
+    <meta
+      name="description"
+      content="A simple interface to view the latest data from Webb Networks, more specifically it provides insight into the Distributed Key Generation (DKG) protocol that runs within Webb based chains such as Tangle Network. The dApp provides visibility into the current state of the DKG protocol, the active key present, the current authorities, signed proposals and more."
+    />
+    <meta
+      name="keywords"
+      content="webb, webb network, hubble bridge, blockchain application, zero knowledge application, blockchain"
+    />
+
+    <link rel="manifest" crossorigin="use-credentials" href="./manifest.json" />
+
+    <meta name="robots" content="index,follow" />
+    <meta content="Webb Developers" property="author" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@webbprotocol" />
+    <meta name="twitter:creator" content="@webbprotocol" />
+    <meta
+      property="og:title"
+      content="Tangle Statistics: Tangle Network DKG Statistics"
+    />
+    <meta
+      property="og:description"
+      content="A simple interface to view the latest data from Webb Networks, more specifically it provides insight into the Distributed Key Generation (DKG) protocol that runs within Webb based chains such as Tangle Network. The dApp provides visibility into the current state of the DKG protocol, the active key present, the current authorities, signed proposals and more."
+    />
+    <meta property="og:url" content="https://stats.tangle.tools" />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="./tangle-seo.jpg" />
+    <meta property="og:image:alt" content="Optimized Og Image Alt" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:site_name" content="Tangle Statistics" />
+
+    <script
+      defer
+      data-domain="stats.tangle.tools"
+      src="https://plausible.io/js/script.js"
+    ></script>
   </head>
 
   <body>

apps/stats-dapp/src/styles.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

apps/stats-dapp/src/utils/getProposalsData.ts

@@ -15,7 +15,6 @@ import {
   WrappingFeeUpdateProposal,
 } from '@webb-tools/proposals';
 import { hexToU8a, u8aToHex } from '@polkadot/util';
-import { AnchorCreateProposal } from '@webb-tools/sdk-core';
 
 export function getProposalsData(
   propType: ProposalType,