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/components/PoolFilter/SortButton.tsx b/centrifuge-app/src/components/PoolFilter/SortButton.tsx
index 4354aee38a..ba31ffe790 100644
--- a/centrifuge-app/src/components/PoolFilter/SortButton.tsx
+++ b/centrifuge-app/src/components/PoolFilter/SortButton.tsx
@@ -9,6 +9,7 @@ export type SortButtonProps = {
label: string
searchKey: SortBy
tooltip?: string
+ justifySelf?: 'start' | 'end'
}
type Sorting = {
@@ -16,7 +17,7 @@ type Sorting = {
direction: string | null
}
-export function SortButton({ label, searchKey, tooltip }: SortButtonProps) {
+export function SortButton({ label, searchKey, tooltip, justifySelf = 'end' }: SortButtonProps) {
const history = useHistory()
const { pathname, search } = useLocation()
@@ -58,7 +59,7 @@ export function SortButton({ label, searchKey, tooltip }: SortButtonProps) {
: `Sort ${label} ascending`
}
aria-live
- style={{ justifySelf: 'end' }}
+ style={{ justifySelf }}
>
{label}
@@ -82,7 +83,7 @@ export function SortButton({ label, searchKey, tooltip }: SortButtonProps) {
: `Sort ${label} ascending`
}
aria-live
- style={{ justifySelf: 'end' }}
+ style={{ justifySelf }}
>
{label}
diff --git a/centrifuge-app/src/components/PoolFilter/index.tsx b/centrifuge-app/src/components/PoolFilter/index.tsx
index 87ead21872..a3fc4d1ede 100644
--- a/centrifuge-app/src/components/PoolFilter/index.tsx
+++ b/centrifuge-app/src/components/PoolFilter/index.tsx
@@ -38,7 +38,7 @@ export function PoolFilter({ pools }: PoolFilterProps) {
tooltip="Value locked represents the current total value of pool tokens."
/>
-
+
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
+ ? [...upcomingPools, ...poolsToPoolCardProps(listedPools, centPoolsMetaDataById, cent)]
+ : [...upcomingPools]
const filteredPools = !!pools?.length ? filterPools(pools, new URLSearchParams(search)) : []
if (!listedPools.length) {