diff --git a/src/components/errors/ErrorBoundary.tsx b/src/components/errors/ErrorBoundary.tsx index 8c1161a..b7db617 100644 --- a/src/components/errors/ErrorBoundary.tsx +++ b/src/components/errors/ErrorBoundary.tsx @@ -1,5 +1,8 @@ +import Image from 'next/image'; import { Component } from 'react'; +import { links } from '../../consts/links'; +import ErrorIcon from '../../images/icons/error-circle.svg'; import { logger } from '../../utils/logger'; interface ErrorBoundaryState { @@ -25,8 +28,24 @@ export class ErrorBoundary extends Component { const errorInfo = this.state.error || this.state.errorInfo; if (errorInfo) { const details = errorInfo.message || JSON.stringify(errorInfo); - // TODO - return
{details}
; + return ( +
+
+ +

Fatal Error Occurred

+
{details}
+ + For support, join the{' '} + Hyperlane Discord{' '} + +
+
+ ); } return this.props.children; } diff --git a/src/features/messages/MessageDetails.tsx b/src/features/messages/MessageDetails.tsx index 97716c2..26613e4 100644 --- a/src/features/messages/MessageDetails.tsx +++ b/src/features/messages/MessageDetails.tsx @@ -17,7 +17,7 @@ import { GasDetailsCard } from './cards/GasDetailsCard'; import { IcaDetailsCard } from './cards/IcaDetailsCard'; import { TimelineCard } from './cards/TimelineCard'; import { TransactionCard } from './cards/TransactionCard'; -import { isIcaMessage } from './ica'; +import { useIsIcaMessage } from './ica'; import { usePiChainMessageQuery } from './pi-queries/usePiChainMessageQuery'; import { PLACEHOLDER_MESSAGE } from './placeholderMessages'; import { useMessageQuery } from './queries/useMessageQuery'; @@ -61,7 +61,7 @@ export function MessageDetails({ messageId, message: messageFromUrlParams }: Pro const isFetching = isGraphQlFetching || isPiFetching; const isError = isGraphQlError || isPiError; const shouldBlur = !isMessageFound; - const isIcaMsg = isIcaMessage(_message); + const isIcaMsg = useIsIcaMessage(_message); // If message isn't delivered, attempt to check for // more recent updates and possibly debug info diff --git a/src/features/messages/ica.ts b/src/features/messages/ica.ts index 67da438..3e2bab7 100644 --- a/src/features/messages/ica.ts +++ b/src/features/messages/ica.ts @@ -1,5 +1,6 @@ import { useQuery } from '@tanstack/react-query'; import { BigNumber, providers, utils } from 'ethers'; +import { useMemo } from 'react'; import { InterchainAccountRouter__factory } from '@hyperlane-xyz/core'; import { hyperlaneEnvironments } from '@hyperlane-xyz/sdk'; @@ -11,14 +12,11 @@ import { useMultiProvider } from '../providers/multiProvider'; // This assumes all chains have the same ICA address const ICA_ADDRESS = hyperlaneEnvironments.mainnet.ethereum.interchainAccountRouter; -export function isIcaMessage({ - sender, - recipient, -}: { - sender: Address; - recipient: Address; - hash?: string; -}) { +export function useIsIcaMessage({ sender, recipient }: { sender: Address; recipient: Address }) { + return useMemo(() => isIcaMessage({ sender, recipient }), [sender, recipient]); +} + +export function isIcaMessage({ sender, recipient }: { sender: Address; recipient: Address }) { const isSenderIca = isAddressIcaRouter(sender); const isRecipIca = isAddressIcaRouter(recipient); if (isSenderIca && isRecipIca) return true; @@ -32,8 +30,13 @@ export function isIcaMessage({ } function isAddressIcaRouter(addr: Address) { - // TODO PI support - return ICA_ADDRESS && areAddressesEqual(addr, ICA_ADDRESS); + try { + // TODO PI support + return ICA_ADDRESS && areAddressesEqual(addr, ICA_ADDRESS); + } catch (error) { + logger.warn('Error checking if address is ICA router', error, addr); + return false; + } } export function tryDecodeIcaBody(body: string) {