Merge pull request #36 from hyperlane-xyz/message-error-handling

- Catch error when checking for ICA address
- Implement basic error screen UI
pull/39/head
J M Rossy 2 years ago committed by GitHub
commit fc805c0d8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 23
      src/components/errors/ErrorBoundary.tsx
  2. 4
      src/features/messages/MessageDetails.tsx
  3. 19
      src/features/messages/ica.ts

@ -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<any, ErrorBoundaryState> {
const errorInfo = this.state.error || this.state.errorInfo;
if (errorInfo) {
const details = errorInfo.message || JSON.stringify(errorInfo);
// TODO
return <div>{details}</div>;
return (
<div className="w-screen h-screen flex 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;
}

@ -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

@ -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) {
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) {

Loading…
Cancel
Save