chore(widgets): add and update components (#4847)

### Description

- Props and style update: `IconButton` and `Tooltip`
- New Icons: `XCircleIcon` and `SwapIcon`

### Backward compatibility

Yes

### Testing

Manual testing in warp UI and visual testing with storybook

.changeset/strange-poems-build.md

@@ -0,0 +1,6 @@
+---
+'@hyperlane-xyz/widgets': minor
+---
+
+Props and style update: IconButton and Tooltip
+New Icons: XCircleIcon and SwapIcon

typescript/widgets/src/components/IconButton.tsx

@@ -7,17 +7,17 @@ type Props = PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
 };
 
 export function IconButton(props: Props) {
-  const { className, children, ...rest } = props;
+  const { className, children, type, ...rest } = props;
 
   const base =
     'htw-flex htw-items-center htw-justify-center htw-transition-all';
-  const onHover = 'hover:htw-opacity-70 hover:htw-scale-105';
+  const onHover = 'hover:htw-opacity-70';
   const onDisabled = 'disabled:htw-opacity-30 disabled:htw-cursor-default';
   const onActive = 'active:htw-opacity-60';
   const allClasses = clsx(base, onHover, onDisabled, onActive, className);
 
   return (
-    <button type="button" className={allClasses} {...rest}>
+    <button type={type || 'button'} className={allClasses} {...rest}>
       {children}
     </button>
   );

typescript/widgets/src/components/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { AnchorHTMLAttributes } from 'react';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import { PlacesType, Tooltip as ReactTooltip } from 'react-tooltip';
 
 import { Circle } from '../icons/Circle.js';
 import { QuestionMarkIcon } from '../icons/QuestionMark.js';
@@ -8,12 +8,26 @@ type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
   id: string;
   content: string;
   size?: number;
+  placement?: PlacesType;
 };
 
-export function Tooltip({ id, content, size = 16, ...rest }: Props) {
+export function Tooltip({
+  id,
+  content,
+  size = 16,
+  className,
+  placement = 'top-start',
+  ...rest
+}: Props) {
   return (
     <>
-      <a data-tooltip-id={id} data-tooltip-html={content} {...rest}>
+      <a
+        className={`hover:htw-scale-105 hover:htw-opacity-70 ${className}`}
+        data-tooltip-place={placement}
+        data-tooltip-id={id}
+        data-tooltip-html={content}
+        {...rest}
+      >
         <Circle size={size} className="htw-bg-gray-200 htw-border-gray-300">
           <QuestionMarkIcon
             width={size - 2}

typescript/widgets/src/icons/Swap.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+
+import { ColorPalette } from '../color.js';
+
+import { DefaultIconProps } from './types.js';
+
+function _SwapIcon({ color = ColorPalette.Black, ...rest }: DefaultIconProps) {
+  return (
+    <svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        d="M7.56 17.01L8.68875 15.8812L6.48375 13.6762H11.55V12.1012H6.48375L8.68875 9.89625L7.56 8.7675L3.43875 12.8887L7.56 17.01ZM13.44 12.4425L17.5612 8.32125L13.4662 4.2L12.3112 5.32875L14.5162 7.53375H9.45V9.10875H14.5162L12.3112 11.3137L13.44 12.4425ZM10.5 21C9.065 21 7.70875 20.7244 6.43125 20.1731C5.15375 19.6219 4.03813 18.8694 3.08437 17.9156C2.13062 16.9619 1.37812 15.8462 0.826875 14.5687C0.275625 13.2912 0 11.935 0 10.5C0 9.0475 0.275625 7.6825 0.826875 6.405C1.37812 5.1275 2.13062 4.01625 3.08437 3.07125C4.03813 2.12625 5.15375 1.37812 6.43125 0.826875C7.70875 0.275625 9.065 0 10.5 0C11.9525 0 13.3175 0.275625 14.595 0.826875C15.8725 1.37812 16.9837 2.12625 17.9287 3.07125C18.8738 4.01625 19.6219 5.1275 20.1731 6.405C20.7244 7.6825 21 9.0475 21 10.5C21 11.935 20.7244 13.2912 20.1731 14.5687C19.6219 15.8462 18.8738 16.9619 17.9287 17.9156C16.9837 18.8694 15.8725 19.6219 14.595 20.1731C13.3175 20.7244 11.9525 21 10.5 21ZM10.5 19.425C12.985 19.425 15.0937 18.5544 16.8262 16.8131C18.5587 15.0719 19.425 12.9675 19.425 10.5C19.425 8.015 18.5587 5.90625 16.8262 4.17375C15.0937 2.44125 12.985 1.575 10.5 1.575C8.0325 1.575 5.92812 2.44125 4.18687 4.17375C2.44563 5.90625 1.575 8.015 1.575 10.5C1.575 12.9675 2.44563 15.0719 4.18687 16.8131C5.92812 18.5544 8.0325 19.425 10.5 19.425Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
+
+export const SwapIcon = memo(_SwapIcon);

typescript/widgets/src/icons/XCircle.tsx

@@ -0,0 +1,25 @@
+import React, { memo } from 'react';
+
+import { ColorPalette } from '../color.js';
+
+import { DefaultIconProps } from './types.js';
+
+function _XCircleIcon({
+  color = ColorPalette.Black,
+  ...rest
+}: DefaultIconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...rest}>
+      <path
+        fill={color}
+        d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
+      />
+      <path
+        fill={color}
+        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
+      />
+    </svg>
+  );
+}
+
+export const XCircleIcon = memo(_XCircleIcon);

typescript/widgets/src/index.ts

@@ -44,11 +44,13 @@ export { QuestionMarkIcon } from './icons/QuestionMark.js';
 export { SearchIcon } from './icons/Search.js';
 export { ShieldIcon } from './icons/Shield.js';
 export { SpinnerIcon } from './icons/Spinner.js';
+export { SwapIcon } from './icons/Swap.js';
 export { TwitterIcon } from './icons/Twitter.js';
 export { UpDownArrowsIcon } from './icons/UpDownArrows.js';
 export { WalletIcon } from './icons/Wallet.js';
 export { WebIcon } from './icons/Web.js';
 export { WideChevronIcon } from './icons/WideChevron.js';
+export { XCircleIcon } from './icons/XCircle.js';
 export { XIcon } from './icons/X.js';
 export { type DefaultIconProps } from './icons/types.js';
 export { DropdownMenu, type DropdownMenuProps } from './layout/DropdownMenu.js';

typescript/widgets/src/stories/IconList.stories.tsx

@@ -40,8 +40,8 @@ function IconList({
           flexWrap: 'wrap',
         }}
       >
-        {iconList.map((Icon) => (
-          <IconContainer>
+        {iconList.map((Icon, index) => (
+          <IconContainer key={index}>
             <span>{Icon.displayName}</span>
             <Icon
               width={width}