feat(#3341): add Proposal Discussion context

CHANGELOG.md

@@ -12,6 +12,8 @@ changes.
 
 ### Added
 
+- Add Proposal discussion context that manages username [Issue 3341](https://github.com/IntersectMBO/govtool/issues/3341)
+
 ### Fixed
 
 - Fix scroll on a drawer on smaller resolution

govtool/frontend/src/context/contextProviders.tsx

@@ -6,6 +6,7 @@ import { DataActionsBarProvider } from "./dataActionsBar";
 import { FeatureFlagProvider } from "./featureFlag";
 import { GovernanceActionProvider } from "./governanceAction";
 import { AdaHandleProvider } from "./adaHandle";
+import { ProposalDiscussionProvider } from "./proposalDiscussion";
 
 interface Props {
   children: React.ReactNode;
@@ -14,17 +15,19 @@ interface Props {
 const ContextProviders = ({ children }: Props) => (
   <AppContextProvider>
     <GovernanceActionProvider>
-      <FeatureFlagProvider>
-        <AdaHandleProvider>
-          <ModalProvider>
-            <SnackbarProvider>
-              <DataActionsBarProvider>
-                <CardanoProvider>{children}</CardanoProvider>
-              </DataActionsBarProvider>
-            </SnackbarProvider>
-          </ModalProvider>
-        </AdaHandleProvider>
-      </FeatureFlagProvider>
+      <ProposalDiscussionProvider>
+        <FeatureFlagProvider>
+          <AdaHandleProvider>
+            <ModalProvider>
+              <SnackbarProvider>
+                <DataActionsBarProvider>
+                  <CardanoProvider>{children}</CardanoProvider>
+                </DataActionsBarProvider>
+              </SnackbarProvider>
+            </ModalProvider>
+          </AdaHandleProvider>
+        </FeatureFlagProvider>
+      </ProposalDiscussionProvider>
     </GovernanceActionProvider>
   </AppContextProvider>
 );

govtool/frontend/src/context/index.ts

@@ -8,3 +8,4 @@ export * from "./usersnapContext";
 export * from "./wallet";
 export * from "./featureFlag";
 export * from "./governanceAction";
+export * from "./proposalDiscussion";

govtool/frontend/src/context/proposalDiscussion.tsx

@@ -0,0 +1,54 @@
+import {
+  PropsWithChildren,
+  useMemo,
+  createContext,
+  useContext,
+  useState,
+} from "react";
+
+type ProposalDiscussionContextType = {
+  username: string;
+  setUsername: (username: string) => void;
+} | null;
+
+const ProposalDiscussionContext =
+  createContext<ProposalDiscussionContextType>(null);
+
+/**
+ * Provides proposal discussion context to its children components.
+ *
+ * @param children - The child components to render.
+ */
+const ProposalDiscussionProvider = ({ children }: PropsWithChildren) => {
+  const [username, setUsername] = useState<string>("");
+
+  const value = useMemo(
+    () => ({
+      username,
+      setUsername,
+    }),
+    [username],
+  );
+
+  return (
+    <ProposalDiscussionContext.Provider value={value}>
+      {children}
+    </ProposalDiscussionContext.Provider>
+  );
+};
+
+/**
+ * Custom hook to use the ProposalDiscussionContext.
+ * @returns The context value.
+ */
+const useProposalDiscussion = () => {
+  const context = useContext(ProposalDiscussionContext);
+  if (!context) {
+    throw new Error(
+      "useProposalDiscussion must be used within a ProposalDiscussionProvider",
+    );
+  }
+  return context;
+};
+
+export { ProposalDiscussionProvider, useProposalDiscussion };

govtool/frontend/src/pages/ProposalDiscussion.tsx

@@ -1,7 +1,11 @@
 import React, { ComponentProps, Suspense } from "react";
 import { Box, CircularProgress } from "@mui/material";
 import "@intersect.mbo/pdf-ui/style";
-import { useCardano, useGovernanceActions } from "@/context";
+import {
+  useCardano,
+  useGovernanceActions,
+  useProposalDiscussion,
+} from "@/context";
 import { useValidateMutation } from "@/hooks/mutations";
 import { useScreenDimension } from "@/hooks/useScreenDimension";
 import { Footer, TopNav } from "@/components/organisms";
@@ -18,6 +22,7 @@ export const ProposalDiscussionPillar = () => {
   const { voter } = useGetVoterInfo();
   const { createGovernanceActionJsonLD, createHash } = useGovernanceActions();
   const { fetchDRepVotingPowerList } = useGetDRepVotingPowerList();
+  const { username, setUsername } = useProposalDiscussion();
 
   return (
     <Box
@@ -67,6 +72,8 @@ export const ProposalDiscussionPillar = () => {
               >["validateMetadata"]
             }
             fetchDRepVotingPowerList={fetchDRepVotingPowerList}
+            username={username}
+            setUsername={setUsername}
           />
         </Suspense>
       </Box>

govtool/frontend/src/types/@intersect.mbo.d.ts

@@ -27,6 +27,8 @@ type ProposalDiscussionProps = {
   fetchDRepVotingPowerList: (
     identifiers: string[],
   ) => Promise<DRepVotingPowerListResponse>;
+  username: string;
+  setUsername: (username: string) => void;
 };
 
 type GovernanceActionsOutcomesProps = {