From e375bf54f831814e0436cdbc5eecc8d68fb7dba0 Mon Sep 17 00:00:00 2001 From: Sophia Date: Wed, 29 May 2024 10:44:56 -0400 Subject: [PATCH] Multichain integrations on pool detail page (#2143) * Add blockexplorer urls * Expose network icon from fabric * Add multichain to key metrics * Remove comment --- .../components/PoolOverview/KeyMetrics.tsx | 46 ++++++++++++++++++- centrifuge-app/src/config.ts | 2 + .../components/WalletProvider/NetworkIcon.tsx | 14 ++++++ .../src/components/WalletProvider/index.tsx | 5 +- fabric/src/components/Tooltip/index.tsx | 17 +++++-- 5 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 centrifuge-react/src/components/WalletProvider/NetworkIcon.tsx diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx index 85352ea41b..77fd212ecc 100644 --- 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: ( + + {activeDomains.data.map((domain) => { + const chain = (evmChains as any)[domain.chainId] + return ( + + {chain.name} chain + + + + View transactions + {' '} + + + + + } + > + + + ) + })} + + ), + }, + ] + : []), ] return ( diff --git a/centrifuge-app/src/config.ts b/centrifuge-app/src/config.ts index caea08a68d..fae1ba7b97 100644 --- 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 new file mode 100644 index 0000000000..69485cc9f9 --- /dev/null +++ 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 + size?: string | number + disabled?: boolean +} + +export function NetworkIcon({ network, size = 'iconRegular' }: NetworkIconProps) { + return +} diff --git a/centrifuge-react/src/components/WalletProvider/index.tsx b/centrifuge-react/src/components/WalletProvider/index.tsx index 9c022590e8..e0607681dd 100644 --- 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 index 3936a63410..3ad7ff5548 100644 --- 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 = ({ title, body, children, disabled, delay = 1000, ...textProps }) => { +export const Tooltip: React.FC = ({ + title, + body, + children, + disabled, + delay = 1000, + bodyWidth, + bodyPadding, + ...textProps +}) => { const triggerRef = React.useRef(null) const overlayRef = React.useRef(null) @@ -95,9 +106,9 @@ export const Tooltip: React.FC = ({ 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} >