Merge branch 'main' into available-chains-lps

centrifuge-app/.env-config/.env.ff-prod

@@ -9,7 +9,7 @@ REACT_APP_ONBOARDING_API_URL=https://europe-central2-centrifuge-production-x.clo
 REACT_APP_PINNING_API_URL=https://europe-central2-centrifuge-production-x.cloudfunctions.net/pinning-api-production
 REACT_APP_POOL_CREATION_TYPE=propose
 REACT_APP_RELAY_WSS_URL=wss://rpc.polkadot.io
-REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools
+REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-multichain
 REACT_APP_SUBSCAN_URL=https://centrifuge.subscan.io
 REACT_APP_TINLAKE_NETWORK=mainnet
 REACT_APP_INFURA_KEY=8ed99a9a115349bbbc01dcf3a24edc96

centrifuge-app/.env-config/.env.production

@@ -9,7 +9,7 @@ REACT_APP_ONBOARDING_API_URL=https://europe-central2-centrifuge-production-x.clo
 REACT_APP_PINNING_API_URL=https://europe-central2-centrifuge-production-x.cloudfunctions.net/pinning-api-production
 REACT_APP_POOL_CREATION_TYPE=propose
 REACT_APP_RELAY_WSS_URL=wss://rpc.polkadot.io
-REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools
+REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-multichain
 REACT_APP_SUBSCAN_URL=https://centrifuge.subscan.io
 REACT_APP_TINLAKE_NETWORK=mainnet
 REACT_APP_INFURA_KEY=8ed99a9a115349bbbc01dcf3a24edc96

centrifuge-app/src/components/Charts/CashflowsChart.tsx

@@ -39,16 +39,14 @@ export const CashflowsChart = ({ poolStates, pool }: Props) => {
   const data = React.useMemo(
     () =>
       poolStates?.map((day) => {
-        const purchases = day.sumBorrowedAmountByPeriod
-          ? new CurrencyBalance(day.sumBorrowedAmountByPeriod, pool.currency.decimals).toDecimal().toNumber()
-          : 0
-        const principalRepayments = day.sumRepaidAmountByPeriod
-          ? new CurrencyBalance(day.sumRepaidAmountByPeriod, pool.currency.decimals).toDecimal().toNumber()
-          : 0
-        const interest = day.sumInterestRepaidAmountByPeriod
-          ? new CurrencyBalance(day.sumInterestRepaidAmountByPeriod, pool.currency.decimals).toDecimal().toNumber()
-          : 0
-        return { name: new Date(day.timestamp), purchases, principalRepayments, interest }
+        const purchases = new CurrencyBalance(day.sumBorrowedAmountByPeriod, pool.currency.decimals).toFloat()
+        const principalRepayments = new CurrencyBalance(day.sumRepaidAmountByPeriod, pool.currency.decimals).toFloat()
+
+        const interest = new CurrencyBalance(day.sumInterestRepaidAmountByPeriod, pool.currency.decimals).toFloat()
+        const fees =
+          new CurrencyBalance(day.sumPoolFeesChargedAmountByPeriod ?? 0, pool.currency.decimals).toFloat() +
+          new CurrencyBalance(day.sumPoolFeesAccruedAmountByPeriod ?? 0, pool.currency.decimals).toFloat()
+        return { name: new Date(day.timestamp), purchases, principalRepayments, interest, fees }
       }) || [],
     [poolStates, pool.currency.decimals]
   )
@@ -59,6 +57,7 @@ export const CashflowsChart = ({ poolStates, pool }: Props) => {
     totalPurchases: data.reduce((acc, cur) => acc + cur.purchases, 0),
     interest: data.reduce((acc, cur) => acc + cur.interest, 0),
     principalRepayments: data.reduce((acc, cur) => acc + cur.principalRepayments, 0),
+    fees: data.reduce((acc, cur) => acc + cur.fees, 0),
   }
 
   const getXAxisInterval = () => {
@@ -152,8 +151,8 @@ export const CashflowsChart = ({ poolStates, pool }: Props) => {
             />
             <Bar dataKey="purchases" stackId="a" fill="#001C66" />
             <Bar dataKey="principalRepayments" stackId="b" fill="#A4D5D8" />
-            <Bar dataKey="interest" stackId="b" fill={theme.colors.borderPrimary} />
-            {/* <Bar dataKey="fees" stackId="a" fill={theme.colors.statusCritical} /> */}
+            <Bar dataKey="interest" stackId="b" fill={theme.colors.borderSecondary} />
+            <Bar dataKey="fees" stackId="a" fill={theme.colors.statusCritical} />
           </BarChart>
         </ResponsiveContainer>
       </Box>
@@ -168,6 +167,7 @@ function CustomLegend({
     totalPurchases: number
     principalRepayments: number
     interest: number
+    fees: number
   }
 }) {
   const theme = useTheme()
@@ -195,7 +195,7 @@ function CustomLegend({
           borderLeftWidth="3px"
           pl={1}
           borderLeftStyle="solid"
-          borderLeftColor={theme.colors.borderPrimary}
+          borderLeftColor={theme.colors.borderSecondary}
           gap="4px"
         >
           <Text variant="body3" color="textSecondary" whiteSpace="nowrap">
@@ -205,7 +205,7 @@ function CustomLegend({
             {formatBalance(data.interest, 'USD', 2)}
           </Text>
         </Stack>
-        {/* <Stack
+        <Stack
           borderLeftWidth="3px"
           pl={1}
           borderLeftStyle="solid"
@@ -215,8 +215,8 @@ function CustomLegend({
           <Text variant="body3" color="textSecondary">
             Fees
           </Text>
-          <Text variant="body1">{formatBalance(0, 'USD', 2)}</Text>
-        </Stack> */}
+          <Text variant="body1">{formatBalance(data.fees, 'USD', 2)}</Text>
+        </Stack>
       </Shelf>
     </Shelf>
   )

centrifuge-app/src/components/DataTable.tsx

@@ -13,9 +13,11 @@ import {
   Text,
   Tooltip,
 } from '@centrifuge/fabric'
+
 import css from '@styled-system/css'
 import BN from 'bn.js'
 import Decimal from 'decimal.js-light'
+import { getIn } from 'formik'
 import * as React from 'react'
 import { Link, LinkProps } from 'react-router-dom'
 import styled from 'styled-components'
@@ -60,37 +62,22 @@ export type Column = {
 }
 const sorter = <T extends Record<string, any>>(data: Array<T>, order: OrderBy, sortKey?: string) => {
   if (!sortKey) return data
-  if (order === 'asc') {
-    return data.sort((a, b) => {
-      try {
-        if (
-          (a[sortKey] instanceof Decimal && b[sortKey] instanceof Decimal) ||
-          (BN.isBN(a[sortKey]) && BN.isBN(b[sortKey]))
-        )
-          return a[sortKey].gt(b[sortKey]) ? 1 : -1
-
-        if (typeof a[sortKey] === 'string' && typeof b[sortKey] === 'string') {
-          return new BN(a[sortKey]).gt(new BN(b[sortKey])) ? 1 : -1
-        }
-      } catch {}
-
-      return a[sortKey] > b[sortKey] ? 1 : -1
-    })
-  }
+  const up = order === 'asc' ? 1 : -1
+  const down = order === 'asc' ? -1 : 1
+
   return data.sort((a, b) => {
+    const A = getIn(a, sortKey)
+    const B = getIn(b, sortKey)
     try {
-      if (
-        (a[sortKey] instanceof Decimal && b[sortKey] instanceof Decimal) ||
-        (BN.isBN(a[sortKey]) && BN.isBN(b[sortKey]))
-      )
-        return b[sortKey].gt(a[sortKey]) ? 1 : -1
-
-      if (typeof a[sortKey] === 'string' && typeof b[sortKey] === 'string') {
-        return new BN(b[sortKey]).gt(new BN(a[sortKey])) ? 1 : -1
+      if ((A instanceof Decimal && B instanceof Decimal) || (BN.isBN(A) && BN.isBN(B)))
+        return A.gt(B as any) ? up : down
+
+      if (typeof A === 'string' && typeof B === 'string') {
+        return new BN(A).gt(new BN(B)) ? up : down
       }
     } catch {}
 
-    return b[sortKey] > a[sortKey] ? 1 : -1
+    return A > B ? up : down
   })
 }
 

centrifuge-app/src/components/DebugFlags/config.ts

@@ -51,7 +51,7 @@ export type Key =
   | 'showOracle'
   | 'poolCreationType'
   | 'podAdminSeed'
-  | 'holdersReport'
+  | 'assetSnapshots'
 
 export const flagsConfig: Record<Key, DebugFlagConfig> = {
   address: {
@@ -93,7 +93,7 @@ export const flagsConfig: Record<Key, DebugFlagConfig> = {
     default: '',
     type: 'text',
   },
-  holdersReport: {
+  assetSnapshots: {
     type: 'checkbox',
     default: false,
   },

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

@@ -22,7 +22,7 @@ export function InvestRedeemLiquidityPoolsProvider({ poolId, trancheId, children
   const centAddress = useAddress('substrate')
   const evmAddress = useAddress('evm')
   const {
-    evm: { isSmartContractWallet },
+    evm: { isSmartContractWallet, selectedWallet },
   } = useWallet()
   const consts = useCentrifugeConsts()
   const [lpIndex, setLpIndex] = React.useState(0)
@@ -144,7 +144,7 @@ export function InvestRedeemLiquidityPoolsProvider({ poolId, trancheId, children
     }
   }, [lps])
 
-  const supportsPermits = lpInvest?.currencySupportsPermit && !isSmartContractWallet
+  const supportsPermits = lpInvest?.currencySupportsPermit && !isSmartContractWallet && selectedWallet?.id !== 'finoa'
 
   const state: InvestRedeemState = {
     poolId,

centrifuge-app/src/components/PoolFees/ChargeFeesDrawer.tsx

@@ -8,7 +8,7 @@ import { useLocation, useParams } from 'react-router'
 import { CopyToClipboard } from '../../utils/copyToClipboard'
 import { Dec } from '../../utils/Decimal'
 import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting'
-import { usePool, usePoolMetadata } from '../../utils/usePools'
+import { usePool, usePoolFees, usePoolMetadata } from '../../utils/usePools'
 import { ButtonGroup } from '../ButtonGroup'
 
 type ChargeFeesProps = {
@@ -19,12 +19,13 @@ type ChargeFeesProps = {
 export const ChargeFeesDrawer = ({ onClose, isOpen }: ChargeFeesProps) => {
   const { pid: poolId } = useParams<{ pid: string }>()
   const pool = usePool(poolId)
+  const poolFees = usePoolFees(poolId)
   const { data: poolMetadata } = usePoolMetadata(pool)
   const { search } = useLocation()
   const params = new URLSearchParams(search)
   const feeIndex = params.get('charge')
   const feeMetadata = feeIndex ? poolMetadata?.pool?.poolFees?.find((f) => f.id.toString() === feeIndex) : undefined
-  const feeChainData = feeIndex ? pool?.poolFees?.find((f) => f.id.toString() === feeIndex) : undefined
+  const feeChainData = feeIndex ? poolFees?.find((f) => f.id.toString() === feeIndex) : undefined
   const maxCharge = feeChainData?.amounts.percentOfNav.toDecimal().mul(pool.nav.aum.toDecimal()).div(100)
   const [updateCharge, setUpdateCharge] = React.useState(false)
   const address = useAddress()