Skip to content

Commit

Permalink
Merge pull request #3 from hyperlane-xyz/3.7.0
Browse files Browse the repository at this point in the history
Upgrade yarn, fix storybook, uprade to SDK 3.7.0
  • Loading branch information
jmrossy committed Feb 12, 2024
2 parents 96490da + f85d0c4 commit 2d9872f
Show file tree
Hide file tree
Showing 26 changed files with 8,670 additions and 11,432 deletions.
1 change: 1 addition & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:storybook/recommended",
"prettier"
],
"rules": {
Expand Down
22 changes: 0 additions & 22 deletions .storybook/main.js

This file was deleted.

19 changes: 19 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: true,
},
};
export default config;
11 changes: 0 additions & 11 deletions .storybook/preview.js

This file was deleted.

13 changes: 13 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};

export default preview;
4 changes: 2 additions & 2 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@
"[typescript]": {
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
"source.organizeImports": "explicit"
},
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
"source.organizeImports": "explicit"
},
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Expand Down
550 changes: 0 additions & 550 deletions .yarn/plugins/@yarnpkg/plugin-version.cjs

This file was deleted.

785 changes: 0 additions & 785 deletions .yarn/releases/yarn-3.2.0.cjs

This file was deleted.

893 changes: 893 additions & 0 deletions .yarn/releases/yarn-4.0.2.cjs

Large diffs are not rendered by default.

12 changes: 7 additions & 5 deletions .yarnrc.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
nodeLinker: node-modules
compressionLevel: mixed

enableGlobalCache: false

plugins:
- path: .yarn/plugins/@yarnpkg/plugin-version.cjs
spec: "@yarnpkg/plugin-version"
enableScripts: false

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-3.2.0.cjs
yarnPath: .yarn/releases/yarn-4.0.2.cjs
43 changes: 21 additions & 22 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,45 +1,44 @@
{
"name": "@hyperlane-xyz/widgets",
"description": "Common react components for Hyperlane projects",
"version": "3.1.4",
"version": "3.7.0",
"author": "J M Rossy",
"peerDependencies": {
"@hyperlane-xyz/sdk": "^3.1",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@babel/core": "^7.20.12",
"@hyperlane-xyz/sdk": "3.1.4",
"@mdx-js/react": "^1.6.22",
"@storybook/addon-actions": "^6.5.15",
"@storybook/addon-docs": "^6.5.15",
"@storybook/addon-essentials": "^6.5.15",
"@storybook/addon-interactions": "^6.5.15",
"@storybook/addon-links": "^6.5.15",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack4": "^6.5.15",
"@storybook/manager-webpack4": "^6.5.15",
"@storybook/react": "^6.5.15",
"@storybook/testing-library": "^0.0.13",
"@hyperlane-xyz/sdk": "3.7.0",
"@storybook/addon-essentials": "^7.6.14",
"@storybook/addon-interactions": "^7.6.14",
"@storybook/addon-links": "^7.6.14",
"@storybook/addon-onboarding": "^1.0.11",
"@storybook/blocks": "^7.6.14",
"@storybook/react": "^7.6.14",
"@storybook/react-vite": "^7.6.14",
"@storybook/test": "^7.6.14",
"@svgr/cli": "^6.5.1",
"@trivago/prettier-plugin-sort-imports": "^3.2.0",
"@types/node": "^18.11.18",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@types/ws": "^8.5.5",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"babel-loader": "^8.3.0",
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.5.0",
"eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-storybook": "^0.6.15",
"postcss": "^8.4.21",
"prettier": "^2.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.6.14",
"tailwindcss": "^3.2.4",
"ts-node": "^10.8.0",
"typescript": "^5.1.6"
"typescript": "^5.1.6",
"vite": "^5.1.1"
},
"files": [
"/dist"
Expand Down Expand Up @@ -69,7 +68,7 @@
"Typescript"
],
"license": "Apache-2.0",
"packageManager": "yarn@3.2.0",
"packageManager": "yarn@4.0.2",
"repository": {
"type": "git",
"url": "https://github.com/hyperlane-xyz/hyperlane-widgets"
Expand All @@ -83,7 +82,7 @@
"clean": "rm -rf dist cache",
"lint": "eslint . --ext .ts",
"prettier": "prettier --write ./src",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
}
}
20 changes: 17 additions & 3 deletions src/icons/ChainLogo.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { ReactElement, memo } from 'react';

import { chainMetadata } from '@hyperlane-xyz/sdk';
import { isNumeric } from '@hyperlane-xyz/utils';

import ArbitrumBlack from '../logos/black/Arbitrum';
import AvalancheBlack from '../logos/black/Avalanche';
Expand All @@ -9,29 +10,37 @@ import BscBlack from '../logos/black/Bsc';
import CeloBlack from '../logos/black/Celo';
import EthereumBlack from '../logos/black/Ethereum';
import GnosisBlack from '../logos/black/Gnosis';
import InevmBlack from '../logos/black/Inevm';
import InjectiveBlack from '../logos/black/Injective';
import MantaBlack from '../logos/black/Manta';
import MoonbeamBlack from '../logos/black/Moonbeam';
import NautilusBlack from '../logos/black/Nautilus';
import NeutronBlack from '../logos/black/Neutron';
import OptimismBlack from '../logos/black/Optimism';
import PolygonBlack from '../logos/black/Polygon';
import PolygonzkevmBlack from '../logos/black/Polygonzkevm';
import ScrollBlack from '../logos/black/Scroll';
import SolanaBlack from '../logos/black/Solana';
import VictionBlack from '../logos/black/Viction';
import ArbitrumColor from '../logos/color/Arbitrum';
import AvalancheColor from '../logos/color/Avalanche';
import BaseColor from '../logos/color/Base';
import BscColor from '../logos/color/Bsc';
import CeloColor from '../logos/color/Celo';
import EthereumColor from '../logos/color/Ethereum';
import GnosisColor from '../logos/color/Gnosis';
import InevmColor from '../logos/color/Inevm';
import InjectiveColor from '../logos/color/Injective';
import MantaColor from '../logos/color/Manta';
import MoonbeamColor from '../logos/color/Moonbeam';
import NautilusColor from '../logos/color/Nautilus';
import NeutronColor from '../logos/color/Neutron';
import OptimismColor from '../logos/color/Optimism';
import PolygonColor from '../logos/color/Polygon';
import PolygonzkevmColor from '../logos/color/Polygonzkevm';
import ScrollColor from '../logos/color/Scroll';
import SolanaColor from '../logos/color/Solana';
import VictionColor from '../logos/color/Viction';

import { Circle } from './Circle';
import { QuestionMarkIcon } from './QuestionMark';
Expand All @@ -40,7 +49,7 @@ type SvgIcon = (props: { width: number; height: number; title?: string }) => Rea

// Keep up to date as new chains are added or
// icon will fallback to default (question mark)
const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
const CHAIN_TO_LOGO: Record<string | number, { black: SvgIcon; color: SvgIcon }> = {
[chainMetadata.alfajores.chainId]: { black: CeloBlack, color: CeloColor },
[chainMetadata.arbitrum.chainId]: { black: ArbitrumBlack, color: ArbitrumColor },
[chainMetadata.arbitrumgoerli.chainId]: { black: ArbitrumBlack, color: ArbitrumColor },
Expand All @@ -55,10 +64,13 @@ const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
[chainMetadata.fuji.chainId]: { black: AvalancheBlack, color: AvalancheColor },
[chainMetadata.gnosis.chainId]: { black: GnosisBlack, color: GnosisColor },
[chainMetadata.goerli.chainId]: { black: EthereumBlack, color: EthereumColor },
[chainMetadata.inevm.chainId]: { black: InevmBlack, color: InevmColor },
[chainMetadata.injective.chainId]: { black: InjectiveBlack, color: InjectiveColor },
[chainMetadata.mantapacific.chainId]: { black: MantaBlack, color: MantaColor },
[chainMetadata.moonbasealpha.chainId]: { black: MoonbeamBlack, color: MoonbeamColor },
[chainMetadata.moonbeam.chainId]: { black: MoonbeamBlack, color: MoonbeamColor },
[chainMetadata.mumbai.chainId]: { black: PolygonBlack, color: PolygonColor },
[chainMetadata.nautilus.chainId]: { black: NautilusBlack, color: NautilusColor },
[chainMetadata.neutron.chainId]: { black: NeutronBlack, color: NeutronColor },
[chainMetadata.optimism.chainId]: { black: OptimismBlack, color: OptimismColor },
[chainMetadata.optimismgoerli.chainId]: { black: OptimismBlack, color: OptimismColor },
Expand All @@ -73,10 +85,11 @@ const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
[chainMetadata.sepolia.chainId]: { black: EthereumBlack, color: EthereumColor },
[chainMetadata.solana.chainId]: { black: SolanaBlack, color: SolanaColor },
[chainMetadata.solanadevnet.chainId]: { black: SolanaBlack, color: SolanaColor },
[chainMetadata.viction.chainId]: { black: VictionBlack, color: VictionColor },
};

export interface ChainLogoProps {
chainId?: number;
chainId?: number | string;
chainName?: string;
size?: number;
color?: boolean;
Expand All @@ -96,10 +109,11 @@ function _ChainLogo({
const title = chainName || chainId?.toString() || 'Unknown';
const iconSize = Math.floor(size / 1.9);
const ImageNode = icon ?? (chainId ? CHAIN_TO_LOGO[chainId]?.[colorType] : null);
const bgColorSeed = chainId && isNumeric(chainId) ? parseInt(chainId.toString(), 10) : 0;

if (!ImageNode) {
return (
<Circle size={size} title={title} bgColorSeed={chainId || 0}>
<Circle size={size} title={title} bgColorSeed={bgColorSeed}>
{chainName ? (
<div style={{ fontSize: iconSize }}>{chainName[0].toUpperCase()}</div>
) : (
Expand Down
16 changes: 16 additions & 0 deletions src/logos/black/Inevm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react';
import { SVGProps } from 'react';

const SvgInevm = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="184.82 186.46 121.25 133.56" {...props}>
<path d="m198.76 224 2.27-2.62.14-.1.28-.21.07-.1c.51-.5 1.07-1 1.72-1.46a23.23 23.23 0 0 1 31.2 1.63c9.8 9.18 8.94 23.98 1.1 33.82-9.86 14.67-26.91 35.13-3.34 53.5 4.24 3.27 7.35 6 20.7 9.86-8.72 1.6-16.8 1.1-25.8-1.2-6.36-3.6-16.37-11.29-19.78-21.68-5.18-15.77 9.07-39.3 15.9-48.39 9.46-12.56-5.83-26.12-17.04-10.97-5.87 7.94-16.16 30.3-12.57 46.9 2.07 9.42 4.83 16.26 15.88 25.68a50.8 50.8 0 0 1-5.94-4.1 58.19 58.19 0 0 1-4.8-80.56Z" />
<path d="m286 299.38-2.24 2.62-.14.07-.24.24-.07.07a25.91 25.91 0 0 1-8.94 5.42 23.22 23.22 0 0 1-24.02-5.53c-9.8-9.21-8.94-24.02-1.1-33.85 9.9-14.67 26.92-35.14 3.35-53.5-4.25-3.28-7.39-6-20.71-9.87 8.73-1.59 16.8-1.1 25.81 1.21 6.36 3.59 16.36 11.29 19.78 21.67 5.18 15.74-9.08 39.31-15.91 48.4-9.46 12.52 5.8 26.12 17.05 10.93 5.87-7.9 16.12-30.27 12.56-46.87-2.07-9.42-4.83-16.29-15.87-25.7 2.03 1.2 4 2.58 5.93 4.13a58.19 58.19 0 0 1 4.76 80.56Z" />
<path fill="#343434" d="m282.57 186.74-.45 1.55v44.92l.45.46 20.86-12.33z" />
<path fill="#8C8C8C" d="m282.57 186.74-20.85 34.6 20.85 12.33v-21.8z" />
<path fill="#3C3C3B" d="m282.57 237.62-.26.31v16l.26.76 20.87-29.4z" />
<path fill="#8C8C8C" d="M282.57 254.69v-17.07l-20.85-12.32z" />
<path fill="#141414" d="m282.57 233.67 20.86-12.33-20.86-9.48z" />
<path fill="#393939" d="m261.72 221.34 20.85 12.33v-21.8z" />
</svg>
);
export default SvgInevm;
18 changes: 18 additions & 0 deletions src/logos/black/Injective.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from 'react';
import { SVGProps } from 'react';

const SvgInjective = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
className="injective_svg__w-32"
data-icon="logo"
data-prefix="fab"
viewBox="0 0 33.36 33.36"
{...props}
>
<path d="M4.04 5.76 4.7 5l.04-.03.08-.06.02-.03c.15-.14.31-.29.5-.42a6.73 6.73 0 0 1 9.04.47c2.84 2.66 2.59 6.95.32 9.8-2.86 4.25-7.8 10.18-.97 15.5 1.23.95 2.13 1.74 6 2.86-2.53.46-4.87.32-7.48-.35-1.84-1.04-4.74-3.27-5.73-6.28-1.5-4.57 2.63-11.39 4.61-14.02 2.74-3.64-1.69-7.57-4.94-3.18-1.7 2.3-4.68 8.78-3.64 13.59.6 2.73 1.4 4.71 4.6 7.44a14.7 14.7 0 0 1-1.72-1.19A16.86 16.86 0 0 1 4.04 5.76Z" />
<path d="m29.32 27.6-.65.76-.04.02-.07.07-.02.02a7.52 7.52 0 0 1-2.59 1.57 6.73 6.73 0 0 1-6.96-1.6c-2.84-2.67-2.59-6.96-.32-9.81 2.87-4.25 7.8-10.18.97-15.5-1.23-.95-2.14-1.74-6-2.86 2.53-.46 4.87-.32 7.48.35 1.84 1.04 4.74 3.27 5.73 6.28 1.5 4.56-2.63 11.39-4.61 14.02-2.74 3.63 1.68 7.57 4.94 3.17 1.7-2.29 4.67-8.77 3.64-13.58-.6-2.73-1.4-4.72-4.6-7.45.59.35 1.16.75 1.72 1.2a16.86 16.86 0 0 1 1.38 23.34Z" />
</svg>
);
export default SvgInjective;
12 changes: 12 additions & 0 deletions src/logos/black/Nautilus.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as React from 'react';
import { SVGProps } from 'react';

const SvgNautilus = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" {...props}>
<path
fill="#000"
d="M40 13.33A26.67 26.67 0 0 1 13.33 40V26.67a13.33 13.33 0 0 0 13.34-13.34H40ZM13.33 13.33H0v13.33h13.33zM26.67 0H13.34v13.33h13.33z"
/>
</svg>
);
export default SvgNautilus;
15 changes: 15 additions & 0 deletions src/logos/black/Viction.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import * as React from 'react';
import { SVGProps } from 'react';

const SvgViction = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="81.1 83.2 397.7 401.7" {...props}>
<defs>
<style>{'.viction_svg__cls-1{fill:#231f20}'}</style>
</defs>
<path
d="M478.8 83.2v157.5C417.9 267.3 350.6 282 279.9 282s-138-14.7-198.8-41.3V83.2c60.9 26.6 128.1 41.3 198.8 41.3s138-14.7 198.9-41.3ZM478.8 484.9V327.4C417.9 300.8 350.6 286 279.9 286s-138 14.8-198.8 41.4v157.5c60.9-26.6 128.1-41.4 198.8-41.4s138 14.8 198.9 41.4Z"
className="viction_svg__cls-1"
/>
</svg>
);
export default SvgViction;
4 changes: 4 additions & 0 deletions src/logos/black/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,16 @@ export { default as Eclipse } from './Eclipse';
export { default as Ethereum } from './Ethereum';
export { default as Gnosis } from './Gnosis';
export { default as Hyperlane } from './Hyperlane';
export { default as Inevm } from './Inevm';
export { default as Injective } from './Injective';
export { default as Manta } from './Manta';
export { default as Moonbeam } from './Moonbeam';
export { default as Nautilus } from './Nautilus';
export { default as Near } from './Near';
export { default as Neutron } from './Neutron';
export { default as Optimism } from './Optimism';
export { default as Polygon } from './Polygon';
export { default as Polygonzkevm } from './Polygonzkevm';
export { default as Scroll } from './Scroll';
export { default as Solana } from './Solana';
export { default as Viction } from './Viction';
Loading

0 comments on commit 2d9872f

Please sign in to comment.