DKG Stats UI Fixes/ Improvements (#1560)

Co-authored-by: Trung-Tin Pham <[email protected]>
tangle-network · Aug 23, 2023 · ee60e32 · ee60e32
1 parent c4b2069
commit ee60e32
Show file tree

Hide file tree

Showing 13 changed files with 31 additions and 32 deletions.
diff --git a/apps/stats-dapp/src/components/Header/Header.tsx b/apps/stats-dapp/src/components/Header/Header.tsx
@@ -3,6 +3,7 @@ import {
   logoConfig,
   headerNavs,
   NetworkType,
+  STATS_DOCUS_URL,
 } from '@webb-tools/webb-ui-components/constants';
 import {
   Button,
@@ -92,7 +93,7 @@ export const Header: FC<HeaderProps> = ({
                   className="px-4 py-3.5 border-b border-mono-40 dark:border-mono-140 hover:bg-mono-0  dark:hover:bg-mono-180"
                   icon={<BookOpenLineIcon size="lg" />}
                   onClick={() => {
-                    window.open('https://docs.webb.tools', '_blank');
+                    window.open(STATS_DOCUS_URL, '_blank');
                   }}
                 >
                   <Typography variant="label" fw="bold">

diff --git a/apps/stats-dapp/src/containers/AuthorityDetail/AuthorityDetail.tsx b/apps/stats-dapp/src/containers/AuthorityDetail/AuthorityDetail.tsx
@@ -411,14 +411,14 @@ const DetailsView: FC<{
               </div>
 
               <Progress
-                value={stats.uptime}
+                value={parseFloat(stats.uptime.toFixed(2))}
                 size="lg"
                 prefixLabel="UPTIME "
                 suffixLabel="%"
               />
 
               <Progress
-                value={stats.reputation}
+                value={parseFloat(stats.reputation.toFixed(2))}
                 size="lg"
                 prefixLabel="REPUTATION "
                 suffixLabel="%"

diff --git a/apps/stats-dapp/src/containers/KeyDetail/KeyDetail.tsx b/apps/stats-dapp/src/containers/KeyDetail/KeyDetail.tsx
@@ -327,11 +327,13 @@ export const KeyDetail = forwardRef<HTMLDivElement, KeyDetailProps>(
             )}
           >
             <Typography variant="h4" fw="bold" className="block">
-              {keyDetail.numberOfValidators}
-            </Typography>
-            <Typography variant="body1" fw="bold" className="block">
-              {keyDetail.numberOfValidators > 1 ? 'Authorities' : 'Authority'}
+              {keyDetail.numberOfValidators ?? '--'}
             </Typography>
+            {typeof keyDetail.numberOfValidators === 'number' && (
+              <Typography variant="body1" fw="bold" className="block">
+                {keyDetail.numberOfValidators > 1 ? 'Authorities' : 'Authority'}
+              </Typography>
+            )}
           </div>
         </div>
 

diff --git a/apps/stats-dapp/src/containers/ProposalDetail/ProposalDetail.tsx b/apps/stats-dapp/src/containers/ProposalDetail/ProposalDetail.tsx
@@ -60,7 +60,7 @@ export const ProposalDetail = () => {
   useEffect(() => {
     const proposalIds = localStorage.getItem('proposalIds');
     if (proposalIds) {
-      setProposalIds(JSON.parse(proposalIds));
+      setProposalIds(JSON.parse(proposalIds).reverse());
     }
   }, [proposalBatchId]);
 

diff --git a/apps/stats-dapp/src/pages/Authorities.tsx b/apps/stats-dapp/src/pages/Authorities.tsx
@@ -127,14 +127,12 @@ const Authorities = () => {
       {
         titleProps: {
           title: 'Keygen',
-          info: 'Keygen',
         },
         value: threshold?.keyGen ?? 'loading..',
       },
       {
         titleProps: {
           title: 'Signature',
-          info: 'Signature',
         },
         value: threshold?.signature ?? 'loading..',
       },
@@ -167,7 +165,7 @@ const Authorities = () => {
       <Card>
         <TitleWithInfo
           title="Network Thresholds"
-          info="Network Thresholds"
+          info="Minimum participants needed for key generation (keygen) and signing a valid signature in Distributed Key Generation (DKG)."
           variant="h5"
         />
 
@@ -194,7 +192,11 @@ const Authorities = () => {
                 <Typography variant="body2" fw="semibold">
                   /
                 </Typography>
-                <KeyValueWithButton size="sm" keyValue={publicKey.compressed} />
+                <KeyValueWithButton
+                  size="sm"
+                  label="key:"
+                  keyValue={publicKey.compressed}
+                />
               </div>
 
               <Button variant="link" size="sm">

diff --git a/apps/stats-dapp/src/pages/Proposals.tsx b/apps/stats-dapp/src/pages/Proposals.tsx
@@ -14,14 +14,12 @@ const Proposals = () => {
       {
         titleProps: {
           title: 'Proposal Threshold',
-          info: 'Proposal Threshold',
         },
         value: proposerThreshold,
       },
       {
         titleProps: {
           title: 'Proposers',
-          info: 'Proposers',
         },
         value: proposerCount,
       },
@@ -34,7 +32,7 @@ const Proposals = () => {
         <TitleWithInfo
           title="Proposals Status"
           variant="h5"
-          info="Proposals Status"
+          info="Minimum votes (as set by the 'Proposal Threshold') from the 'Proposers' needed to pass a proposal to DKG for signing."
         />
 
         <Stats items={statsItems} />

diff --git a/apps/stats-dapp/src/utils/getProposalsData.ts b/apps/stats-dapp/src/utils/getProposalsData.ts
@@ -26,17 +26,6 @@ export function getProposalsData(
   const bytes = hexToU8a(data);
 
   switch (propType) {
-    case ProposalType.AnchorCreate: {
-      const decoded = AnchorCreateProposal.fromBytes(bytes);
-      return {
-        encodedCall: decoded.encodedCall,
-        functionSignature: u8aToHex(decoded.header.functionSignature),
-        nonce: String(decoded.header.nonce),
-        chainType: String(decoded.header.resourceId.chainType),
-        chainId: String(decoded.header.resourceId.chainId),
-        targetSystem: u8aToHex(decoded.header.resourceId.targetSystem),
-      };
-    }
     case ProposalType.AnchorUpdate: {
       const decoded = AnchorUpdateProposal.fromBytes(bytes);
       return {

diff --git a/libs/webb-ui-components/src/components/Avatar/Avatar.tsx b/libs/webb-ui-components/src/components/Avatar/Avatar.tsx
@@ -85,6 +85,9 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
           size={getAvatarSizeInPx(size)}
           value={valueAddress}
           theme={theme}
+          style={{
+            cursor: 'auto',
+          }}
         />
       )}
 

diff --git a/libs/webb-ui-components/src/components/Filter/Filter.tsx b/libs/webb-ui-components/src/components/Filter/Filter.tsx
@@ -32,7 +32,10 @@ export const Filter = forwardRef<HTMLDivElement, FilterProps>(
           className="font-bold"
         />
 
-        <DropdownBody className="py-2 min-w-[300px]" size="sm">
+        <DropdownBody
+          className="py-2 min-w-[300px] bg-mono-0 dark:bg-mono-180"
+          size="sm"
+        >
           {/** Title */}
           <div className="flex items-center justify-between px-4 py-2">
             <Typography variant="h5" fw="bold">

diff --git a/libs/webb-ui-components/src/components/KeyStatusCard/KeyStatusCard.tsx b/libs/webb-ui-components/src/components/KeyStatusCard/KeyStatusCard.tsx
@@ -82,7 +82,7 @@ export const KeyStatusCard: React.FC<KeyStatusCardProps> = ({
         </AvatarGroup>
         <Link to={fullDetailUrl}>
           <Button variant="link" as="span" size="sm">
-            See full details
+            View Details
           </Button>
         </Link>
       </div>

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={'body1'} className="break-normal">
+                <Typography variant={'body3'} 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
@@ -1,8 +1,6 @@
 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';
 
 /**
@@ -38,12 +36,13 @@ 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(
-            'body4 text-mono-140 dark:text-mono-80 font-normal',
+            'text-mono-140 dark:text-mono-80 font-normal',
             className
           )}
         >

diff --git a/libs/webb-ui-components/src/constants/index.ts b/libs/webb-ui-components/src/constants/index.ts
@@ -58,6 +58,8 @@ export const TANGLE_DOCS_URL =
 export const WEBB_DAPP_NEW_ISSUE_URL =
   'https://github.com/webb-tools/webb-dapp/issues/new/choose';
 export const WEBB_FAUCET_URL = 'https://faucet.webb.tools/';
+export const STATS_DOCUS_URL =
+  'https://docs.webb.tools/docs/projects/stats-dapp/overview/';
 
 export const webbNetworks: webbNetworksType[] = [
   {