J M Rossy
2 years ago
commit
d618e90001
@ -1,97 +0,0 @@ |
||||
import Image from 'next/image'; |
||||
import { memo } from 'react'; |
||||
|
||||
import { chainMetadata } from '@hyperlane-xyz/sdk'; |
||||
import ArbitrumMono from '@hyperlane-xyz/sdk/logos/black/arbitrum.svg'; |
||||
import AvalancheMono from '@hyperlane-xyz/sdk/logos/black/avalanche.svg'; |
||||
import BscMono from '@hyperlane-xyz/sdk/logos/black/bsc.svg'; |
||||
import CeloMono from '@hyperlane-xyz/sdk/logos/black/celo.svg'; |
||||
import EthereumMono from '@hyperlane-xyz/sdk/logos/black/ethereum.svg'; |
||||
import MoonbeamMono from '@hyperlane-xyz/sdk/logos/black/moonbeam.svg'; |
||||
import OptimismMono from '@hyperlane-xyz/sdk/logos/black/optimism.svg'; |
||||
import PolygonMono from '@hyperlane-xyz/sdk/logos/black/polygon.svg'; |
||||
import ArbitrumColor from '@hyperlane-xyz/sdk/logos/color/arbitrum.svg'; |
||||
import AvalancheColor from '@hyperlane-xyz/sdk/logos/color/avalanche.svg'; |
||||
import BscColor from '@hyperlane-xyz/sdk/logos/color/bsc.svg'; |
||||
import CeloColor from '@hyperlane-xyz/sdk/logos/color/celo.svg'; |
||||
import EthereumColor from '@hyperlane-xyz/sdk/logos/color/ethereum.svg'; |
||||
import MoonbeamColor from '@hyperlane-xyz/sdk/logos/color/moonbeam.svg'; |
||||
import OptimismColor from '@hyperlane-xyz/sdk/logos/color/optimism.svg'; |
||||
import PolygonColor from '@hyperlane-xyz/sdk/logos/color/polygon.svg'; |
||||
|
||||
import { chainIdToCustomConfig, getChainDisplayName } from '../../features/chains/metadata'; |
||||
import QuestionMark from '../../images/icons/question-mark.svg'; |
||||
|
||||
// Keep up to date as new chains are added or
|
||||
// icon will fallback to default
|
||||
const CHAIN_TO_MONOCHROME_ICON = { |
||||
[chainMetadata.alfajores.id]: CeloMono, |
||||
[chainMetadata.arbitrum.id]: ArbitrumMono, |
||||
[chainMetadata.arbitrumgoerli.id]: ArbitrumMono, |
||||
[chainMetadata.avalanche.id]: AvalancheMono, |
||||
[chainMetadata.bsc.id]: BscMono, |
||||
[chainMetadata.bsctestnet.id]: BscMono, |
||||
[chainMetadata.celo.id]: CeloMono, |
||||
[chainMetadata.ethereum.id]: EthereumMono, |
||||
[chainMetadata.fuji.id]: AvalancheMono, |
||||
[chainMetadata.goerli.id]: EthereumMono, |
||||
[chainMetadata.moonbasealpha.id]: MoonbeamMono, |
||||
[chainMetadata.moonbeam.id]: MoonbeamMono, |
||||
[chainMetadata.mumbai.id]: PolygonMono, |
||||
[chainMetadata.optimism.id]: OptimismMono, |
||||
[chainMetadata.optimismgoerli.id]: OptimismMono, |
||||
[chainMetadata.polygon.id]: PolygonMono, |
||||
}; |
||||
|
||||
const CHAIN_TO_COLOR_ICON = { |
||||
[chainMetadata.alfajores.id]: CeloColor, |
||||
[chainMetadata.arbitrum.id]: ArbitrumColor, |
||||
[chainMetadata.arbitrumgoerli.id]: ArbitrumColor, |
||||
[chainMetadata.avalanche.id]: AvalancheColor, |
||||
[chainMetadata.bsc.id]: BscColor, |
||||
[chainMetadata.bsctestnet.id]: BscColor, |
||||
[chainMetadata.celo.id]: CeloColor, |
||||
[chainMetadata.ethereum.id]: EthereumColor, |
||||
[chainMetadata.fuji.id]: AvalancheColor, |
||||
[chainMetadata.goerli.id]: EthereumColor, |
||||
[chainMetadata.moonbasealpha.id]: MoonbeamColor, |
||||
[chainMetadata.moonbeam.id]: MoonbeamColor, |
||||
[chainMetadata.mumbai.id]: PolygonColor, |
||||
[chainMetadata.optimism.id]: OptimismColor, |
||||
[chainMetadata.optimismgoerli.id]: OptimismColor, |
||||
[chainMetadata.polygon.id]: PolygonColor, |
||||
}; |
||||
|
||||
interface Props { |
||||
chainId?: number; |
||||
size?: number; |
||||
color?: boolean; |
||||
background?: boolean; |
||||
} |
||||
|
||||
function _ChainIcon({ chainId, size = 32, color = true, background = false }: Props) { |
||||
const iconSet = color ? CHAIN_TO_COLOR_ICON : CHAIN_TO_MONOCHROME_ICON; |
||||
const imageSrc = |
||||
(chainId && (iconSet[chainId] || chainIdToCustomConfig[chainId]?.logoImgSrc)) || QuestionMark; |
||||
|
||||
if (background) { |
||||
return ( |
||||
<div |
||||
style={{ width: `${size}px`, height: `${size}px` }} |
||||
className="flex items-center justify-center rounded-full bg-gray-100 transition-all" |
||||
title={getChainDisplayName(chainId)} |
||||
> |
||||
<Image |
||||
src={imageSrc} |
||||
alt="" |
||||
width={Math.floor(size / 1.8)} |
||||
height={Math.floor(size / 1.8)} |
||||
/> |
||||
</div> |
||||
); |
||||
} else { |
||||
return <Image src={imageSrc} alt="" width={size} height={size} />; |
||||
} |
||||
} |
||||
|
||||
export const ChainIcon = memo(_ChainIcon); |
||||
@ -1,84 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
import { Color } from '../../styles/Color'; |
||||
|
||||
interface Props { |
||||
width?: string | number; |
||||
height?: string | number; |
||||
direction: 'n' | 'e' | 's' | 'w'; |
||||
color?: string; |
||||
classes?: string; |
||||
} |
||||
|
||||
function _HyperlaneChevron({ width, height, direction, color, classes }: Props) { |
||||
let directionClass; |
||||
switch (direction) { |
||||
case 'n': |
||||
directionClass = '-rotate-90'; |
||||
break; |
||||
case 'e': |
||||
directionClass = ''; |
||||
break; |
||||
case 's': |
||||
directionClass = 'rotate-90'; |
||||
break; |
||||
case 'w': |
||||
directionClass = 'rotate-180'; |
||||
break; |
||||
default: |
||||
throw new Error(`Invalid chevron direction ${direction}`); |
||||
} |
||||
|
||||
return ( |
||||
<svg |
||||
fill="none" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
viewBox="1.2 1 139.1 322" |
||||
width={width} |
||||
height={height} |
||||
className={`${directionClass} ${classes}`} |
||||
> |
||||
<path |
||||
d="M6.3 1h61.3a20 20 0 0 1 18.7 13L140 158.3a5 5 0 0 1 0 3.4l-.3.9-53.5 147.2A20 20 0 0 1 67.4 323H6.2a5 5 0 0 1-4.7-6.6l55.2-158.1L1.7 7.7A5 5 0 0 1 6.2 1Z" |
||||
fill={color || Color.primaryBlue} |
||||
></path> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const HyperlaneChevron = memo(_HyperlaneChevron); |
||||
|
||||
function _HyperlaneWideChevron({ width, height, direction, color, classes }: Props) { |
||||
let directionClass; |
||||
switch (direction) { |
||||
case 'n': |
||||
directionClass = '-rotate-90'; |
||||
break; |
||||
case 'e': |
||||
directionClass = ''; |
||||
break; |
||||
case 's': |
||||
directionClass = 'rotate-90'; |
||||
break; |
||||
case 'w': |
||||
directionClass = 'rotate-180'; |
||||
break; |
||||
default: |
||||
throw new Error(`Invalid chevron direction ${direction}`); |
||||
} |
||||
|
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
viewBox="0 0 120.3 190" |
||||
width={width} |
||||
height={height} |
||||
className={`${directionClass} ${classes}`} |
||||
fill={color || Color.primaryBlue} |
||||
> |
||||
<path d="M4.4 0h53c7.2 0 13.7 3 16.2 7.7l46.5 85.1a2 2 0 0 1 0 2l-.2.5-46.3 87c-2.5 4.6-9 7.7-16.3 7.7h-53c-3 0-5-2-4-4L48 92.9.4 4c-1-2 1-4 4-4Z" /> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const HyperlaneWideChevron = memo(_HyperlaneWideChevron); |
||||
Loading…
Reference in new issue