chore: update widgets and de-duplicate components (#135)

- Update widgets package to v5.7.0
- Add components from the widgets and remove repeated ones

package.json

@@ -5,10 +5,10 @@
   "author": "J M Rossy",
   "dependencies": {
     "@headlessui/react": "^2.1.8",
-    "@hyperlane-xyz/registry": "4.10.0",
+    "@hyperlane-xyz/registry": "5.1.0",
-    "@hyperlane-xyz/sdk": "5.6.0",
+    "@hyperlane-xyz/sdk": "5.7.0",
-    "@hyperlane-xyz/utils": "5.6.0",
+    "@hyperlane-xyz/utils": "5.7.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",

src/components/animations/Fade.tsx

@@ -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 ? (
-    <div
-      style={{
-        animationName: show ? 'fadeIn' : 'fadeOut',
-        animationDuration: '1s',
-        //https://github.com/radix-ui/primitives/issues/1074#issuecomment-1089555751
-        animationFillMode: 'forwards',
-      }}
-      onAnimationEnd={onAnimationEnd}
-    >
-      {children}
-    </div>
-  ) : null;
-}

src/components/icons/Discord.tsx

@@ -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 (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 71 55"
-      fill="none"
-    >
-      <g clipPath="url(#a)">
-        <path
-          d="M60.1 4.9A58.5 58.5 0 0 0 45.4.5l-1.8 3.7a54 54 0 0 0-16.2 0 37.4 37.4 0 0 0-2-3.8A58.4 58.4 0 0 0 10.7 5 60 60 0 0 0 .4 45.6a58.9 58.9 0 0 0 18 8.8 42 42 0 0 0 3.6-5.9l-.1-.3c-2-.7-3.8-1.6-5.6-2.6a.2.2 0 0 1 0-.4 30.3 30.3 0 0 0 1.3-.9 42 42 0 0 0 36 0l1 1c.2 0 .2.2 0 .3-1.7 1-3.6 1.9-5.5 2.6a47.2 47.2 0 0 0 3.8 6.3 58.7 58.7 0 0 0 17.8-9.1A59.5 59.5 0 0 0 60 4.9ZM23.7 37.3c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Zm23.6 0c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Z"
-          fill={fill}
-        />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h71v55H0z" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
-
-export const Discord = memo(_Discord);

src/components/icons/Github.tsx

@@ -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 (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-        fill={fill}
-      />
-    </svg>
-  );
-}
-
-export const Github = memo(_Github);

src/components/icons/HelpIcon.tsx

@@ -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
-    <IconButton
-      title="Help"
-      width={size}
-      height={size}
-      className="rounded-full border border-gray-400 p-px"
-      {...tooltipProps}
-    >
-      <QuestionMarkIcon height={size} width={size} color={Color.lightGray} className="opacity-50" />
-    </IconButton>
-  );
-}
-
-export const HelpIcon = memo(_HelpIcon);

src/components/icons/LinkedIn.tsx

@@ -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 (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 30 30"
-    >
-      <path
-        d="M9 25H4V10h5v15zM6.5 8a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zM27 25h-4.8v-7.3c0-1.74-.04-3.98-2.5-3.98-2.5 0-2.9 1.9-2.9 3.85V25H12V9.99h4.61v2.05h.07a5.08 5.08 0 0 1 4.55-2.42c4.87 0 5.77 3.1 5.77 7.15V25z"
-        fill={fill}
-      />
-    </svg>
-  );
-}
-
-export const Linkedin = memo(_Linkedin);

src/components/icons/Medium.tsx

@@ -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 (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 -55 256 256"
-      preserveAspectRatio="xMidYMid"
-      fill="none"
-    >
-      <path
-        fill={fill}
-        d="M72.2 0c39.88 0 72.2 32.55 72.2 72.7 0 40.14-32.33 72.69-72.2 72.69-39.87 0-72.2-32.55-72.2-72.7C0 32.56 32.33 0 72.2 0Zm115.3 4.26c19.94 0 36.1 30.64 36.1 68.44 0 37.79-16.16 68.43-36.1 68.43-19.93 0-36.1-30.64-36.1-68.43 0-37.8 16.16-68.44 36.1-68.44Zm55.8 7.13c7.01 0 12.7 27.45 12.7 61.3 0 33.86-5.68 61.32-12.7 61.32-7.01 0-12.7-27.46-12.7-61.31 0-33.86 5.7-61.31 12.7-61.31Z"
-      />
-    </svg>
-  );
-}
-
-export const Medium = memo(_Medium);

src/components/icons/Twitter.tsx

@@ -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 (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
-        fill={fill}
-      />
-    </svg>
-  );
-}
-
-export const Twitter = memo(_Twitter);

src/components/icons/Web.tsx

@@ -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 (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 29 29"
-    >
-      <path
-        fill={fill}
-        d="m11 18.6-.39.17a13.45 13.45 0 0 0 1.12 2.9 5.25 5.25 0 0 0 2.08 2.24c.36.18.7.26 1.03.26.95 0 2.1-.71 3.1-2.5.46-.82.85-1.8 1.13-2.9a10.3 10.3 0 0 0-8.06-.17Z"
-      />
-      <path
-        fill="#02010A"
-        d="M20.34 19.46a11.88 11.88 0 0 1-1.88 3.99 9.63 9.63 0 0 0 3.63-2.6 10.3 10.3 0 0 0-1.75-1.4Z"
-      />
-      <path
-        fill="#02010A"
-        d="M24.41 15.27a9.55 9.55 0 0 1-1.48 4.45l-.53-.49c-.54-.45-1.12-.86-1.74-1.22.08-.45.15-.9.2-1.38l.05-.61c.02-.25.04-.5.04-.75h3.46Z"
-      />
-      <path
-        fill="#02010A"
-        d="M22.96 9.45a9.55 9.55 0 0 1 1.45 4.42h-3.46a19 19 0 0 0-.28-2.7c.83-.47 1.6-1.06 2.3-1.72Z"
-      />
-      <path
-        fill="#02010A"
-        d="m22.05 8.24.07.08c-.54.54-1.14 1.01-1.78 1.42a11.84 11.84 0 0 0-1.91-4.08 9.63 9.63 0 0 1 3.62 2.58Z"
-      />
-      <path
-        fill="#02010A"
-        d="M16.35 5.53a2.55 2.55 0 0 0-1.51-.57c-.96 0-2.11.72-3.11 2.5-.15.28-.3.57-.43.88l-.24.58c-.17.47-.33.97-.46 1.5a10.24 10.24 0 0 0 8.47 0 12.18 12.18 0 0 0-1.12-2.95 6.02 6.02 0 0 0-1.6-1.94Z"
-      />
-      <path
-        fill="#02010A"
-        d="M7.54 8.3a9.68 9.68 0 0 1 3.7-2.63 11.9 11.9 0 0 0-1.9 4.07 10.4 10.4 0 0 1-1.8-1.44Z"
-      />
-      <path
-        fill="#02010A"
-        d="M5.26 13.87A9.53 9.53 0 0 1 6.7 9.45c.69.67 1.46 1.25 2.3 1.73a19 19 0 0 0-.29 2.69H5.26Z"
-      />
-      <path
-        fill="#02010A"
-        d="M6.73 19.72a9.53 9.53 0 0 1-1.47-4.45h3.46c.03.95.14 1.87.3 2.74a11.33 11.33 0 0 0-2.29 1.7Z"
-      />
-      <path
-        fill="#02010A"
-        d="M11.24 23.47a9.62 9.62 0 0 1-3.66-2.61c.53-.54 1.12-1.01 1.76-1.41.45 1.6 1.1 2.98 1.9 4.02Z"
-      />
-      <path
-        fill="#02010A"
-        d="M19.55 15.27a14 14 0 0 1-.2 2.1 11.66 11.66 0 0 0-9.03 0c-.1-.67-.17-1.38-.2-2.1h9.43Z"
-      />
-      <path
-        fill="#02010A"
-        d="M19.55 13.87h-9.43c.03-.71.1-1.4.2-2.05a11.78 11.78 0 0 0 9.04 0 18.37 18.37 0 0 1 .2 2.05Z"
-      />
-      <path
-        fill="#02010A"
-        fill-rule="evenodd"
-        d="M28.84 14.57a14 14 0 1 0-14 14 14 14 0 0 0 14-14Zm-3 0a11 11 0 1 0-22 0 11 11 0 0 0 22 0Z"
-        clip-rule="evenodd"
-      />
-    </svg>
-  );
-}
-
-export const Web = memo(_Web);

src/components/input/DatetimeField.tsx

@@ -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<HTMLInputElement>) => {
-    if (!e.target['validity'].valid) {
-      onChange(null);
-    } else {
-      const datetime = e.target['value'] + ':00Z';
-      const newTimestamp = new Date(datetime).getTime();
-      onChange(newTimestamp);
-    }
-  };
-
-  return (
-    <input
-      type="datetime-local"
-      value={toShortIsoString(timestamp)}
-      onChange={handleChange}
-      name={name}
-      className="-ml-px"
-    />
-  );
-}
-
-function toShortIsoString(timestamp: number | null) {
-  if (!timestamp) return '';
-  // Trim milliseconds and timezone to match input field format
-  return new Date(timestamp).toISOString().split('.')[0];
-}

src/components/input/SelectField.tsx

@@ -1,36 +0,0 @@
-import { ChangeEvent } from 'react';
-
-type Props = React.DetailedHTMLProps<
-  React.SelectHTMLAttributes<HTMLSelectElement>,
-  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<HTMLSelectElement>) => {
-    onValueSelect(event?.target?.value || '');
-  };
-
-  return (
-    <select
-      className={`rounded border border-gray-400 bg-transparent px-2 py-1 text-sm font-light invalid:text-gray-400 ${
-        classes || ''
-      }`}
-      {...passThruProps}
-      value={value}
-      onChange={onChangeSelect}
-    >
-      {options.map((o, i) => (
-        <option key={`option-${i}`} value={o.value}>
-          {o.display}
-        </option>
-      ))}
-    </select>
-  );
-}

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: <Twitter fill="#fff" /> },
+  { title: 'Twitter', url: links.twitter, external: true, icon: <TwitterIcon color="#fff" /> },
-  { title: 'Discord', url: links.discord, external: true, icon: <Discord fill="#fff" /> },
+  { title: 'Discord', url: links.discord, external: true, icon: <DiscordIcon color="#fff" /> },
-  { title: 'Github', url: links.github, external: true, icon: <Github fill="#fff" /> },
+  { title: 'Github', url: links.github, external: true, icon: <GithubIcon color="#fff" /> },
 ];
 
 export function Footer() {

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 (
     <div className="flex flex-col items-center rounded-lg border border-white bg-pink-500 px-4 py-1">
-      <WideChevron
+      <WideChevronIcon
         width={10}
         height={14}
         direction="s"
         color={Color.white}
         className="transition-all"
       />
-      <WideChevron
+      <WideChevronIcon
         width={10}
         height={14}
         direction="s"
         color={Color.white}
         className="-mt-1 transition-all"
       />
-      <WideChevron
+      <WideChevronIcon
         width={10}
         height={14}
         direction="s"

src/components/search/SearchFilterBar.tsx

@@ -3,7 +3,14 @@ import { useState } from 'react';
 
 import { ChainMetadata, getDomainId } from '@hyperlane-xyz/sdk';
 import { trimToLength } from '@hyperlane-xyz/utils';
-import { ChevronIcon, IconButton, Popover, XIcon, useModal } from '@hyperlane-xyz/widgets';
+import {
+  ChevronIcon,
+  DatetimeField,
+  IconButton,
+  Popover,
+  XIcon,
+  useModal,
+} from '@hyperlane-xyz/widgets';
 
 import { ChainSearchModal } from '../../features/chains/ChainSearchModal';
 import { getChainDisplayName } from '../../features/chains/utils';
@@ -11,7 +18,6 @@ import { useMultiProvider } from '../../store';
 import { Color } from '../../styles/Color';
 import { SolidButton } from '../buttons/SolidButton';
 import { TextButton } from '../buttons/TextButton';
-import { DatetimeField } from '../input/DatetimeField';
 
 interface Props {
   originChain: string | null;

src/components/search/SearchStates.tsx

@@ -1,10 +1,11 @@
 import Image from 'next/image';
 
+import { Fade } from '@hyperlane-xyz/widgets';
+
 import BugIcon from '../../images/icons/bug.svg';
 import ErrorIcon from '../../images/icons/error-circle.svg';
 import SearchOffIcon from '../../images/icons/search-off.svg';
 import ShrugIcon from '../../images/icons/shrug.svg';
-import { Fade } from '../animations/Fade';
 import { Spinner } from '../animations/Spinner';
 
 export function SearchFetching({ show, isPiFetching }: { show: boolean; isPiFetching?: boolean }) {

src/features/messages/MessageSearch.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
-import { Fade } from '../../components/animations/Fade';
+import { Fade } from '@hyperlane-xyz/widgets';
+
 import { Card } from '../../components/layout/Card';
 import { SearchBar } from '../../components/search/SearchBar';
 import { SearchFilterBar } from '../../components/search/SearchFilterBar';

src/features/messages/cards/ContentDetailsCard.tsx

@@ -3,9 +3,8 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { MAILBOX_VERSION } from '@hyperlane-xyz/sdk';
 import { formatMessage } from '@hyperlane-xyz/utils';
+import { SelectField, Tooltip } from '@hyperlane-xyz/widgets';
 
-import { HelpIcon } from '../../../components/icons/HelpIcon';
-import { SelectField } from '../../../components/input/SelectField';
 import { Card } from '../../../components/layout/Card';
 import EnvelopeInfo from '../../../images/icons/envelope-info.svg';
 import { Message } from '../../../types';
@@ -73,7 +72,13 @@ export function ContentDetailsCard({
         <Image src={EnvelopeInfo} width={28} height={28} alt="" className="opacity-80" />
         <div className="flex items-center pb-1">
           <h3 className="mr-2 text-md font-medium text-blue-500">Message Details</h3>
-          <HelpIcon text="Immutable information about the message itself such as its contents." />
+          <Tooltip
+            id="message-info"
+            content="Immutable information about the message itself such as its contents."
+            size={16}
+            className="hover:scale-105 hover:opacity-70"
+            data-tooltip-place="top-start"
+          />
         </div>
       </div>
       <div className="flex flex-wrap gap-x-6 gap-y-4">

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) {
         <Image src={FuelPump} width={24} height={24} alt="" className="opacity-80" />
         <div className="flex items-center pb-1">
           <h3 className="mr-2 text-md font-medium text-blue-500">Interchain Gas Payments</h3>
-          <HelpIcon text="Amounts paid to the Interchain Gas Paymaster for message delivery." />
+          <Tooltip
+            content="Amounts paid to the Interchain Gas Paymaster for message delivery."
+            id="gas-info"
+            size={16}
+            className="hover:scale-105 hover:opacity-70"
+            data-tooltip-place="top-start"
+          />
         </div>
       </div>
       <p className="text-sm font-light">

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
         </div>
         <div className="flex items-center pb-1">
           <h3 className="mr-2 text-md font-medium text-blue-500">ICA Details</h3>
-          <HelpIcon text="Extra information for messages from/to Interchain Accounts." />
+          <Tooltip
+            id="ica-info"
+            content="Extra information for messages from/to Interchain Accounts."
+            size={16}
+            className="hover:scale-105 hover:opacity-70"
+            data-tooltip-place="top-start"
+          />
         </div>
       </div>
       {decodeResult ? (

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) {
         <Image src={ShieldLock} width={24} height={24} alt="" className="opacity-80" />
         <div className="flex items-center pb-1">
           <h3 className="mr-2 text-md font-medium text-blue-500">Interchain Security Modules</h3>
-          <HelpIcon text="Details about the Interchain Security Modules (ISM) that must verify this message." />
+          <Tooltip
+            id="ism-info"
+            content="Details about the Interchain Security Modules (ISM) that must verify this message."
+            size={16}
+            className="hover:scale-105 hover:opacity-70"
+            data-tooltip-place="top-start"
+          />
         </div>
       </div>
       <p className="text-sm font-light">

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({
         </div>
         <div className="flex items-center pb-1">
           <h3 className="mr-2 text-md font-medium text-blue-500">{title}</h3>
-          <HelpIcon text={helpText} />
+          <Tooltip
+            id="transaction-info"
+            content={helpText}
+            size={16}
+            className="hover:scale-105 hover:opacity-70"
+            data-tooltip-place="top-start"
+          />
         </div>
       </div>
       {children}

yarn.lock

@@ -2120,13 +2120,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hyperlane-xyz/core@npm:5.5.0":
+"@hyperlane-xyz/core@npm:5.7.0":
-  version: 5.5.0
+  version: 5.7.0
-  resolution: "@hyperlane-xyz/core@npm:5.5.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/registry": "npm:5.1.0"
-    "@hyperlane-xyz/sdk": "npm:5.6.0"
+    "@hyperlane-xyz/sdk": "npm:5.7.0"
-    "@hyperlane-xyz/utils": "npm:5.6.0"
+    "@hyperlane-xyz/utils": "npm:5.7.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"
@@ -2187,26 +2187,26 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@hyperlane-xyz/registry@npm:4.10.0":
+"@hyperlane-xyz/registry@npm:5.1.0":
-  version: 4.10.0
+  version: 5.1.0
-  resolution: "@hyperlane-xyz/registry@npm:4.10.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":
+"@hyperlane-xyz/sdk@npm:5.7.0":
-  version: 5.6.0
+  version: 5.7.0
-  resolution: "@hyperlane-xyz/sdk@npm:5.6.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/core": "npm:5.7.0"
-    "@hyperlane-xyz/utils": "npm:5.6.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":
+"@hyperlane-xyz/utils@npm:5.7.0":
-  version: 5.6.0
+  version: 5.7.0
-  resolution: "@hyperlane-xyz/utils@npm:5.6.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":
+"@hyperlane-xyz/widgets@npm:5.7.0":
-  version: 5.6.0
+  version: 5.7.0
-  resolution: "@hyperlane-xyz/widgets@npm:5.6.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/sdk": "npm:5.7.0"
-    "@hyperlane-xyz/utils": "npm:5.6.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