add pending transaction for governance action creation

govtool/frontend/src/components/organisms/DashboardCards.tsx

@@ -20,14 +20,15 @@ export const DashboardCards = () => {
     buildSignSubmitConwayCertTx,
     delegateTo,
     delegateTransaction,
-    voter,
     dRepID,
     dRepIDBech32,
+    govActionTransaction,
     isDrepLoading,
     isPendingTransaction,
     registerTransaction,
     soleVoterTransaction,
     stakeKey,
+    voter,
   } = useCardano();
   const navigate = useNavigate();
   const { currentDelegation, isCurrentDelegationLoading } =
@@ -185,6 +186,15 @@ export const DashboardCards = () => {
     [isPendingTransaction, navigate]
   );
 
+  const onClickGovernanceActionCardActionButton = useCallback(() => {
+    if(govActionTransaction.transactionHash) {
+      navigate(PATHS.dashboardGovernanceActions)
+      return
+    }
+    navigate(PATHS.createGovernanceAction)
+
+  }, [govActionTransaction.transactionHash, navigate])
+
   const displayedDelegationId = useMemo(() => {
     const restrictedNames = [
       dRepID,
@@ -525,16 +535,13 @@ export const DashboardCards = () => {
       <DashboardActionCard
         dataTestidFirstButton="propose-governance-actions-button"
         description={t("dashboard.proposeGovernanceAction.description")}
-        // TODO: add isPendingGovernanceAction to the context
-        // inProgress={isPendingGovernanceAction}
-        firstButtonAction={() => navigate(PATHS.createGovernanceAction)}
+        firstButtonAction={onClickGovernanceActionCardActionButton}
         firstButtonLabel={t(
           `dashboard.proposeGovernanceAction.${
-            // TODO: add isPendingGovernanceAction to the context
-            // isPendingGovernanceAction ? "propose" : "viewGovernanceActions"
-            `propose`
+             govActionTransaction.transactionHash ? "view" : "propose" 
           }`
-        )}
+          )}
+        inProgress={!!govActionTransaction.transactionHash}
         secondButtonLabel={t("learnMore")}
         secondButtonAction={() =>
           openInNewTab(

govtool/frontend/src/context/wallet.tsx

@@ -62,6 +62,7 @@ import {
   generateAnchor,
   getItemFromLocalStorage,
   getPubDRepID,
+  GOVERNANCE_ACTION_KEY,
   openInNewTab,
   PROTOCOL_PARAMS_KEY,
   REGISTER_SOLE_VOTER_TRANSACTION_KEY,
@@ -160,6 +161,7 @@ interface CardanoContext {
     cip95MetadataURL?: string,
     cip95MetadataHash?: string
   ) => Promise<VotingBuilder>;
+  govActionTransaction: TransactionHistoryItem;
   delegateTransaction: TransactionHistoryItem;
   registerTransaction: TransactionHistoryItem & { type: DRepActionType };
   soleVoterTransaction: TransactionHistoryItem & {
@@ -229,6 +231,8 @@ function CardanoProvider(props: Props) {
   const [registerTransaction, setRegisterTransaction] = useState<
     TransactionHistoryItem & { type: DRepActionType }
   >({ time: undefined, transactionHash: "", type: "" });
+  const [govActionTransaction, setGovActionTransaction] =
+    useState<TransactionHistoryItem>({ time: undefined, transactionHash: "" });
   const [soleVoterTransaction, setSoleVoterTransaction] = useState<
     TransactionHistoryItem & { type: Omit<DRepActionType, "update"> }
   >({ time: undefined, transactionHash: "", type: "" });
@@ -513,12 +517,42 @@ function CardanoProvider(props: Props) {
       let interval = setInterval(checkVoteTransaction, REFRESH_TIME);
       checkVoteTransaction();
     }
+    if (govActionTransaction?.transactionHash) {
+      const checkGovActionTransaction = async () => {
+        const resetGovActionTransaction = () => {
+          clearInterval(interval);
+          removeItemFromLocalStorage(GOVERNANCE_ACTION_KEY + `_${stakeKey}`);
+          setGovActionTransaction({
+            time: undefined,
+            transactionHash: "",
+          });
+        };
+        const status = await getTransactionStatus(
+          govActionTransaction.transactionHash
+        );
+        if (status.transactionConfirmed) {
+          resetGovActionTransaction();
+          if (isEnabled) addSuccessAlert(t("alerts.govAction.success"));
+        }
+        if (
+          new Date().getTime() -
+            new Date(govActionTransaction?.time).getTime() >
+          TIME_TO_EXPIRE_TRANSACTION
+        ) {
+          resetGovActionTransaction();
+          if (isEnabled) addErrorAlert(t("alerts.govAction.failed"));
+        }
+      };
+      let interval = setInterval(checkGovActionTransaction, REFRESH_TIME);
+      checkGovActionTransaction();
+    }
     if (
       isEnabled &&
       (voteTransaction?.transactionHash ||
         registerTransaction?.transactionHash ||
         soleVoterTransaction?.transactionHash ||
-        delegateTransaction?.transactionHash)
+        delegateTransaction?.transactionHash ||
+        govActionTransaction.transactionHash)
     ) {
       addWarningAlert(t("alerts.transactionInProgress"), 10000);
     }
@@ -527,6 +561,7 @@ function CardanoProvider(props: Props) {
     registerTransaction,
     soleVoterTransaction,
     voteTransaction,
+    govActionTransaction,
   ]);
 
   const getChangeAddress = async (enabledApi: CardanoApiWallet) => {
@@ -945,6 +980,19 @@ function CardanoProvider(props: Props) {
           "utf8"
         ).toString("hex");
 
+        if (govActionBuilder) {
+          setGovActionTransaction({
+            time: new Date(),
+            transactionHash: resultHash,
+          });
+          setItemToLocalStorage(
+            GOVERNANCE_ACTION_KEY + `_${stakeKey}`,
+            JSON.stringify({
+              time: new Date(),
+              transactionHash: resultHash,
+            })
+          );
+        }
         if (type === "registration") {
           setRegisterTransaction({
             time: new Date(),
@@ -1362,6 +1410,7 @@ function CardanoProvider(props: Props) {
       voter,
       voteTransaction,
       walletApi,
+      govActionTransaction,
     }),
     [
       address,
@@ -1398,6 +1447,7 @@ function CardanoProvider(props: Props) {
       voter,
       voteTransaction,
       walletApi,
+      govActionTransaction,
     ]
   );
 

govtool/frontend/src/i18n/locales/en.ts

@@ -7,6 +7,10 @@ export const en = {
           "Your voting power has been successfully delegated! Please refresh the page.",
         success: "Your voting power has been successfully delegated!",
       },
+      govAction: {
+        failed: "Creating Governance Action transaction failed",
+        success: "Your Governance Action has been submitted",
+      },
       metadataUpdate: {
         failed: "Update DRep metadata transaction failed",
         success: "You have successfully updated DRep metadata!",

govtool/frontend/src/utils/localStorage.ts

@@ -1,12 +1,12 @@
-export const WALLET_LS_KEY = "wallet_data";
-export const DELEGATE_TRANSACTION_KEY = "delegate_transaction";
-export const REGISTER_TRANSACTION_KEY = "register_transaction";
-export const REGISTER_SOLE_VOTER_TRANSACTION_KEY =
-  "register_sole_voter_transaction";
+export const GOVERNANCE_ACTION_KEY = "create_governance_action"
 export const DELEGATE_TO_KEY = "delegate_to_transaction";
+export const DELEGATE_TRANSACTION_KEY = "delegate_transaction";
 export const PROTOCOL_PARAMS_KEY = "protocol_params";
+export const REGISTER_SOLE_VOTER_TRANSACTION_KEY ="register_sole_voter_transaction";
+export const REGISTER_TRANSACTION_KEY = "register_transaction";
 export const SANCHO_INFO_KEY = "sancho_info";
 export const VOTE_TRANSACTION_KEY = "vote_transaction";
+export const WALLET_LS_KEY = "wallet_data";
 
 export function getItemFromLocalStorage(key: string) {
   const item = window.localStorage.getItem(key);