Stats dApp fixes and adds rotated key status to key timeline (#1576)

tangle-network · Sep 1, 2023 · 55e7581 · 55e7581
1 parent a006862
commit 55e7581
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 49 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
           )}
         >