Update/fix stats-dapp UI discrepancies Part 1 (#1144)

Co-authored-by: Dustin Brickwood <[email protected]>

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

@@ -1,4 +1,4 @@
-import { useProposal } from '../../provider/hooks';
+import { useProposal, useProposals } from '../../provider/hooks';
 import { useStatsContext } from '../../provider/stats-provider';
 import {
   Button,
@@ -14,22 +14,18 @@ import {
   ArrowRight,
   BlockIcon,
   Close,
-  ExchangeLine,
   Expand,
-  ExternalLinkLine,
   Spinner,
   ChainIcon,
 } from '@webb-tools/icons';
 import { Typography } from '@webb-tools/webb-ui-components/typography';
-import { shortenHex } from '@webb-tools/webb-ui-components/utils';
 import cx from 'classnames';
 import { FC, useCallback, useMemo } from 'react';
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { mapChainIdToLogo } from '../../utils';
-
 import { ProposersTable } from '../ProposersTable';
-
 import { getProposalsData } from '../../utils';
+
 const ProposalData: FC<{ data: Record<string, any> }> = ({ data }) => {
   const knowProposal = useMemo(() => {
     const keys = Object.keys(data);
@@ -45,10 +41,13 @@ const ProposalData: FC<{ data: Record<string, any> }> = ({ data }) => {
 
 export const ProposalDetail = () => {
   const { pathname } = useLocation();
+
   const { proposalId = '' } = useParams<{ proposalId: string }>();
+
   const {
     metaData: { activeSession },
   } = useStatsContext();
+
   const query = useMemo<Parameters<typeof useProposal>>(() => {
     return [
       activeSession,
@@ -61,6 +60,7 @@ export const ProposalDetail = () => {
       },
     ];
   }, [activeSession, proposalId]);
+
   const proposalDetails = useProposal(...query);
 
   const isPage = useMemo(() => {
@@ -71,17 +71,18 @@ export const ProposalDetail = () => {
   const passThreshold = useMemo(() => {
     const proposal = proposalDetails.proposal.val;
     if (proposal) {
-      console.log(proposal, 'proposal');
       if (proposal.abstainPercentage === 100) {
         return proposal.abstainPercentage;
       }
       return proposal.forPercentage;
     }
     return 0;
   }, [proposalDetails]);
+
   const status = useMemo(() => {
     return proposalDetails.proposal.val?.status ?? null;
   }, [proposalDetails]);
+
   const counters = useMemo(() => {
     if (proposalDetails.proposal.val) {
       const details = proposalDetails.proposal.val;
@@ -100,9 +101,12 @@ export const ProposalDetail = () => {
       all: 0,
     };
   }, [proposalDetails]);
+
   const nextProposalId = proposalDetails.nextAndPrevStatus.val?.nextProposalId;
+
   const previousProposalId =
     proposalDetails.nextAndPrevStatus.val?.previousProposalId;
+
   const navigate = useNavigate();
 
   const handleNextProposal = useCallback(() => {
@@ -132,46 +136,23 @@ export const ProposalDetail = () => {
         timeline,
         txHash,
       } = proposalDetails.proposal.val;
-
       return (
         <>
           {/** Height, tx hash and chain data */}
           <div className="flex items-center">
             <LabelWithValue
               className="grow"
-              label="height:"
+              label="Height:"
               value={
                 <span className="flex items-center space-x-1">
                   <BlockIcon size="lg" />
                   <Typography variant="mono1">{height}</Typography>
                 </span>
               }
             />
-
-            <LabelWithValue
-              className="grow"
-              label="tx hash:"
-              value={
-                <span className="flex items-center space-x-1">
-                  <ExchangeLine size="lg" />
-                  <div className="flex items-center space-x-1">
-                    <LabelWithValue
-                      labelVariant="body3"
-                      label="tx hash:"
-                      isHiddenLabel
-                      value={shortenHex(txHash)}
-                      valueTooltip={txHash}
-                    />
-                    <a href="#">
-                      <ExternalLinkLine />
-                    </a>
-                  </div>
-                </span>
-              }
-            />
           </div>
           <LabelWithValue
-            label="chain:"
+            label="Chain:"
             value={
               <span className="flex items-center p-2 space-x-2">
                 <ChainIcon
@@ -234,7 +215,7 @@ export const ProposalDetail = () => {
                 key={`${time.at.toString()}-${idx}`}
                 title={time.status}
                 time={time.at}
-                txHash={time.hash}
+                txHash=""
                 externalUrl="#"
               />
             ))}
@@ -288,10 +269,6 @@ export const ProposalDetail = () => {
           <Typography variant="h4" fw="bold">
             Proposal Details
           </Typography>
-
-          <Button variant="utility" size="sm">
-            Open Governance
-          </Button>
         </div>
 
         <div className="flex items-center space-x-2">

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

@@ -36,7 +36,7 @@ import {
   Divider,
 } from '@webb-tools/webb-ui-components/components';
 import { fuzzyFilter } from '@webb-tools/webb-ui-components/components/Filter/utils';
-import { ExternalLinkLine, TokenIcon } from '@webb-tools/icons';
+import { ChainIcon, ExternalLinkLine, TokenIcon } from '@webb-tools/icons';
 import { shortenHex } from '@webb-tools/webb-ui-components/utils';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -64,24 +64,6 @@ const columns: ColumnDef<ProposalListItem, any>[] = [
     header: 'Type',
   }),
 
-  columnHelper.accessor('txHash', {
-    header: 'Tx Hash',
-    cell: (props) => (
-      <div className="flex items-center space-x-1">
-        <LabelWithValue
-          labelVariant="body3"
-          label="tx hash:"
-          isHiddenLabel
-          value={shortenHex(props.getValue<string>(), 3)}
-          valueTooltip={props.getValue<string>()}
-        />
-        <a href="#">
-          <ExternalLinkLine />
-        </a>
-      </div>
-    ),
-  }),
-
   columnHelper.accessor('proposers', {
     header: 'Proposers',
     cell: (props) => {
@@ -104,7 +86,7 @@ const columns: ColumnDef<ProposalListItem, any>[] = [
     header: 'Chain',
     cell: (props) => {
       const name = mapChainIdToLogo(Number(props.getValue()));
-      return <TokenIcon name={name} size="lg" />;
+      return <ChainIcon name={name} size="lg" />;
     },
   }),
 
@@ -231,12 +213,16 @@ export const ProposalsTable = () => {
   );
 
   const proposalsStats = useProposals(pageQuery);
+
   const data = useMemo(() => {
     if (proposalsStats.val) {
+      const proposalIds = proposalsStats.val.items.map((item) => item.id);
+      localStorage.setItem('proposalIds', JSON.stringify(proposalIds));
       return proposalsStats.val.items;
     }
     return [] as ProposalListItem[];
   }, [proposalsStats]);
+
   useEffect(() => {
     if (proposalsStats.val) {
       setTotalItems(proposalsStats.val.pageInfo.count);

apps/stats-dapp/src/pages/Proposals.tsx

@@ -9,27 +9,22 @@ import { useStatsContext } from '../provider/stats-provider';
 import {
   Button,
   Card,
-  CardTable,
   LabelWithValue,
   Stats,
-  Table,
   TitleWithInfo,
 } from '@webb-tools/webb-ui-components/components';
 import { fuzzyFilter } from '@webb-tools/webb-ui-components/components/Filter/utils';
 import { ExternalLinkLine, TokenIcon } from '@webb-tools/icons';
-import { Typography } from '@webb-tools/webb-ui-components/typography';
 import { shortenHex } from '@webb-tools/webb-ui-components/utils';
 import { ArcElement, Chart as ChartJS, Legend } from 'chart.js';
 import { BigNumber } from 'ethers';
 import React, { useMemo, useState } from 'react';
 import { Link, Outlet } from 'react-router-dom';
-
-import { DonutChartContainer, ProposalsTable, TimeRange } from '../containers';
+import { ProposalsTable, TimeRange } from '../containers';
 import {
   ProposalListItem,
   ProposalStatus,
   useProposalsOverview,
-  useProposalsOvertimeTotalCount,
 } from '../provider/hooks';
 import { mapChainIdToLogo } from '../utils';
 import { StackedAreaChartContainer } from '../containers/StackedAreaChartContainer';
@@ -135,6 +130,7 @@ const Proposals = () => {
     }
     return [] as ProposalListItem[];
   }, [overview]);
+
   const statsMap: Record<ProposalStatus, number> = useMemo(() => {
     if (overview.val) {
       const { accepted, open, rejected, signed } = overview.val.stats;

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

@@ -398,29 +398,46 @@ export function useProposal(
     val: null,
     isFailed: false,
   });
-  const [ensureProposals, ensureProposalsQuery] = useEnsureProposalsLazyQuery();
 
   const [call, query] = useProposalDetailsLazyQuery();
   const { offset, perPage } = votesReqQuery;
   const proposalId = votesReqQuery.filter.proposalId;
   const votes = useVotes(votesReqQuery);
 
+  const [proposalIds, setProposalIds] = useState<string[]>([]);
+
   useEffect(() => {
-    ensureProposals({
-      variables: {
-        ids: [Number(proposalId) - 1, Number(proposalId) + 1].map((i) =>
-          String(i)
-        ),
-      },
-    }).catch((e) => {
+    const ids = localStorage.getItem('proposalIds');
+    if (ids) {
+      setProposalIds(JSON.parse(ids));
+    }
+  }, []);
+
+  useEffect(() => {
+    const index = proposalIds.indexOf(proposalId);
+
+    if (index !== -1) {
+      const itemBefore = proposalIds[index + 1];
+      const itemAfter = proposalIds[index - 1];
+
       setNextAndPrevStatus({
-        val: null,
-        error: e.message,
+        val: {
+          nextProposalId: itemAfter ? String(itemAfter) : null,
+          previousProposalId: itemBefore ? String(itemBefore) : null,
+        },
         isLoading: false,
-        isFailed: true,
+        isFailed: false,
       });
-    });
-  }, [proposalId, ensureProposals]);
+
+      return;
+    } else {
+      setNextAndPrevStatus({
+        val: null,
+        isLoading: true,
+        isFailed: false,
+      });
+    }
+  }, [proposalId, proposalIds]);
 
   useEffect(() => {
     call({
@@ -437,38 +454,7 @@ export function useProposal(
       });
     });
   }, [proposalId, offset, perPage, targetSessionId, call]);
-  useEffect(() => {
-    const subscription = ensureProposalsQuery.observable
-      .map((res): Loadable<NextAndPrevStatus> => {
-        if (res.data && res.data.proposalItems) {
-          const proposals = res.data.proposalItems.nodes.filter(
-            (p) => p !== null
-          );
-          const nextProposalId =
-            proposals.find((p) => Number(p!.id) === Number(proposalId) + 1)
-              ?.id ?? null;
-          const previousProposalId =
-            proposals.find((p) => Number(p!.id) === Number(proposalId) - 1)
-              ?.id ?? null;
-          return {
-            val: {
-              nextProposalId,
-              previousProposalId,
-            },
-            isFailed: false,
-            isLoading: false,
-          };
-        }
-        return {
-          isLoading: res.loading,
-          isFailed: Boolean(res.error),
-          error: res.error?.message ?? undefined,
-          val: null,
-        };
-      })
-      .subscribe(setNextAndPrevStatus);
-    return () => subscription.unsubscribe();
-  }, [ensureProposalsQuery, setNextAndPrevStatus, proposalId]);
+
   useEffect(() => {
     const subscription = query.observable
       .map((res): Loadable<ProposalDetails> => {

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

@@ -2,7 +2,7 @@ import { chainsConfig } from '@webb-tools/dapp-config';
 
 export function mapChainIdToLogo(number: number) {
   if (number === 0) {
-    return 'webb';
+    return 'tangle';
   }
-  return String(chainsConfig[number]?.currencies[0] ?? 'webb');
+  return String(chainsConfig[number]?.currencies[0] ?? 'tangle');
 }

libs/icons/src/utils.ts

@@ -44,7 +44,7 @@ export function getIconSizeInPixel(size: IconSize) {
     }
 
     case 'lg': {
-      return '24px' as const;
+      return '32px' as const;
     }
 
     case 'md': {