Centrifuge App: Liquidity pools investments

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

@@ -23,7 +23,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
   const tranche = pool.tranches.find((t) => t.id === trancheId)
   const { data: metadata, isLoading: isMetadataLoading } = usePoolMetadata(pool)
   const trancheMeta = metadata?.tranches?.[trancheId]
-  const { state: liquidityState } = useLiquidityRewards()
+  const liquidityState = useLiquidityRewards().state
 
   if (!tranche) throw new Error(`Token not found. Pool id: ${poolId}, token id: ${trancheId}`)
 
@@ -95,7 +95,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
     ).toDecimal(),
     nativeBalance: balances?.native.balance.toDecimal() ?? Dec(0),
     poolCurrencyBalance: poolCurBalance,
-    poolCUrrencyBalanceWithPending: poolCurBalanceCombined,
+    poolCurrencyBalanceWithPending: poolCurBalanceCombined,
     trancheBalance,
     trancheBalanceWithPending: combinedBalance,
     investmentValue,
@@ -115,6 +115,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
     needsToCollectBeforeOrder: false,
     needsPoolCurrencyApproval: false,
     needsTrancheTokenApproval: false,
+    canChangeOrder: true,
     pendingAction,
     pendingTransaction: pendingAction && txActions[pendingAction]?.lastCreatedTransaction,
   }

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

@@ -0,0 +1,160 @@
+import { CurrencyBalance, Pool } from '@centrifuge/centrifuge-js'
+import { useEvmNativeBalance, useEvmNativeCurrency } from '@centrifuge/centrifuge-react'
+import { TransactionRequest } from '@ethersproject/providers'
+import BN from 'bn.js'
+import * as React from 'react'
+import { Dec } from '../../utils/Decimal'
+import { useEvmTransaction } from '../../utils/tinlake/useEvmTransaction'
+import { useAddress } from '../../utils/useAddress'
+import { useLiquidityPoolInvestment, useLiquidityPools } from '../../utils/useLiquidityPools'
+import { usePendingCollect, usePool, usePoolMetadata } from '../../utils/usePools'
+import { InvestRedeemContext } from './InvestRedeemProvider'
+import { InvestRedeemAction, InvestRedeemActions, InvestRedeemProviderProps as Props, InvestRedeemState } from './types'
+
+export function InvestRedeemLiquidityPoolsProvider({ poolId, trancheId, children }: Props) {
+  const centAddress = useAddress('substrate')
+  const evmAddress = useAddress('evm')
+  const { data: evmNativeBalance } = useEvmNativeBalance(evmAddress)
+  const evmNativeCurrency = useEvmNativeCurrency()
+  const order = usePendingCollect(poolId, trancheId, centAddress)
+  const pool = usePool(poolId) as Pool
+  const [pendingAction, setPendingAction] = React.useState<InvestRedeemAction>()
+  const { isLoading: isLpsLoading } = useLiquidityPools(poolId, trancheId)
+  const {
+    data: lpInvest,
+    refetch: refetchInvest,
+    isLoading: isInvestmentLoading,
+  } = useLiquidityPoolInvestment(poolId, trancheId)
+  const isAllowedToInvest = lpInvest?.isAllowedToInvest
+  const tranche = pool.tranches.find((t) => t.id === trancheId)
+  const { data: metadata, isLoading: isMetadataLoading } = usePoolMetadata(pool)
+  const trancheMeta = metadata?.tranches?.[trancheId]
+
+  if (!tranche) throw new Error(`Token not found. Pool id: ${poolId}, token id: ${trancheId}`)
+
+  const trancheBalance = lpInvest?.tokenBalance?.toDecimal() ?? Dec(0)
+
+  const price = lpInvest?.tokenPrice?.toDecimal() ?? Dec(1)
+  const investToCollect = lpInvest?.maxMint.toDecimal() ?? Dec(0)
+  const currencyToCollect = lpInvest?.maxWithdraw.toDecimal() ?? Dec(0)
+  const pendingRedeem = order?.remainingRedeemToken.toDecimal() ?? Dec(0)
+  const combinedTrancheBalance = trancheBalance.add(investToCollect).add(pendingRedeem)
+  const investmentValue = combinedTrancheBalance.mul(price)
+  const poolCurBalance = lpInvest?.currencyBalance.toDecimal() ?? Dec(0)
+  const poolCurBalanceCombined = poolCurBalance
+    .add(currencyToCollect)
+    .add(order?.remainingInvestCurrency.toDecimal() ?? 0)
+
+  const isCalculatingOrders = pool.epoch.status !== 'ongoing'
+
+  const collectType = investToCollect.gt(0) ? 'invest' : currencyToCollect.gt(0) ? 'redeem' : null
+
+  const invest = useEvmTransaction('Invest', (cent) => cent.liquidityPools.updateInvestOrder)
+  const redeem = useEvmTransaction('Redeem', (cent) => cent.liquidityPools.updateRedeemOrder)
+  const collectInvest = useEvmTransaction('Collect', (cent) => cent.liquidityPools.mint)
+  const collectRedeem = useEvmTransaction('Collect', (cent) => cent.liquidityPools.withdraw)
+  const approve = useEvmTransaction('Approve', (cent) => cent.liquidityPools.approveManagerForCurrency)
+  const cancelInvest = useEvmTransaction('Cancel order', (cent) => cent.liquidityPools.updateInvestOrder)
+  const cancelRedeem = useEvmTransaction('Cancel order', (cent) => cent.liquidityPools.updateRedeemOrder)
+
+  const txActions = {
+    invest,
+    redeem,
+    collect: collectType === 'invest' ? collectInvest : collectRedeem,
+    approvePoolCurrency: approve,
+    approveTrancheToken: approve,
+    cancelInvest,
+    cancelRedeem,
+  }
+  const pendingTransaction = pendingAction && txActions[pendingAction]?.lastCreatedTransaction
+
+  function doAction<T = any>(
+    name: InvestRedeemAction,
+    fn: (arg: T) => any[],
+    opt?: TransactionRequest
+  ): (args?: T) => void {
+    return (args) => {
+      txActions[name]?.execute(fn(args!) as any, opt)
+      setPendingAction(name)
+    }
+  }
+
+  React.useEffect(() => {
+    if (pendingAction && pendingTransaction?.status === 'succeeded') {
+      refetchInvest()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pendingTransaction?.status])
+
+  function useActionSucceeded(cb: (action: InvestRedeemAction) => void) {
+    React.useEffect(() => {
+      if (pendingAction && pendingTransaction?.status === 'succeeded') {
+        cb(pendingAction)
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pendingTransaction?.status])
+  }
+
+  const state: InvestRedeemState = {
+    poolId,
+    trancheId,
+    isDataLoading: isLpsLoading || isInvestmentLoading || isMetadataLoading,
+    isAllowedToInvest,
+    isPoolBusy: isCalculatingOrders,
+    isFirstInvestment: order?.submittedAt === 0 && order.investCurrency.isZero(),
+    nativeCurrency: evmNativeCurrency,
+    trancheCurrency: tranche.currency,
+    poolCurrency: lpInvest && {
+      decimals: lpInvest.currencyDecimals,
+      symbol: lpInvest.currencySymbol,
+    },
+    capacity: tranche.capacity.toDecimal(),
+    minInitialInvestment: new CurrencyBalance(
+      trancheMeta?.minInitialInvestment ?? 0,
+      pool.currency.decimals
+    ).toDecimal(),
+    nativeBalance: evmNativeBalance?.toDecimal() ?? Dec(0),
+    poolCurrencyBalance: poolCurBalance,
+    poolCurrencyBalanceWithPending: poolCurBalanceCombined,
+    trancheBalance,
+    trancheBalanceWithPending: combinedTrancheBalance,
+    investmentValue,
+    tokenPrice: price,
+    order: order
+      ? {
+          investCurrency: order.investCurrency.toDecimal(),
+          redeemToken: order.redeemToken.toDecimal(),
+          payoutCurrencyAmount: order.payoutCurrencyAmount.toDecimal(),
+          payoutTokenAmount: order.payoutTokenAmount.toDecimal(),
+          remainingInvestCurrency: order.remainingInvestCurrency.toDecimal(),
+          remainingRedeemToken: order.remainingRedeemToken.toDecimal(),
+        }
+      : null,
+    collectAmount: investToCollect.gt(0) ? investToCollect : currencyToCollect,
+    collectType,
+    needsToCollectBeforeOrder: investToCollect.gt(0) || currencyToCollect.gt(0),
+    needsPoolCurrencyApproval: lpInvest?.managerCurrencyAllowance.isZero() ?? false,
+    needsTrancheTokenApproval: lpInvest?.managerTrancheTokenAllowance.isZero() ?? false,
+    canChangeOrder: false,
+    pendingAction,
+    pendingTransaction: pendingAction && txActions[pendingAction]?.lastCreatedTransaction,
+  }
+
+  const actions: InvestRedeemActions = {
+    invest: doAction('invest', (newOrder: BN) => [lpInvest?.lpAddress, newOrder]),
+    redeem: doAction('redeem', (newOrder: BN) => [lpInvest?.lpAddress, newOrder]),
+    collect: doAction('collect', () =>
+      collectType === 'invest' ? [lpInvest?.lpAddress, lpInvest?.maxMint] : [lpInvest?.lpAddress, lpInvest?.maxWithdraw]
+    ),
+    approvePoolCurrency: doAction('approvePoolCurrency', () => [lpInvest?.managerAddress, lpInvest?.currencyAddress]),
+    approveTrancheToken: doAction('approveTrancheToken', () => [lpInvest?.managerAddress, lpInvest?.lpAddress]),
+    cancelInvest: doAction('cancelInvest', () => [lpInvest?.lpAddress, new BN(0)]),
+    cancelRedeem: doAction('cancelRedeem', () => [lpInvest?.lpAddress, new BN(0)]),
+  }
+
+  const hooks = {
+    useActionSucceeded,
+  }
+
+  return <InvestRedeemContext.Provider value={{ state, actions, hooks }}>{children}</InvestRedeemContext.Provider>
+}

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

@@ -1,6 +1,7 @@
 import { useWallet } from '@centrifuge/centrifuge-react'
 import * as React from 'react'
 import { InvestRedeemCentrifugeProvider } from './InvestRedeemCentrifugeProvider'
+import { InvestRedeemLiquidityPoolsProvider } from './InvestRedeemLiquidityPoolsProvider'
 import { InvestRedeemTinlakeProvider } from './InvestRedeemTinlakeProvider'
 import { InvestRedeemContext as InvestRedeemContextType, InvestRedeemProviderProps as Props } from './types'
 
@@ -14,12 +15,12 @@ export function useInvestRedeem() {
 
 export function InvestRedeemProvider(props: Props) {
   const isTinlakePool = props.poolId.startsWith('0x')
-  const { connectedNetwork } = useWallet()
-  if (connectedNetwork && [1, 5, 8453, 84531].includes(connectedNetwork as any)) {
-    return null
-  }
-
-  const Comp = isTinlakePool ? InvestRedeemTinlakeProvider : InvestRedeemCentrifugeProvider
+  const { connectedType, isEvmOnSubstrate } = useWallet()
+  const Comp = isTinlakePool
+    ? InvestRedeemTinlakeProvider
+    : connectedType === 'evm' && !isEvmOnSubstrate
+    ? InvestRedeemLiquidityPoolsProvider
+    : InvestRedeemCentrifugeProvider
 
   return <Comp {...props} />
 }

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

@@ -72,13 +72,18 @@ export function InvestRedeemTinlakeProvider({ poolId, trancheId, children }: Pro
       setPendingAction(name)
     }
   }
+  React.useEffect(() => {
+    if (pendingAction && pendingTransaction?.status === 'succeeded') {
+      refetchInvestment()
+      refetchBalance()
+      refetchBalances()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pendingTransaction?.status])
 
   function useActionSucceeded(cb: (action: InvestRedeemAction) => void) {
     React.useEffect(() => {
       if (pendingAction && pendingTransaction?.status === 'succeeded') {
-        refetchInvestment()
-        refetchBalance()
-        refetchBalances()
         cb(pendingAction)
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -102,7 +107,7 @@ export function InvestRedeemTinlakeProvider({ poolId, trancheId, children }: Pro
     ).toDecimal(),
     nativeBalance: nativeBalance?.toDecimal() || Dec(0),
     poolCurrencyBalance: poolCurrencyBalance,
-    poolCUrrencyBalanceWithPending: poolCurrencyBalance.add(disburse?.remainingInvestCurrency || 0),
+    poolCurrencyBalanceWithPending: poolCurrencyBalance.add(disburse?.remainingInvestCurrency || 0),
     trancheBalance,
     trancheBalanceWithPending: combinedBalance,
     investmentValue,
@@ -120,6 +125,7 @@ export function InvestRedeemTinlakeProvider({ poolId, trancheId, children }: Pro
     needsToCollectBeforeOrder: !collectAmount.isZero(),
     needsPoolCurrencyApproval: !!trancheInvestment?.poolCurrencyAllowance.isZero(),
     needsTrancheTokenApproval: !!trancheInvestment?.tokenAllowance.isZero(),
+    canChangeOrder: true,
     pendingAction,
     pendingTransaction: pendingAction && txActions[pendingAction]?.lastCreatedTransaction,
   }

centrifuge-app/src/components/LiquidityRewards/LightButton.tsx → centrifuge-app/src/components/InvestRedeem/LightButton.tsx

@@ -1,7 +1,7 @@
 import css from '@styled-system/css'
 import styled from 'styled-components'
 
-export const LightButton = styled.button<{ $left?: boolean; $right?: boolean }>(
+export const LightButton = styled.button(
   {
     display: 'flex',
     justifyContent: 'center',
@@ -14,14 +14,18 @@ export const LightButton = styled.button<{ $left?: boolean; $right?: boolean }>(
   (props) =>
     css({
       color: 'textPrimary',
-      borderBottomLeftRadius: props.$left ? 'card' : undefined,
-      borderBottomRightRadius: props.$right ? 'card' : undefined,
       backgroundColor: 'secondarySelectedBackground',
       '&:hover, &:focus-visible': {
         color: 'textSelected',
       },
       '&:disabled': {
         cursor: 'not-allowed',
       },
+      '&:first-child': {
+        borderBottomLeftRadius: 'card',
+      },
+      '&:last-child': {
+        borderBottomRightRadius: 'card',
+      },
     })
 )

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

@@ -29,7 +29,7 @@ export type InvestRedeemState = {
   minInitialInvestment: Decimal
   nativeBalance: Decimal
   poolCurrencyBalance: Decimal
-  poolCUrrencyBalanceWithPending: Decimal
+  poolCurrencyBalanceWithPending: Decimal
   trancheBalance: Decimal
   trancheBalanceWithPending: Decimal
   investmentValue: Decimal
@@ -47,6 +47,7 @@ export type InvestRedeemState = {
   needsToCollectBeforeOrder: boolean
   needsPoolCurrencyApproval: boolean
   needsTrancheTokenApproval: boolean
+  canChangeOrder: boolean
   pendingAction?: InvestRedeemAction | null
   pendingTransaction?: Transaction | null
 }

centrifuge-app/src/components/LiquidityRewards/LiquidityRewardsProvider.tsx

@@ -10,14 +10,15 @@ import { LiquidityRewardsContext } from './LiquidityRewardsContext'
 import { LiquidityRewardsActions, LiquidityRewardsProviderProps, LiquidityRewardsState } from './types'
 
 export function LiquidityRewardsProvider(props: LiquidityRewardsProviderProps) {
+  // const { connectedType, isEvmOnSubstrate } = useWallet()
   const isTinlakePool = props.poolId.startsWith('0x')
   return !isTinlakePool ? <Provider {...props} /> : <>{props.children}</>
 }
 
 function Provider({ poolId, trancheId, children }: LiquidityRewardsProviderProps) {
   const pool = usePool(poolId) as Pool
   const consts = useCentrifugeConsts()
-  const address = useAddress()
+  const address = useAddress('substrate')
   const order = usePendingCollect(poolId, trancheId, address)
   const stakes = useAccountStakes(address, poolId, trancheId)
   const rewards = useComputeLiquidityRewards(address, poolId, trancheId)

centrifuge-app/src/components/LiquidityRewards/LiquidityRewardsStaker.tsx

@@ -2,8 +2,8 @@ import { Box, Divider, Grid, IconCheckInCircle, Shelf, Stack, Text } from '@cent
 import * as React from 'react'
 import { millisecondsToDays } from '../../utils/date'
 import { formatBalance } from '../../utils/formatting'
+import { LightButton } from '../InvestRedeem/LightButton'
 import { useActiveEpochData } from './hooks'
-import { LightButton } from './LightButton'
 import { useLiquidityRewards } from './LiquidityRewardsContext'
 
 export function LiquidityRewardsStaker() {
@@ -69,19 +69,14 @@ export function LiquidityRewardsStaker() {
 
       <Grid mt="1px" gap="1px" columns={canStake && canUnstake ? 2 : 1}>
         {canStake && (
-          <LightButton onClick={stake} $left $right={!canUnstake} disabled={isLoading.unstake || isLoading.stake}>
+          <LightButton onClick={stake} disabled={isLoading.unstake || isLoading.stake}>
             <Text variant="body2" color="inherit">
               Stake
             </Text>
           </LightButton>
         )}
         {canUnstake && (
-          <LightButton
-            onClick={() => unstake()}
-            $left={!canStake}
-            $right
-            disabled={isLoading.unstake || isLoading.stake}
-          >
+          <LightButton onClick={() => unstake()} disabled={isLoading.unstake || isLoading.stake}>
             <Text variant="body2" color="inherit">
               Unstake
             </Text>

centrifuge-app/src/components/LiquidityRewards/hooks.ts

@@ -6,7 +6,6 @@ export function useAccountStakes(address?: string, poolId?: string, trancheId?:
     ['stakes', address, poolId, trancheId],
     (cent) => cent.rewards.getAccountStakes([address!, poolId!, trancheId!]),
     {
-      suspense: true,
       enabled: !!address && !!poolId && !!trancheId,
     }
   )