Merge pull request #1438 from IntersectMBO/develop

feat(#1431): handle disconnected state of proposal pillar
IntersectMBO · Jun 26, 2024 · 257283d · 257283d
2 parents e39f867 + f65a43b
commit 257283d
Show file tree

Hide file tree

Showing 11 changed files with 173 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -65,9 +65,12 @@ changes.
 - Add PDF pillar [Issue 1090](https://github.com/IntersectMBO/govtool/issues/1090)
 - Replace govtool-wrapper governance action creation in favor of pdf-pillar [Issue 1284](https://github.com/IntersectMBO/govtool/issues/1284)
 - Add sentry environment config [Issue 1324](https://github.com/IntersectMBO/govtool/issues/1324)
+- Add proposal discussion pillar to home page [Issue 1431](https://github.com/IntersectMBO/govtool/issues/1431)
 
 ### Fixed
 
+- silenced `Thread killed by timeout manager` sentry log [Issue 1417](https://github.com/IntersectMBO/govtool/issues/1417)
+- silenced `Warp: Client closed connection prematurely` error [Issue 1422](https://github.com/IntersectMBO/govtool/issues/1422)
 - backend is now compiled with -threaded [Issue 1148](https://github.com/IntersectMBO/govtool/issues/1148)
 - drep/get-voting-power no longer throws 500 for non-existing dreps. Instead it returns 0 [Issue 1093](https://github.com/IntersectMBO/govtool/issues/1093)
 - proposal/list no longer throws 500 error when proposal's url is incorrect [Issue 1073](https://github.com/IntersectMBO/govtool/issues/1073)

diff --git a/govtool/backend/app/Main.hs b/govtool/backend/app/Main.hs
@@ -143,6 +143,8 @@ exceptionHandler :: VVAConfig -> Maybe Request -> SomeException -> IO ()
 exceptionHandler vvaConfig mRequest exception = do
   print mRequest
   print exception
+  guard (show exception /= "Thread killed by timeout manager")
+  guard (show exception /= "Warp: Client closed connection prematurely")
   sentryService <-
     initRaven
       (sentryDSN vvaConfig)

diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
+
 import { Modal, ScrollToTop } from "@atoms";
 import { PATHS, PDF_PATHS } from "@consts";
 import { useCardano, useFeatureFlag, useModal } from "@context";
@@ -27,6 +28,7 @@ import {
   RetireAsDrep,
   RetireAsDirectVoter,
   EditDRepMetadata,
+  ProposalDiscussionPillar,
 } from "@pages";
 import { SetupInterceptors } from "@services";
 import {
@@ -36,11 +38,9 @@ import {
   removeItemFromLocalStorage,
 } from "@utils";
 
-import { PDFWrapper } from "./components/organisms/PDFWrapper";
-
 export default () => {
   const { isProposalDiscussionForumEnabled } = useFeatureFlag();
-  const { enable } = useCardano();
+  const { enable, isEnabled } = useCardano();
   const navigate = useNavigate();
   const { modal, openModal, modals } = useModal();
 
@@ -80,14 +80,19 @@ export default () => {
     checkTheWalletIsActive();
   }, [checkTheWalletIsActive]);
 
+  // Proposal Discussion Pillar doesn't export pages or react router routes
+  // so we need to handle the routing here
   useEffect(() => {
     if (!isProposalDiscussionForumEnabled) return;
     if (
       window.location.pathname.includes(PDF_PATHS.proposalDiscussion) &&
       !window.location.pathname.includes(PATHS.proposalPillar.replace("/*", ""))
     ) {
       navigate(
-        `${PATHS.proposalPillar.replace("/*", "")}${window.location.pathname}`,
+        `${(isEnabled
+          ? PATHS.connectedProposalPillar
+          : PATHS.proposalPillar
+        ).replace("/*", "")}${window.location.pathname}`,
       );
     }
   }, [window.location.pathname]);
@@ -106,10 +111,19 @@ export default () => {
           path={PATHS.governanceActionsAction}
           element={<GovernanceActionDetails />}
         />
+        {isProposalDiscussionForumEnabled && !isEnabled && (
+          <Route
+            path={PATHS.proposalPillar}
+            element={<ProposalDiscussionPillar />}
+          />
+        )}
         <Route element={<Dashboard />}>
           <Route path={PATHS.dashboard} element={<DashboardCards />} />
           {isProposalDiscussionForumEnabled && (
-            <Route path={PATHS.proposalPillar} element={<PDFWrapper />} />
+            <Route
+              path={PATHS.connectedProposalPillar}
+              element={<ProposalDiscussionPillar />}
+            />
           )}
           <Route
             path={PATHS.dashboardGovernanceActions}

diff --git a/govtool/frontend/src/components/organisms/DrawerMobile.tsx b/govtool/frontend/src/components/organisms/DrawerMobile.tsx
@@ -3,7 +3,7 @@ import { Box, Grid, IconButton, SwipeableDrawer } from "@mui/material";
 import { Background, Button, Link, Typography } from "@atoms";
 import { ICONS, IMAGES, NAV_ITEMS } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
-import { useModal } from "@context";
+import { useFeatureFlag, useModal } from "@context";
 import { openInNewTab } from "@utils";
 
 import { DrawerMobileProps } from "./types";
@@ -16,6 +16,7 @@ export const DrawerMobile = ({
   isDrawerOpen,
   setIsDrawerOpen,
 }: DrawerMobileProps) => {
+  const { isProposalDiscussionForumEnabled } = useFeatureFlag();
   const { screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const { t } = useTranslation();
@@ -73,19 +74,28 @@ export const DrawerMobile = ({
           ) : null}
           <Box sx={{ display: "flex", flex: 1, flexDirection: "column" }}>
             <Grid container direction="column" mt={6} rowGap={4}>
-              {NAV_ITEMS.map((navItem) => (
-                <Grid item key={navItem.label}>
-                  <Link
-                    {...navItem}
-                    isConnectWallet={isConnectButton}
-                    onClick={() => {
-                      if (navItem.newTabLink) openInNewTab(navItem.newTabLink);
-                      setIsDrawerOpen(false);
-                    }}
-                    size="big"
-                  />
-                </Grid>
-              ))}
+              {NAV_ITEMS.map((navItem) => {
+                if (
+                  !isProposalDiscussionForumEnabled &&
+                  navItem.dataTestId === "proposed-governance-actions-link"
+                ) {
+                  return null;
+                }
+                return (
+                  <Grid item key={navItem.label}>
+                    <Link
+                      {...navItem}
+                      isConnectWallet={isConnectButton}
+                      onClick={() => {
+                        if (navItem.newTabLink)
+                          openInNewTab(navItem.newTabLink);
+                        setIsDrawerOpen(false);
+                      }}
+                      size="big"
+                    />
+                  </Grid>
+                );
+              })}
             </Grid>
           </Box>
         </Box>

diff --git a/govtool/frontend/src/components/organisms/HomeCards.tsx b/govtool/frontend/src/components/organisms/HomeCards.tsx
@@ -2,13 +2,14 @@ import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { Box } from "@mui/material";
 
-import { IMAGES, PATHS } from "@consts";
-import { useModal } from "@context";
+import { IMAGES, PATHS, PDF_PATHS } from "@consts";
+import { useFeatureFlag, useModal } from "@context";
 import { ActionCard } from "@molecules";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
 
 export const HomeCards = () => {
+  const { isProposalDiscussionForumEnabled } = useFeatureFlag();
   const navigate = useNavigate();
   const { openModal } = useModal();
   const { screenWidth } = useScreenDimension();
@@ -48,6 +49,16 @@ export const HomeCards = () => {
     [navigate],
   );
 
+  const navigateToProposalDiscussionPillar = useCallback(
+    () =>
+      navigate(
+        `${PATHS.connectedProposalPillar.replace("/*", "")}${
+          PDF_PATHS.proposalDiscussion
+        }`,
+      ),
+    [navigate],
+  );
+
   return (
     <Box
       columnGap={4.625}
@@ -141,8 +152,16 @@ export const HomeCards = () => {
         imageHeight={84}
         imageURL={IMAGES.proposeGovActionImage}
         imageWidth={84}
-        secondButtonAction={onClickLearnMoreAboutProposingGovAction}
-        secondButtonLabel={t("learnMore")}
+        secondButtonAction={
+          isProposalDiscussionForumEnabled
+            ? navigateToProposalDiscussionPillar
+            : onClickLearnMoreAboutProposingGovAction
+        }
+        secondButtonLabel={t(
+          isProposalDiscussionForumEnabled
+            ? "home.cards.proposeAGovernanceAction.secondButtonLabel"
+            : "learnMore",
+        )}
         title={t("home.cards.proposeAGovernanceAction.title")}
       />
       {/* PROPOSE GOV ACTION CARD  END */}

diff --git a/govtool/frontend/src/components/organisms/TopNav.tsx b/govtool/frontend/src/components/organisms/TopNav.tsx
@@ -5,7 +5,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 
 import { Button, Link } from "@atoms";
 import { ICONS, IMAGES, PATHS, NAV_ITEMS } from "@consts";
-import { useCardano, useModal } from "@context";
+import { useCardano, useFeatureFlag, useModal } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
 
@@ -14,6 +14,7 @@ import { DrawerMobile } from "./DrawerMobile";
 const POSITION_TO_BLUR = 50;
 
 export const TopNav = ({ isConnectButton = true }) => {
+  const { isProposalDiscussionForumEnabled } = useFeatureFlag();
   const [windowScroll, setWindowScroll] = useState<number>(0);
   const { openModal } = useModal();
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
@@ -98,20 +99,28 @@ export const TopNav = ({ isConnectButton = true }) => {
                 columnSpacing={screenWidth < 1024 ? 2 : 4}
                 container
               >
-                {NAV_ITEMS.map((navItem) => (
-                  <Grid item key={navItem.label}>
-                    <Link
-                      {...navItem}
-                      isConnectWallet={isConnectButton}
-                      onClick={() => {
-                        if (navItem.newTabLink) {
-                          openInNewTab(navItem.newTabLink);
-                        }
-                        setIsDrawerOpen(false);
-                      }}
-                    />
-                  </Grid>
-                ))}
+                {NAV_ITEMS.map((navItem) => {
+                  if (
+                    !isProposalDiscussionForumEnabled &&
+                    navItem.dataTestId === "proposed-governance-actions-link"
+                  ) {
+                    return null;
+                  }
+                  return (
+                    <Grid item key={navItem.label}>
+                      <Link
+                        {...navItem}
+                        isConnectWallet={isConnectButton}
+                        onClick={() => {
+                          if (navItem.newTabLink) {
+                            openInNewTab(navItem.newTabLink);
+                          }
+                          setIsDrawerOpen(false);
+                        }}
+                      />
+                    </Grid>
+                  );
+                })}
                 {isConnectButton ? (
                   <Grid item>
                     <Button

diff --git a/govtool/frontend/src/consts/navItems.tsx b/govtool/frontend/src/consts/navItems.tsx
@@ -23,6 +23,13 @@ export const NAV_ITEMS = [
     label: i18n.t("govActions.title"),
     newTabLink: null,
   },
+  {
+    dataTestId: "proposed-governance-actions-link",
+    navTo:
+      PATHS.proposalPillar.replace("/*", "") + PDF_PATHS.proposalDiscussion,
+    label: i18n.t("proposalDiscussion.title"),
+    newTabLink: null,
+  },
   {
     dataTestId: "guides-link",
     navTo: "",
@@ -64,7 +71,7 @@ export const CONNECTED_NAV_ITEMS = [
   {
     dataTestId: "proposal-discussion-link",
     label: i18n.t("proposalDiscussion.title"),
-    navTo: `${PATHS.proposalPillar.replace("/*", "")}${
+    navTo: `${PATHS.connectedProposalPillar.replace("/*", "")}${
       PDF_PATHS.proposalDiscussion
     }`,
     activeIcon: (

diff --git a/govtool/frontend/src/consts/paths.ts b/govtool/frontend/src/consts/paths.ts
@@ -25,6 +25,7 @@ export const PATHS = {
   retireAsDirectVoter: "/retire_direct_voter",
   stakeKeys: "/stake_keys",
   proposalPillar: "/proposal_pillar/*",
+  connectedProposalPillar: "/connected/proposal_pillar/*",
 };
 
 export const PDF_PATHS = {

diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
@@ -512,7 +512,8 @@ export const en = {
         },
         proposeAGovernanceAction: {
           description: "Submit your proposal for a Governance Action.",
-          firstButtonLabel: "Connect to Submit",
+          secondButtonLabel: "View Proposals",
+          firstButtonLabel: "Connect to Propose",
           title: "Propose a Governance Action",
         },
         registerAsDRep: {

diff --git a/govtool/frontend/src/pages/ProposalDiscussion.tsx b/govtool/frontend/src/pages/ProposalDiscussion.tsx
@@ -0,0 +1,63 @@
+import React, { ComponentProps, Suspense } from "react";
+import { Box, CircularProgress } from "@mui/material";
+import "@intersect.mbo/pdf-ui/style";
+import { useCardano, useGovernanceActions } from "@/context";
+import { useValidateMutation } from "@/hooks/mutations";
+import { useScreenDimension } from "@/hooks/useScreenDimension";
+import { TopNav } from "@/components/organisms";
+
+const ProposalDiscussion = React.lazy(
+  () => import("@intersect.mbo/pdf-ui/cjs"),
+);
+
+export const ProposalDiscussionPillar = () => {
+  const { pagePadding } = useScreenDimension();
+  const { validateMetadata } = useValidateMutation();
+  const { walletApi, ...context } = useCardano();
+  const { createGovernanceActionJsonLD, createHash } = useGovernanceActions();
+
+  return (
+    <Box>
+      {!context.isEnabled && <TopNav />}
+      <Box
+        sx={{
+          px: context.isEnabled ? { xs: 2, sm: 5 } : pagePadding,
+          my: 3,
+          display: "flex",
+          flex: 1,
+        }}
+      >
+        <Suspense
+          fallback={
+            <Box
+              sx={{
+                display: "flex",
+                flex: 1,
+                height: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <CircularProgress />
+            </Box>
+          }
+        >
+          <ProposalDiscussion
+            walletAPI={{
+              ...context,
+              ...walletApi,
+              createGovernanceActionJsonLD,
+              createHash,
+            }}
+            pathname={window.location.pathname}
+            validateMetadata={
+              validateMetadata as ComponentProps<
+                typeof ProposalDiscussion
+              >["validateMetadata"]
+            }
+          />
+        </Suspense>
+      </Box>
+    </Box>
+  );
+};
diff --git a/govtool/frontend/src/pages/index.ts b/govtool/frontend/src/pages/index.ts
@@ -2,18 +2,19 @@ export * from "./ChooseStakeKey";
 export * from "./CreateGovernanceAction";
 export * from "./DRepDetails";
 export * from "./DRepDirectory";
+export * from "./DRepDirectory";
 export * from "./DRepDirectoryContent";
 export * from "./Dashboard";
 export * from "./DashboardGovernanceActionsCategory";
-export * from "./DRepDirectory";
 export * from "./EditDRepMetadata";
 export * from "./ErrorPage";
 export * from "./GovernanceActionDetails";
 export * from "./GovernanceActions";
 export * from "./GovernanceActionsCategory";
 export * from "./Home";
 export * from "./RegisterAsDirectVoter";
-export * from "./RegisterAsdRep";
 export * from "./RegisterAsDirectVoter";
-export * from "./RetireAsDrep";
+export * from "./RegisterAsdRep";
 export * from "./RetireAsDirectVoter";
+export * from "./RetireAsDrep";
+export * from "./ProposalDiscussion";