diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx index 5c430404dd..252f54ee05 100644 --- a/centrifuge-app/src/components/LayoutBase/styles.tsx +++ b/centrifuge-app/src/components/LayoutBase/styles.tsx @@ -116,13 +116,15 @@ export const WalletPositioner = styled(Shelf)` ` export const WalletInner = styled(Stack)` - height: ${HEADER_HEIGHT}px; + height: 80px; justify-content: center; pointer-events: auto; width: 250px; + margin-right: 40px; @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) { justify-content: flex-end; + height: 50px; } ` diff --git a/centrifuge-app/src/components/LiquidityEpochSection.tsx b/centrifuge-app/src/components/LiquidityEpochSection.tsx index 29f8b03744..eb0cd05875 100644 --- a/centrifuge-app/src/components/LiquidityEpochSection.tsx +++ b/centrifuge-app/src/components/LiquidityEpochSection.tsx @@ -78,30 +78,29 @@ function EpochStatusOngoing({ pool }: { pool: Pool }) { const { execute: closeEpochTx, isLoading: loadingClose } = useCentrifugeTransaction( 'Start order execution', - (cent) => (args: [poolId: string, batchSolution: boolean, collect: boolean], options) => - !args[2] - ? cent.pools.closeEpoch([args[0], args[1]], options) - : cent.pools.closeEpoch([args[0], args[1]], { batch: true }).pipe( - switchMap((closeTx) => { - const tx = api.tx.utility.batchAll( - [ - ...closeTx.method.args[0], - orders?.length - ? api.tx.utility.batch( - orders - .slice(0, MAX_COLLECT) - .map((order) => - api.tx.investments[ - order.type === 'invest' ? 'collectInvestmentsFor' : 'collectRedemptionsFor' - ](order.accountId, [pool.id, order.trancheId]) - ) + (cent) => (args: [poolId: string, collect: boolean], options) => + cent.pools.closeEpoch([args[0], false], { batch: true }).pipe( + switchMap((closeTx) => { + const tx = api.tx.utility.batchAll( + [ + ...closeTx.method.args[0], + orders?.length + ? api.tx.utility.batch( + orders + .slice(0, MAX_COLLECT) + .map((order) => + api.tx.investments[order.type === 'invest' ? 'collectInvestmentsFor' : 'collectRedemptionsFor']( + order.accountId, + [pool.id, order.trancheId] + ) ) - : null, - ].filter(Boolean) - ) - return cent.wrapSignAndSend(api, tx, options) - }) - ), + ) + : null, + ].filter(Boolean) + ) + return cent.wrapSignAndSend(api, tx, options) + }) + ), { onSuccess: () => { console.log('Started order execution successfully') @@ -112,7 +111,7 @@ function EpochStatusOngoing({ pool }: { pool: Pool }) { const closeEpoch = async () => { if (!pool) return // const batchCloseAndSolution = ordersLocked && !ordersFullyExecutable // also collect the first MAX_COLLECT open orders when orders are fully executable - closeEpochTx([pool.id, false, ordersFullyExecutable], { + closeEpochTx([pool.id, ordersFullyExecutable], { account, forceProxyType: ['Borrow', 'Invest'], }) diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index eb3f791926..58696ae6ce 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -47,6 +47,26 @@ const StyledRouterTextLink = styled(RouterTextLink)` margin-top: 8px; text-decoration: none; ` +const StyledCard = styled(Card)` + width: 100%; + max-width: 100%; + height: 320px; + margin-right: 12px; + margin-bottom: 12px; + padding: 12px; + + &:hover { + border: 1px solid ${({ theme }) => theme.colors.backgroundInverted}; + } + + @media (min-width: ${({ theme }) => theme.breakpoints['M']}) { + width: auto; + } + + @media (min-width: ${({ theme }) => theme.breakpoints['XL']}) { + width: auto; + } +` export type PoolCardProps = { poolId?: string @@ -102,7 +122,7 @@ export function PoolCard({ }) as TrancheData[] return ( - + @@ -114,15 +134,15 @@ export function PoolCard({ {iconUri ? ( ) : ( - + )} - TVL ({currencySymbol}) + {currencySymbol && `TVL (${currencySymbol})`} - {valueLocked ? formatBalance(valueLocked, '') : '-'} + {valueLocked ? formatBalance(valueLocked, '') : ''} )} - Asset Type - {assetClass ?? '-'} + {assetClass && 'Asset Type'} + {assetClass ?? ''} - Investor Type - {metaData?.pool?.investorType || '-'} + {metaData?.pool?.investorType && 'Investor Type'} + {metaData?.pool?.investorType ?? ''} - + ) } diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx index 6f31f98116..25c4db63a1 100644 --- a/centrifuge-app/src/components/PoolList.tsx +++ b/centrifuge-app/src/components/PoolList.tsx @@ -31,6 +31,7 @@ export function PoolList() { const [listedPools, , metadataIsLoading] = useListedPools() const isLarge = useIsAboveBreakpoint('L') const isMedium = useIsAboveBreakpoint('M') + const isExtraLarge = useIsAboveBreakpoint('XL') const centPools = listedPools.filter(({ id }) => !id.startsWith('0x')) as Pool[] const centPoolsMetaData: PoolMetaDataPartial[] = useMetadataMulti( @@ -50,7 +51,6 @@ export function PoolList() { const sortedPools = [...openInvestmentPools, ...upcomingPools, ...tinlakePools] return [pools, search ? filterPools([...pools, ...upcomingPools], new URLSearchParams(search)) : sortedPools] - // eslint-disable-next-line react-hooks/exhaustive-deps }, [listedPools, search]) const archivedPools = pools.filter((pool) => pool?.status?.includes('Archived')) @@ -69,22 +69,22 @@ export function PoolList() { - + {metadataIsLoading ? Array(6) .fill(true) .map((_, index) => ( - + )) : filteredPools.map((pool) => ( - + ))} @@ -111,16 +111,17 @@ export function PoolList() { function ArchivedPools({ pools }: { pools: PoolCardProps[] }) { const isMedium = useIsAboveBreakpoint('M') const isLarge = useIsAboveBreakpoint('L') + const isExtraLarge = useIsAboveBreakpoint('XL') return ( - + {pools.map((pool) => ( - + ))} diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx index aefdcfa7f1..621964b277 100644 --- a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx +++ b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx @@ -116,7 +116,6 @@ export type CreatePoolValues = Omit< ratingAgency: string ratingValue: string ratingReport: File | null - minPoolInvestment: number } const initialValues: CreatePoolValues = { @@ -130,7 +129,6 @@ const initialValues: CreatePoolValues = { epochMinutes: 50, // in minutes listed: !import.meta.env.REACT_APP_DEFAULT_UNLIST_POOLS, investorType: '', - minPoolInvestment: 0, issuerName: '', issuerRepName: '', @@ -722,20 +720,6 @@ function CreatePoolForm() { }} - - - {({ field, form }: FieldProps) => ( - form.setFieldValue('minPoolInvestment', value)} - /> - )} - - {({ field, form }: FieldProps) => ( diff --git a/centrifuge-app/src/pages/IssuerCreatePool/validate.ts b/centrifuge-app/src/pages/IssuerCreatePool/validate.ts index 779ba4e29e..9744838687 100644 --- a/centrifuge-app/src/pages/IssuerCreatePool/validate.ts +++ b/centrifuge-app/src/pages/IssuerCreatePool/validate.ts @@ -31,7 +31,6 @@ export const validate = { maxReserve: combine(required(), nonNegativeNumber(), max(Number.MAX_SAFE_INTEGER)), poolType: required(), investorType: required(), - minPoolInvestment: required(), epochHours: combine(required(), nonNegativeNumber(), integer(), max(24 * 7 /* 1 week */)), epochMinutes: combine(required(), nonNegativeNumber(), integer(), max(59)), diff --git a/centrifuge-app/src/pages/NavManagement/NavManagementAssetTable.tsx b/centrifuge-app/src/pages/NavManagement/NavManagementAssetTable.tsx index 83cbdd0c42..5189e2c540 100644 --- a/centrifuge-app/src/pages/NavManagement/NavManagementAssetTable.tsx +++ b/centrifuge-app/src/pages/NavManagement/NavManagementAssetTable.tsx @@ -195,6 +195,11 @@ export function NavManagementAssetTable({ poolId }: { poolId: string }) { // eslint-disable-next-line react-hooks/exhaustive-deps }, [initialValues, isEditing, isLoading]) + + // NOTE: This assumes that pool.reserve.total comes from onchain state AND NOT from the runtime-apis + const totalAum = pool.nav.aum.toDecimal().add(pool.reserve.total.toDecimal()) + + // NOTE: current pending here in the app does include both pending + disbursed fees const pendingFees = React.useMemo(() => { return new CurrencyBalance( poolFees?.map((f) => f.amounts.pending).reduce((acc, f) => acc.add(f), new BN(0)) ?? new BN(0), @@ -214,7 +219,6 @@ export function NavManagementAssetTable({ poolId }: { poolId: string }) { }, new CurrencyBalance(0, pool.currency.decimals)) }, [externalLoans, pool?.nav, form.values.feed]) - const totalAum = pool.nav.aum.toDecimal().add(pool.reserve.available.toDecimal()) const pendingNav = totalAum.add(changeInValuation.toDecimal()).sub(pendingFees.toDecimal()) // Only for single tranche pools @@ -319,7 +323,13 @@ export function NavManagementAssetTable({ poolId }: { poolId: string }) { return ( <> - + @@ -411,28 +421,18 @@ export function NavManagementAssetTable({ poolId }: { poolId: string }) { ) } -export function NavOverviewCard({ poolId, changeInValuation }: { poolId: string; changeInValuation: number }) { +export function NavOverviewCard({ poolId, changeInValuation, totalAum, pendingFees, pendingNav }: { poolId: string; changeInValuation: number; totalAum: number; pendingFees: number; pendingNav: number}) { const pool = usePool(poolId) - const poolFees = usePoolFees(poolId) const today = new Date() today.setHours(0, 0, 0, 0) - const pendingFees = React.useMemo(() => { - return new CurrencyBalance( - poolFees?.map((f) => f.amounts.pending).reduce((acc, f) => acc.add(f), new BN(0)) ?? new BN(0), - pool.currency.decimals - ) - }, [poolFees, pool.currency.decimals]) - - const totalAum = pool.nav.aum.toDecimal().add(pool.reserve.available.toDecimal()) - return ( ) } diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts index 37dab7a4b4..7fe0698140 100644 --- a/centrifuge-js/src/modules/pools.ts +++ b/centrifuge-js/src/modules/pools.ts @@ -645,7 +645,6 @@ interface TrancheFormValues { interestRate: number | '' minRiskBuffer: number | '' minInvestment: number | '' - targetAPY: number | '' } export type IssuerDetail = {