From 87bf9c310d69fb34a7b0c72d511c3044fdd643e4 Mon Sep 17 00:00:00 2001
From: Theophile Sandoz <theophile.sandoz@gmail.com>
Date: Tue, 18 Jul 2023 10:28:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AE=20Reduce=20fee=20re-calculation=20?=
 =?UTF-8?q?in=20`AddNewProposalModal`=20(#4469)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Reduce fee re-calculation in `AddNewProposalModal`

* Fix the "warningAccepted" logic
---
 .../AddNewProposal/AddNewProposalModal.tsx    | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/proposals/modals/AddNewProposal/AddNewProposalModal.tsx b/packages/ui/src/proposals/modals/AddNewProposal/AddNewProposalModal.tsx
index e083d9fbc1..3de2b54494 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/AddNewProposalModal.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/AddNewProposalModal.tsx
@@ -64,7 +64,7 @@ export type BaseProposalParams = Exclude<
 const minimalSteps = [{ title: 'Bind account for staking' }, { title: 'Create proposal' }]
 
 export const AddNewProposalModal = () => {
-  const { api, connectionState } = useApi()
+  const { api } = useApi()
   const { active: activeMember } = useMyMemberships()
   const minimumValidatorCount = useMinimumValidatorCount()
   const maximumReferralCut = api?.consts.members.referralCutMaximumPercent
@@ -77,7 +77,7 @@ export const AddNewProposalModal = () => {
   const [formMap, setFormMap] = useState<Partial<[Account, ProposalType, GroupIdName, boolean]>>([])
   const workingGroupConsts = api?.consts[formMap[2] as GroupIdName]
 
-  const [warningAccepted, setWarningAccepted] = useState<boolean>(true)
+  const [warningAccepted, setWarningAccepted] = useState<boolean>(false)
   const [isExecutionError, setIsExecutionError] = useState<boolean>(false)
 
   const constants = useProposalConstants(formMap[1])
@@ -133,6 +133,7 @@ export const AddNewProposalModal = () => {
 
   useEffect(() => {
     form.trigger([])
+    setWarningAccepted(false)
   }, [path])
 
   useEffect(() => {
@@ -149,12 +150,14 @@ export const AddNewProposalModal = () => {
     [state.context.discussionMode]
   )
 
+  const formValues = form.getValues() as AddNewProposalForm
+  const formStr = JSON.stringify(formValues)
+
   const { transaction, isLoading, feeInfo } = useTransactionFee(
     activeMember?.controllerAccount,
     async () => {
       if (activeMember && api) {
-        const { proposalDetails, triggerAndDiscussion, stakingAccount, ...specifics } =
-          form.getValues() as AddNewProposalForm
+        const { proposalDetails, triggerAndDiscussion, stakingAccount, ...specifics } = formValues
 
         const txBaseParams: BaseProposalParams = {
           memberId: activeMember?.id,
@@ -176,13 +179,7 @@ export const AddNewProposalModal = () => {
         ])
       }
     },
-    [
-      state.value,
-      connectionState,
-      stakingStatus,
-      form.formState.isValidating,
-      JSON.stringify(form.getValues()?.[path as keyof AddNewProposalForm]),
-    ]
+    [api?.isConnected, activeMember, stakingStatus, formStr]
   )
 
   useEffect((): any => {
@@ -211,8 +208,6 @@ export const AddNewProposalModal = () => {
     }
   }, [state, stakingStatus, feeInfo])
 
-  useEffect(() => setWarningAccepted(!isExecutionError), [isExecutionError])
-
   const goToPrevious = useCallback(() => {
     send('BACK')
     setIsExecutionError(false)
@@ -244,7 +239,7 @@ export const AddNewProposalModal = () => {
     form.formState.isDirty,
     isExecutionError,
     warningAccepted,
-    JSON.stringify(form.getValues()),
+    formStr,
     JSON.stringify(form.formState.errors),
     isLoading,
   ])
@@ -309,7 +304,7 @@ export const AddNewProposalModal = () => {
   }
 
   if (state.matches('discussionTransaction')) {
-    const { triggerAndDiscussion } = form.getValues() as AddNewProposalForm
+    const { triggerAndDiscussion } = formValues
     const threadMode = createType('PalletProposalsDiscussionThreadModeBTreeSet', {
       closed: triggerAndDiscussion.discussionWhitelist?.map((member) =>
         createType('MemberId', Number.parseInt(member.id))
@@ -336,7 +331,7 @@ export const AddNewProposalModal = () => {
   }
 
   if (state.matches('success')) {
-    const { proposalDetails, proposalType } = form.getValues() as AddNewProposalForm
+    const { proposalDetails, proposalType } = formValues
     return (
       <SuccessModal
         onClose={hideModal}