From 55e7581a3c97b95705b7452295a003f8de441a62 Mon Sep 17 00:00:00 2001
From: Pavan Soratur <pavanvsoratur@gmail.com>
Date: Fri, 1 Sep 2023 09:20:59 -0700
Subject: [PATCH] Stats dApp fixes and adds rotated key status to key timeline
 (#1576)

---
 .../AuthoritiesTable/AuthoritiesTable.tsx     | 19 ++++++---
 .../src/containers/KeyDetail/KeyDetail.tsx    | 39 -------------------
 .../src/provider/hooks/useAuthorities.ts      |  2 +-
 .../TitleWithInfo/TitleWithInfo.tsx           |  2 +-
 .../src/components/Tooltip/Tooltip.tsx        |  3 +-
 5 files changed, 16 insertions(+), 49 deletions(-)

diff --git a/apps/stats-dapp/src/containers/AuthoritiesTable/AuthoritiesTable.tsx b/apps/stats-dapp/src/containers/AuthoritiesTable/AuthoritiesTable.tsx
index 215c97a827..4bea3f72a6 100644
--- a/apps/stats-dapp/src/containers/AuthoritiesTable/AuthoritiesTable.tsx
+++ b/apps/stats-dapp/src/containers/AuthoritiesTable/AuthoritiesTable.tsx
@@ -40,6 +40,7 @@ import { FC, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { AuthoritiesTableProps } from './types';
 import { CountryIcon } from '../../components/CountryIcon/CountryIcon';
+import { Spinner } from '@webb-tools/icons';
 
 const columnHelper = createColumnHelper<AuthorityListItem>();
 
@@ -266,12 +267,18 @@ export const AuthoritiesTable: FC<AuthoritiesTableProps> = ({
         </Filter>
       }
     >
-      <Table
-        tableProps={table as RTTable<unknown>}
-        isPaginated
-        totalRecords={totalItems}
-        title="DKG Authorities"
-      />
+      {!authorities.isLoading ? (
+        <Table
+          tableProps={table as RTTable<unknown>}
+          isPaginated
+          totalRecords={totalItems}
+          title="DKG Authorities"
+        />
+      ) : (
+        <div className="h-[400px] flex items-center flex-col justify-center">
+          <Spinner size="xl" />
+        </div>
+      )}
     </CardTable>
   );
 };
diff --git a/apps/stats-dapp/src/containers/KeyDetail/KeyDetail.tsx b/apps/stats-dapp/src/containers/KeyDetail/KeyDetail.tsx
index 8727411fe4..667f3df2ea 100644
--- a/apps/stats-dapp/src/containers/KeyDetail/KeyDetail.tsx
+++ b/apps/stats-dapp/src/containers/KeyDetail/KeyDetail.tsx
@@ -236,14 +236,6 @@ export const KeyDetail = forwardRef<HTMLDivElement, KeyDetailProps>(
                       time={at}
                       blockHash={hash}
                       externalUrl={POLKADOT_EXPLORER_URL + hash}
-                      extraContent={
-                        <div className="flex items-center space-x-2">
-                          {/* <KeyValueWithButton
-                            keyValue={keyDetail.uncompressed}
-                            size="sm"
-                          /> */}
-                        </div>
-                      }
                     />
                   );
                 }
@@ -256,37 +248,6 @@ export const KeyDetail = forwardRef<HTMLDivElement, KeyDetailProps>(
                       time={at}
                       blockHash={hash}
                       externalUrl={POLKADOT_EXPLORER_URL + hash}
-                      extraContent={
-                        <div className="flex items-center space-x-4">
-                          <LabelWithValue
-                            label="Height"
-                            value={keyDetail.height}
-                          />
-                          {/** TODO: Proposal type */}
-                          <LabelWithValue
-                            label="Proposal"
-                            value="KeyRotation"
-                          />
-                          {keyDetail.authorities.length && (
-                            <LabelWithValue
-                              label="Proposers"
-                              value={
-                                <AvatarGroup
-                                  total={keyDetail.authorities.length}
-                                >
-                                  {keyDetail.authorities.map((author, idx) => (
-                                    <Avatar
-                                      key={author.id}
-                                      value={author.account}
-                                      sourceVariant="address"
-                                    />
-                                  ))}
-                                </AvatarGroup>
-                              }
-                            />
-                          )}
-                        </div>
-                      }
                     />
                   );
                 }
diff --git a/apps/stats-dapp/src/provider/hooks/useAuthorities.ts b/apps/stats-dapp/src/provider/hooks/useAuthorities.ts
index b208261a2e..7efe23f5fb 100644
--- a/apps/stats-dapp/src/provider/hooks/useAuthorities.ts
+++ b/apps/stats-dapp/src/provider/hooks/useAuthorities.ts
@@ -468,7 +468,7 @@ export function useAuthority(pageQuery: AuthorityQuery): AuthorityDetails {
               return {
                 id: publicKey.id,
                 session: session && session.id ? session.id : '',
-                publicKey: '', // publicKey.uncompressed!
+                publicKey: publicKey.compressed ?? '',
                 height: `${publicKey.block?.number ?? '-'}`,
                 authority: {
                   count: session.sessionValidators.totalCount,
diff --git a/libs/webb-ui-components/src/components/TitleWithInfo/TitleWithInfo.tsx b/libs/webb-ui-components/src/components/TitleWithInfo/TitleWithInfo.tsx
index 180107e10f..d367040cda 100644
--- a/libs/webb-ui-components/src/components/TitleWithInfo/TitleWithInfo.tsx
+++ b/libs/webb-ui-components/src/components/TitleWithInfo/TitleWithInfo.tsx
@@ -54,7 +54,7 @@ export const TitleWithInfo = forwardRef<HTMLDivElement, TitleWithInfoProps>(
             </TooltipTrigger>
             <TooltipBody>
               {typeof info === 'string' ? (
-                <Typography variant={'body3'} className="break-normal">
+                <Typography variant={'body1'} className="break-normal">
                   {info}
                 </Typography>
               ) : (
diff --git a/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx b/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx
index 23009707b1..162a174272 100644
--- a/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx
+++ b/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx
@@ -36,13 +36,12 @@ export const TooltipBody: React.FC<TooltipBodyProps> = ({
           'bg-mono-20 dark:bg-mono-160',
           'webb-shadow-sm'
         )}
-        side="bottom"
         {...props}
       >
         <TooltipPrimitive.Arrow className="fill-current text-mono-20 dark:text-mono-160 webb-shadow-sm" />
         <div
           className={twMerge(
-            'text-mono-140 dark:text-mono-80 font-normal',
+            'body4 text-mono-140 dark:text-mono-80 font-normal',
             className
           )}
         >