From 6557cffe75e2fe4bef7ec08260f4e74150d31872 Mon Sep 17 00:00:00 2001
From: Sophia <littlejohn.sophia@gmail.com>
Date: Thu, 30 May 2024 13:46:51 -0400
Subject: [PATCH] Show only deployed LPs Key Metrics and add Centrifuge logo
 (#2165)

* Show only deployed LPs and add Centrifuge chain

* List tranches to click on

* Remove available networks from pool structure

* Change copy if only one tranche

* Link centrifuge to subscan
---
 .../components/PoolOverview/KeyMetrics.tsx    | 114 +++++++++++++-----
 .../components/PoolOverview/PoolStructure.tsx |   4 -
 2 files changed, 86 insertions(+), 32 deletions(-)

diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
index 77fd212ecc..2cd323a222 100644
--- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
+++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
@@ -6,6 +6,8 @@ import startCase from 'lodash/startCase'
 import { evmChains } from '../../config'
 import { daysBetween } from '../../utils/date'
 import { useActiveDomains } from '../../utils/useLiquidityPools'
+import { usePool } from '../../utils/usePools'
+import { Spinner } from '../Spinner'
 
 type Props = {
   assetType?: { class: string; subClass: string }
@@ -15,6 +17,7 @@ type Props = {
 }
 
 export const KeyMetrics = ({ assetType, averageMaturity, loans, poolId }: Props) => {
+  const pool = usePool(poolId)
   const ongoingAssetCount =
     loans && [...loans].filter((loan) => loan.status === 'Active' && !loan.outstandingDebt.isZero()).length
 
@@ -75,25 +78,81 @@ export const KeyMetrics = ({ assetType, averageMaturity, loans, poolId }: Props)
           },
         ]
       : []),
-    ...(activeDomains.data?.length
-      ? [
-          {
-            metric: 'Available networks',
-            value: (
-              <Shelf gap={1}>
-                {activeDomains.data.map((domain) => {
-                  const chain = (evmChains as any)[domain.chainId]
-                  return (
-                    <Tooltip
-                      bodyWidth="maxContent"
-                      bodyPadding={0}
-                      body={
-                        <Stack p={1} gap={1} backgroundColor="backgroundSecondary">
-                          <Text variant="heading4">{chain.name} chain</Text>
+
+    {
+      metric: 'Available networks',
+      value: (
+        <Shelf gap={1}>
+          {activeDomains.data?.length ? (
+            <Tooltip
+              bodyWidth="maxContent"
+              bodyPadding={0}
+              delay={300}
+              body={
+                <Stack p={1} gap={1} backgroundColor="backgroundSecondary">
+                  <Text variant="heading4">Centrifuge</Text>
+                  {pool.tranches.length > 1 ? (
+                    pool.tranches.map((tranche) => (
+                      <a target="_blank" rel="noopener noreferrer" href={`${import.meta.env.REACT_APP_SUBSCAN_URL}`}>
+                        <Shelf gap={1} alignItems="center">
+                          <Text variant="body2" color="black">
+                            View {tranche.currency.name.split(' ').at(-1)}
+                          </Text>{' '}
+                          <IconExternalLink color="black" size="iconSmall" />
+                        </Shelf>
+                      </a>
+                    ))
+                  ) : (
+                    <a target="_blank" rel="noopener noreferrer" href={`${import.meta.env.REACT_APP_SUBSCAN_URL}`}>
+                      <Shelf gap={1} alignItems="center">
+                        <Text variant="body2" color="black">
+                          View transactions
+                        </Text>{' '}
+                        <IconExternalLink color="black" size="iconSmall" />
+                      </Shelf>
+                    </a>
+                  )}
+                </Stack>
+              }
+            >
+              <NetworkIcon size="iconSmall" network={'centrifuge'} />
+            </Tooltip>
+          ) : (
+            <Spinner size="iconSmall" />
+          )}
+          {activeDomains.data?.length &&
+            activeDomains.data
+              .filter((domain) => domain.isActive)
+              .map((domain) => {
+                const chain = (evmChains as any)[domain.chainId]
+                return (
+                  <Tooltip
+                    delay={300}
+                    bodyWidth="maxContent"
+                    bodyPadding={0}
+                    body={
+                      <Stack p={1} gap={1} backgroundColor="backgroundSecondary">
+                        <Text variant="heading4">{chain.name}</Text>
+                        {pool.tranches.length > 1 ? (
+                          pool.tranches.map((tranche) => (
+                            <a
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              href={`${chain.blockExplorerUrl}token/${domain.trancheTokens[tranche.id]}`}
+                            >
+                              <Shelf gap={1} alignItems="center">
+                                <Text variant="body2" color="black">
+                                  View {tranche.currency.name.split(' ').at(-1)}
+                                </Text>{' '}
+                                <IconExternalLink color="black" size="iconSmall" />
+                              </Shelf>
+                            </a>
+                          ))
+                        ) : (
                           <a
                             target="_blank"
                             rel="noopener noreferrer"
-                            href={`${chain.blockExplorerUrl}address/${domain.managerAddress}`}
+                            href={`${chain.blockExplorerUrl}token/${domain.trancheTokens[pool.tranches[0].id]}`}
                           >
                             <Shelf gap={1} alignItems="center">
                               <Text variant="body2" color="black">
@@ -102,18 +161,17 @@ export const KeyMetrics = ({ assetType, averageMaturity, loans, poolId }: Props)
                               <IconExternalLink color="black" size="iconSmall" />
                             </Shelf>
                           </a>
-                        </Stack>
-                      }
-                    >
-                      <NetworkIcon size="iconSmall" network={domain.chainId} />
-                    </Tooltip>
-                  )
-                })}
-              </Shelf>
-            ),
-          },
-        ]
-      : []),
+                        )}
+                      </Stack>
+                    }
+                  >
+                    <NetworkIcon size="iconSmall" network={domain.chainId} />
+                  </Tooltip>
+                )
+              })}
+        </Shelf>
+      ),
+    },
   ]
 
   return (
diff --git a/centrifuge-app/src/components/PoolOverview/PoolStructure.tsx b/centrifuge-app/src/components/PoolOverview/PoolStructure.tsx
index 4620b4f071..4f31bf087a 100644
--- a/centrifuge-app/src/components/PoolOverview/PoolStructure.tsx
+++ b/centrifuge-app/src/components/PoolOverview/PoolStructure.tsx
@@ -51,10 +51,6 @@ export const PoolStructure = ({ numOfTranches, poolId, poolStatus, poolFees }: P
     //   metric: 'First investment',
     //   value: firstInvestment ? formatDate(firstInvestment) : '-',
     // },
-    {
-      metric: 'Available networks',
-      value: `Centrifuge${deployedLpChains.length ? `, ${deployedLpChains.join(', ')}` : ''}`,
-    },
     ...poolFees.map((fee) => {
       return {
         metric: fee.name,