refactor: Fetch allowances for vault only once in join flow (#3642)

src/composables/approvals/useTokenApprovalActions.ts

@@ -23,6 +23,7 @@ interface Params {
   spender: string;
   actionType: ApprovalAction;
   forceMax?: boolean;
+  skipAllowanceCheck?: boolean;
 }
 
 interface ApproveTokenParams {
@@ -90,12 +91,19 @@ export default function useTokenApprovalActions() {
     }
   }
 
+  async function updateAllowancesFor(spender: string): Promise<void> {
+    await injectSpenders([spender]);
+    await refetchAllowances();
+  }
+
   async function getApprovalsRequired(
     amountsToApprove: AmountToApprove[],
-    spender: string
+    spender: string,
+    skipAllowanceCheck = false
   ): Promise<AmountToApprove[]> {
-    await injectSpenders([spender]);
-    await refetchAllowances();
+    if (!skipAllowanceCheck) {
+      await updateAllowancesFor(spender);
+    }
 
     return approvalsRequired(amountsToApprove, spender);
   }
@@ -104,8 +112,7 @@ export default function useTokenApprovalActions() {
     amountToApprove: AmountToApprove,
     spender: string
   ): Promise<boolean> {
-    await injectSpenders([spender]);
-    await refetchAllowances();
+    await updateAllowancesFor(spender);
 
     return !approvalRequired(
       amountToApprove.address,
@@ -183,10 +190,12 @@ export default function useTokenApprovalActions() {
     spender,
     actionType,
     forceMax = true,
+    skipAllowanceCheck = false,
   }: Params): Promise<TransactionActionInfo[]> {
     const approvalsRequired = await getApprovalsRequired(
       amountsToApprove,
-      spender
+      spender,
+      skipAllowanceCheck
     );
 
     return approvalsRequired.map(amountToApprove => {
@@ -217,5 +226,6 @@ export default function useTokenApprovalActions() {
   return {
     approveToken,
     getTokenApprovalActions,
+    updateAllowancesFor,
   };
 }

src/providers/local/join-pool.provider.ts

@@ -118,7 +118,8 @@ export const joinPoolProvider = (
   const { transactionDeadline } = useApp();
   const { txState, txInProgress, resetTxState } = useTxState();
   const relayerApproval = useRelayerApprovalTx(RelayerType.BATCH);
-  const { getTokenApprovalActions } = useTokenApprovalActions();
+  const { getTokenApprovalActions, updateAllowancesFor } =
+    useTokenApprovalActions();
   const { relayerSignature, relayerApprovalAction } = useRelayerApproval(
     RelayerType.BATCH
   );
@@ -277,6 +278,7 @@ export const joinPoolProvider = (
       amountsToApprove: amountsToApprove.value,
       spender: appNetworkConfig.addresses.vault,
       actionType: ApprovalAction.AddLiquidity,
+      skipAllowanceCheck: true, // Done once beforeMount
     });
 
     approvalActions.value = shouldSignRelayer.value
@@ -422,6 +424,9 @@ export const joinPoolProvider = (
     // Ensure prices are fetched for token tree. When pool architecture is
     // refactored probably won't be required.
     injectTokens(poolJoinTokens.value);
+
+    // Make sure allowances on the vault are up to date.
+    updateAllowancesFor(appNetworkConfig.addresses.vault);
   });
 
   onMounted(() => (isMounted.value = true));