Merge branch 'main' into withdraw-address-select

centrifuge · Aug 2, 2024 · 6d2f9af · 6d2f9af
2 parents 8e06b9d + 801d94e
commit 6d2f9af
Show file tree

Hide file tree

Showing 23 changed files with 223 additions and 219 deletions.
diff --git a/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx b/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"

diff --git 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/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/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/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 & {

diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
@@ -178,55 +178,54 @@ const AvailableNetworks = ({ poolId }: { poolId: string }) => {
       ) : (
         <Spinner size="iconSmall" />
       )}
-      {activeDomains.data?.length &&
-        activeDomains.data
-          .filter((domain) => domain.isActive)
-          .map((domain) => {
-            const chain = (evmChains as any)[domain.chainId]
-            return (
-              <Tooltip
-                delay={300}
-                bodyWidth="maxContent"
-                bodyPadding={0}
-                body={
-                  <Stack p={1} gap={1} backgroundColor="backgroundSecondary">
-                    <Text variant="heading4">{chain.name}</Text>
-                    {pool.tranches.length > 1 ? (
-                      pool.tranches.map((tranche) => (
-                        <a
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          href={`${chain.blockExplorerUrl}token/${domain.trancheTokens[tranche.id]}`}
-                        >
-                          <Shelf gap={1} alignItems="center">
-                            <Text variant="body2" color="black">
-                              View {tranche.currency.name.split(' ').at(-1)}
-                            </Text>{' '}
-                            <IconExternalLink color="black" size="iconSmall" />
-                          </Shelf>
-                        </a>
-                      ))
-                    ) : (
+      {activeDomains.data
+        ?.filter((domain) => domain.isActive)
+        .map((domain) => {
+          const chain = (evmChains as any)[domain.chainId]
+          return (
+            <Tooltip
+              delay={300}
+              bodyWidth="maxContent"
+              bodyPadding={0}
+              body={
+                <Stack p={1} gap={1} backgroundColor="backgroundSecondary">
+                  <Text variant="heading4">{chain.name}</Text>
+                  {pool.tranches.length > 1 ? (
+                    pool.tranches.map((tranche) => (
                       <a
                         target="_blank"
                         rel="noopener noreferrer"
-                        href={`${chain.blockExplorerUrl}token/${domain.trancheTokens[pool.tranches[0].id]}`}
+                        href={`${chain.blockExplorerUrl}token/${domain.trancheTokens[tranche.id]}`}
                       >
                         <Shelf gap={1} alignItems="center">
                           <Text variant="body2" color="black">
-                            View transactions
+                            View {tranche.currency.name.split(' ').at(-1)}
                           </Text>{' '}
                           <IconExternalLink color="black" size="iconSmall" />
                         </Shelf>
                       </a>
-                    )}
-                  </Stack>
-                }
-              >
-                <NetworkIcon size="iconSmall" network={domain.chainId} />
-              </Tooltip>
-            )
-          })}
+                    ))
+                  ) : (
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href={`${chain.blockExplorerUrl}token/${domain.trancheTokens[pool.tranches[0].id]}`}
+                    >
+                      <Shelf gap={1} alignItems="center">
+                        <Text variant="body2" color="black">
+                          View transactions
+                        </Text>{' '}
+                        <IconExternalLink color="black" size="iconSmall" />
+                      </Shelf>
+                    </a>
+                  )}
+                </Stack>
+              }
+            >
+              <NetworkIcon size="iconSmall" network={domain.chainId} />
+            </Tooltip>
+          )
+        })}
     </Shelf>
   )
 }
diff --git a/centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx b/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>
+)
diff --git 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
@@ -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/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,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,

diff --git 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,