Skip to content

Commit 2bc4588

Browse files
jmrossyjmrossy
authored
Merge pull request #8 from hyperlane-xyz/registry
- Migrate components and hooks to use Registry utilities - Remove generated chain logo components
2 parents 2cea62e + 62824df commit 2bc4588

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+2715
-1593
lines changed

‎.storybook/preview.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import '../src/styles.css';
2+
13
const preview = {
24
parameters: {
35
actions: { argTypesRegex: '^on[A-Z].*' },

‎package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
{
22
"name": "@hyperlane-xyz/widgets",
33
"description": "Common react components for Hyperlane projects",
4-
"version": "3.8.0",
4+
"version": "3.11.0",
55
"author": "J M Rossy",
66
"peerDependencies": {
7-
"@hyperlane-xyz/sdk": "^3.8",
87
"react": "^18",
98
"react-dom": "^18"
109
},
10+
"dependencies": {
11+
"@hyperlane-xyz/registry": "1.1.2"
12+
},
1113
"devDependencies": {
12-
"@hyperlane-xyz/sdk": "3.8.0",
14+
"@hyperlane-xyz/sdk": "^3.11.1",
1315
"@storybook/addon-essentials": "^7.6.14",
1416
"@storybook/addon-interactions": "^7.6.14",
1517
"@storybook/addon-links": "^7.6.14",
@@ -64,10 +66,9 @@
6466
"url": "https://github.com/hyperlane-xyz/hyperlane-widgets"
6567
},
6668
"scripts": {
67-
"build": "yarn build:svg && yarn build:ts && yarn build:css",
69+
"build": "yarn build:ts && yarn build:css",
6870
"build:ts": "tsc",
6971
"build:css": "tailwindcss -c ./tailwind.config.cjs -i ./src/styles.css -o ./dist/styles.css --minify",
70-
"build:svg": "svgr --typescript --no-index --out-dir src/logos -- node_modules/@hyperlane-xyz/sdk/logos",
7172
"clean": "rm -rf dist cache",
7273
"lint": "eslint . --ext .ts",
7374
"prettier": "prettier --write ./src",

‎postcss.config.js renamed to ‎postcss.config.cjs

File renamed without changes.

‎src/icons/ChainLogo.tsx

Lines changed: 30 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,41 @@
1-
import React, { ReactElement, memo } from 'react';
1+
import React, { ReactElement, useEffect, useState } from 'react';
22

3-
import { Chains, chainMetadata } from '@hyperlane-xyz/sdk';
4-
import { isNumeric } from '@hyperlane-xyz/utils';
5-
6-
import ArbitrumBlack from '../logos/black/Arbitrum.js';
7-
import AvalancheBlack from '../logos/black/Avalanche.js';
8-
import BaseBlack from '../logos/black/Base.js';
9-
import BscBlack from '../logos/black/Bsc.js';
10-
import CeloBlack from '../logos/black/Celo.js';
11-
import EthereumBlack from '../logos/black/Ethereum.js';
12-
import GnosisBlack from '../logos/black/Gnosis.js';
13-
import InevmBlack from '../logos/black/Inevm.js';
14-
import InjectiveBlack from '../logos/black/Injective.js';
15-
import MantaBlack from '../logos/black/Manta.js';
16-
import MoonbeamBlack from '../logos/black/Moonbeam.js';
17-
import NautilusBlack from '../logos/black/Nautilus.js';
18-
import NeutronBlack from '../logos/black/Neutron.js';
19-
import OptimismBlack from '../logos/black/Optimism.js';
20-
import PlumeBlack from '../logos/black/Plume.js';
21-
import PolygonBlack from '../logos/black/Polygon.js';
22-
import PolygonzkevmBlack from '../logos/black/Polygonzkevm.js';
23-
import ScrollBlack from '../logos/black/Scroll.js';
24-
import SolanaBlack from '../logos/black/Solana.js';
25-
import VictionBlack from '../logos/black/Viction.js';
26-
import ArbitrumColor from '../logos/color/Arbitrum.js';
27-
import AvalancheColor from '../logos/color/Avalanche.js';
28-
import BaseColor from '../logos/color/Base.js';
29-
import BscColor from '../logos/color/Bsc.js';
30-
import CeloColor from '../logos/color/Celo.js';
31-
import EthereumColor from '../logos/color/Ethereum.js';
32-
import GnosisColor from '../logos/color/Gnosis.js';
33-
import InevmColor from '../logos/color/Inevm.js';
34-
import InjectiveColor from '../logos/color/Injective.js';
35-
import MantaColor from '../logos/color/Manta.js';
36-
import MoonbeamColor from '../logos/color/Moonbeam.js';
37-
import NautilusColor from '../logos/color/Nautilus.js';
38-
import NeutronColor from '../logos/color/Neutron.js';
39-
import OptimismColor from '../logos/color/Optimism.js';
40-
import PlumeColor from '../logos/color/Plume.js';
41-
import PolygonColor from '../logos/color/Polygon.js';
42-
import PolygonzkevmColor from '../logos/color/Polygonzkevm.js';
43-
import ScrollColor from '../logos/color/Scroll.js';
44-
import SolanaColor from '../logos/color/Solana.js';
45-
import VictionColor from '../logos/color/Viction.js';
3+
import { IRegistry } from '@hyperlane-xyz/registry';
464

475
import { Circle } from './Circle.js';
486
import { QuestionMarkIcon } from './QuestionMark.js';
497

508
type SvgIcon = (props: { width: number; height: number; title?: string }) => ReactElement;
519

52-
// Keep up to date as new chains are added or
53-
// icon will fallback to default (question mark)
54-
const CHAIN_TO_LOGO: Record<string | number, { black: SvgIcon; color: SvgIcon }> = {
55-
[chainMetadata[Chains.alfajores].chainId]: { black: CeloBlack, color: CeloColor },
56-
[chainMetadata[Chains.arbitrum].chainId]: { black: ArbitrumBlack, color: ArbitrumColor },
57-
[chainMetadata[Chains.avalanche].chainId]: { black: AvalancheBlack, color: AvalancheColor },
58-
[chainMetadata[Chains.base].chainId]: { black: BaseBlack, color: BaseColor },
59-
[chainMetadata[Chains.bsc].chainId]: { black: BscBlack, color: BscColor },
60-
[chainMetadata[Chains.bsctestnet].chainId]: { black: BscBlack, color: BscColor },
61-
[chainMetadata[Chains.celo].chainId]: { black: CeloBlack, color: CeloColor },
62-
[chainMetadata[Chains.chiado].chainId]: { black: GnosisBlack, color: GnosisColor },
63-
[chainMetadata[Chains.ethereum].chainId]: { black: EthereumBlack, color: EthereumColor },
64-
[chainMetadata[Chains.fuji].chainId]: { black: AvalancheBlack, color: AvalancheColor },
65-
[chainMetadata[Chains.gnosis].chainId]: { black: GnosisBlack, color: GnosisColor },
66-
[chainMetadata[Chains.inevm].chainId]: { black: InevmBlack, color: InevmColor },
67-
[chainMetadata[Chains.injective].chainId]: { black: InjectiveBlack, color: InjectiveColor },
68-
[chainMetadata[Chains.mantapacific].chainId]: { black: MantaBlack, color: MantaColor },
69-
[chainMetadata[Chains.moonbeam].chainId]: { black: MoonbeamBlack, color: MoonbeamColor },
70-
[chainMetadata[Chains.mumbai].chainId]: { black: PolygonBlack, color: PolygonColor },
71-
[chainMetadata[Chains.nautilus].chainId]: { black: NautilusBlack, color: NautilusColor },
72-
[chainMetadata[Chains.neutron].chainId]: { black: NeutronBlack, color: NeutronColor },
73-
[chainMetadata[Chains.optimism].chainId]: { black: OptimismBlack, color: OptimismColor },
74-
[chainMetadata[Chains.plumetestnet].chainId]: { black: PlumeBlack, color: PlumeColor },
75-
[chainMetadata[Chains.polygon].chainId]: { black: PolygonBlack, color: PolygonColor },
76-
[chainMetadata[Chains.polygonzkevm].chainId]: {
77-
black: PolygonzkevmBlack,
78-
color: PolygonzkevmColor,
79-
},
80-
[chainMetadata[Chains.scroll].chainId]: { black: ScrollBlack, color: ScrollColor },
81-
[chainMetadata[Chains.scrollsepolia].chainId]: { black: ScrollBlack, color: ScrollColor },
82-
[chainMetadata[Chains.sepolia].chainId]: { black: EthereumBlack, color: EthereumColor },
83-
[chainMetadata[Chains.solana].chainId]: { black: SolanaBlack, color: SolanaColor },
84-
[chainMetadata[Chains.solanadevnet].chainId]: { black: SolanaBlack, color: SolanaColor },
85-
[chainMetadata[Chains.viction].chainId]: { black: VictionBlack, color: VictionColor },
86-
};
87-
8810
export interface ChainLogoProps {
89-
chainId?: number | string;
90-
chainName?: string;
11+
chainName: string;
12+
registry: IRegistry;
9113
size?: number;
92-
color?: boolean;
9314
background?: boolean;
94-
icon?: SvgIcon; // Override the default set used above. Necessary for PI chain logos.
15+
Icon?: SvgIcon; // Optional override for the logo in the registry
9516
}
9617

97-
function _ChainLogo({
98-
chainId,
18+
export function ChainLogo({
9919
chainName,
20+
registry,
10021
size = 32,
101-
color = true,
10222
background = false,
103-
icon,
23+
Icon,
10424
}: ChainLogoProps) {
105-
const colorType = color ? 'color' : 'black';
106-
const title = chainName || chainId?.toString() || 'Unknown';
25+
const title = chainName || 'Unknown';
26+
const bgColorSeed = title.charCodeAt(0);
10727
const iconSize = Math.floor(size / 1.9);
108-
const ImageNode = icon ?? (chainId ? CHAIN_TO_LOGO[chainId]?.[colorType] : null);
109-
const bgColorSeed = chainId && isNumeric(chainId) ? parseInt(chainId.toString(), 10) : 0;
11028

111-
if (!ImageNode) {
29+
const [svgLogo, setSvgLogo] = useState('');
30+
useEffect(() => {
31+
if (!chainName || svgLogo || Icon) return;
32+
registry
33+
.getChainLogoUri(chainName)
34+
.then((uri) => uri && setSvgLogo(uri))
35+
.catch((err) => console.error(err));
36+
}, [chainName, registry, svgLogo, Icon]);
37+
38+
if (!svgLogo) {
11239
return (
11340
<Circle size={size} title={title} bgColorSeed={bgColorSeed}>
11441
{chainName ? (
@@ -123,12 +50,18 @@ function _ChainLogo({
12350
if (background) {
12451
return (
12552
<Circle size={size} title={title} classes="htw-bg-gray-100">
126-
<ImageNode width={iconSize} height={iconSize} />
53+
{Icon ? (
54+
<Icon width={iconSize} height={iconSize} title={title} />
55+
) : (
56+
<img src={svgLogo} alt={title} width={iconSize} height={iconSize} />
57+
)}
12758
</Circle>
12859
);
12960
} else {
130-
return <ImageNode width={size} height={size} title={title} />;
61+
return Icon ? (
62+
<Icon width={size} height={size} title={title} />
63+
) : (
64+
<img src={svgLogo} alt={title} width={size} height={size} />
65+
);
13166
}
13267
}
133-
134-
export const ChainLogo = memo(_ChainLogo);

‎src/logos/black/Arbitrum.tsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/logos/black/Avalanche.tsx

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/logos/black/Base.tsx

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/logos/black/Bsc.tsx

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/logos/black/Celo.tsx

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/logos/black/Cosmos.tsx

Lines changed: 0 additions & 77 deletions
This file was deleted.

0 commit comments

Comments
 (0)