Continue polkadot applications page, #1399

site/src/constants/index.js

@@ -72,6 +72,7 @@ export const polkadotOpenGovReferendumStatusMap = {
   Deciding: "Deciding",
   Queueing: "Queueing",
   Preparing: "Preparing",
+  Submitted: "Submitted",
 };
 
 export const treasuryTipStatusMap = {

site/src/hooks/applications/polkadot/useFetchReferendumCount.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import api from "../../../services/scanApi";
+
+export default function useFetchReferendumCount() {
+  const [count, setCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const { result } = await api.fetch(
+          `${
+            import.meta.env.VITE_APP_SUBSQUARE_API_END_POINT
+          }/gov2/referendums/treasury-applications/count`,
+        );
+
+        const total = result?.total || 0;
+        setCount(total);
+      } catch (err) {
+        console.error("Fetching referendums active count failed.", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return { count, isLoading };
+}

site/src/hooks/applications/polkadot/useFetchReferendumsList.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import api from "../../../services/scanApi";
+
+export default function useFetchReferendumsList(filterData, sort) {
+  const [data, setData] = useState({
+    items: [],
+    total: 0,
+  });
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const { result = [] } = await api.fetch(
+          `${
+            import.meta.env.VITE_APP_SUBSQUARE_API_END_POINT
+          }/gov2/referendums/treasury-applications`,
+          {
+            ...filterData,
+            ...sort,
+          },
+        );
+        setData({ items: result, total: result.length });
+      } catch (err) {
+        console.error("Fetching referendums failed.", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(filterData), JSON.stringify(sort)]);
+
+  return { data, isLoading };
+}

site/src/pages/Referenda/polkadot/useFetchSummary.js → site/src/hooks/applications/polkadot/useFetchReferendumsSummary.js

@@ -1,21 +1,12 @@
 import { useEffect, useState } from "react";
 import api from "../../../services/scanApi";
-import { chainSelector } from "../../../store/reducers/chainSlice";
-import { useSelector } from "react-redux";
 
-export default function useFetchSummary() {
+export default function useFetchReferendumsSummary() {
   const [data, setData] = useState({});
-  const [isLoading, setIsLoading] = useState(false);
-  const chain = useSelector(chainSelector);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    if (!chain) {
-      return;
-    }
-
     const fetchData = async () => {
-      setIsLoading(true);
-
       try {
         const { result } = await api.fetch(
           `${
@@ -32,7 +23,7 @@ export default function useFetchSummary() {
     };
 
     fetchData();
-  }, [chain]);
+  }, []);
 
   return { data, isLoading };
 }

site/src/pages/Referenda/polkadot/filter/useFilter.js → site/src/hooks/applications/polkadot/useFilter.js

@@ -1,10 +1,9 @@
 import { useHistory, useLocation } from "react-router";
-import { useCallback, useState } from "react";
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   getQueryStatus,
   toStatusQuery,
-} from "../../../../components/Filter/useListFilter";
+} from "../../../components/Filter/useListFilter";
 
 export default function useListFilter() {
   const { search } = useLocation();

site/src/hooks/applications/polkadot/useReferendumsProcess.js

@@ -0,0 +1,39 @@
+import BigNumber from "bignumber.js";
+import { polkadotOpenGovReferendumStatusMap } from "../../../constants";
+import useFetchReferendumsList from "./useFetchReferendumsList";
+
+export default function useReferendumsProcess() {
+  const { data, isLoading } = useFetchReferendumsList();
+  const referendums = data?.items || [];
+
+  let voting = 0;
+  let passing = 0;
+
+  if (referendums && referendums.length > 0) {
+    referendums.forEach((item) => {
+      const { name: state } = item?.state || {};
+      const { tally } = item?.onchainData || {};
+
+      if (
+        [
+          polkadotOpenGovReferendumStatusMap.Confirming,
+          polkadotOpenGovReferendumStatusMap.Deciding,
+          polkadotOpenGovReferendumStatusMap.Queueing,
+          polkadotOpenGovReferendumStatusMap.Submitted,
+        ].includes(state)
+      ) {
+        voting++;
+
+        if (new BigNumber(tally?.ayes).gt(tally?.nays)) {
+          passing++;
+        }
+      }
+    });
+  }
+
+  return {
+    voting,
+    passing,
+    isLoading,
+  };
+}

site/src/pages/Header/ReferendaMenu.jsx

@@ -4,6 +4,8 @@ import { Label, Menu } from "semantic-ui-react";
 import { useSelector } from "react-redux";
 import { totalOpenGovApplicationCountSelector } from "../../store/reducers/overviewSlice";
 import { ReactComponent as ApplicationSVG } from "./applications.svg";
+import { isPolkadot } from "../../utils/chains";
+import useFetchReferendumCount from "../../hooks/applications/polkadot/useFetchReferendumCount";
 
 const Divider = styled.div`
   position: relative;
@@ -17,15 +19,27 @@ const Icon = styled(ApplicationSVG)`
   margin-right: 8px;
 `;
 
-function ReferendaMenu() {
-  const applicationCount = useSelector(totalOpenGovApplicationCountSelector);
-
+function CommonReferendaMenu({ count }) {
   return (
     <Menu.Item key="Referenda">
-      <Icon /> Applications<Label>{applicationCount}</Label>
+      <Icon /> Applications<Label>{count}</Label>
       <Divider />
     </Menu.Item>
   );
 }
 
+function PolkadotReferendaMenu() {
+  const { count } = useFetchReferendumCount();
+  return <CommonReferendaMenu count={count} />;
+}
+
+function ReferendaMenu() {
+  const applicationCount = useSelector(totalOpenGovApplicationCountSelector);
+  if (isPolkadot) {
+    return <PolkadotReferendaMenu />;
+  }
+
+  return <CommonReferendaMenu count={applicationCount} />;
+}
+
 export default ReferendaMenu;

site/src/pages/Overview/polkadot/treasuryDetail/common/assetItem.jsx

@@ -16,7 +16,6 @@ export default function AssetItem({ title, titleLink, children }) {
   return (
     <AssetWrapper>
       <ExternalLink
-        style={{ marginBottom: 8 }}
         href={titleLink}
         externalIcon
         externalIconColor="textSecondary"

site/src/pages/Referenda/polkadot/index.jsx

@@ -1,30 +1,11 @@
-import styled from "styled-components";
-import Card from "../../../components/Card";
-import Divider from "../../../components/Divider";
-import TableHeader from "./table/header";
-import Table from "./table";
+import ReferendaTable from "./table";
 import Summary from "./summary";
 
-const CardWrapper = styled(Card)`
-  padding: 0;
-  table {
-    border-radius: 0 !important;
-    border: none !important;
-  }
-  @media screen and (max-width: 600px) {
-    border-radius: 0;
-  }
-`;
-
 export default function PolkadotReferenda() {
   return (
     <div>
       <Summary />
-      <CardWrapper>
-        <TableHeader />
-        <Divider />
-        <Table />
-      </CardWrapper>
+      <ReferendaTable />
     </div>
   );
 }

site/src/pages/Referenda/polkadot/summary.jsx

@@ -13,7 +13,8 @@ import SummaryItem from "../../../components/Summary/Item";
 import { lgcss, smcss } from "../../../styles/responsive";
 import SummaryOngoingItemWrapper from "../../../components/Summary/OngoingItemWrapper";
 import SummaryReferendaWrapper from "../../../components/Summary/ReferendaWrapper";
-import useFetchSummary from "./useFetchSummary";
+import useFetchReferendumsSummary from "../../../hooks/applications/polkadot/useFetchReferendumsSummary";
+import SkeletonBar from "../../../components/skeleton/bar";
 
 const ItemsWrapper = styled.div`
   ${flex_1};
@@ -53,8 +54,12 @@ function formatToTitleCase(str) {
     .join(" ");
 }
 
+function LoadableContent({ children, isLoading }) {
+  return <>{isLoading ? <SkeletonBar width={114} height={28} /> : children}</>;
+}
+
 export default function ReferendaSummary() {
-  const { data: rawSummary } = useFetchSummary();
+  const { data: rawSummary, isLoading } = useFetchReferendumsSummary();
 
   const applicationSummary = useMemo(
     () => (Array.isArray(rawSummary) ? rawSummary : []),
@@ -80,7 +85,11 @@ export default function ReferendaSummary() {
       <SummaryOngoingItemWrapper>
         <SummaryItem
           title="Ongoing"
-          content={<Value>{activeCount || 0}</Value>}
+          content={
+            <LoadableContent isLoading={isLoading}>
+              <Value>{activeCount || 0}</Value>
+            </LoadableContent>
+          }
         />
       </SummaryOngoingItemWrapper>
 
@@ -90,10 +99,12 @@ export default function ReferendaSummary() {
             key={item.id}
             title={formatToTitleCase(item.name)}
             content={
-              <Value>
-                {item?.activeCount || 0}
-                <span className="light"> / {item?.total || 0}</span>
-              </Value>
+              <LoadableContent isLoading={isLoading}>
+                <Value>
+                  {item?.activeCount || 0}
+                  <span className="light"> / {item?.total || 0}</span>
+                </Value>
+              </LoadableContent>
             }
           />
         ))}

site/src/pages/Referenda/polkadot/table/columns.jsx

@@ -6,6 +6,7 @@ import JumpToLink from "../../Link";
 import { useTableColumns } from "../../../../components/shared/useTableColumns";
 import TreasurySpendValueDisplay from "../../../../components/treasurySpendValueDisplay";
 import styled from "styled-components";
+import PairTextVertical from "../../../../components/PairTextVertical";
 
 const Wrapper = styled.div`
   width: 112px;
@@ -19,7 +20,7 @@ const Columns = ({
   setSortDirection,
   chain,
 }) => {
-  const { proposeTime, proposer, referendaStatus } = useTableColumns({});
+  const { proposeTime, proposer } = useTableColumns({});
 
   const index = {
     key: "index",
@@ -58,6 +59,8 @@ const Columns = ({
     key: "amount",
     title: "Value",
     cellClassName: "balance-cell",
+    headerCellProps: { textAlign: "right" },
+    cellProps: { textAlign: "right" },
     cellRender: (v_, item) => {
       if (item?.allSpends && item?.allSpends.length > 0) {
         return (
@@ -83,6 +86,17 @@ const Columns = ({
     },
   };
 
+  const referendaStatus = {
+    key: "referenda-status",
+    title: "Status",
+    headerCellProps: { textAlign: "right" },
+    cellProps: { textAlign: "right" },
+    cellClassName: "referenda-status-cell proposal-status-cell",
+    cellRender: (_, item) => (
+      <PairTextVertical value={item?.state?.name || item?.state?.state} />
+    ),
+  };
+
   const sortableProposalIndex = {
     ...index,
     title: (

site/src/pages/Referenda/polkadot/table/header.jsx

@@ -4,7 +4,7 @@ import Text from "../../../../components/Text";
 import { Flex } from "../../../../components/styled";
 import { p_12_normal, p_14_medium } from "../../../../styles/text";
 import { smcss } from "../../../../styles/responsive";
-import useFetchProgressStatus from "../useFetchProgressStatus";
+import useReferendumsProcess from "../../../../hooks/applications/polkadot/useReferendumsProcess";
 
 const HeaderWrapper = styled.div`
   padding: 24px;
@@ -36,20 +36,19 @@ const BriefValue = styled.span`
 `;
 
 export default function TableHeader() {
-  const { data: applicationSummary, isLoading } = useFetchProgressStatus();
-  const all = applicationSummary?.all;
+  const { voting, passing, isLoading } = useReferendumsProcess();
   if (isLoading) {
     return null;
   }
 
   const briefs = [
     {
       label: "Voting",
-      value: all?.voting ?? 0,
+      value: voting,
     },
     {
       label: "Passing",
-      value: all?.passing ?? 0,
+      value: passing,
     },
   ];