diff --git a/centrifuge-app/src/components/PoolCard/PoolStatus.tsx b/centrifuge-app/src/components/PoolCard/PoolStatus.tsx index 60acdb11ac..57c25f7285 100644 --- a/centrifuge-app/src/components/PoolCard/PoolStatus.tsx +++ b/centrifuge-app/src/components/PoolCard/PoolStatus.tsx @@ -1,12 +1,13 @@ import { StatusChip, StatusChipProps } from '@centrifuge/fabric' import * as React from 'react' -export type PoolStatusKey = 'Maker Pool' | 'Open for investments' | 'Closed' +export type PoolStatusKey = 'Maker Pool' | 'Open for investments' | 'Closed' | 'Upcoming' const statusColor: { [key in PoolStatusKey]: StatusChipProps['status'] } = { 'Maker Pool': 'ok', 'Open for investments': 'info', Closed: 'default', + Upcoming: 'default', } export function PoolStatus({ status }: { status?: PoolStatusKey }) { diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index 9f984f3e47..3eaf04289e 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -1,5 +1,5 @@ import { Rate } from '@centrifuge/centrifuge-js' -import { Box, Grid, TextWithPlaceholder, Thumbnail } from '@centrifuge/fabric' +import { Box, Grid, Text, TextWithPlaceholder, Thumbnail } from '@centrifuge/fabric' import Decimal from 'decimal.js-light' import * as React from 'react' import { useRouteMatch } from 'react-router' @@ -70,7 +70,7 @@ export function PoolCard({ variant="body1" color="textPrimary" fontWeight={500} - textAlign="right" + textAlign="left" isLoading={isLoading} maxLines={1} > @@ -82,6 +82,7 @@ export function PoolCard({ }) : '—'} + {status === 'Upcoming' ? target : ''} @@ -89,7 +90,7 @@ export function PoolCard({ - + {status === 'Upcoming' ? null : } ) } diff --git a/centrifuge-app/src/pages/Pools.tsx b/centrifuge-app/src/pages/Pools.tsx index 00c1445c7a..dc56043c43 100644 --- a/centrifuge-app/src/pages/Pools.tsx +++ b/centrifuge-app/src/pages/Pools.tsx @@ -1,4 +1,4 @@ -import Centrifuge, { Pool, PoolMetadata } from '@centrifuge/centrifuge-js' +import Centrifuge, { Pool, PoolMetadata, Rate } from '@centrifuge/centrifuge-js' import { useCentrifuge } from '@centrifuge/centrifuge-react' import { Box, InlineFeedback, Shelf, Stack, Text } from '@centrifuge/fabric' import * as React from 'react' @@ -39,7 +39,26 @@ function Pools() { ).map((q) => q.data) const centPoolsMetaDataById = getMetasById(centPools, centPoolsMetaData) - const pools = !!listedPools?.length ? poolsToPoolCardProps(listedPools, centPoolsMetaDataById, cent) : [] + const upcomingPools = [ + { + apr: Rate.fromApr(0.08), + assetClass: 'Real Estate Bridge Loans', + iconUri: 'https://storage.googleapis.com/tinlake/pool-media/new-silver-2/icon.svg', + name: 'New Silver Series 3', + status: 'Upcoming' as PoolStatusKey, + }, + { + apr: Rate.fromApr(0.15), + assetClass: 'Voluntary Carbon Offsets', + iconUri: 'https://storage.googleapis.com/tinlake/pool-media/flowcarbon-1/FlowcarbonBadge.svg', + name: 'Flowcarbon Nature Offsets Series 2', + status: 'Upcoming' as PoolStatusKey, + }, + ] + + const pools = !!listedPools?.length + ? [...poolsToPoolCardProps(listedPools, centPoolsMetaDataById, cent), ...upcomingPools] + : [...upcomingPools] const filteredPools = !!pools?.length ? filterPools(pools, new URLSearchParams(search)) : [] if (!listedPools.length) {