feat: widgets components update (#7268)

Author: Xaroz

.changeset/silly-panthers-press.md

@@ -0,0 +1,5 @@
+---
+"@hyperlane-xyz/sdk": minor
+---
+
+Export WarpCoreFeeEstimate

.changeset/warm-ligers-perform.md

@@ -0,0 +1,5 @@
+---
+"@hyperlane-xyz/widgets": minor
+---
+
+Add Skeleton and FuelPump component

typescript/sdk/src/index.ts

@@ -821,6 +821,7 @@ export {
   WarpCoreConfigSchema,
   WarpTxCategory,
   WarpTypedTransaction,
+  WarpCoreFeeEstimate,
 } from './warp/types.js';
 export { WarpCore, WarpCoreOptions } from './warp/WarpCore.js';
 export { EvmTimelockReader } from './timelock/evm/EvmTimelockReader.js';

typescript/widgets/src/animations/Skeleton.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className = '' }: SkeletonProps) {
+  return (
+    <div
+      className={`htw-animate-pulse-slow htw-bg-gray-200 htw-rounded ${className}`}
+    />
+  );
+}

typescript/widgets/src/icons/FuelPump.tsx

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+
+import { ColorPalette } from '../color.js';
+
+import { DefaultIconProps } from './types.js';
+
+function _FuelPumpIcon({ color, ...rest }: DefaultIconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...rest}>
+      <path
+        d="M3 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-5Z"
+        fill={color || ColorPalette.Black}
+      />
+      <path
+        d="M1 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1 2 2v.5a.5.5 0 0 0 1 0V8h-.5a.5.5 0 0 1-.5-.5V4.375a.5.5 0 0 1 .5-.5h1.495c-.011-.476-.053-.894-.201-1.222a.97.97 0 0 0-.394-.458c-.184-.11-.464-.195-.9-.195a.5.5 0 0 1 0-1c.564 0 1.034.11 1.412.336.383.228.634.551.794.907.295.655.294 1.465.294 2.081v3.175a.5.5 0 0 1-.5.501H15v4.5a1.5 1.5 0 0 1-3 0V12a1 1 0 0 0-1-1v4h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V2Zm9 0a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v13h8V2Z"
+        fill={color || ColorPalette.Black}
+      />
+    </svg>
+  );
+}
+
+export const FuelPumpIcon = memo(_FuelPumpIcon);

typescript/widgets/src/index.ts

@@ -1,4 +1,5 @@
 export { Fade } from './animations/Fade.js';
+export { Skeleton } from './animations/Skeleton.js';
 export {
   ChainDetailsMenu,
   type ChainDetailsMenuProps,
@@ -32,6 +33,7 @@ export { DocsIcon } from './icons/Docs.js';
 export { EllipsisIcon } from './icons/Ellipsis.js';
 export { EnvelopeIcon } from './icons/Envelope.js';
 export { ErrorIcon } from './icons/Error.js';
+export { FuelPumpIcon } from './icons/FuelPump.js';
 export { FilterIcon } from './icons/Filter.js';
 export { FunnelIcon } from './icons/Funnel.js';
 export { GearIcon } from './icons/Gear.js';