🧮 Reduce fee re-calculation in AddNewProposalModal (#4469)

* Reduce fee re-calculation in `AddNewProposalModal`

* Fix the "warningAccepted" logic

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}