Implement committee aproval modal

Author: selankon

src/containers/votingTerminal/committeeVotingTerminal.tsx

@@ -72,7 +72,7 @@ export const CommitteeVotingTerminal = ({
     notBegan,
   } = useGaslessCommiteVotes(address, proposal);
 
-  const {handleSubmitVote, transactionHash, executionFailed} =
+  const {handleCommitteApprove, transactionHash, executionFailed} =
     useProposalTransactionContext();
 
   const mappedProps = useMemo(() => {
@@ -154,14 +154,14 @@ export const CommitteeVotingTerminal = ({
       return {
         voteNowDisabled: false,
         onClick: () => {
-          handleSubmitVote({vote: VoteValues.YES});
+          handleCommitteApprove({vote: VoteValues.YES});
         },
       };
     } else return {voteNowDisabled: true};
   }, [
     address,
     canApprove,
-    handleSubmitVote,
+    handleCommitteApprove,
     isApprovalPeriod,
     isOnWrongNetwork,
     statusRef,

src/context/proposalTransaction.tsx

@@ -57,6 +57,7 @@ type ProposalTransactionContextType = {
   handleSubmitVote: (params: SubmitVoteParams) => void;
   handleExecuteProposal: () => void;
   handleGaslessVoting: (params: SubmitVoteParams) => void;
+  handleCommitteApprove: (params: SubmitVoteParams) => void;
   isLoading: boolean;
   voteSubmitted: boolean;
   executeSubmitted: boolean;
@@ -87,6 +88,8 @@ const ProposalTransactionProvider: React.FC<Props> = ({children}) => {
   const [showVoteModal, setShowVoteModal] = useState(false);
   const [showGaslessModal, setShowGaslessModal] = useState(false);
   const [showExecuteModal, setShowExecuteModal] = useState(false);
+  const [showCommitteeApprovalModal, setShowCommitteeApprovalModal] =
+    useState(false);
 
   const [voteParams, setVoteParams] = useState<VoteProposalParams>();
   const [voteSubmitted, setVoteSubmitted] = useState(false);
@@ -179,6 +182,20 @@ const ProposalTransactionProvider: React.FC<Props> = ({children}) => {
     [urlId]
   );
 
+  const handleCommitteApprove = useCallback(
+    (params: SubmitVoteParams) => {
+      setVoteParams({
+        proposalId: new ProposalId(urlId!).export(),
+        vote: params.vote,
+      });
+      setReplacingVote(!!params.replacement);
+      setTokenAddress(params.token);
+      setVoteProcessState(TransactionState.WAITING);
+      setShowCommitteeApprovalModal(true);
+    },
+    [urlId]
+  );
+
   // estimate voting fees
   const estimateVotingFees = useCallback(async () => {
     if (voteParams) {
@@ -261,9 +278,11 @@ const ProposalTransactionProvider: React.FC<Props> = ({children}) => {
         break;
       case TransactionState.SUCCESS:
         setShowVoteModal(false);
+        setShowCommitteeApprovalModal(false);
         break;
       default: {
         setShowVoteModal(false);
+        setShowCommitteeApprovalModal(false);
         stopPolling();
       }
     }
@@ -288,7 +307,10 @@ const ProposalTransactionProvider: React.FC<Props> = ({children}) => {
       let voteToPersist;
 
       // cache multisig vote
-      if (pluginType === 'multisig.plugin.dao.eth') {
+      if (
+        pluginType === 'multisig.plugin.dao.eth' ||
+        pluginType === GaselessPluginName
+      ) {
         voteToPersist = address.toLowerCase();
       }
 
@@ -537,6 +559,7 @@ const ProposalTransactionProvider: React.FC<Props> = ({children}) => {
       handleSubmitVote,
       handleExecuteProposal,
       handleGaslessVoting,
+      handleCommitteApprove,
       isLoading,
       voteSubmitted,
       executeSubmitted,
@@ -547,6 +570,7 @@ const ProposalTransactionProvider: React.FC<Props> = ({children}) => {
       handleSubmitVote,
       handleExecuteProposal,
       handleGaslessVoting,
+      handleCommitteApprove,
       isLoading,
       voteSubmitted,
       executeSubmitted,
@@ -573,18 +597,22 @@ const ProposalTransactionProvider: React.FC<Props> = ({children}) => {
         title={
           showExecuteModal
             ? t('labels.signExecuteProposal')
+            : showCommitteeApprovalModal
+            ? t('labels.approveProposal')
             : t('labels.signVote')
         }
         buttonLabel={
           showExecuteModal
             ? t('governance.proposals.buttons.execute')
+            : showCommitteeApprovalModal
+            ? t('labels.approve')
             : t('governance.proposals.buttons.vote')
         }
         state={
           (showExecuteModal ? executeProcessState : voteProcessState) ||
           TransactionState.WAITING
         }
-        isOpen={showVoteModal || showExecuteModal}
+        isOpen={showVoteModal || showExecuteModal || showCommitteeApprovalModal}
         onClose={
           showExecuteModal ? handleCloseExecuteModal : handleCloseVoteModal
         }

src/locales/en/common.json

@@ -36,6 +36,8 @@
   },
   "labels": {
     "approvals": "Approvals",
+    "approve": "Approve",
+    "approveProposal":"Approve proposal",
     "loading": "Loading …",
     "members": "Members",
     "tokenHolders": "Token holders",