J M Rossy
7 months ago
parent
2ed49779b7
commit
84a9a3420a
@ -1,13 +1,22 @@ |
||||
import { ComponentProps } from 'react'; |
||||
|
||||
import { ChainLogo as ChainLogoInner } from '@hyperlane-xyz/widgets'; |
||||
|
||||
import { getChainName } from '../../features/chains/utils'; |
||||
import { useMultiProvider } from '../../features/providers/multiProvider'; |
||||
import { useMultiProvider, useRegistry } from '../../store'; |
||||
|
||||
export function ChainLogo(props: ComponentProps<typeof ChainLogoInner>) { |
||||
const { chainName, chainId, ...rest } = props; |
||||
export function ChainLogo({ |
||||
chainId, |
||||
chainName, |
||||
background, |
||||
size, |
||||
}: { |
||||
chainId: ChainId; |
||||
chainName?: string; |
||||
background?: boolean; |
||||
size?: number; |
||||
}) { |
||||
const multiProvider = useMultiProvider(); |
||||
const name = chainName || getChainName(multiProvider, props.chainId); |
||||
return <ChainLogoInner {...rest} chainName={name} chainId={chainId} />; |
||||
const registry = useRegistry(); |
||||
const name = chainName || multiProvider.tryGetChainName(chainId) || ''; |
||||
return ( |
||||
<ChainLogoInner chainName={name} registry={registry} size={size} background={background} /> |
||||
); |
||||
} |
||||
|
||||
@ -1,39 +0,0 @@ |
||||
import Image from 'next/image'; |
||||
import { memo } from 'react'; |
||||
|
||||
import ArrowRightIcon from '../../images/icons/arrow-right-short.svg'; |
||||
import { useIsMobile } from '../../styles/mediaQueries'; |
||||
|
||||
import { ChainLogo } from './ChainLogo'; |
||||
|
||||
function ChainToChain_({ |
||||
originChainId, |
||||
destinationChainId, |
||||
size = 32, |
||||
arrowSize = 32, |
||||
isNarrow = false, |
||||
}: { |
||||
originChainId: ChainId; |
||||
destinationChainId: ChainId; |
||||
size?: number; |
||||
arrowSize?: number; |
||||
isNarrow?: boolean; |
||||
}) { |
||||
const isMobile = useIsMobile(); |
||||
if (isMobile) { |
||||
size = Math.floor(size * 0.8); |
||||
arrowSize = Math.floor(arrowSize * 0.8); |
||||
} |
||||
|
||||
return ( |
||||
<div |
||||
className={`flex items-center justify-center sm:space-x-1 ${isNarrow ? '' : 'md:space-x-2'}`} |
||||
> |
||||
<ChainLogo chainId={originChainId} size={size} /> |
||||
<Image src={ArrowRightIcon} width={arrowSize} height={arrowSize} alt="" /> |
||||
<ChainLogo chainId={destinationChainId} size={size} /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export const ChainToChain = memo(ChainToChain_); |
||||
@ -1,40 +1,40 @@ |
||||
import { |
||||
ChainMap, |
||||
type MultiProvider, |
||||
chainIdToMetadata, |
||||
hyperlaneContractAddresses, |
||||
} from '@hyperlane-xyz/sdk'; |
||||
import { CoreChain, CoreChains, IRegistry } from '@hyperlane-xyz/registry'; |
||||
import { ChainMap, MultiProvider } from '@hyperlane-xyz/sdk'; |
||||
import { toTitleCase } from '@hyperlane-xyz/utils'; |
||||
|
||||
import { Environment } from '../../consts/environments'; |
||||
|
||||
import { ChainConfig } from './chainConfig'; |
||||
|
||||
export function getChainName(mp: MultiProvider, chainId?: number | string) { |
||||
return mp.tryGetChainName(chainId || 0) || undefined; |
||||
} |
||||
|
||||
export function getMailboxAddress(customChainConfigs: ChainMap<ChainConfig>, chainName: string) { |
||||
return customChainConfigs[chainName]?.mailbox ?? hyperlaneContractAddresses[chainName]?.mailbox; |
||||
export async function getMailboxAddress( |
||||
chainName: string, |
||||
customChainConfigs: ChainMap<ChainConfig>, |
||||
registry: IRegistry, |
||||
) { |
||||
if (customChainConfigs[chainName]?.mailbox) return customChainConfigs[chainName].mailbox; |
||||
const addresses = await registry.getChainAddresses(chainName); |
||||
if (addresses?.mailbox) return addresses.mailbox; |
||||
else return undefined; |
||||
} |
||||
|
||||
export function getChainDisplayName( |
||||
mp: MultiProvider, |
||||
multiProvider: MultiProvider, |
||||
chainOrDomainId?: ChainId | DomainId, |
||||
shortName = false, |
||||
fallbackToId = true, |
||||
) { |
||||
const metadata = mp.tryGetChainMetadata(chainOrDomainId || 0); |
||||
const metadata = multiProvider.tryGetChainMetadata(chainOrDomainId || 0); |
||||
if (!metadata) return fallbackToId && chainOrDomainId ? chainOrDomainId : 'Unknown'; |
||||
const displayName = shortName ? metadata.displayNameShort : metadata.displayName; |
||||
return toTitleCase(displayName || metadata.displayName || metadata.name); |
||||
} |
||||
|
||||
export function getChainEnvironment(mp: MultiProvider, chainIdOrName: number | string) { |
||||
const isTestnet = mp.tryGetChainMetadata(chainIdOrName)?.isTestnet; |
||||
export function getChainEnvironment(multiProvider: MultiProvider, chainIdOrName: number | string) { |
||||
const isTestnet = multiProvider.tryGetChainMetadata(chainIdOrName)?.isTestnet; |
||||
return isTestnet ? Environment.Testnet : Environment.Mainnet; |
||||
} |
||||
|
||||
export function isPiChain(chainId: number | string) { |
||||
return !chainIdToMetadata[chainId]; |
||||
export function isPiChain(multiProvider: MultiProvider, chainIdOrName: number | string) { |
||||
const chainName = multiProvider.tryGetChainName(chainIdOrName); |
||||
return !chainName || !CoreChains.includes(chainName as CoreChain); |
||||
} |
||||
|
||||
@ -1,5 +0,0 @@ |
||||
import { useStore } from '../../store'; |
||||
|
||||
export function useMultiProvider() { |
||||
return useStore((s) => s.multiProvider); |
||||
} |
||||
Loading…
Reference in new issue