Merge branch 'main' of github.com:centrifuge/apps into asset-finance-…

…repay-redesign

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

@@ -137,29 +137,34 @@ 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">
             {asset && 'valuationMethod' in asset.pricing && asset?.pricing.valuationMethod !== 'cash'
               ? '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"

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">

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

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>)
 }

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 & {

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) || ''}
                                         />
                                       )

centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx

@@ -1,15 +1,17 @@
 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
         </Text>
         <PoolPerformanceChart />
       </Stack>
     </Card>
-  )
-}
+  </React.Suspense>
+)

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>
           </>

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,

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,14 +474,15 @@ 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)
       }
 
       createProxies([
         (aoProxy, adminProxy) => {
           createPoolTx(
             [
+              values,
               CurrencyBalance.fromFloat(createDeposit, chainDecimals),
               aoProxy,
               adminProxy,