diff --git a/package.json b/package.json index db410f9..477499d 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "@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/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..93bda1b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2139,6 +2139,25 @@ __metadata: languageName: node linkType: hard +"@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.7.0" + "@layerzerolabs/lz-evm-oapp-v2": "npm:2.0.2" + "@openzeppelin/contracts": "npm:^4.9.3" + "@openzeppelin/contracts-upgradeable": "npm:^v4.9.3" + fx-portal: "npm:^1.0.3" + peerDependencies: + "@ethersproject/abi": "*" + "@ethersproject/providers": "*" + "@types/sinon-chai": "*" + checksum: 10/7ca52943789378dc631cce932ab46ff68f2efe892e2e53f59e704e52a625962b1dd4c0f3bf4ee7eff6e08e17886a44a8d4ca72a98509cf54de272bdb7d96af4e + languageName: node + linkType: hard + "@hyperlane-xyz/explorer@workspace:.": version: 0.0.0-use.local resolution: "@hyperlane-xyz/explorer@workspace:." @@ -2147,7 +2166,7 @@ __metadata: "@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/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" @@ -2229,6 +2248,38 @@ __metadata: languageName: node linkType: hard +"@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.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" + "@solana/spl-token": "npm:^0.3.8" + "@solana/web3.js": "npm:^1.78.0" + "@types/coingecko-api": "npm:^1.0.10" + "@wagmi/chains": "npm:^1.8.0" + bignumber.js: "npm:^9.1.1" + coingecko-api: "npm:^1.0.10" + cosmjs-types: "npm:^0.9.0" + cross-fetch: "npm:^3.1.5" + ethers: "npm:^5.7.2" + pino: "npm:^8.19.0" + viem: "npm:^1.20.0" + zod: "npm:^3.21.2" + peerDependencies: + "@ethersproject/abi": "*" + "@ethersproject/providers": "*" + 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" @@ -2244,19 +2295,34 @@ __metadata: 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/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" + bignumber.js: "npm:^9.1.1" + ethers: "npm:^5.7.2" + lodash-es: "npm:^4.17.21" + pino: "npm:^8.19.0" + yaml: "npm:2.4.5" + checksum: 10/62d7c0c3513df50208c1819dad78911524e894cfd4681b65cba3e15d1e3837dcb28ff4b49ee6b9a5c522b4b27943eb2554d227b26c3399468dfaca6c2e80b5cb + languageName: node + linkType: hard + +"@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