WIP - Add logic around invest button

centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx

@@ -1,25 +1,54 @@
 import { Perquintill } from '@centrifuge/centrifuge-js'
-import { Box, Shelf, Text } from '@centrifuge/fabric'
+import { useWallet } from '@centrifuge/centrifuge-react'
+import { Box, Button, Shelf, Text } from '@centrifuge/fabric'
 import { useMemo } from 'react'
 import { useTheme } from 'styled-components'
-import { InvestButton, Token } from '../../pages/Pool/Overview'
+import { usePoolPermissions } from '../../../src/utils/usePermissions'
+import { Token } from '../../pages/Pool/Overview'
 import { daysBetween } from '../../utils/date'
 import { formatBalance, formatPercentage } from '../../utils/formatting'
 import { usePool } from '../../utils/usePools'
 import { DataTable } from '../DataTable'
+import { PoolMetaDataPartial } from '../PoolList'
 
-export const TrancheTokenCards = ({ trancheTokens, poolId }: { trancheTokens: Token[]; poolId: string }) => {
+export const TrancheTokenCards = ({
+  trancheTokens,
+  poolId,
+  metadata,
+}: {
+  trancheTokens: Token[]
+  poolId: string
+  metadata: PoolMetaDataPartial
+}) => {
+  const { connectedType, showNetworks, substrate } = useWallet()
   const pool = usePool(poolId)
   const theme = useTheme()
   const isTinlakePool = poolId.startsWith('0x')
   const daysSinceCreation = pool?.createdAt ? daysBetween(new Date(pool.createdAt), new Date()) : 0
+  const permissions = usePoolPermissions(poolId)
+  const hasMemberlistPermissions = permissions?.[substrate.selectedAddress ?? '']?.roles.includes('InvestorAdmin')
 
   const getTrancheText = (trancheToken: Token) => {
     if (trancheToken.seniority === 0) return 'junior'
     if (trancheToken.seniority === 1) return 'senior'
     return 'mezzanine'
   }
 
+  const getButton = () => {
+    if (connectedType === null)
+      return (
+        <Button onClick={() => showNetworks()} variant="primary">
+          Connect
+        </Button>
+      )
+    else if (!hasMemberlistPermissions && connectedType !== null)
+      return (
+        <Button onClick={() => window.open(metadata?.onboarding?.externalOnboardingUrl)} variant="primary">
+          Onboard
+        </Button>
+      )
+  }
+
   const columnConfig = useMemo(() => {
     const calculateApy = (trancheToken: Token) => {
       if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy)
@@ -66,12 +95,10 @@ export const TrancheTokenCards = ({ trancheTokens, poolId }: { trancheTokens: To
       {
         header: '',
         align: 'right',
-        formatter: (_: any, row: any) => {
-          return <InvestButton poolId={poolId} trancheId={row.value[1].id} />
-        },
+        formatter: (_: any, row: any) => getButton(),
       },
     ]
-  }, [pool, poolId, isTinlakePool, daysSinceCreation])
+  }, [pool, poolId, isTinlakePool, daysSinceCreation, getButton])
 
   const columns = useMemo(() => {
     return columnConfig.map((col, index) => {

centrifuge-app/src/pages/Pool/Overview/index.tsx

@@ -118,7 +118,7 @@ export function PoolDetailOverview() {
         </Grid>
         {tokens.length > 0 && (
           <React.Suspense fallback={<Spinner />}>
-            <TrancheTokenCards trancheTokens={tokens} poolId={poolId} />
+            <TrancheTokenCards trancheTokens={tokens} poolId={poolId} metadata={metadata} />
           </React.Suspense>
         )}
         <React.Suspense fallback={<Spinner />}>

fabric/src/theme/tokens/theme.ts

@@ -7,7 +7,7 @@ const statusWarning = yellowScale[800]
 const statusCritical = '#d43f2b'
 const statusPromote = '#f81071'
 
-const statusDefaultBg = grayScale[300]
+const statusDefaultBg = '#CFCFCF'
 const statusInfoBg = blueScale[50]
 const statusOkBg = '#f1f7ec'
 const statusWarningBg = yellowScale[50]