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}
>