Merge pull request #327 from hyperlane-xyz/rossy/component-dedupe

Remove components, logos, and icons that have been migrated to the widgets lib

src/components/banner/WarningBanner.tsx

@@ -1,6 +1,5 @@
-import Image from 'next/image';
+import { WarningIcon } from '@hyperlane-xyz/widgets';
 import { PropsWithChildren, ReactNode } from 'react';
-import WarningIcon from '../../images/icons/warning.svg';
 
 export function WarningBanner({
   isVisible,
@@ -21,7 +20,7 @@ export function WarningBanner({
       } overflow-hidden transition-all duration-500 ${className}`}
     >
       <div className="flex items-center gap-2">
-        <Image src={WarningIcon} width={20} height={20} alt="Warning:" />
+        <WarningIcon width={20} height={20} />
         {children}
       </div>
       <button

src/components/errors/ErrorBoundary.tsx

@@ -1,51 +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 max-w-2xl 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>
+  );
 }