Redesign: Fix infinite loading of connect/invest button (#2501)

* Rearrange tranche token card column/data code for table

* Fix infinite loading on invest button

* Remove log

centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx

@@ -1,5 +1,5 @@
 import { CurrencyBalance, findBalance, Pool } from '@centrifuge/centrifuge-js'
-import { useBalances, useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
+import { useBalances, useCentrifugeTransaction, useWallet } from '@centrifuge/centrifuge-react'
 import { CentrifugeTransactionOptions } from '@centrifuge/centrifuge-react/dist/hooks/useCentrifugeTransaction'
 import BN from 'bn.js'
 import * as React from 'react'
@@ -25,6 +25,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
   const trancheMeta = metadata?.tranches?.[trancheId]
   const liquidityState = useLiquidityRewards().state
   const [isStableLoading, setIsStableLoading] = React.useState(true)
+  const { connectedType } = useWallet()
 
   if (!tranche) throw new Error(`Token not found. Pool id: ${poolId}, token id: ${trancheId}`)
 
@@ -88,7 +89,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
 
   React.useEffect(() => {
     const timer = setTimeout(() => {
-      if (isDataLoading) {
+      if (isDataLoading && connectedType) {
         setIsStableLoading(true)
       } else {
         setIsStableLoading(false)

centrifuge-app/src/components/IssuerSection.tsx

@@ -286,7 +286,6 @@ export const PoolAnalysis = ({ metadata, inverted }: IssuerSectionProps & { inve
   // Not sure why some pools have N/A, it should be empty but this is a fix for those pools in the meantime
   const isEmpty = report?.author.name === 'N/A'
 
-  console.log(report)
   return report?.author?.name || report?.author?.title ? (
     isEmpty ? null : (
       <Stack gap={1}>

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

@@ -1,5 +1,6 @@
 import { Perquintill } from '@centrifuge/centrifuge-js'
 import { Box, Shelf, Text } from '@centrifuge/fabric'
+import { Decimal } from 'decimal.js-light'
 import { useMemo } from 'react'
 import { useTheme } from 'styled-components'
 import { InvestButton, Token } from '../../pages/Pool/Overview'
@@ -10,6 +11,15 @@ import { DataTable } from '../DataTable'
 import { CentrifugeTargetAPYs, DYF_POOL_ID, NS3_POOL_ID, centrifugeTargetAPYs } from '../PoolCard'
 import { PoolMetaDataPartial } from '../PoolList'
 
+type Row = {
+  tokenName: string
+  apy: Decimal
+  tvl: Decimal
+  tokenPrice: Decimal
+  subordination: Decimal
+  trancheId: string
+}
+
 export const TrancheTokenCards = ({
   trancheTokens,
   poolId,
@@ -22,89 +32,110 @@ export const TrancheTokenCards = ({
   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 getTrancheText = (trancheToken: Token) => {
     if (trancheToken.seniority === 0) return 'junior'
     if (trancheToken.seniority === 1) return 'senior'
     return 'mezzanine'
   }
 
-  const columnConfig = useMemo(() => {
-    const calculateApy = (trancheToken: Token) => {
-      if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy)
-      if (poolId === DYF_POOL_ID) return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0]
-      if (poolId === NS3_POOL_ID && trancheToken.seniority === 0)
-        return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0]
-      if (poolId === NS3_POOL_ID && trancheToken.seniority === 1)
-        return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][1]
-      if (daysSinceCreation < 30) return 'N/A'
-      return trancheToken.yield30DaysAnnualized
-        ? formatPercentage(new Perquintill(trancheToken.yield30DaysAnnualized))
-        : '-'
-    }
+  const calculateApy = (trancheToken: Token) => {
+    if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy)
+    if (poolId === DYF_POOL_ID) return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0]
+    if (poolId === NS3_POOL_ID && trancheToken.seniority === 0)
+      return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0]
+    if (poolId === NS3_POOL_ID && trancheToken.seniority === 1)
+      return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][1]
+    const daysSinceCreation = pool?.createdAt ? daysBetween(new Date(pool.createdAt), new Date()) : 0
+    if (daysSinceCreation < 30) return 'N/A'
+    return trancheToken.yield30DaysAnnualized
+      ? formatPercentage(new Perquintill(trancheToken.yield30DaysAnnualized))
+      : '-'
+  }
 
+  const columns = useMemo(() => {
     return [
       {
         header: 'Token',
-        align: 'left',
-        formatter: (v: any) => v,
         width: '40%',
+        align: 'left',
+        cell: (row: Row) => {
+          return (
+            <Text paddingY={2} fontWeight="400" variant="heading2">
+              {row.tokenName}
+            </Text>
+          )
+        },
       },
       {
-        header: poolId === DYF_POOL_ID || poolId === NS3_POOL_ID ? 'Target' : 'APY',
+        header: 'APY',
         align: 'left',
-        formatter: (v: any) => (v ? calculateApy(v) : '-'),
+        cell: (row: Row) => {
+          return (
+            <Text paddingY={2} fontWeight="600" variant="heading2">
+              {row.apy}
+            </Text>
+          )
+        },
       },
       {
         header: `TVL (${pool?.currency.symbol})`,
         align: 'left',
-        formatter: (v: any) => (v ? formatBalance(v) : '-'),
+        cell: (row: Row) => {
+          return (
+            <Text paddingY={2} fontWeight="400" variant="heading2">
+              {formatBalance(row.tvl)}
+            </Text>
+          )
+        },
       },
       {
-        header: 'Token price',
+        header: `Token price (${pool?.currency.symbol})`,
         align: 'left',
-        formatter: (v: any) => (v ? formatBalance(v, pool?.currency.symbol, 6) : '-'),
+        cell: (row: Row) => {
+          return (
+            <Text paddingY={2} fontWeight="400" variant="heading2">
+              {formatBalance(row.tokenPrice, undefined, 6)}
+            </Text>
+          )
+        },
       },
       ...(pool.tranches.length > 1
         ? [
             {
               header: 'Subordination',
               align: 'left',
-              formatter: (_: any, row: any) => {
-                if (row.value[1].seniority === 0) return '-'
-                return formatPercentage(row.value[1].protection)
+              cell: (row: Row) => {
+                return (
+                  <Text paddingY={2} fontWeight="400" variant="heading2">
+                    {formatPercentage(row.subordination)}
+                  </Text>
+                )
               },
             },
           ]
         : []),
       {
         header: '',
         align: 'right',
-        formatter: (_: any, row: any) => (
-          <InvestButton poolId={poolId} trancheId={row.value[1].id} metadata={metadata} />
-        ),
+        cell: (row: Row) => {
+          return <InvestButton poolId={poolId} trancheId={row.trancheId} metadata={metadata} />
+        },
       },
     ]
-  }, [pool, poolId, isTinlakePool, daysSinceCreation, metadata])
+  }, [pool.tranches, metadata, poolId])
 
-  const columns = useMemo(() => {
-    return columnConfig.map((col, index) => {
+  const dataTable = useMemo(() => {
+    return trancheTokens.map((tranche) => {
       return {
-        cell: (row: any) => (
-          <Text paddingY={2} fontWeight={col.header === 'APY' ? '600' : '400'} variant="heading2">
-            {col.formatter(row.value[index], row)}
-          </Text>
-        ),
-        ...col,
+        tokenName: tranche.name,
+        apy: calculateApy(tranche),
+        tvl: tranche.valueLocked,
+        tokenPrice: tranche.tokenPrice,
+        subordination: tranche.protection,
+        trancheId: tranche.id,
       }
     })
-  }, [columnConfig])
-
-  const dataTable = useMemo(() => {
-    return trancheTokens.map((tranche) => ({
-      value: [tranche.name, tranche, tranche.valueLocked, tranche.tokenPrice],
-    }))
   }, [trancheTokens])
 
   return (