Improve Error Message for Failed Wallet Connections in Mobile Browsers

[0xShankar]

Description:
When using WalletConnect on mobile browsers, users often encounter generic error messages like "Connection failed" when a wallet connection does not go through. This error message lacks context and doesn’t explain why the connection failed, leaving users confused. It would be more helpful to display a specific error message based on the root cause (e.g., network not supported, wallet timeout, or user rejection).

Steps to Reproduce:
Open a DApp that uses WalletConnect on a mobile browser.
Attempt to connect a wallet.
If the connection fails (due to network issues or user rejection), observe the error message displayed.

Expected Behavior:
Instead of a generic "Connection failed" message, display a more specific error message based on the reason for failure. For example:

"Network not supported. Please switch to Ethereum Mainnet."
"Wallet connection timeout. Please try again."
"User rejected the connection request."

Proposed Solution:
Error Categorization: Modify the handleError function in the walletconnect-monorepo repository to categorize errors and map them to specific, user-friendly messages.

Error Message Mapping:

Add a new utility function that checks the error type (e.g., network issue, user rejection, wallet timeout) and returns a specific message.

Example:

function getErrorMessage(error) {
  if (error.type === 'network') {
    return "Network not supported. Please switch to Ethereum Mainnet.";
  } else if (error.type === 'timeout') {
    return "Wallet connection timeout. Please try again.";
  } else if (error.type === 'user_rejected') {
    return "User rejected the connection request.";
  } else {
    return "Connection failed. Please try again.";
  }
}

UI Enhancement:

Ensure that this specific error message is displayed in the modal or toast that appears when the connection fails

[linear]

CR-536 Improve Error Message for Failed Wallet Connections in Mobile Browsers