From 077f923182630fae8b1137840a0cdba108d01ada Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Tue, 23 Jul 2024 11:12:01 +0200
Subject: [PATCH 1/9] Nav Management: Include pending fees in nav total (#2301)

---
 .../src/pages/NavManagement/NavManagementAssetTable.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/centrifuge-app/src/pages/NavManagement/NavManagementAssetTable.tsx b/centrifuge-app/src/pages/NavManagement/NavManagementAssetTable.tsx
index ef4dc2670..99e395164 100644
--- a/centrifuge-app/src/pages/NavManagement/NavManagementAssetTable.tsx
+++ b/centrifuge-app/src/pages/NavManagement/NavManagementAssetTable.tsx
@@ -187,7 +187,7 @@ export function NavManagementAssetTable({ poolId }: { poolId: string }) {
     0
   )
   const newNavCash = cashLoans.reduce((acc, cur) => acc + cur.outstandingDebt.toFloat(), 0)
-  const newNav = newNavExternal + newNavCash + poolReserve
+  const newNav = newNavExternal + newNavCash + poolReserve - pendingFees.toFloat()
   // Only for single tranche pools
   const newPrice = newNav / pool.tranches[0].totalIssuance.toFloat()
   const isTinlakePool = poolId.startsWith('0x')
@@ -300,7 +300,7 @@ export function NavManagementAssetTable({ poolId }: { poolId: string }) {
                 current={pool.nav.total.toFloat()}
                 change={newNav - pool.nav.total.toFloat()}
                 pendingFees={pendingFees.toFloat()}
-                pendingNav={newNav - pendingFees.toFloat()}
+                pendingNav={newNav}
               />
             </Stack>
             {pool.tranches.length === 1 && (

From cede9eb20dfca101a33f0d5224e9fc179e29ba28 Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Tue, 23 Jul 2024 09:25:32 -0500
Subject: [PATCH 2/9] Use evm inputs for issuers (#2226)

* Add EVM input to components

* Throw error
---
 .../components/PoolFees/EditFeesDrawer.tsx    | 32 +++++++------------
 .../IssuerPool/Access/AssetOriginators.tsx    | 11 +++++--
 .../pages/IssuerPool/Access/MultisigForm.tsx  |  8 +++--
 .../Configuration/AddAddressInput.tsx         | 32 +++++++++++++------
 .../IssuerPool/Investors/InvestorStatus.tsx   | 13 ++++----
 centrifuge-js/src/utils/index.ts              |  2 ++
 fabric/src/components/TextInput/index.tsx     | 22 +++++++++----
 7 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/centrifuge-app/src/components/PoolFees/EditFeesDrawer.tsx b/centrifuge-app/src/components/PoolFees/EditFeesDrawer.tsx
index ec9fd78b8..3fa55b252 100644
--- a/centrifuge-app/src/components/PoolFees/EditFeesDrawer.tsx
+++ b/centrifuge-app/src/components/PoolFees/EditFeesDrawer.tsx
@@ -1,13 +1,12 @@
-import { AddFee, PoolMetadata, Rate } from '@centrifuge/centrifuge-js'
-import { useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
+import { AddFee, PoolMetadata, Rate, evmToSubstrateAddress } from '@centrifuge/centrifuge-js'
+import { useCentEvmChainId, useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
 import {
+  AddressInput,
   Box,
   Button,
   Drawer,
   Flex,
   Grid,
-  IconButton,
-  IconCopy,
   IconMinusCircle,
   IconPlusCircle,
   NumberInput,
@@ -22,11 +21,11 @@ import React from 'react'
 import { useParams } from 'react-router'
 import { feeCategories } from '../../config'
 import { Dec } from '../../utils/Decimal'
-import { copyToClipboard } from '../../utils/copyToClipboard'
+import { isEvmAddress } from '../../utils/address'
 import { formatPercentage } from '../../utils/formatting'
 import { usePoolAdmin, useSuitableAccounts } from '../../utils/usePermissions'
 import { usePool, usePoolFees, usePoolMetadata } from '../../utils/usePools'
-import { combine, max, positiveNumber, required, substrateAddress } from '../../utils/validation'
+import { combine, max, positiveNumber, required } from '../../utils/validation'
 import { ButtonGroup } from '../ButtonGroup'
 
 type ChargeFeesProps = {
@@ -54,6 +53,7 @@ export const EditFeesDrawer = ({ onClose, isOpen }: ChargeFeesProps) => {
   const { data: poolMetadata, isLoading } = usePoolMetadata(pool)
   const poolAdmin = usePoolAdmin(poolId)
   const account = useSuitableAccounts({ poolId, poolRole: ['PoolAdmin'] })[0]
+  const chainId = useCentEvmChainId()
 
   const initialFormData = React.useMemo(() => {
     return poolFees
@@ -116,11 +116,14 @@ export const EditFeesDrawer = ({ onClose, isOpen }: ChargeFeesProps) => {
           )
         })
         .map((fee) => {
+          const destination = isEvmAddress(fee.receivingAddress)
+            ? evmToSubstrateAddress(fee.receivingAddress, chainId)
+            : fee.receivingAddress
           return {
             poolId,
             fee: {
               name: fee.feeName,
-              destination: fee.receivingAddress,
+              destination,
               amount: Rate.fromPercent(Dec(fee?.percentOfNav || 0)),
               feeId: fee.feeId,
               feeType: fee.type,
@@ -278,24 +281,13 @@ export const EditFeesDrawer = ({ onClose, isOpen }: ChargeFeesProps) => {
                                       </Field>
                                     </Stack>
                                   </Shelf>
-                                  <Field
-                                    name={`poolFees.${index}.receivingAddress`}
-                                    validate={combine(required(), substrateAddress())}
-                                  >
+                                  <Field name={`poolFees.${index}.receivingAddress`} validate={required()}>
                                     {({ field, meta }: FieldProps) => {
                                       return (
-                                        <TextInput
+                                        <AddressInput
                                           {...field}
                                           disabled={!poolAdmin || updateFeeTxLoading}
                                           label="Receiving address"
-                                          symbol={
-                                            <IconButton
-                                              onClick={() => copyToClipboard(values.receivingAddress)}
-                                              title="Copy address to clipboard"
-                                            >
-                                              <IconCopy />
-                                            </IconButton>
-                                          }
                                           errorMessage={(meta.touched && meta.error) || ''}
                                         />
                                       )
diff --git a/centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx b/centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx
index 8032c501d..6e6a77a9c 100644
--- a/centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx
@@ -1,6 +1,7 @@
 import {
   addressToHex,
   computeTrancheId,
+  evmToSubstrateAddress,
   getCurrencyLocation,
   isSameAddress,
   PoolMetadata,
@@ -8,6 +9,7 @@ import {
   WithdrawAddress,
 } from '@centrifuge/centrifuge-js'
 import {
+  useCentEvmChainId,
   useCentrifuge,
   useCentrifugeApi,
   useCentrifugeConsts,
@@ -118,6 +120,7 @@ function AOForm({
   poolId: string
 }) {
   const [isEditing, setIsEditing] = React.useState(false)
+  const chainId = useCentEvmChainId()
   const [account] = useSuitableAccounts({ poolId, actingAddress: [ao.address] }).filter((a) => a.proxies?.length === 2)
   const identity = useIdentity(ao.address)
   const api = useCentrifugeApi()
@@ -311,8 +314,8 @@ function AOForm({
       }
       execute(
         [
-          addedWithdraw.map((w) => getKeyForReceiver(api, w)),
-          removedWithdraw.map((w) => getKeyForReceiver(api, w)),
+          addedWithdraw.filter((w) => Object.keys(w).length !== 0).map((w) => getKeyForReceiver(api, w)),
+          removedWithdraw.filter((w) => Object.keys(w).length !== 0).map((w) => getKeyForReceiver(api, w)),
           null,
           addedPermissions,
           addedDelegates,
@@ -438,7 +441,9 @@ function AOForm({
                       <AddAddressInput
                         existingAddresses={[...form.values.delegates, ao.address]}
                         onAdd={(address) => {
-                          fldArr.push(addressToHex(address))
+                          fldArr.push(
+                            isEvmAddress(address) ? evmToSubstrateAddress(address, chainId ?? 0) : addressToHex(address)
+                          )
                         }}
                       />
                     )}
diff --git a/centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx b/centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx
index 248839063..0f39d9fd6 100644
--- a/centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx
@@ -1,16 +1,20 @@
-import { addressToHex } from '@centrifuge/centrifuge-js'
+import { evmToSubstrateAddress } from '@centrifuge/centrifuge-js'
+import { useCentEvmChainId } from '@centrifuge/centrifuge-react'
 import { Button, IconMinusCircle, Stack, Text } from '@centrifuge/fabric'
 import { FieldArray, useFormikContext } from 'formik'
 import * as React from 'react'
 import { DataTable } from '../../../components/DataTable'
 import { Identity } from '../../../components/Identity'
+import { isEvmAddress } from '../../../utils/address'
 import { AddAddressInput } from '../Configuration/AddAddressInput'
 import { ChangeThreshold } from './ChangeTreshold'
 import type { PoolManagersInput } from './PoolManagers'
 
 type Row = { address: string; index: number }
 type Props = { isEditing?: boolean; isLoading?: boolean; canRemoveFirst?: boolean }
+
 export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoading }: Props) {
+  const chainId = useCentEvmChainId()
   const form = useFormikContext<PoolManagersInput>()
   const { adminMultisig } = form.values
   const rows = React.useMemo(
@@ -66,7 +70,7 @@ export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoadin
                   if (adminMultisig.signers.length === 1) {
                     form.setFieldValue('adminMultisig.threshold', 2, false)
                   }
-                  fldArr.push(addressToHex(address))
+                  fldArr.push(isEvmAddress(address) ? evmToSubstrateAddress(address, chainId ?? 0) : address)
                 }}
               />
             )}
diff --git a/centrifuge-app/src/pages/IssuerPool/Configuration/AddAddressInput.tsx b/centrifuge-app/src/pages/IssuerPool/Configuration/AddAddressInput.tsx
index 20d10c918..6c7009f4f 100644
--- a/centrifuge-app/src/pages/IssuerPool/Configuration/AddAddressInput.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Configuration/AddAddressInput.tsx
@@ -1,6 +1,6 @@
-import { isSameAddress } from '@centrifuge/centrifuge-js'
+import { addressToHex, isSameAddress } from '@centrifuge/centrifuge-js'
 import { useCentrifugeUtils } from '@centrifuge/centrifuge-react'
-import { Button, Grid, SearchInput, Shelf, Text } from '@centrifuge/fabric'
+import { AddressInput, Button, Grid, Shelf, Text } from '@centrifuge/fabric'
 import Identicon from '@polkadot/react-identicon'
 import { useState } from 'react'
 import { truncate } from '../../../utils/web3'
@@ -15,26 +15,40 @@ export function AddAddressInput({
   const [address, setAddress] = useState('')
 
   const utils = useCentrifugeUtils()
-  let truncated
+  let truncated: string | undefined
   try {
     truncated = truncate(utils.formatAddress(address))
   } catch (e) {
-    //
+    truncated = undefined
   }
 
   const exists = !!truncated && existingAddresses.some((addr) => isSameAddress(addr, address))
 
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const newAddress = e.target.value
+    setAddress(newAddress)
+  }
+
+  function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
+    const address = e.target.value
+    if (truncated) {
+      onAdd(addressToHex(address))
+      setAddress('')
+    }
+  }
+
   return (
     <Grid columns={2} equalColumns gap={4} alignItems="center">
-      <SearchInput
-        name="search"
+      <AddressInput
+        clearIcon
         placeholder="Search to add address..."
         value={address}
-        onChange={(e) => setAddress(e.target.value)}
+        onChange={handleChange}
+        onBlur={handleBlur}
       />
       {address &&
         (truncated ? (
-          <Shelf gap={2}>
+          <Shelf gap={2} alignItems="center">
             <Shelf style={{ pointerEvents: 'none' }} gap="4px">
               <Identicon value={address} size={16} theme="polkadot" />
               <Text variant="label2" color="textPrimary">
@@ -44,7 +58,7 @@ export function AddAddressInput({
             <Button
               variant="secondary"
               onClick={() => {
-                onAdd(address)
+                onAdd(addressToHex(address))
                 setAddress('')
               }}
               small
diff --git a/centrifuge-app/src/pages/IssuerPool/Investors/InvestorStatus.tsx b/centrifuge-app/src/pages/IssuerPool/Investors/InvestorStatus.tsx
index 9fbc49312..721a6700a 100644
--- a/centrifuge-app/src/pages/IssuerPool/Investors/InvestorStatus.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Investors/InvestorStatus.tsx
@@ -7,6 +7,7 @@ import {
   useWallet,
 } from '@centrifuge/centrifuge-react'
 import {
+  AddressInput,
   Button,
   Grid,
   IconAlertCircle,
@@ -14,7 +15,6 @@ import {
   IconInfoFailed,
   IconMinus,
   IconPlus,
-  SearchInput,
   Select,
   Shelf,
   Stack,
@@ -95,6 +95,10 @@ export function InvestorStatus() {
     setPendingTrancheId(trancheId)
   }
 
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setAddress(e.target.value)
+  }
+
   return (
     <PageSection
       title="Investor status"
@@ -102,12 +106,7 @@ export function InvestorStatus() {
     >
       <Stack gap={2}>
         <Grid columns={2} gap={2} alignItems="center">
-          <SearchInput
-            name="investorStatus"
-            value={address}
-            onChange={(e) => setAddress(e.target.value)}
-            placeholder="Enter address..."
-          />
+          <AddressInput label="" placeholder="Add an address" onChange={handleChange} value={address} />
           <Select
             value={chain}
             options={[
diff --git a/centrifuge-js/src/utils/index.ts b/centrifuge-js/src/utils/index.ts
index 718001d66..a96925743 100644
--- a/centrifuge-js/src/utils/index.ts
+++ b/centrifuge-js/src/utils/index.ts
@@ -137,6 +137,8 @@ export function computeMultisig(multisig: Multisig): ComputedMultisig {
 }
 
 export function evmToSubstrateAddress(address: string, chainId: number) {
+  if (!chainId) throw new Error('chainId is required')
+
   // Bytes EVM\0 as suffix
   const suffix = '45564d00'
   const chainHex = Number(chainId).toString(16).padStart(16, '0')
diff --git a/fabric/src/components/TextInput/index.tsx b/fabric/src/components/TextInput/index.tsx
index c06d90143..1bc5397d4 100644
--- a/fabric/src/components/TextInput/index.tsx
+++ b/fabric/src/components/TextInput/index.tsx
@@ -252,7 +252,10 @@ export function TextAreaInput({
 }
 
 export type AddressInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'> &
-  Omit<InputUnitProps, 'inputElement'>
+  Omit<InputUnitProps, 'inputElement'> & {
+    value?: string
+    clearIcon?: boolean
+  }
 
 export function AddressInput({
   id,
@@ -262,6 +265,8 @@ export function AddressInput({
   errorMessage,
   onBlur,
   onChange,
+  value = '',
+  clearIcon,
   ...inputProps
 }: AddressInputProps) {
   const defaultId = React.useId()
@@ -269,18 +274,19 @@ export function AddressInput({
 
   const [network, setNetwork] = React.useState<'ethereum' | 'centrifuge' | 'loading' | null>(null)
 
-  function handleChange(e: React.FocusEvent<HTMLInputElement>) {
-    const address = e.target.value
-    if (isEvmAddress(address) && address.length > 3) {
+  React.useEffect(() => {
+    if (isEvmAddress(value) && value.length > 3) {
       setNetwork('ethereum')
-    } else if (isSubstrateAddress(address) && address.length > 3) {
+    } else if (isSubstrateAddress(value) && value.length > 3) {
       setNetwork('centrifuge')
-    } else if (address !== '') {
+    } else if (value !== '') {
       setNetwork('loading')
     } else {
       setNetwork(null)
     }
+  }, [value])
 
+  function handleChange(e: React.FocusEvent<HTMLInputElement>) {
     if (onChange) {
       onChange(e)
     }
@@ -288,7 +294,7 @@ export function AddressInput({
 
   function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
     const address = e.target.value
-    if (!(isSubstrateAddress(address) || isEvmAddress(address))) {
+    if (!(isSubstrateAddress(address) || isEvmAddress(address)) || clearIcon) {
       setNetwork(null)
     }
 
@@ -296,6 +302,7 @@ export function AddressInput({
       onBlur(e)
     }
   }
+
   return (
     <InputUnit
       label={label}
@@ -308,6 +315,7 @@ export function AddressInput({
           type="text"
           onChange={handleChange}
           onBlur={handleBlur}
+          value={value}
           action={
             network && (
               <Shelf

From 12cdd60449b26da58f3e3ffcf50283fd8819c8d3 Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Thu, 25 Jul 2024 07:41:03 -0500
Subject: [PATCH 3/9] Fix links style (#2309)

---
 centrifuge-app/src/components/Menu/PageLink.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/centrifuge-app/src/components/Menu/PageLink.tsx b/centrifuge-app/src/components/Menu/PageLink.tsx
index 719ca0f0b..4f1578e95 100644
--- a/centrifuge-app/src/components/Menu/PageLink.tsx
+++ b/centrifuge-app/src/components/Menu/PageLink.tsx
@@ -10,6 +10,8 @@ const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
   ${primaryButton}
   grid-template-columns: ${({ stacked, theme }) => (stacked ? '1fr' : `${theme.sizes.iconSmall}px 1fr`)};
   color: ${({ isActive }) => (isActive ? 'blue' : 'black')}; /* Example styling */
+  font-size: 14px;
+  font-weight: 500;
 `
 
 type PageLinkProps = LinkProps & {

From 5b5b569fd6e650b6038693ed994cad0743dae42f Mon Sep 17 00:00:00 2001
From: Sophia <littlejohn.sophia@gmail.com>
Date: Thu, 25 Jul 2024 11:40:34 -0400
Subject: [PATCH 4/9] Fix transfer debt for assets without maturity (#2316)

* Fix transfer debt for assets without maturity

* Clean up
---
 centrifuge-app/src/pages/Loan/TransferDebtForm.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/centrifuge-app/src/pages/Loan/TransferDebtForm.tsx b/centrifuge-app/src/pages/Loan/TransferDebtForm.tsx
index c77e05ed6..11a7d6b66 100644
--- a/centrifuge-app/src/pages/Loan/TransferDebtForm.tsx
+++ b/centrifuge-app/src/pages/Loan/TransferDebtForm.tsx
@@ -126,8 +126,7 @@ export function TransferDebtForm({ loan }: { loan: LoanType }) {
     return null
   }
 
-  const maturityDatePassed =
-    loan?.pricing && 'maturityDate' in loan.pricing && new Date() > new Date(loan.pricing.maturityDate)
+  const maturityDatePassed = loan.pricing.maturityDate && new Date() > new Date(loan.pricing.maturityDate)
   const selectedLoan = loans?.find((l) => l.id === form.values.targetLoan) as ActiveLoan | undefined
 
   function validate(financeAmount: Decimal) {

From 2c7180c65364374531f4a74b147799d205c725c9 Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Tue, 30 Jul 2024 07:47:13 -0500
Subject: [PATCH 5/9] Fix layout on assets detail page (#2279)

* Fix layout on assets detail page

* Prevent content switching on liquidity pools

* Fix graphs layout on prime page

* Fix layout on pool performance overview

* Fix pool performance chart layout

* Fix layout prime graph

* Add feedback - revert back aggregated data
---
 .../Charts/AssetPerformanceChart.tsx          | 35 +++++++++++--------
 .../Charts/PoolPerformanceChart.tsx           |  2 +-
 .../LiquidityTransactionsSection.tsx          |  8 +++--
 .../PoolOverview/PoolPerfomance.tsx           | 12 ++++---
 .../Portfolio/CardPortfolioValue.tsx          |  9 ++++-
 .../components/Portfolio/PortfolioValue.tsx   |  2 +-
 .../src/pages/Pool/Liquidity/index.tsx        |  4 ---
 .../src/pages/Pool/Overview/index.tsx         |  4 +--
 8 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx b/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx
index ed9994972..e2ff7b930 100644
--- a/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx
+++ b/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx
@@ -137,11 +137,12 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
     return [min, max]
   }, [data])
 
-  if (!assetSnapshots) return <Spinner style={{ margin: 'auto' }} />
-  if (assetSnapshots?.length < 1) return null
+  const isChartEmpty = React.useMemo(() => !data.length || assetSnapshots?.length < 1, [data, assetSnapshots])
+
+  if (!assetSnapshots) return <Spinner style={{ margin: 'auto', height: 350 }} />
 
   return (
-    <Card p={3}>
+    <Card p={3} height={350}>
       <Stack gap={2}>
         <Shelf justifyContent="space-between">
           <Text fontSize="18px" fontWeight="500">
@@ -149,17 +150,21 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
               ? 'Asset performance'
               : 'Cash balance'}
           </Text>
-          <AnchorButton
-            href={dataUrl}
-            download={`asset-${loanId}-timeseries.csv`}
-            variant="secondary"
-            icon={IconDownload}
-            small
-          >
-            Download
-          </AnchorButton>
+          {!isChartEmpty && (
+            <AnchorButton
+              href={dataUrl}
+              download={`asset-${loanId}-timeseries.csv`}
+              variant="secondary"
+              icon={IconDownload}
+              small
+            >
+              Download
+            </AnchorButton>
+          )}
         </Shelf>
 
+        {isChartEmpty && <Text variant="label1">No data yet</Text>}
+
         {!(assetSnapshots && assetSnapshots[0]?.currentPrice?.toString() === '0') && (
           <Stack>
             <Shelf justifyContent="flex-end">
@@ -187,7 +192,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
 
         <Shelf gap={4} width="100%" color="textSecondary">
           {data?.length ? (
-            <ResponsiveContainer width="100%" height="100%" minHeight="200px">
+            <ResponsiveContainer width="100%" height={200} minHeight={200} maxHeight={200}>
               <LineChart data={data} margin={{ left: -36 }}>
                 <defs>
                   <linearGradient id="colorPoolValue" x1="0" y1="0" x2="0" y2="1">
@@ -202,9 +207,11 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                   tickFormatter={(tick: number) => {
                     return new Date(tick).toLocaleString('en-US', { day: 'numeric', month: 'short' })
                   }}
-                  style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }}
+                  style={{ fontSize: 8, fill: theme.colors.textSecondary, letterSpacing: '-0.7px' }}
                   dy={4}
                   interval={10}
+                  angle={-40}
+                  textAnchor="end"
                 />
                 <YAxis
                   stroke="none"
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
index 59b245991..4d70ed8f4 100644
--- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
+++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -139,7 +139,7 @@ function PoolPerformanceChart() {
 
       <Shelf gap={4} width="100%" color="textSecondary">
         {chartData?.length ? (
-          <ResponsiveContainer width="100%" height="100%" minHeight="200px">
+          <ResponsiveContainer width="100%" height={200} minHeight={200} maxHeight={200}>
             <ComposedChart data={chartData} margin={{ left: -36 }}>
               <defs>
                 <linearGradient id="colorPoolValue" x1="0" y1="0" x2="0" y2="1">
diff --git a/centrifuge-app/src/components/LiquidityTransactionsSection.tsx b/centrifuge-app/src/components/LiquidityTransactionsSection.tsx
index 640cf56c4..2df9303c6 100644
--- a/centrifuge-app/src/components/LiquidityTransactionsSection.tsx
+++ b/centrifuge-app/src/components/LiquidityTransactionsSection.tsx
@@ -11,6 +11,7 @@ import { StackedBarChart, StackedBarChartProps } from './Charts/StackedBarChart'
 import { getRangeNumber } from './Charts/utils'
 import { PageSection } from './PageSection'
 import { TooltipsProps } from './Tooltips'
+import { LoadBoundary } from './LoadBoundary'
 
 const rangeFilters = [
   { value: '30d', label: '30 days' },
@@ -127,7 +128,10 @@ export default function LiquidityTransactionsSection({
       : []
   }, [chartData, dataColors, tooltips, pool.currency.symbol])
 
-  return chartData?.length ? (
+  if(!chartData?.length) return null
+
+  return(
+  <LoadBoundary>
     <PageSection
       title={title}
       titleAddition={
@@ -179,5 +183,5 @@ export default function LiquidityTransactionsSection({
         <StackedBarChart data={chartData} names={dataNames} colors={dataColors} currency={pool.currency.symbol} />
       )}
     </PageSection>
-  ) : null
+    </LoadBoundary>)
 }
diff --git a/centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx b/centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx
index 16c10a7cc..e17fcd473 100644
--- a/centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx
+++ b/centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx
@@ -1,9 +1,11 @@
 import { Card, Stack, Text } from '@centrifuge/fabric'
+import React from 'react'
 import PoolPerformanceChart from '../Charts/PoolPerformanceChart'
+import { Spinner } from '../Spinner'
 
-export const PoolPerformance = () => {
-  return (
-    <Card p={3}>
+export const PoolPerformance = () => (
+  <React.Suspense fallback={<Spinner style={{ height: 400 }} />}>
+    <Card p={3} height={400}>
       <Stack gap={2}>
         <Text fontSize="18px" fontWeight="500">
           Pool performance
@@ -11,5 +13,5 @@ export const PoolPerformance = () => {
         <PoolPerformanceChart />
       </Stack>
     </Card>
-  )
-}
+  </React.Suspense>
+)
diff --git a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx
index cc5677e0e..37c2e3313 100644
--- a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx
+++ b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx
@@ -63,6 +63,7 @@ export function CardPortfolioValue({
         p={2}
         style={{
           boxShadow: `0px 3px 2px -2px ${colors.borderPrimary}`,
+          height: 450,
         }}
         background={colors.backgroundPage}
       >
@@ -113,7 +114,13 @@ export function CardPortfolioValue({
 
             <Box width="100%" height="300px">
               <LoadBoundary>
-                <PortfolioValue rangeValue={range.value} address={centAddress} />
+                {transactions?.investorTransactions.length ? (
+                  <PortfolioValue rangeValue={range.value} address={centAddress} />
+                ) : (
+                  <Box width="100%" height="100%" display="flex" alignItems="center" justifyContent="center">
+                    <Text>No data available</Text>
+                  </Box>
+                )}
               </LoadBoundary>
             </Box>
           </>
diff --git a/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx
index fb50806ab..c723b6942 100644
--- a/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx
+++ b/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx
@@ -44,7 +44,7 @@ export function PortfolioValue({ rangeValue, address }: { rangeValue: string; ad
   }
 
   return (
-    <ResponsiveContainer>
+    <ResponsiveContainer height={300} maxHeight={300} minHeight={300}>
       <AreaChart
         margin={{
           top: 35,
diff --git a/centrifuge-app/src/pages/Pool/Liquidity/index.tsx b/centrifuge-app/src/pages/Pool/Liquidity/index.tsx
index 93c004b56..99f58a5c9 100644
--- a/centrifuge-app/src/pages/Pool/Liquidity/index.tsx
+++ b/centrifuge-app/src/pages/Pool/Liquidity/index.tsx
@@ -63,7 +63,6 @@ export function PoolDetailLiquidity() {
       </PageSummary>
       {!('addresses' in pool) && (
         <>
-          <LoadBoundary>
             <LiquidityTransactionsSection
               pool={pool}
               title="Originations & repayments"
@@ -72,9 +71,7 @@ export function PoolDetailLiquidity() {
               dataColors={[colors.grayScale[500], colors.blueScale[500]]}
               tooltips={['repayment', 'origination']}
             />
-          </LoadBoundary>
 
-          <LoadBoundary>
             <LiquidityTransactionsSection
               pool={pool}
               title="Investments & redemptions"
@@ -83,7 +80,6 @@ export function PoolDetailLiquidity() {
               dataColors={[colors.statusOk, colors.statusCritical]}
               tooltips={['investment', 'redemption']}
             />
-          </LoadBoundary>
           {/* 
           <PageSection title="Cash drag">
             <Stack height="290px">
diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx
index d190307c6..550777273 100644
--- a/centrifuge-app/src/pages/Pool/Overview/index.tsx
+++ b/centrifuge-app/src/pages/Pool/Overview/index.tsx
@@ -133,9 +133,7 @@ export function PoolDetailOverview() {
   return (
     <FullHeightLayoutSection bg={theme.colors.backgroundSecondary} pt={2} pb={4}>
       <Grid height="fit-content" gridTemplateColumns={['1fr', '1fr', '66fr minmax(275px, 33fr)']} gap={[2, 2, 3]}>
-        <React.Suspense fallback={<Spinner />}>
-          <PoolPerformance />
-        </React.Suspense>
+        <PoolPerformance />
         <React.Suspense fallback={<Spinner />}>
           <KeyMetrics
             assetType={metadata?.pool?.asset}

From 47ac0b976b785a2364d75bfb5293e37c9d5791ef Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Tue, 30 Jul 2024 07:51:54 -0500
Subject: [PATCH 6/9] Fix P&L (#2305)

* Fix P&L

* Fix subquery fields
---
 centrifuge-app/src/pages/Loan/KeyMetrics.tsx | 2 +-
 centrifuge-js/src/modules/pools.ts           | 6 +++---
 centrifuge-js/src/types/subquery.ts          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/centrifuge-app/src/pages/Loan/KeyMetrics.tsx b/centrifuge-app/src/pages/Loan/KeyMetrics.tsx
index 1369ddacc..f5330a2d2 100644
--- a/centrifuge-app/src/pages/Loan/KeyMetrics.tsx
+++ b/centrifuge-app/src/pages/Loan/KeyMetrics.tsx
@@ -99,7 +99,7 @@ export function KeyMetrics({ pool, loan }: Props) {
   )
 
   const unrealizedProfitAtMarketPrice = borrowerAssetTransactions?.reduce(
-    (sum, tx) => sum.add(tx.unrealizedProfitByPeriod?.toDecimal() ?? Dec(0)),
+    (sum, tx) => sum.add(tx.unrealizedProfitAtMarketPrice?.toDecimal() ?? Dec(0)),
     Dec(0)
   )
 
diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts
index b7b66f143..5005650bc 100644
--- a/centrifuge-js/src/modules/pools.ts
+++ b/centrifuge-js/src/modules/pools.ts
@@ -3022,8 +3022,8 @@ export function getPoolsModule(inst: Centrifuge) {
               metadata
               name
               type
-              unrealizedProfitByPeriod
               sumRealizedProfitFifo
+              unrealizedProfitAtMarketPrice
             }
             fromAsset {
               id
@@ -3063,8 +3063,8 @@ export function getPoolsModule(inst: Centrifuge) {
           sumRealizedProfitFifo: tx.asset.sumRealizedProfitFifo
             ? new CurrencyBalance(tx.asset.sumRealizedProfitFifo, currency.decimals)
             : undefined,
-          unrealizedProfitByPeriod: tx.asset.unrealizedProfitByPeriod
-            ? new CurrencyBalance(tx.asset.unrealizedProfitByPeriod, currency.decimals)
+          unrealizedProfitAtMarketPrice: tx.asset.unrealizedProfitAtMarketPrice
+            ? new CurrencyBalance(tx.asset.unrealizedProfitAtMarketPrice, currency.decimals)
             : undefined,
           timestamp: new Date(`${tx.timestamp}+00:00`),
         })) satisfies AssetTransaction[]
diff --git a/centrifuge-js/src/types/subquery.ts b/centrifuge-js/src/types/subquery.ts
index b9ef240b2..5c0c98c8e 100644
--- a/centrifuge-js/src/types/subquery.ts
+++ b/centrifuge-js/src/types/subquery.ts
@@ -125,7 +125,7 @@ export type SubqueryAssetTransaction = {
     name: string
     type: AssetType
     sumRealizedProfitFifo: string
-    unrealizedProfitByPeriod: string
+    unrealizedProfitAtMarketPrice: string
   }
   fromAsset?: {
     id: string

From 622db36c0280f38e6379997d48def52a7ade5d97 Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Tue, 30 Jul 2024 14:57:46 +0200
Subject: [PATCH 7/9] Allow multiple pool managers without a multisig (#2307)

---
 .../Dialogs/ShareMultisigDialog.tsx           |   2 +-
 .../src/pages/IssuerCreatePool/index.tsx      |  39 +++--
 .../IssuerPool/Access/ChangeTreshold.tsx      |   2 +-
 .../pages/IssuerPool/Access/MultisigForm.tsx  |  13 +-
 .../pages/IssuerPool/Access/PoolManagers.tsx  | 147 +++++++++---------
 centrifuge-app/src/pages/MultisigApproval.tsx |  12 +-
 centrifuge-js/src/utils/index.ts              |   1 +
 7 files changed, 112 insertions(+), 104 deletions(-)

diff --git a/centrifuge-app/src/components/Dialogs/ShareMultisigDialog.tsx b/centrifuge-app/src/components/Dialogs/ShareMultisigDialog.tsx
index cf1f0c43f..7ffd330e1 100644
--- a/centrifuge-app/src/components/Dialogs/ShareMultisigDialog.tsx
+++ b/centrifuge-app/src/components/Dialogs/ShareMultisigDialog.tsx
@@ -59,7 +59,7 @@ export function getMultisigShareUrl({
     threshold: multisig.threshold.toString(),
     data: callData || '',
   })
-  const url = new URL(`/multisig-approval`, window.location.origin)
+  const url = new URL(`/#/multisig-approval`, window.location.origin)
   url.search = params as any
   const shareUrl = url.toString()
   return shareUrl
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
index 69ed4932f..d7778e484 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -219,6 +219,7 @@ function CreatePoolForm() {
     (cent) =>
       (
         args: [
+          values: CreatePoolValues,
           transferToMultisig: BN,
           aoProxy: string,
           adminProxy: string,
@@ -231,15 +232,17 @@ function CreatePoolForm() {
         ],
         options
       ) => {
-        const [transferToMultisig, aoProxy, adminProxy, , , , , { adminMultisig }] = args
+        const [values, transferToMultisig, aoProxy, adminProxy, , , , , { adminMultisig }] = args
         const multisigAddr = adminMultisig && createKeyMulti(adminMultisig.signers, adminMultisig.threshold)
-        const poolArgs = args.slice(2) as any
+        const poolArgs = args.slice(3) as any
         return combineLatest([
           cent.getApi(),
           cent.pools.createPool(poolArgs, { createType: options?.createType, batch: true }),
         ]).pipe(
           switchMap(([api, poolSubmittable]) => {
-            const adminProxyDelegate = multisigAddr ?? address
+            const adminProxyDelegates = multisigAddr
+              ? [multisigAddr]
+              : (adminMultisig && values.adminMultisig?.signers?.filter((addr) => addr !== address)) ?? []
             const otherMultisigSigners =
               multisigAddr && sortAddresses(adminMultisig.signers.filter((addr) => !isSameAddress(addr, address!)))
             const proxiedPoolCreate = api.tx.proxy.proxy(adminProxy, undefined, poolSubmittable)
@@ -250,14 +253,16 @@ function CreatePoolForm() {
                   aoProxy,
                   consts.proxy.proxyDepositFactor.add(consts.uniques.collectionDeposit)
                 ),
-                adminProxyDelegate !== address &&
+                adminProxyDelegates.length > 0 &&
                   api.tx.proxy.proxy(
                     adminProxy,
                     undefined,
-                    api.tx.utility.batchAll([
-                      api.tx.proxy.addProxy(adminProxyDelegate, 'Any', 0),
-                      api.tx.proxy.removeProxy(address, 'Any', 0),
-                    ])
+                    api.tx.utility.batchAll(
+                      [
+                        ...adminProxyDelegates.map((addr) => api.tx.proxy.addProxy(addr, 'Any', 0)),
+                        multisigAddr ? api.tx.proxy.removeProxy(address, 'Any', 0) : null,
+                      ].filter(Boolean)
+                    )
                   ),
                 api.tx.proxy.proxy(
                   aoProxy,
@@ -279,7 +284,7 @@ function CreatePoolForm() {
       },
     {
       onSuccess: (args) => {
-        if (form.values.adminMultisigEnabled) setIsMultisigDialogOpen(true)
+        if (form.values.adminMultisigEnabled && form.values.adminMultisig.threshold > 1) setIsMultisigDialogOpen(true)
         const [, , , poolId] = args
         if (createType === 'immediate') {
           setCreatedPoolId(poolId)
@@ -384,12 +389,13 @@ function CreatePoolForm() {
 
       const metadataValues: PoolMetadataInput = { ...values } as any
 
-      metadataValues.adminMultisig = values.adminMultisigEnabled
-        ? {
-            ...values.adminMultisig,
-            signers: sortAddresses(values.adminMultisig.signers),
-          }
-        : undefined
+      metadataValues.adminMultisig =
+        values.adminMultisigEnabled && values.adminMultisig.threshold > 1
+          ? {
+              ...values.adminMultisig,
+              signers: sortAddresses(values.adminMultisig.signers),
+            }
+          : undefined
 
       const currency = currencies.find((c) => c.symbol === values.currency)!
 
@@ -468,7 +474,7 @@ function CreatePoolForm() {
 
       // const epochSeconds = ((values.epochHours as number) * 60 + (values.epochMinutes as number)) * 60
 
-      if (metadataValues.adminMultisig) {
+      if (metadataValues.adminMultisig && metadataValues.adminMultisig.threshold > 1) {
         addMultisig(metadataValues.adminMultisig)
       }
 
@@ -476,6 +482,7 @@ function CreatePoolForm() {
         (aoProxy, adminProxy) => {
           createPoolTx(
             [
+              values,
               CurrencyBalance.fromFloat(createDeposit, chainDecimals),
               aoProxy,
               adminProxy,
diff --git a/centrifuge-app/src/pages/IssuerPool/Access/ChangeTreshold.tsx b/centrifuge-app/src/pages/IssuerPool/Access/ChangeTreshold.tsx
index afd4caa08..95150a6ca 100644
--- a/centrifuge-app/src/pages/IssuerPool/Access/ChangeTreshold.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Access/ChangeTreshold.tsx
@@ -20,7 +20,7 @@ export const ChangeThreshold = ({
   isEditing,
   fieldName,
   signersFieldName,
-  minThreshold = 2,
+  minThreshold = 1,
   validate,
   disabled,
   type,
diff --git a/centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx b/centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx
index 0f39d9fd6..dfb852f44 100644
--- a/centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx
@@ -11,9 +11,8 @@ import { ChangeThreshold } from './ChangeTreshold'
 import type { PoolManagersInput } from './PoolManagers'
 
 type Row = { address: string; index: number }
-type Props = { isEditing?: boolean; isLoading?: boolean; canRemoveFirst?: boolean }
-
-export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoading }: Props) {
+type Props = { isEditing?: boolean; isLoading?: boolean; canRemoveFirst?: boolean; minThreshold?: number }
+export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoading, minThreshold = 1 }: Props) {
   const chainId = useCentEvmChainId()
   const form = useFormikContext<PoolManagersInput>()
   const { adminMultisig } = form.values
@@ -67,8 +66,8 @@ export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoadin
               <AddAddressInput
                 existingAddresses={adminMultisig.signers}
                 onAdd={(address) => {
-                  if (adminMultisig.signers.length === 1) {
-                    form.setFieldValue('adminMultisig.threshold', 2, false)
+                  if (adminMultisig.signers.length < minThreshold) {
+                    form.setFieldValue('adminMultisig.threshold', minThreshold, false)
                   }
                   fldArr.push(isEvmAddress(address) ? evmToSubstrateAddress(address, chainId ?? 0) : address)
                 }}
@@ -77,8 +76,8 @@ export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoadin
           </Stack>
           <Stack gap={2}>
             <ChangeThreshold
-              secondaryText=" For additional security, changing the pool configuration (e.g. the tranche structure or write-off policy)
-        requires multiple signers. Any such change will require the confirmation of:"
+              secondaryText="For additional security, changing the pool configuration (e.g. the tranche structure or write-off policy)
+        can require multiple signers. Any such change will require the confirmation of:"
               primaryText="Configuration change threshold"
               isEditing={isEditing}
               fieldName="adminMultisig.threshold"
diff --git a/centrifuge-app/src/pages/IssuerPool/Access/PoolManagers.tsx b/centrifuge-app/src/pages/IssuerPool/Access/PoolManagers.tsx
index bafb5e7aa..357a3cf17 100644
--- a/centrifuge-app/src/pages/IssuerPool/Access/PoolManagers.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Access/PoolManagers.tsx
@@ -1,6 +1,6 @@
 import { ComputedMultisig, computeMultisig, PoolMetadata } from '@centrifuge/centrifuge-js'
 import { useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
-import { Button, Text } from '@centrifuge/fabric'
+import { Button } from '@centrifuge/fabric'
 import { Form, FormikProvider, useFormik } from 'formik'
 import * as React from 'react'
 import { combineLatest, switchMap } from 'rxjs'
@@ -12,7 +12,6 @@ import { diffPermissions } from '../Configuration/Admins'
 import { MultisigForm } from './MultisigForm'
 
 export type PoolManagersInput = {
-  enabled: boolean
   adminMultisig: {
     signers: string[]
     threshold: number
@@ -29,47 +28,81 @@ export function PoolManagers({ poolId }: { poolId: string }) {
 
   const initialValues: PoolManagersInput = React.useMemo(
     () => ({
-      enabled: !!access.multisig,
       adminMultisig: {
-        signers: access.multisig?.signers || [],
+        signers: access.multisig?.signers || access.adminDelegates?.map((d) => d.delegatee) || [],
         threshold: access.multisig?.threshold || 1,
       },
     }),
-    [access?.multisig]
+    [access?.multisig, access?.adminDelegates]
   )
 
   const { execute, isLoading } = useCentrifugeTransaction(
     'Update pool managers',
-    (cent) =>
-      (
-        args: [
-          newMultisig: ComputedMultisig,
-          permissionChanges: ReturnType<typeof diffPermissions>,
-          newMetadata: PoolMetadata
-        ],
-        options
-      ) => {
-        const [newMultisig, permissionChanges, newMetadata] = args
+    (cent) => (args: [values: PoolManagersInput], options) => {
+      const [values] = args
+      const isMultisig = values.adminMultisig.threshold > 1
+      const wasMultisig = initialValues.adminMultisig.threshold > 1
+      let newMultisig: ComputedMultisig | null = null
+      let newPoolMetadata: PoolMetadata
+      let addedDelegates: string[] = []
+      let removedDelegates: string[] = []
 
-        return combineLatest([
-          cent.getApi(),
-          cent.pools.setMetadata([poolId, newMetadata as any], { batch: true }),
-          cent.pools.updatePoolRoles(
-            [poolId, [...access.missingAdminPermissions, ...permissionChanges.add], permissionChanges.remove],
-            { batch: true }
-          ),
-        ]).pipe(
-          switchMap(([api, metadataTx, permissionTx]) => {
-            const tx = api.tx.utility.batchAll([
-              metadataTx,
-              ...permissionTx.method.args[0],
-              api.tx.proxy.addProxy(newMultisig.address, 'Any', 0),
-              ...access.adminDelegates.map((proxy) => api.tx.proxy.removeProxy(proxy.delegatee, 'Any', 0)),
-            ])
-            return cent.wrapSignAndSend(api, tx, options)
-          })
-        )
-      },
+      if (isMultisig) {
+        newMultisig = computeMultisig(values.adminMultisig)
+        newPoolMetadata = {
+          ...(metadata as PoolMetadata),
+          adminMultisig: {
+            signers: newMultisig.signers,
+            threshold: newMultisig.threshold,
+          },
+        }
+        addedDelegates = [newMultisig.address]
+        removedDelegates = access.adminDelegates.map((p) => p.delegatee)
+      } else {
+        newMultisig = null
+        newPoolMetadata = {
+          ...(metadata as PoolMetadata),
+          adminMultisig: undefined,
+        }
+        if (wasMultisig) {
+          addedDelegates = values.adminMultisig.signers
+          removedDelegates = access.adminDelegates.map((p) => p.delegatee)
+        } else {
+          addedDelegates = values.adminMultisig.signers.filter((s) => !initialValues.adminMultisig.signers.includes(s))
+          removedDelegates = initialValues.adminMultisig.signers.filter(
+            (s) => !values.adminMultisig.signers.includes(s)
+          )
+        }
+      }
+      const { add: permissionsToAdd, remove: permissionsToRemove } = diffPermissions(
+        access.managerPermissions,
+        values.adminMultisig.signers.map((address) => ({
+          address,
+          roles: { InvestorAdmin: true, LiquidityAdmin: true },
+        })),
+        ['LiquidityAdmin', 'InvestorAdmin']
+      )
+
+      return combineLatest([
+        cent.getApi(),
+        cent.pools.setMetadata([poolId, newPoolMetadata], { batch: true }),
+        cent.pools.updatePoolRoles(
+          [poolId, [...access.missingAdminPermissions, ...permissionsToAdd], permissionsToRemove],
+          { batch: true }
+        ),
+      ]).pipe(
+        switchMap(([api, metadataTx, permissionTx]) => {
+          const tx = api.tx.utility.batchAll([
+            metadataTx,
+            ...permissionTx.method.args[0],
+            ...addedDelegates.map((addr) => api.tx.proxy.addProxy(addr, 'Any', 0)),
+            ...removedDelegates.map((addr) => api.tx.proxy.removeProxy(addr, 'Any', 0)),
+          ])
+
+          return cent.wrapSignAndSend(api, tx, options)
+        })
+      )
+    },
     {
       onSuccess: () => {
         setIsEditing(false)
@@ -82,31 +115,7 @@ export function PoolManagers({ poolId }: { poolId: string }) {
     onSubmit: (values, actions) => {
       if (!metadata || !poolPermissions) return
       actions.setSubmitting(false)
-      const newMultisig = computeMultisig(values.adminMultisig)
-
-      const newPoolMetadata: PoolMetadata = {
-        ...(metadata as PoolMetadata),
-        adminMultisig: {
-          signers: newMultisig.signers,
-          threshold: newMultisig.threshold,
-        },
-      }
-
-      execute(
-        [
-          newMultisig,
-          diffPermissions(
-            access.managerPermissions,
-            values.adminMultisig.signers.map((address) => ({
-              address,
-              roles: { InvestorAdmin: true, LiquidityAdmin: true },
-            })),
-            ['LiquidityAdmin', 'InvestorAdmin']
-          ),
-          newPoolMetadata,
-        ],
-        { account }
-      )
+      execute([values], { account })
     },
   })
 
@@ -129,19 +138,7 @@ export function PoolManagers({ poolId }: { poolId: string }) {
         <PageSection
           title="Pool managers"
           headerRight={
-            !form.values.enabled ? (
-              <Button
-                variant="secondary"
-                onClick={() => {
-                  setIsEditing(true)
-                  form.setFieldValue('enabled', true, false)
-                }}
-                small
-                key="edit"
-              >
-                Enable
-              </Button>
-            ) : isEditing ? (
+            isEditing ? (
               <ButtonGroup variant="small">
                 <Button variant="secondary" onClick={() => setIsEditing(false)} small>
                   Cancel
@@ -164,11 +161,7 @@ export function PoolManagers({ poolId }: { poolId: string }) {
             )
           }
         >
-          {!form.values.enabled ? (
-            <Text>Pool managers not enabled</Text>
-          ) : (
-            <MultisigForm isEditing={isEditing} isLoading={isLoading} />
-          )}
+          <MultisigForm isEditing={isEditing} isLoading={isLoading} />
         </PageSection>
       </Form>
     </FormikProvider>
diff --git a/centrifuge-app/src/pages/MultisigApproval.tsx b/centrifuge-app/src/pages/MultisigApproval.tsx
index 96e9beea7..c5cdd915f 100644
--- a/centrifuge-app/src/pages/MultisigApproval.tsx
+++ b/centrifuge-app/src/pages/MultisigApproval.tsx
@@ -9,6 +9,14 @@ import { usePendingMultisigActions } from '../components/PendingMultisigs'
 import { truncate } from '../utils/web3'
 
 export default function MultisigApprovalPage() {
+  return (
+    <LayoutBase>
+      <MultisigApproval />
+    </LayoutBase>
+  )
+}
+
+function MultisigApproval() {
   const { search } = useLocation()
   const {
     substrate: { accounts, selectedAddress, selectAccount },
@@ -45,7 +53,7 @@ export default function MultisigApprovalPage() {
 
   const suitableAccount = accounts?.find((acc) => multisig.signers.includes(acc.address))
   return (
-    <LayoutBase>
+    <>
       <PageHeader title="Approve multisig transaction" subtitle={`Call hash: ${truncate(hash)}`}></PageHeader>
       <PageSection>
         <Shelf justifyContent="space-between">
@@ -90,6 +98,6 @@ export default function MultisigApprovalPage() {
           )}
         </Shelf>
       </PageSection>
-    </LayoutBase>
+    </>
   )
 }
diff --git a/centrifuge-js/src/utils/index.ts b/centrifuge-js/src/utils/index.ts
index a96925743..8cb4a8bb5 100644
--- a/centrifuge-js/src/utils/index.ts
+++ b/centrifuge-js/src/utils/index.ts
@@ -128,6 +128,7 @@ export function computeTrancheId(trancheIndex: number, poolId: string) {
 
 // Computes multisig address and sorts signers
 export function computeMultisig(multisig: Multisig): ComputedMultisig {
+  if (multisig.threshold < 2) throw new Error('Threshold must be at least 2')
   const address = u8aToHex(createKeyMulti(multisig.signers, multisig.threshold))
   return {
     address,

From fd49559f7dfc7391cbb8b41f2c107e7d4eb4a285 Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Tue, 30 Jul 2024 08:47:22 -0500
Subject: [PATCH 8/9] Switch from shelf to box component (#2306)

---
 centrifuge-app/src/pages/Pools.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/centrifuge-app/src/pages/Pools.tsx b/centrifuge-app/src/pages/Pools.tsx
index 0bde1c34b..8c94535b5 100644
--- a/centrifuge-app/src/pages/Pools.tsx
+++ b/centrifuge-app/src/pages/Pools.tsx
@@ -1,4 +1,4 @@
-import { Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { CardTotalValueLocked } from '../components/CardTotalValueLocked'
 import { LayoutBase } from '../components/LayoutBase'
@@ -27,11 +27,11 @@ export default function PoolsPage() {
               }`}
             </Text>
           </Stack>
-          <Shelf width="50%">
+          <Box width="50%">
             <LoadBoundary>
               <CardTotalValueLocked />
             </LoadBoundary>
-          </Shelf>
+          </Box>
         </Stack>
         <PoolList />
       </LayoutSection>

From c33ecba592ecb59f1a265847620bc11876dd9e75 Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Tue, 30 Jul 2024 17:36:30 +0200
Subject: [PATCH 9/9] Fix Tinlake Asset list (#2329)

---
 .../src/utils/tinlake/useTinlakePools.ts      | 48 ++++++-------------
 1 file changed, 15 insertions(+), 33 deletions(-)

diff --git a/centrifuge-app/src/utils/tinlake/useTinlakePools.ts b/centrifuge-app/src/utils/tinlake/useTinlakePools.ts
index 2dec045cb..f532e1be7 100644
--- a/centrifuge-app/src/utils/tinlake/useTinlakePools.ts
+++ b/centrifuge-app/src/utils/tinlake/useTinlakePools.ts
@@ -243,10 +243,6 @@ function getTinlakeLoanStatus(loan: TinlakeLoanData, writeOffPercentage: Rate) {
 
 // TODO: refactor to use multicall instead of subgraph
 async function getTinlakeLoans(poolId: string) {
-  let pools: {
-    loans: unknown[]
-  }[] = []
-
   const response = await fetch(import.meta.env.REACT_APP_TINLAKE_SUBGRAPH_URL, {
     method: 'POST',
     headers: {
@@ -255,25 +251,20 @@ async function getTinlakeLoans(poolId: string) {
     body: JSON.stringify({
       query: `
         query GetLoansByPoolId($poolId: String!) {
-          pools (where: { id_in: [$poolId]}) {
-            loans (first: 1000) {
-              nftId
-              id
-              index
-              financingDate
-              debt
-              pool {
-                id
-              }
-              maturityDate
-              interestRatePerSecond
-              borrowsAggregatedAmount
-              repaysAggregatedAmount
-              ceiling
-              closed
-              riskGroup
-              owner
-            }
+          loans (where: { pool_: { id: $poolId } }, first: 1000) {
+            nftId
+            id
+            index
+            financingDate
+            debt
+            maturityDate
+            interestRatePerSecond
+            borrowsAggregatedAmount
+            repaysAggregatedAmount
+            ceiling
+            closed
+            riskGroup
+            owner
           }
         }
       `,
@@ -288,19 +279,10 @@ async function getTinlakeLoans(poolId: string) {
     if (errors?.length) {
       throw new Error(`Issue fetching loans for Tinlake pool ${poolId}. Errors: ${errors}`)
     }
-    pools = data.pools
+    return data.loans
   } else {
     throw new Error(`Issue fetching loans for Tinlake pool ${poolId}. Status: ${response?.status}`)
   }
-
-  const loans = pools.reduce((assets: any[], pool: any) => {
-    if (pool.loans) {
-      assets.push(...pool.loans)
-    }
-    return assets
-  }, [])
-
-  return loans
 }
 
 export async function getWriteOffPercentages(pool: TinlakePool, loans: any[]) {