diff --git a/package.json b/package.json index 970eeba..caaa84d 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "3.8.0", "author": "J M Rossy", "peerDependencies": { - "@hyperlane-xyz/sdk": "^3.1", + "@hyperlane-xyz/sdk": "^3.8", "react": "^18", "react-dom": "^18" }, @@ -43,22 +43,12 @@ "files": [ "/dist" ], - "main": "./dist/cjs/index.js", - "module": "./dist/esm/index.js", - "browser": "./dist/esm/index.js", - "types": "./dist/esm/index.d.ts", + "type": "module", "exports": { - ".": { - "import": "./dist/esm/index.js", - "require": "./dist/cjs/index.js", - "default": "./dist/esm/index.js" - }, - "./styles.css": { - "import": "./dist/styles.css", - "style": "./dist/styles.css", - "default": "./dist/styles.css" - } + ".": "./dist/index.js", + "./styles.css": "./dist/styles.css" }, + "types": "./dist/index.d.ts", "homepage": "https://www.hyperlane.xyz", "keywords": [ "Hyperlane", @@ -74,11 +64,10 @@ "url": "https://github.com/hyperlane-xyz/hyperlane-widgets" }, "scripts": { - "build": "yarn build:svg && yarn build:cjs && yarn build:esm && yarn build:css", - "build:cjs": "tsc --project ./tsconfig.json", - "build:esm": "tsc --project ./tsconfig.esm.json", - "build:css": "tailwindcss -c ./tailwind.config.js -i ./src/styles.css -o ./dist/styles.css --minify", - "build:svg": "svgr --typescript --out-dir src/logos -- node_modules/@hyperlane-xyz/sdk/logos", + "build": "yarn build:svg && yarn build:ts && yarn build:css", + "build:ts": "tsc", + "build:css": "tailwindcss -c ./tailwind.config.cjs -i ./src/styles.css -o ./dist/styles.css --minify", + "build:svg": "svgr --typescript --no-index --out-dir src/logos -- node_modules/@hyperlane-xyz/sdk/logos", "clean": "rm -rf dist cache", "lint": "eslint . --ext .ts", "prettier": "prettier --write ./src", diff --git a/src/icons/Airplane.tsx b/src/icons/Airplane.tsx index 871c33c..c5e2d27 100644 --- a/src/icons/Airplane.tsx +++ b/src/icons/Airplane.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react'; -import { ColorPalette } from '../color'; +import { ColorPalette } from '../color.js'; interface Props { width?: string | number; diff --git a/src/icons/ChainLogo.tsx b/src/icons/ChainLogo.tsx index 83b9491..da2c497 100644 --- a/src/icons/ChainLogo.tsx +++ b/src/icons/ChainLogo.tsx @@ -3,49 +3,49 @@ import React, { ReactElement, memo } from 'react'; import { Chains, chainMetadata } from '@hyperlane-xyz/sdk'; import { isNumeric } from '@hyperlane-xyz/utils'; -import ArbitrumBlack from '../logos/black/Arbitrum'; -import AvalancheBlack from '../logos/black/Avalanche'; -import BaseBlack from '../logos/black/Base'; -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 PlumeBlack from '../logos/black/Plume'; -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 PlumeColor from '../logos/color/Plume'; -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 ArbitrumBlack from '../logos/black/Arbitrum.js'; +import AvalancheBlack from '../logos/black/Avalanche.js'; +import BaseBlack from '../logos/black/Base.js'; +import BscBlack from '../logos/black/Bsc.js'; +import CeloBlack from '../logos/black/Celo.js'; +import EthereumBlack from '../logos/black/Ethereum.js'; +import GnosisBlack from '../logos/black/Gnosis.js'; +import InevmBlack from '../logos/black/Inevm.js'; +import InjectiveBlack from '../logos/black/Injective.js'; +import MantaBlack from '../logos/black/Manta.js'; +import MoonbeamBlack from '../logos/black/Moonbeam.js'; +import NautilusBlack from '../logos/black/Nautilus.js'; +import NeutronBlack from '../logos/black/Neutron.js'; +import OptimismBlack from '../logos/black/Optimism.js'; +import PlumeBlack from '../logos/black/Plume.js'; +import PolygonBlack from '../logos/black/Polygon.js'; +import PolygonzkevmBlack from '../logos/black/Polygonzkevm.js'; +import ScrollBlack from '../logos/black/Scroll.js'; +import SolanaBlack from '../logos/black/Solana.js'; +import VictionBlack from '../logos/black/Viction.js'; +import ArbitrumColor from '../logos/color/Arbitrum.js'; +import AvalancheColor from '../logos/color/Avalanche.js'; +import BaseColor from '../logos/color/Base.js'; +import BscColor from '../logos/color/Bsc.js'; +import CeloColor from '../logos/color/Celo.js'; +import EthereumColor from '../logos/color/Ethereum.js'; +import GnosisColor from '../logos/color/Gnosis.js'; +import InevmColor from '../logos/color/Inevm.js'; +import InjectiveColor from '../logos/color/Injective.js'; +import MantaColor from '../logos/color/Manta.js'; +import MoonbeamColor from '../logos/color/Moonbeam.js'; +import NautilusColor from '../logos/color/Nautilus.js'; +import NeutronColor from '../logos/color/Neutron.js'; +import OptimismColor from '../logos/color/Optimism.js'; +import PlumeColor from '../logos/color/Plume.js'; +import PolygonColor from '../logos/color/Polygon.js'; +import PolygonzkevmColor from '../logos/color/Polygonzkevm.js'; +import ScrollColor from '../logos/color/Scroll.js'; +import SolanaColor from '../logos/color/Solana.js'; +import VictionColor from '../logos/color/Viction.js'; -import { Circle } from './Circle'; -import { QuestionMarkIcon } from './QuestionMark'; +import { Circle } from './Circle.js'; +import { QuestionMarkIcon } from './QuestionMark.js'; type SvgIcon = (props: { width: number; height: number; title?: string }) => ReactElement; diff --git a/src/icons/Circle.tsx b/src/icons/Circle.tsx index 32b6cc2..3e55636 100644 --- a/src/icons/Circle.tsx +++ b/src/icons/Circle.tsx @@ -1,6 +1,6 @@ import React, { PropsWithChildren } from 'react'; -import { seedToBgColor } from '../color'; +import { seedToBgColor } from '../color.js'; export function Circle({ size, diff --git a/src/icons/Envelope.tsx b/src/icons/Envelope.tsx index de33c41..777a654 100644 --- a/src/icons/Envelope.tsx +++ b/src/icons/Envelope.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react'; -import { ColorPalette } from '../color'; +import { ColorPalette } from '../color.js'; interface Props { width?: string | number; diff --git a/src/icons/Lock.tsx b/src/icons/Lock.tsx index b742bf6..da55c97 100644 --- a/src/icons/Lock.tsx +++ b/src/icons/Lock.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react'; -import { ColorPalette } from '../color'; +import { ColorPalette } from '../color.js'; interface Props { width?: string | number; diff --git a/src/icons/QuestionMark.tsx b/src/icons/QuestionMark.tsx index 13d1f31..57cf8ef 100644 --- a/src/icons/QuestionMark.tsx +++ b/src/icons/QuestionMark.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react'; -import { ColorPalette } from '../color'; +import { ColorPalette } from '../color.js'; interface Props { width?: string | number; diff --git a/src/icons/Shield.tsx b/src/icons/Shield.tsx index fb91cc5..9e97a02 100644 --- a/src/icons/Shield.tsx +++ b/src/icons/Shield.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react'; -import { ColorPalette } from '../color'; +import { ColorPalette } from '../color.js'; interface Props { width?: string | number; diff --git a/src/icons/WideChevron.tsx b/src/icons/WideChevron.tsx index 43b75b0..89b04e2 100644 --- a/src/icons/WideChevron.tsx +++ b/src/icons/WideChevron.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react'; -import { ColorPalette } from '../color'; +import { ColorPalette } from '../color.js'; export interface WideChevronProps { width?: string | number; diff --git a/src/index.ts b/src/index.ts index b10fee9..43fe2b7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,12 +1,15 @@ -export { ColorPalette, seedToBgColor } from './color'; -export * from './consts'; -export { ChainLogo } from './icons/ChainLogo'; -export { Circle } from './icons/Circle'; -export { WideChevron } from './icons/WideChevron'; -export * as BlackLogos from './logos/black'; -export * as ColorLogos from './logos/color'; -export { MessageTimeline } from './messages/MessageTimeline'; -export { MessageStage, MessageStatus, type ApiMessage, type StageTimings } from './messages/types'; -export { useMessage } from './messages/useMessage'; -export { useMessageStage } from './messages/useMessageStage'; -export { useMessageTimeline } from './messages/useMessageTimeline'; +export { ColorPalette, seedToBgColor } from './color.js'; +export * from './consts.js'; +export { ChainLogo } from './icons/ChainLogo.js'; +export { Circle } from './icons/Circle.js'; +export { WideChevron } from './icons/WideChevron.js'; +export { MessageTimeline } from './messages/MessageTimeline.js'; +export { + MessageStage, + MessageStatus, + type ApiMessage, + type StageTimings, +} from './messages/types.js'; +export { useMessage } from './messages/useMessage.js'; +export { useMessageStage } from './messages/useMessageStage.js'; +export { useMessageTimeline } from './messages/useMessageTimeline.js'; diff --git a/src/logos/black/index.ts b/src/logos/black/index.ts deleted file mode 100644 index e246b31..0000000 --- a/src/logos/black/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -export { default as Arbitrum } from './Arbitrum'; -export { default as Avalanche } from './Avalanche'; -export { default as Base } from './Base'; -export { default as Bsc } from './Bsc'; -export { default as Celo } from './Celo'; -export { default as Cosmos } from './Cosmos'; -export { default as Cosmwasm } from './Cosmwasm'; -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 Plume } from './Plume'; -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'; diff --git a/src/logos/color/index.ts b/src/logos/color/index.ts deleted file mode 100644 index 64318a8..0000000 --- a/src/logos/color/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -export { default as Arbitrum } from './Arbitrum'; -export { default as Avalanche } from './Avalanche'; -export { default as Base } from './Base'; -export { default as Bsc } from './Bsc'; -export { default as Celo } from './Celo'; -export { default as Cosmos } from './Cosmos'; -export { default as Cosmwasm } from './Cosmwasm'; -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 Neutron } from './Neutron'; -export { default as Optimism } from './Optimism'; -export { default as Plume } from './Plume'; -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'; diff --git a/src/messages/MessageTimeline.tsx b/src/messages/MessageTimeline.tsx index 04b415b..6a4a697 100644 --- a/src/messages/MessageTimeline.tsx +++ b/src/messages/MessageTimeline.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import { ColorPalette } from '../color'; -import { AirplaneIcon } from '../icons/Airplane'; -import { EnvelopeIcon } from '../icons/Envelope'; -import { LockIcon } from '../icons/Lock'; -import { ShieldIcon } from '../icons/Shield'; -import { WideChevron } from '../icons/WideChevron'; +import { ColorPalette } from '../color.js'; +import { AirplaneIcon } from '../icons/Airplane.js'; +import { EnvelopeIcon } from '../icons/Envelope.js'; +import { LockIcon } from '../icons/Lock.js'; +import { ShieldIcon } from '../icons/Shield.js'; +import { WideChevron } from '../icons/WideChevron.js'; -import { MessageStatus, MessageStage as Stage, StageTimings } from './types'; +import { MessageStatus, MessageStage as Stage, StageTimings } from './types.js'; interface Props { status: MessageStatus; diff --git a/src/messages/useMessage.ts b/src/messages/useMessage.ts index 8af66cf..72a080d 100644 --- a/src/messages/useMessage.ts +++ b/src/messages/useMessage.ts @@ -1,10 +1,10 @@ import { useCallback, useState } from 'react'; -import { HYPERLANE_EXPLORER_API_URL } from '../consts'; -import { executeExplorerQuery } from '../utils/explorers'; -import { useInterval } from '../utils/useInterval'; +import { HYPERLANE_EXPLORER_API_URL } from '../consts.js'; +import { executeExplorerQuery } from '../utils/explorers.js'; +import { useInterval } from '../utils/useInterval.js'; -import { ApiMessage, MessageStatus } from './types'; +import { ApiMessage, MessageStatus } from './types.js'; interface Params { messageId?: string; diff --git a/src/messages/useMessageStage.ts b/src/messages/useMessageStage.ts index 2d3025e..df047e4 100644 --- a/src/messages/useMessageStage.ts +++ b/src/messages/useMessageStage.ts @@ -2,12 +2,12 @@ import { useCallback, useState } from 'react'; import { chainIdToMetadata } from '@hyperlane-xyz/sdk'; -import { HYPERLANE_EXPLORER_API_URL } from '../consts'; -import { queryExplorerForBlock } from '../utils/explorers'; -import { fetchWithTimeout } from '../utils/timeout'; -import { useInterval } from '../utils/useInterval'; +import { HYPERLANE_EXPLORER_API_URL } from '../consts.js'; +import { queryExplorerForBlock } from '../utils/explorers.js'; +import { fetchWithTimeout } from '../utils/timeout.js'; +import { useInterval } from '../utils/useInterval.js'; -import { MessageStatus, PartialMessage, MessageStage as Stage, StageTimings } from './types'; +import { MessageStatus, PartialMessage, MessageStage as Stage, StageTimings } from './types.js'; const VALIDATION_TIME_EST = 5; diff --git a/src/messages/useMessageTimeline.ts b/src/messages/useMessageTimeline.ts index 4dc4aa4..350ceb1 100644 --- a/src/messages/useMessageTimeline.ts +++ b/src/messages/useMessageTimeline.ts @@ -1,5 +1,5 @@ -import { useMessage } from './useMessage'; -import { useMessageStage } from './useMessageStage'; +import { useMessage } from './useMessage.js'; +import { useMessageStage } from './useMessageStage.js'; interface Params { messageId?: string; diff --git a/src/stories/ChainLogo.stories.tsx b/src/stories/ChainLogo.stories.tsx index 9d30da3..220573b 100644 --- a/src/stories/ChainLogo.stories.tsx +++ b/src/stories/ChainLogo.stories.tsx @@ -1,7 +1,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; -import { ChainLogo } from '../icons/ChainLogo'; +import { ChainLogo } from '../icons/ChainLogo.js'; export default { title: 'ChainLogo', diff --git a/src/stories/MessageTimeline.stories.tsx b/src/stories/MessageTimeline.stories.tsx index 163c9ae..3992306 100644 --- a/src/stories/MessageTimeline.stories.tsx +++ b/src/stories/MessageTimeline.stories.tsx @@ -1,8 +1,8 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; -import { MessageTimeline } from '../messages/MessageTimeline'; -import { MessageStage, MessageStatus } from '../messages/types'; +import { MessageTimeline } from '../messages/MessageTimeline.js'; +import { MessageStage, MessageStatus } from '../messages/types.js'; export default { title: 'MessageTimeline', diff --git a/src/stories/WideChevron.stories.tsx b/src/stories/WideChevron.stories.tsx index 3e3175c..f6c2171 100644 --- a/src/stories/WideChevron.stories.tsx +++ b/src/stories/WideChevron.stories.tsx @@ -1,8 +1,8 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; -import { ColorPalette } from '../color'; -import { WideChevron } from '../icons/WideChevron'; +import { ColorPalette } from '../color.js'; +import { WideChevron } from '../icons/WideChevron.js'; export default { title: 'WideChevron', diff --git a/src/utils/explorers.ts b/src/utils/explorers.ts index ad76784..939ffeb 100644 --- a/src/utils/explorers.ts +++ b/src/utils/explorers.ts @@ -1,6 +1,6 @@ import { chainIdToMetadata } from '@hyperlane-xyz/sdk'; -import { fetchWithTimeout } from './timeout'; +import { fetchWithTimeout } from './timeout.js'; export interface ExplorerQueryResponse { status: string; diff --git a/tailwind.config.js b/tailwind.config.cjs similarity index 100% rename from tailwind.config.js rename to tailwind.config.cjs diff --git a/tsconfig.base.json b/tsconfig.base.json deleted file mode 100644 index 10f2b27..0000000 --- a/tsconfig.base.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "compilerOptions": { - "declaration": true, - "declarationMap": true, - "forceConsistentCasingInFileNames": true, - "incremental": false, - "isolatedModules": true, - "jsx": "react", - "lib": ["es2020", "dom"], - "noEmitOnError": true, - "noFallthroughCasesInSwitch": true, - "noImplicitAny": false, - "noImplicitReturns": true, - "noUnusedLocals": true, - "preserveSymlinks": true, - "preserveWatchOutput": true, - "pretty": false, - "resolveJsonModule": true, - "rootDir": "./src", - "sourceMap": true, - "strict": true, - "target": "es2020" - } -} diff --git a/tsconfig.esm.json b/tsconfig.esm.json deleted file mode 100644 index c55d62f..0000000 --- a/tsconfig.esm.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "./tsconfig.base.json", - "compilerOptions": { - "allowSyntheticDefaultImports": true, - "module": "es2020", - "moduleResolution": "node", - "outDir": "./dist/esm", - }, - "include": ["./src/**/*"], - "exclude": ["node_modules", "dist", "**/*.stories.tsx"], -} diff --git a/tsconfig.json b/tsconfig.json index a8ea4b3..6a907f6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,30 @@ { - "extends": "./tsconfig.base.json", "compilerOptions": { - "esModuleInterop": true, - "module": "commonjs", - "moduleResolution": "node", - "outDir": "./dist/cjs", + "allowSyntheticDefaultImports": true, + "declaration": true, + "declarationMap": true, + "forceConsistentCasingInFileNames": true, + "incremental": false, + "isolatedModules": true, + "jsx": "react", + "lib": ["es2020", "dom"], + "module": "nodenext", + "moduleResolution": "nodenext", + "noEmitOnError": true, + "noFallthroughCasesInSwitch": true, + "noImplicitAny": false, + "noImplicitReturns": true, + "noUnusedLocals": true, + "preserveSymlinks": true, + "preserveWatchOutput": true, + "pretty": false, + "resolveJsonModule": true, + "rootDir": "./src", + "sourceMap": true, + "outDir": "./dist", + "strict": true, + "target": "es2020" }, "include": ["./src/**/*"], - "exclude": ["node_modules", "dist", "**/*.stories.tsx"] + "exclude": ["node_modules", "dist", "**/*.stories.tsx"], } diff --git a/yarn.lock b/yarn.lock index 10901e5..821a0d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2970,7 +2970,7 @@ __metadata: typescript: "npm:^5.1.6" vite: "npm:^5.1.1" peerDependencies: - "@hyperlane-xyz/sdk": ^3.1 + "@hyperlane-xyz/sdk": ^3.8 react: ^18 react-dom: ^18 languageName: unknown