chore: De-duplicate images, components, and most utils with widgets lib

src/components/errors/ErrorBoundary.tsx

@@ -1,52 +1,15 @@
-import Image from 'next/image';
-import { Component } from 'react';
-
+import { ErrorBoundary as ErrorBoundaryInner } from '@hyperlane-xyz/widgets';
+import { PropsWithChildren } from 'react';
 import { links } from '../../consts/links';
-import ErrorIcon from '../../images/icons/error-circle.svg';
-import { logger } from '../../utils/logger';
 
-interface ErrorBoundaryState {
-  error: any;
-  errorInfo: any;
+export function ErrorBoundary({ children }: PropsWithChildren<unknown>) {
+  return <ErrorBoundaryInner supportLink={<SupportLink />}>{children}</ErrorBoundaryInner>;
 }
 
-export class ErrorBoundary extends Component<any, ErrorBoundaryState> {
-  constructor(props: any) {
-    super(props);
-    this.state = { error: null, errorInfo: null };
-  }
-
-  componentDidCatch(error: any, errorInfo: any) {
-    this.setState({
-      error,
-      errorInfo,
-    });
-    logger.error('Error caught by error boundary', error, errorInfo);
-  }
-
-  render() {
-    const errorInfo = this.state.error || this.state.errorInfo;
-    if (errorInfo) {
-      const details = errorInfo.message || JSON.stringify(errorInfo);
-      return (
-        <div className="flex h-screen w-screen items-center justify-center bg-gray-50">
-          <div className="flex flex-col items-center">
-            <Image src={ErrorIcon} width={80} height={80} alt="" />
-            <h1 className="mt-5 text-lg">Fatal Error Occurred</h1>
-            <div className="mt-5 text-sm">{details}</div>
-            <a
-              href={links.discord}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="mt-5 text-sm"
-            >
-              For support, join the{' '}
-              <span className="underline underline-offset-2">Hyperlane Discord</span>{' '}
-            </a>
-          </div>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
+function SupportLink() {
+  return (
+    <a href={links.discord} target="_blank" rel="noopener noreferrer" className="mt-5 text-sm">
+      For support, join the <span className="underline underline-offset-2">Hyperlane Discord</span>{' '}
+    </a>
+  );
 }

src/components/search/SearchBar.tsx

@@ -1,10 +1,10 @@
 import Image from 'next/image';
 import { ChangeEvent } from 'react';
 
-import { IconButton, XIcon } from '@hyperlane-xyz/widgets';
+import { IconButton, SpinnerIcon, XIcon } from '@hyperlane-xyz/widgets';
 
 import SearchIcon from '../../images/icons/search.svg';
-import { Spinner } from '../animations/Spinner';
+import { Color } from '../../styles/Color';
 
 interface Props {
   value: string;
@@ -29,11 +29,7 @@ export function SearchBar({ value, placeholder, onChangeValue, isFetching }: Pro
         className="h-10 flex-1 rounded-full p-1 font-light placeholder:text-gray-600 focus:outline-none sm:h-12 sm:px-4 md:px-5"
       />
       <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500 sm:h-12 sm:w-12">
-        {isFetching && (
-          <div className="scale-[30%] sm:scale-[35%]">
-            <Spinner classes="invert" />
-          </div>
-        )}
+        {isFetching && <SpinnerIcon color={Color.white} width={26} height={26} />}
         {!isFetching && !value && <Image src={SearchIcon} width={20} height={20} alt="" />}
         {!isFetching && value && (
           <IconButton title="Clear search" onClick={() => onChange(null)}>

src/components/search/SearchStates.tsx

@@ -1,12 +1,11 @@
 import Image from 'next/image';
 
-import { Fade } from '@hyperlane-xyz/widgets';
+import { Fade, SpinnerIcon } 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 { Spinner } from '../animations/Spinner';
 
 export function SearchFetching({ show, isPiFetching }: { show: boolean; isPiFetching?: boolean }) {
   return (
@@ -15,8 +14,8 @@ export function SearchFetching({ show, isPiFetching }: { show: boolean; isPiFetc
       <Fade show={show}>
         <div className="my-10 flex justify-center">
           <div className="flex max-w-md flex-col items-center justify-center px-3 py-5">
-            <div className="flex scale-90 items-center justify-center">
-              <Spinner />
+            <div className="flex items-center justify-center">
+              <SpinnerIcon width={40} height={40} />
             </div>
             <div className="mt-4 text-center font-light leading-loose text-gray-700">
               {isPiFetching ? 'Searching override chains for messages' : 'Searching for messages'}

src/consts/values.ts

@@ -1,4 +1,2 @@
-export const MIN_ROUNDED_VALUE = 0.00001;
-export const DISPLAY_DECIMALS = 5;
 export const DELIVERY_LOG_CHECK_BLOCK_RANGE = 1_000;
 export const PI_MESSAGE_LOG_CHECK_BLOCK_RANGE = 5_000;

src/features/messages/MessageDetails.tsx

@@ -4,7 +4,6 @@ import { toast } from 'react-toastify';
 
 import { toTitleCase, trimToLength } from '@hyperlane-xyz/utils';
 
-import { Spinner } from '../../components/animations/Spinner';
 import { Card } from '../../components/layout/Card';
 import CheckmarkIcon from '../../images/icons/checkmark-circle.svg';
 import { useMultiProvider, useStore } from '../../store';
@@ -14,6 +13,7 @@ import { getHumanReadableDuration } from '../../utils/time';
 import { getChainDisplayName, isEvmChain } from '../chains/utils';
 import { useMessageDeliveryStatus } from '../deliveryStatus/useMessageDeliveryStatus';
 
+import { SpinnerIcon } from '@hyperlane-xyz/widgets';
 import { ContentDetailsCard } from './cards/ContentDetailsCard';
 import { GasDetailsCard } from './cards/GasDetailsCard';
 import { IcaDetailsCard } from './cards/IcaDetailsCard';
@@ -164,10 +164,8 @@ function StatusHeader({
   let icon: React.ReactNode;
   if (isFetching) {
     icon = (
-      <div className="flex h-7 w-7 items-center justify-center overflow-hidden">
-        <div className="scale-[35%]">
-          <Spinner />
-        </div>
+      <div className="flex items-center justify-center">
+        <SpinnerIcon width={20} height={20} />
       </div>
     );
   } else if (isMessageFound && messageStatus === MessageStatus.Delivered) {