diff --git a/package.json b/package.json index db410f9..c0b2e6b 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,10 @@ "author": "J M Rossy", "dependencies": { "@headlessui/react": "^2.1.8", - "@hyperlane-xyz/registry": "4.10.0", - "@hyperlane-xyz/sdk": "5.6.0", - "@hyperlane-xyz/utils": "5.6.0", - "@hyperlane-xyz/widgets": "5.6.0", + "@hyperlane-xyz/registry": "5.1.0", + "@hyperlane-xyz/sdk": "5.7.0", + "@hyperlane-xyz/utils": "5.7.0", + "@hyperlane-xyz/widgets": "5.7.0", "@tanstack/react-query": "^5.35.5", "bignumber.js": "^9.1.2", "buffer": "^6.0.3", diff --git a/src/components/animations/Fade.tsx b/src/components/animations/Fade.tsx deleted file mode 100644 index 466355b..0000000 --- a/src/components/animations/Fade.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { PropsWithChildren, useEffect, useState } from 'react'; - -export function Fade(props: PropsWithChildren<{ show: boolean }>) { - const { show, children } = props; - const [render, setRender] = useState(show); - - useEffect(() => { - if (show) setRender(true); - }, [show]); - - const onAnimationEnd = () => { - if (!show) setRender(false); - }; - - return render ? ( -
- {children} -
- ) : null; -} diff --git a/src/components/icons/Discord.tsx b/src/components/icons/Discord.tsx deleted file mode 100644 index 9831cb3..0000000 --- a/src/components/icons/Discord.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { memo } from 'react'; - -function _Discord({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - - - - - - - - ); -} - -export const Discord = memo(_Discord); diff --git a/src/components/icons/Github.tsx b/src/components/icons/Github.tsx deleted file mode 100644 index cc12880..0000000 --- a/src/components/icons/Github.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { memo } from 'react'; - -function _Github({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - ); -} - -export const Github = memo(_Github); diff --git a/src/components/icons/HelpIcon.tsx b/src/components/icons/HelpIcon.tsx deleted file mode 100644 index 42dbac5..0000000 --- a/src/components/icons/HelpIcon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { memo } from 'react'; - -import { IconButton, QuestionMarkIcon } from '@hyperlane-xyz/widgets'; - -import { Color } from '../../styles/Color'; - -function _HelpIcon({ text, size = 16 }: { text: string; size?: number }) { - const tooltipProps = { - 'data-tooltip-content': text, - 'data-tooltip-id': 'root-tooltip', - 'data-tooltip-place': 'top-start', - }; - return ( - // @ts-ignore allow pass-thru tooltip props - - - - ); -} - -export const HelpIcon = memo(_HelpIcon); diff --git a/src/components/icons/LinkedIn.tsx b/src/components/icons/LinkedIn.tsx deleted file mode 100644 index f0adadd..0000000 --- a/src/components/icons/LinkedIn.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { memo } from 'react'; - -function _Linkedin({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - ); -} - -export const Linkedin = memo(_Linkedin); diff --git a/src/components/icons/Medium.tsx b/src/components/icons/Medium.tsx deleted file mode 100644 index 11d0d17..0000000 --- a/src/components/icons/Medium.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { memo } from 'react'; - -function _Medium({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - ); -} - -export const Medium = memo(_Medium); diff --git a/src/components/icons/Twitter.tsx b/src/components/icons/Twitter.tsx deleted file mode 100644 index c47f658..0000000 --- a/src/components/icons/Twitter.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { memo } from 'react'; - -function _Twitter({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - ); -} - -export const Twitter = memo(_Twitter); diff --git a/src/components/icons/Web.tsx b/src/components/icons/Web.tsx deleted file mode 100644 index cb97eb3..0000000 --- a/src/components/icons/Web.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { memo } from 'react'; - -function _Web({ - width, - height, - fill, - className = '', -}: { - width?: number | string; - height?: number | string; - fill?: string; - className?: string; -}) { - return ( - - - - - - - - - - - - - - - - ); -} - -export const Web = memo(_Web); diff --git a/src/components/input/DatetimeField.tsx b/src/components/input/DatetimeField.tsx deleted file mode 100644 index 352b1df..0000000 --- a/src/components/input/DatetimeField.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { ChangeEvent } from 'react'; - -interface Props { - timestamp: number | null; - onChange: (t: number | null) => void; - name?: string; -} - -export function DatetimeField({ timestamp, onChange, name }: Props) { - const handleChange = (e: ChangeEvent) => { - if (!e.target['validity'].valid) { - onChange(null); - } else { - const datetime = e.target['value'] + ':00Z'; - const newTimestamp = new Date(datetime).getTime(); - onChange(newTimestamp); - } - }; - - return ( - - ); -} - -function toShortIsoString(timestamp: number | null) { - if (!timestamp) return ''; - // Trim milliseconds and timezone to match input field format - return new Date(timestamp).toISOString().split('.')[0]; -} diff --git a/src/components/input/SelectField.tsx b/src/components/input/SelectField.tsx deleted file mode 100644 index 9ac58ca..0000000 --- a/src/components/input/SelectField.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { ChangeEvent } from 'react'; - -type Props = React.DetailedHTMLProps< - React.SelectHTMLAttributes, - HTMLSelectElement -> & { - options: Array<{ value: string; display: string }>; - value: string; - onValueSelect: (value: string) => void; - classes?: string; -}; - -export function SelectField(props: Props) { - const { options, value, onValueSelect, classes, ...passThruProps } = props; - - const onChangeSelect = (event: ChangeEvent) => { - onValueSelect(event?.target?.value || ''); - }; - - return ( - - ); -} diff --git a/src/components/nav/Footer.tsx b/src/components/nav/Footer.tsx index 5ee142c..c2f154e 100644 --- a/src/components/nav/Footer.tsx +++ b/src/components/nav/Footer.tsx @@ -1,13 +1,10 @@ // Partly copied from https://github.com/hyperlane-xyz/hyperlane-website/blob/main/src/components/nav/Footer.tsx import Link from 'next/link'; -import { HyperlaneLogo } from '@hyperlane-xyz/widgets'; +import { DiscordIcon, GithubIcon, HyperlaneLogo, TwitterIcon } from '@hyperlane-xyz/widgets'; import { docLinks, links } from '../../consts/links'; import { Color } from '../../styles/Color'; -import { Discord } from '../icons/Discord'; -import { Github } from '../icons/Github'; -import { Twitter } from '../icons/Twitter'; const footerLinks1 = [ { title: 'Docs', url: docLinks.home, external: true }, @@ -26,9 +23,9 @@ const footerLinks2 = [ ]; const footerLinks3 = [ - { title: 'Twitter', url: links.twitter, external: true, icon: }, - { title: 'Discord', url: links.discord, external: true, icon: }, - { title: 'Github', url: links.github, external: true, icon: }, + { title: 'Twitter', url: links.twitter, external: true, icon: }, + { title: 'Discord', url: links.discord, external: true, icon: }, + { title: 'Github', url: links.github, external: true, icon: }, ]; export function Footer() { diff --git a/src/components/nav/Header.tsx b/src/components/nav/Header.tsx index 5fea278..a7d6b9f 100644 --- a/src/components/nav/Header.tsx +++ b/src/components/nav/Header.tsx @@ -2,7 +2,7 @@ import Image from 'next/image'; import Link from 'next/link'; import { PropsWithChildren } from 'react'; -import { DropdownMenu, WideChevron } from '@hyperlane-xyz/widgets'; +import { DropdownMenu, WideChevronIcon } from '@hyperlane-xyz/widgets'; import { docLinks, links } from '../../consts/links'; import Explorer from '../../images/logos/hyperlane-explorer.svg'; @@ -105,21 +105,21 @@ export function Header({ pathName }: { pathName: string }) { function DropdownButton() { return (
- - -

Message Details

- +
diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx index 4a8fb00..1fd37a8 100644 --- a/src/features/messages/cards/GasDetailsCard.tsx +++ b/src/features/messages/cards/GasDetailsCard.tsx @@ -4,9 +4,9 @@ import Image from 'next/image'; import { useMemo, useState } from 'react'; import { fromWei, toTitleCase } from '@hyperlane-xyz/utils'; +import { Tooltip } from '@hyperlane-xyz/widgets'; import { RadioButtons } from '../../../components/buttons/RadioButtons'; -import { HelpIcon } from '../../../components/icons/HelpIcon'; import { Card } from '../../../components/layout/Card'; import { docLinks } from '../../../consts/links'; import FuelPump from '../../../images/icons/fuel-pump.svg'; @@ -75,7 +75,13 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {

Interchain Gas Payments

- +

diff --git a/src/features/messages/cards/IcaDetailsCard.tsx b/src/features/messages/cards/IcaDetailsCard.tsx index 1790591..959da5b 100644 --- a/src/features/messages/cards/IcaDetailsCard.tsx +++ b/src/features/messages/cards/IcaDetailsCard.tsx @@ -1,7 +1,8 @@ import Image from 'next/image'; import { useMemo } from 'react'; -import { HelpIcon } from '../../../components/icons/HelpIcon'; +import { Tooltip } from '@hyperlane-xyz/widgets'; + import { Card } from '../../../components/layout/Card'; import AccountStar from '../../../images/icons/account-star.svg'; import { Message } from '../../../types'; @@ -31,7 +32,13 @@ export function IcaDetailsCard({ message: { originDomainId, body }, blur }: Prop

ICA Details

- +
{decodeResult ? ( diff --git a/src/features/messages/cards/IsmDetailsCard.tsx b/src/features/messages/cards/IsmDetailsCard.tsx index dbb6c4b..409150c 100644 --- a/src/features/messages/cards/IsmDetailsCard.tsx +++ b/src/features/messages/cards/IsmDetailsCard.tsx @@ -1,8 +1,8 @@ import Image from 'next/image'; import { isNullish } from '@hyperlane-xyz/utils'; +import { Tooltip } from '@hyperlane-xyz/widgets'; -import { HelpIcon } from '../../../components/icons/HelpIcon'; import { Card } from '../../../components/layout/Card'; import { docLinks } from '../../../consts/links'; import ShieldLock from '../../../images/icons/shield-lock.svg'; @@ -22,7 +22,13 @@ export function IsmDetailsCard({ ismDetails, blur }: Props) {

Interchain Security Modules

- +

diff --git a/src/features/messages/cards/TransactionCard.tsx b/src/features/messages/cards/TransactionCard.tsx index f04f494..fcddb0f 100644 --- a/src/features/messages/cards/TransactionCard.tsx +++ b/src/features/messages/cards/TransactionCard.tsx @@ -3,11 +3,10 @@ import { PropsWithChildren, ReactNode, useState } from 'react'; import { MultiProvider } from '@hyperlane-xyz/sdk'; import { ProtocolType, isAddress, isZeroish, strip0x } from '@hyperlane-xyz/utils'; -import { Modal, useModal } from '@hyperlane-xyz/widgets'; +import { Modal, Tooltip, useModal } from '@hyperlane-xyz/widgets'; import { Spinner } from '../../../components/animations/Spinner'; import { ChainLogo } from '../../../components/icons/ChainLogo'; -import { HelpIcon } from '../../../components/icons/HelpIcon'; import { Card } from '../../../components/layout/Card'; import { links } from '../../../consts/links'; import { useMultiProvider } from '../../../store'; @@ -180,7 +179,13 @@ function TransactionCard({

{title}

- +
{children} diff --git a/yarn.lock b/yarn.lock index 73b14fa..0f58c19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2120,13 +2120,13 @@ __metadata: languageName: node linkType: hard -"@hyperlane-xyz/core@npm:5.5.0": - version: 5.5.0 - resolution: "@hyperlane-xyz/core@npm:5.5.0" +"@hyperlane-xyz/core@npm:5.7.0": + version: 5.7.0 + resolution: "@hyperlane-xyz/core@npm:5.7.0" dependencies: "@arbitrum/nitro-contracts": "npm:^1.2.1" "@eth-optimism/contracts": "npm:^0.6.0" - "@hyperlane-xyz/utils": "npm:5.6.0" + "@hyperlane-xyz/utils": "npm:5.7.0" "@layerzerolabs/lz-evm-oapp-v2": "npm:2.0.2" "@openzeppelin/contracts": "npm:^4.9.3" "@openzeppelin/contracts-upgradeable": "npm:^v4.9.3" @@ -2135,7 +2135,7 @@ __metadata: "@ethersproject/abi": "*" "@ethersproject/providers": "*" "@types/sinon-chai": "*" - checksum: 10/55c458e2dc9f58145256f47319936c483cb1415cfed3b25d6cee348d4b2d3b3dfe8658577b98ea896d2ff4a9f4af8e30709395c46c2d562794436b18a4f24b2f + checksum: 10/7ca52943789378dc631cce932ab46ff68f2efe892e2e53f59e704e52a625962b1dd4c0f3bf4ee7eff6e08e17886a44a8d4ca72a98509cf54de272bdb7d96af4e languageName: node linkType: hard @@ -2144,10 +2144,10 @@ __metadata: resolution: "@hyperlane-xyz/explorer@workspace:." dependencies: "@headlessui/react": "npm:^2.1.8" - "@hyperlane-xyz/registry": "npm:4.10.0" - "@hyperlane-xyz/sdk": "npm:5.6.0" - "@hyperlane-xyz/utils": "npm:5.6.0" - "@hyperlane-xyz/widgets": "npm:5.6.0" + "@hyperlane-xyz/registry": "npm:5.1.0" + "@hyperlane-xyz/sdk": "npm:5.7.0" + "@hyperlane-xyz/utils": "npm:5.7.0" + "@hyperlane-xyz/widgets": "npm:5.7.0" "@tanstack/eslint-plugin-query": "npm:^5.28.6" "@tanstack/react-query": "npm:^5.35.5" "@types/jest": "npm:^29.5.3" @@ -2187,26 +2187,26 @@ __metadata: languageName: unknown linkType: soft -"@hyperlane-xyz/registry@npm:4.10.0": - version: 4.10.0 - resolution: "@hyperlane-xyz/registry@npm:4.10.0" +"@hyperlane-xyz/registry@npm:5.1.0": + version: 5.1.0 + resolution: "@hyperlane-xyz/registry@npm:5.1.0" dependencies: yaml: "npm:2.4.5" zod: "npm:^3.21.2" - checksum: 10/22bb18f426cbada8b97db0894fe5d0980dfc08ecbd5174c978b7aeb6d8df9706f93d7e9cf0630644d2455ad05feee714dc2a38ec515a717b0b257184637902fb + checksum: 10/a0b62a03d9fed6b9a0a29c0dbc8086dd63aca822a2a345ca3af70cce8f5e6c20cdd02c06df6afd8abc2554fc5a1597167303fee0ca076f45ba1cd163e443afc7 languageName: node linkType: hard -"@hyperlane-xyz/sdk@npm:5.6.0": - version: 5.6.0 - resolution: "@hyperlane-xyz/sdk@npm:5.6.0" +"@hyperlane-xyz/sdk@npm:5.7.0": + version: 5.7.0 + resolution: "@hyperlane-xyz/sdk@npm:5.7.0" dependencies: "@arbitrum/sdk": "npm:^4.0.0" "@aws-sdk/client-s3": "npm:^3.74.0" "@cosmjs/cosmwasm-stargate": "npm:^0.32.4" "@cosmjs/stargate": "npm:^0.32.4" - "@hyperlane-xyz/core": "npm:5.5.0" - "@hyperlane-xyz/utils": "npm:5.6.0" + "@hyperlane-xyz/core": "npm:5.7.0" + "@hyperlane-xyz/utils": "npm:5.7.0" "@safe-global/api-kit": "npm:1.3.0" "@safe-global/protocol-kit": "npm:1.3.0" "@safe-global/safe-deployments": "npm:1.37.8" @@ -2225,13 +2225,13 @@ __metadata: peerDependencies: "@ethersproject/abi": "*" "@ethersproject/providers": "*" - checksum: 10/f57aa01e9c111ffab778873547da79e54d944c9cdf9d9f896420270333717b635933db99fd69e83679ac538c1a29ed6b6614057f11dbdd211d16d548d0450f21 + checksum: 10/c604cf4e1fbbc41d16d9236418bd15eee4034c6145362d8746ae5ac51a67f4932b6f5cde08166de9e20c427c689fc91aacc6edbd9d52778dc8170c42a3af3db7 languageName: node linkType: hard -"@hyperlane-xyz/utils@npm:5.6.0": - version: 5.6.0 - resolution: "@hyperlane-xyz/utils@npm:5.6.0" +"@hyperlane-xyz/utils@npm:5.7.0": + version: 5.7.0 + resolution: "@hyperlane-xyz/utils@npm:5.7.0" dependencies: "@cosmjs/encoding": "npm:^0.32.4" "@solana/web3.js": "npm:^1.78.0" @@ -2240,23 +2240,23 @@ __metadata: lodash-es: "npm:^4.17.21" pino: "npm:^8.19.0" yaml: "npm:2.4.5" - checksum: 10/2c24556b1447eda2a838651af6c06114fbb280f073e230ba7971b562669c1895bcec164cf85bf55e9af0ff2d28c6814e22e7ac8a729fbaac38adbbf4969fd83e + checksum: 10/62d7c0c3513df50208c1819dad78911524e894cfd4681b65cba3e15d1e3837dcb28ff4b49ee6b9a5c522b4b27943eb2554d227b26c3399468dfaca6c2e80b5cb languageName: node linkType: hard -"@hyperlane-xyz/widgets@npm:5.6.0": - version: 5.6.0 - resolution: "@hyperlane-xyz/widgets@npm:5.6.0" +"@hyperlane-xyz/widgets@npm:5.7.0": + version: 5.7.0 + resolution: "@hyperlane-xyz/widgets@npm:5.7.0" dependencies: "@headlessui/react": "npm:^2.1.8" - "@hyperlane-xyz/sdk": "npm:5.6.0" - "@hyperlane-xyz/utils": "npm:5.6.0" + "@hyperlane-xyz/sdk": "npm:5.7.0" + "@hyperlane-xyz/utils": "npm:5.7.0" clsx: "npm:^2.1.1" react-tooltip: "npm:^5.28.0" peerDependencies: react: ^18 react-dom: ^18 - checksum: 10/a90390322de8c26af96f632790ebbcf0ef491e0e8de1f90129e5f2e961a1d1d94b71b8d9616db5abcf29eed2ee12d1695febec1d4df0c40f61d238f145faba61 + checksum: 10/d3dd5e657d67c061f842f9fc4beb319b97f694ffa0bc30bcd796826cfa911962f655722d249c35fce4c91833b3e4efaa5a37893cb2f6cd365fef29978dee920a languageName: node linkType: hard