useErrorMessage.ts

import { useDappStatus } from 'modules/web3';
import { useConnectorInfo } from 'reef-knot/core-react';
// TODO: to remove the 'reef-knot/web3-react' after it will be deprecated
import { helpers } from 'reef-knot/web3-react';
import { joinWithOr } from 'utils/join-with-or';
import { useAccount, useConnect } from 'wagmi';

export const useErrorMessage = (): string | undefined => {
  const { isLedger } = useConnectorInfo();
  const {
    isSupportedChain,
    isChainTypeMatched,
    isAccountActive,
    supportedChainLabels,
  } = useDappStatus();
  const { error } = useConnect();
  const { chainId } = useAccount();

  // Errors from chain state

  if (isAccountActive && !isChainTypeMatched) {
    return `Wrong network. Please switch to ${supportedChainLabels[chainId || 1]} in your wallet to wrap/unwrap.`;
  }

  if (!isSupportedChain) {
    const switchTo = joinWithOr(supportedChainLabels);

    return `Unsupported chain. Please switch to ${switchTo} in your wallet.`;
  }

  // errors from connection state

  if (!error) {
    return;
  }

  if (isLedger) {
    return helpers.interceptLedgerError(error).message;
  }

  return error?.message;
};