Multichain integrations on pool detail page (#2143)

* Add blockexplorer urls * Expose network icon from fabric * Add multichain to key metrics * Remove comment
centrifuge · May 29, 2024 · e375bf5 · e375bf5
1 parent f2a9a88
commit e375bf5
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 6 deletions.
diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
@@ -1,8 +1,11 @@
 import { ActiveLoan, Loan, TinlakeLoan } from '@centrifuge/centrifuge-js'
-import { Box, Card, Grid, Stack, Text } from '@centrifuge/fabric'
+import { NetworkIcon } from '@centrifuge/centrifuge-react'
+import { Box, Card, Grid, IconExternalLink, Shelf, Stack, Text, Tooltip } from '@centrifuge/fabric'
 import capitalize from 'lodash/capitalize'
 import startCase from 'lodash/startCase'
+import { evmChains } from '../../config'
 import { daysBetween } from '../../utils/date'
+import { useActiveDomains } from '../../utils/useLiquidityPools'
 
 type Props = {
   assetType?: { class: string; subClass: string }
@@ -27,6 +30,8 @@ export const KeyMetrics = ({ assetType, averageMaturity, loans, poolId }: Props)
       return loan.status === 'Active' && loan.pricing.maturityDate && days < 0 && !loan.outstandingDebt.isZero()
     }).length
 
+  const activeDomains = useActiveDomains(poolId)
+
   const isBT3BT4 =
     poolId.toLowerCase() === '0x90040f96ab8f291b6d43a8972806e977631affde' ||
     poolId.toLowerCase() === '0x55d86d51ac3bcab7ab7d2124931fba106c8b60c7'
@@ -70,6 +75,45 @@ 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>
+                          <a
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            href={`${chain.blockExplorerUrl}address/${domain.managerAddress}`}
+                          >
+                            <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={domain.chainId} />
+                    </Tooltip>
+                  )
+                })}
+              </Shelf>
+            ),
+          },
+        ]
+      : []),
   ]
 
   return (

diff --git a/centrifuge-app/src/config.ts b/centrifuge-app/src/config.ts
@@ -174,6 +174,7 @@ export const evmChains: EvmChains = {
       symbol: 'ETH',
       decimals: 18,
     },
+    blockExplorerUrl: 'https://etherscan.io/',
     urls: [`https://eth.api.onfinality.io/rpc?apikey=${onfinalityKey}`],
     iconUrl: ethereumLogo,
     isTestnet: false,
@@ -185,6 +186,7 @@ export const evmChains: EvmChains = {
       symbol: 'görETH',
       decimals: 18,
     },
+    blockExplorerUrl: 'https://goerli.etherscan.io/',
     urls: [`https://eth-goerli.api.onfinality.io/rpc?apikey=${onfinalityKey}`],
     iconUrl: goerliLogo,
     isTestnet: true,

diff --git a/centrifuge-react/src/components/WalletProvider/NetworkIcon.tsx b/centrifuge-react/src/components/WalletProvider/NetworkIcon.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Logo } from './SelectButton'
+import type { State } from './types'
+import { useNetworkIcon } from './utils'
+
+export type NetworkIconProps = {
+  network: Exclude<State['walletDialog']['network'], null>
+  size?: string | number
+  disabled?: boolean
+}
+
+export function NetworkIcon({ network, size = 'iconRegular' }: NetworkIconProps) {
+  return <Logo icon={useNetworkIcon(network)} size={size} />
+}
diff --git a/centrifuge-react/src/components/WalletProvider/index.tsx b/centrifuge-react/src/components/WalletProvider/index.tsx
@@ -1,13 +1,15 @@
 export { ConnectionGuard } from './ConnectionGuard'
+export { NetworkIcon } from './NetworkIcon'
+export * from './WalletProvider'
 export * from './evm/chains'
 export type { EvmConnectorMeta } from './evm/connectors'
 export {
   createConnector,
   getStore,
   useConnectorState,
-  useEvmProvider,
   useNativeBalance as useEvmNativeBalance,
   useNativeCurrency as useEvmNativeCurrency,
+  useEvmProvider,
   useProviderForConnector,
 } from './evm/utils'
 export type { CombinedSubstrateAccount, EvmChainId, Network, Proxy, SubstrateAccount } from './types'
@@ -19,4 +21,3 @@ export {
   useNetworkIcon,
   useNetworkName,
 } from './utils'
-export * from './WalletProvider'
diff --git a/fabric/src/components/Tooltip/index.tsx b/fabric/src/components/Tooltip/index.tsx
@@ -13,6 +13,8 @@ export type TooltipProps = TextProps & {
   body: string | React.ReactNode
   disabled?: boolean
   delay?: number
+  bodyWidth?: string | number
+  bodyPadding?: string | number
 }
 
 const StyledTrigger = styled(Text)`
@@ -68,7 +70,16 @@ const Container = styled(Stack)<{ pointer: PlacementAxis }>`
   }
 `
 
-export const Tooltip: React.FC<TooltipProps> = ({ title, body, children, disabled, delay = 1000, ...textProps }) => {
+export const Tooltip: React.FC<TooltipProps> = ({
+  title,
+  body,
+  children,
+  disabled,
+  delay = 1000,
+  bodyWidth,
+  bodyPadding,
+  ...textProps
+}) => {
   const triggerRef = React.useRef<HTMLButtonElement>(null)
   const overlayRef = React.useRef<HTMLDivElement>(null)
 
@@ -95,9 +106,9 @@ export const Tooltip: React.FC<TooltipProps> = ({ title, body, children, disable
               {...rest}
               ref={overlayRef}
               backgroundColor="backgroundPrimary"
-              p={1}
+              p={bodyPadding ?? 1}
               borderRadius="tooltip"
-              width={220}
+              width={bodyWidth ?? 220}
               gap="3px"
               pointer={pointer}
             >