From 709ba9527c81355e5700e71f371eb45ea75415f1 Mon Sep 17 00:00:00 2001
From: JP <jp@k-f.co>
Date: Mon, 18 Sep 2023 11:29:49 -0500
Subject: [PATCH] add upcoming pools (#1586)

* add upcoming pools

* reorder pools

* fix alignment
---
 .../src/components/PoolCard/PoolStatus.tsx    |  3 ++-
 .../src/components/PoolCard/index.tsx         |  7 +++---
 .../src/components/PoolFilter/SortButton.tsx  |  7 +++---
 .../src/components/PoolFilter/index.tsx       |  2 +-
 centrifuge-app/src/pages/Pools.tsx            | 23 +++++++++++++++++--
 5 files changed, 32 insertions(+), 10 deletions(-)

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({
                 })
               : '—'}
           </Ellipsis>
+          {status === 'Upcoming' ? <Text variant="body3"> target</Text> : ''}
         </TextWithPlaceholder>
 
         <Box>
@@ -89,7 +90,7 @@ export function PoolCard({
         </Box>
       </Grid>
 
-      <Anchor to={`${basePath}/${poolId}`} aria-label="Go to pool details" />
+      {status === 'Upcoming' ? null : <Anchor to={`${basePath}/${poolId}`} aria-label="Go to pool details" />}
     </Root>
   )
 }
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 }}
       >
         <FilterButton forwardedAs="span" variant="body3">
           {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."
       />
 
-      <SortButton {...poolFilterConfig.apr} />
+      <SortButton {...poolFilterConfig.apr} justifySelf="start" />
 
       <FilterMenu
         {...poolFilterConfig.poolStatus}
diff --git a/centrifuge-app/src/pages/Pools.tsx b/centrifuge-app/src/pages/Pools.tsx
index 00c1445c7a..11f7f9f204 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
+    ? [...upcomingPools, ...poolsToPoolCardProps(listedPools, centPoolsMetaDataById, cent)]
+    : [...upcomingPools]
   const filteredPools = !!pools?.length ? filterPools(pools, new URLSearchParams(search)) : []
 
   if (!listedPools.length) {