Enable CentrifugeRouter if needed

centrifuge-app/src/components/InvestRedeem/Claim.tsx

@@ -11,6 +11,8 @@ export function Claim({ type, onDismiss }: { type: 'invest' | 'redeem'; onDismis
   const isPending =
     !!state.pendingTransaction && ['creating', 'unconfirmed', 'pending'].includes(state.pendingTransaction?.status)
   const isCollecting = state.pendingAction === 'collect' && isPending
+  const isPreAction = state.pendingAction === 'preAction' && isPending
+
   return (
     <Stack gap={2}>
       {state.collectType === 'invest' ? (
@@ -52,24 +54,30 @@ export function Claim({ type, onDismiss }: { type: 'invest' | 'redeem'; onDismis
       )}
       {state.needsToCollectBeforeOrder && <InlineFeedback>Claim tokens before placing another order</InlineFeedback>}
       <ButtonGroup>
-        <Button
-          onClick={actions.collect}
-          loading={isCollecting}
-          aria-label={`Claim ${formatBalanceAbbreviated(
-            state.collectAmount,
-            ['invest', 'cancelRedeem'].includes(state.collectType)
-              ? state.trancheCurrency?.symbol
-              : state.poolCurrency?.symbol
-          )}`}
-        >
-          Claim{' '}
-          {formatBalanceAbbreviated(
-            state.collectAmount,
-            ['invest', 'cancelRedeem'].includes(state.collectType)
-              ? state.trancheCurrency?.symbol
-              : state.poolCurrency?.symbol
-          )}
-        </Button>
+        {state.needsPreAction('collect') ? (
+          <Button onClick={() => actions.preAction('collect')} loading={isPreAction}>
+            {state.needsPreAction('collect')}
+          </Button>
+        ) : (
+          <Button
+            onClick={actions.collect}
+            loading={isCollecting}
+            aria-label={`Claim ${formatBalanceAbbreviated(
+              state.collectAmount,
+              ['invest', 'cancelRedeem'].includes(state.collectType)
+                ? state.trancheCurrency?.symbol
+                : state.poolCurrency?.symbol
+            )}`}
+          >
+            Claim{' '}
+            {formatBalanceAbbreviated(
+              state.collectAmount,
+              ['invest', 'cancelRedeem'].includes(state.collectType)
+                ? state.trancheCurrency?.symbol
+                : state.poolCurrency?.symbol
+            )}
+          </Button>
+        )}
         {!state.needsToCollectBeforeOrder && (
           <Button variant="secondary" onClick={onDismiss}>
             {type === 'invest' ? 'Invest more' : 'Redeem'}

centrifuge-app/src/components/InvestRedeem/InvestForm.tsx

@@ -92,12 +92,20 @@ export function InvestForm({ autoFocus, investLabel = 'Invest' }: InvestFormProp
   const isInvesting = state.pendingAction === 'invest' && isPending
   const isCancelling = state.pendingAction === 'cancelInvest' && isPending
   const isApproving = state.pendingAction === 'approvePoolCurrency' && isPending
+  const isPreAction = state.pendingAction === 'preAction' && isPending
 
-  const preSubmitAction = state.needsPoolCurrencyApproval(inputToNumber(form.values.amount))
+  const preSubmitAction = state.needsPreAction('invest')
+    ? {
+        onClick: () => actions.preAction('invest'),
+        loading: isPreAction,
+        label: state.needsPreAction('invest'),
+      }
+    : state.needsPoolCurrencyApproval(inputToNumber(form.values.amount))
     ? {
         onClick: () =>
           actions.approvePoolCurrency(CurrencyBalance.fromFloat(form.values.amount, state.poolCurrency!.decimals)),
         loading: isApproving,
+        label: investLabel,
       }
     : null
 
@@ -206,16 +214,28 @@ export function InvestForm({ autoFocus, investLabel = 'Invest' }: InvestFormProp
             {state.collectType && !claimDismissed ? (
               <Claim type="invest" onDismiss={() => setClaimDismissed(true)} />
             ) : null}
-            {state.canCancelOrder && !state.collectType && hasPendingOrder && (
-              <Button
-                onClick={() => actions.cancelInvest()}
-                loading={isCancelling}
-                disabled={pool.epoch.status !== 'ongoing'}
-                variant="secondary"
-              >
-                {state.canChangeOrder ? 'Cancel' : 'Cancel order'}
-              </Button>
-            )}
+            {state.canCancelOrder &&
+              !state.collectType &&
+              hasPendingOrder &&
+              (state.needsPreAction('cancelInvest') ? (
+                <Button
+                  onClick={() => actions.preAction('cancelInvest')}
+                  loading={isPreAction}
+                  disabled={pool.epoch.status !== 'ongoing'}
+                  variant="secondary"
+                >
+                  {state.needsPreAction('cancelInvest')}
+                </Button>
+              ) : (
+                <Button
+                  onClick={() => actions.cancelInvest()}
+                  loading={isCancelling}
+                  disabled={pool.epoch.status !== 'ongoing'}
+                  variant="secondary"
+                >
+                  {state.canChangeOrder ? 'Cancel' : 'Cancel order'}
+                </Button>
+              ))}
           </ButtonGroup>
         </Stack>
       </Form>

centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx

@@ -60,6 +60,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
     approveTrancheToken: undefined,
     cancelInvest,
     cancelRedeem,
+    preAction: undefined,
   }
   const pendingTransaction = pendingAction && txActions[pendingAction]?.lastCreatedTransaction
 
@@ -140,6 +141,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
     needsToCollectBeforeOrder: false,
     needsPoolCurrencyApproval: () => false,
     needsTrancheTokenApproval: () => false,
+    needsPreAction: () => '',
     canChangeOrder: true,
     canCancelOrder: true,
     pendingAction,
@@ -156,6 +158,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
     cancelInvest: doAction('cancelInvest', () => [poolId, trancheId, new BN(0)], { account, forceProxyType: 'Invest' }),
     cancelRedeem: doAction('cancelRedeem', () => [poolId, trancheId, new BN(0)], { account, forceProxyType: 'Invest' }),
     selectPoolCurrency() {},
+    preAction() {},
   }
 
   const hooks = {

centrifuge-app/src/components/InvestRedeem/InvestRedeemLiquidityPoolsProvider.tsx

@@ -81,6 +81,7 @@ export function InvestRedeemLiquidityPoolsProvider({ poolId, trancheId, children
   const collectInvest = useEvmTransaction('Claim', (cent) => cent.liquidityPools.mint)
   const collectRedeem = useEvmTransaction('Withdraw', (cent) => cent.liquidityPools.withdraw)
   const approve = useEvmTransaction('Approve', (cent) => cent.liquidityPools.approveForCurrency)
+  const enableRouter = useEvmTransaction('Approve', (cent) => cent.liquidityPools.enableCentrifugeRouter)
   const cancelInvest = useEvmTransaction('Cancel order', (cent) => cent.liquidityPools.cancelInvestOrder)
   const cancelRedeem = useEvmTransaction('Cancel order', (cent) => cent.liquidityPools.cancelRedeemOrder)
   const collectCancelInvest = useEvmTransaction('Claim', (cent) => cent.liquidityPools.claimCancelDeposit)
@@ -104,6 +105,7 @@ export function InvestRedeemLiquidityPoolsProvider({ poolId, trancheId, children
     approveTrancheToken: approve,
     cancelInvest,
     cancelRedeem,
+    preAction: enableRouter,
   }
   const pendingAction = ['investWithPermit', 'decreaseInvest'].includes(pendingActionState!)
     ? 'invest'
@@ -205,6 +207,7 @@ export function InvestRedeemLiquidityPoolsProvider({ poolId, trancheId, children
       return lpInvest ? lpInvest.lpCurrencyAllowance.toFloat() < amount && !supportsPermits : false
     },
     needsTrancheTokenApproval: () => false,
+    needsPreAction: (action) => (lpInvest && !lpInvest.isRouterEnabled && action !== 'invest' ? 'Approve' : ''),
     canChangeOrder,
     canCancelOrder: !(lpInvest?.pendingCancelDepositRequest || lpInvest?.pendingCancelRedeemRequest),
     pendingAction,
@@ -256,6 +259,7 @@ export function InvestRedeemLiquidityPoolsProvider({ poolId, trancheId, children
       chainId,
     ]),
     approveTrancheToken: () => {},
+    preAction: doAction('preAction', () => [lpInvest?.lpAddress, chainId]),
     cancelInvest: doAction('cancelInvest', () => [lpInvest?.lpAddress, chainId], undefined, { poolId, trancheId }),
     cancelRedeem: doAction('cancelRedeem', () => [lpInvest?.lpAddress, chainId], undefined, { poolId, trancheId }),
     selectPoolCurrency(symbol) {

centrifuge-app/src/components/InvestRedeem/InvestRedeemTinlakeProvider.tsx

@@ -63,6 +63,7 @@ export function InvestRedeemTinlakeProvider({ poolId, trancheId, children }: Pro
     approveTrancheToken,
     cancelInvest,
     cancelRedeem,
+    preAction: undefined,
   }
   const pendingTransaction = pendingAction && txActions[pendingAction]?.lastCreatedTransaction
 
@@ -133,6 +134,7 @@ export function InvestRedeemTinlakeProvider({ poolId, trancheId, children }: Pro
     needsToCollectBeforeOrder: !collectAmount.isZero(),
     needsPoolCurrencyApproval: (amount) => Dec(amount).gt(trancheInvestment?.poolCurrencyAllowance ?? 0),
     needsTrancheTokenApproval: (amount) => Dec(amount).gt(trancheInvestment?.tokenAllowance ?? 0),
+    needsPreAction: () => '',
     canChangeOrder: true,
     canCancelOrder: true,
     pendingAction,
@@ -149,6 +151,7 @@ export function InvestRedeemTinlakeProvider({ poolId, trancheId, children }: Pro
     cancelInvest: doAction('cancelInvest', () => [seniority, new BN(0)]),
     cancelRedeem: doAction('cancelRedeem', () => [seniority, new BN(0)]),
     selectPoolCurrency() {},
+    preAction() {},
   }
 
   const hooks = {

centrifuge-app/src/components/InvestRedeem/RedeemForm.tsx

@@ -90,8 +90,15 @@ export function RedeemForm({ autoFocus }: RedeemFormProps) {
   const isApproving = state.pendingAction === 'approveTrancheToken' && isPending
 
   const calculatingOrders = pool.epoch.status !== 'ongoing'
+  const isPreAction = state.pendingAction === 'preAction' && isPending
 
-  const preSubmitAction = state.needsTrancheTokenApproval(inputToNumber(form.values.amount))
+  const preSubmitAction = state.needsPreAction('redeem')
+    ? {
+        onClick: () => actions.preAction('redeem'),
+        loading: isPreAction,
+        label: state.needsPreAction('redeem'),
+      }
+    : state.needsTrancheTokenApproval(inputToNumber(form.values.amount))
     ? {
         onClick: () =>
           actions.approveTrancheToken(TokenBalance.fromFloat(form.values.amount, state.trancheCurrency!.decimals)),

centrifuge-app/src/components/InvestRedeem/types.ts

@@ -15,6 +15,7 @@ export type InvestRedeemAction =
   | 'approveTrancheToken'
   | 'cancelInvest'
   | 'cancelRedeem'
+  | 'preAction'
 
 export type InvestRedeemState = {
   poolId: string
@@ -52,6 +53,7 @@ export type InvestRedeemState = {
   needsToCollectBeforeOrder: boolean
   needsPoolCurrencyApproval: (amount: number) => boolean
   needsTrancheTokenApproval: (amount: number) => boolean
+  needsPreAction: (action: InvestRedeemAction) => string
   canChangeOrder: boolean
   canCancelOrder: boolean
   pendingAction?: InvestRedeemAction | null
@@ -71,6 +73,7 @@ export type InvestRedeemActions = {
   collect(): void
   approvePoolCurrency(amount: BN): void
   approveTrancheToken(amount: BN): void
+  preAction(action: InvestRedeemAction): void
   cancelInvest(): void
   cancelRedeem(): void
   selectPoolCurrency(symbol: string): void

centrifuge-js/src/modules/liquidityPools.ts

@@ -283,6 +283,13 @@ export function getLiquidityPoolsModule(inst: Centrifuge) {
     return permit as Permit
   }
 
+  function enableCentrifugeRouter(args: [lpAddress: string, chainId: number], options: TransactionRequest = {}) {
+    const [lpAddress, chainId] = args
+    const centrifugeRouterAddress = getCentrifugeRouterAddress(chainId)
+
+    return pending(contract(centrifugeRouterAddress, new Interface(ABI.CentrifugeRouter)).enable(lpAddress, options))
+  }
+
   function increaseInvestOrder(
     args: [lpAddress: string, order: BN, chainId: number],
     options: TransactionRequest = {}
@@ -834,6 +841,11 @@ export function getLiquidityPoolsModule(inst: Centrifuge) {
         call: ['function maxRedeem(address) view returns (uint256)', user],
         returns: [['maxRedeem', currencyBalanceTransform]],
       },
+      {
+        target: getCentrifugeRouterAddress(chainId),
+        call: ['function isEnabled(address, address) view returns (bool)', lp.lpAddress, user],
+        returns: [['isRouterEnabled']],
+      },
     ]
 
     const pool = await multicall<{
@@ -851,6 +863,7 @@ export function getLiquidityPoolsModule(inst: Centrifuge) {
       claimableCancelRedeemRequest: TokenBalance
       pendingCancelDepositRequest: boolean
       pendingCancelRedeemRequest: boolean
+      isRouterEnabled: boolean
     }>(calls, {
       rpcProvider: options?.rpcProvider ?? inst.config.evmSigner?.provider!,
     })
@@ -882,5 +895,6 @@ export function getLiquidityPoolsModule(inst: Centrifuge) {
     getLiquidityPoolInvestment,
     getRecentLPEvents,
     getCentrifugeRouterAllowance,
+    enableCentrifugeRouter,
   }
 }