feat: Enhance airdrop error handling in useAirdrop hook with user-friendly messages and wallet connection check (#4)

Author: askov

client/src/components/Wallet/hooks/useAirdrop.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import type { PublicKey } from "@solana/web3.js";
 
 import { Emoji } from "../../../constants";
 import {
@@ -24,12 +25,16 @@ export const useAirdrop = () => {
     await PgTerminal.process(async () => {
       if (!airdropAmount) return;
 
+      if (!PgWallet.current) {
+        throw new Error("Wallet is not connected.");
+      }
+
       let msg;
       try {
         PgTerminal.println(PgTerminal.info("Sending an airdrop request..."));
 
         const conn = PgConnection.current;
-        const walletPk = PgWallet.current!.publicKey;
+        const walletPk = PgWallet.current.publicKey;
 
         // Airdrop tx is sometimes successful even when the balance hasn't
         // changed. To solve this, we check before and after balance instead
@@ -55,8 +60,11 @@ export const useAirdrop = () => {
             "Error receiving airdrop."
           )}`;
         }
-      } catch (e: any) {
-        const convertedError = PgTerminal.convertErrorMessage(e.message);
+      } catch (error: unknown) {
+        const convertedError = convertAirdropErrorMessage(error, {
+          walletPublicKey: PgWallet.current.publicKey,
+          airdropAmount: airdropAmount,
+        });
         msg = `${Emoji.CROSS} ${PgTerminal.error(
           "Error receiving airdrop:"
         )}: ${convertedError}`;
@@ -68,3 +76,51 @@ export const useAirdrop = () => {
 
   return { airdrop, airdropCondition: !!airdropAmount };
 };
+
+function convertAirdropErrorMessage(
+  error: unknown,
+  params: { walletPublicKey: PublicKey; airdropAmount: number }
+): string {
+  // Case 0: Not expected, return something debuggable.
+  if (!(error instanceof Error)) return String(error);
+
+  const { message } = error;
+  const { walletPublicKey, airdropAmount } = params;
+
+  // Case 1: Internal error is clean, but not user-friendly;
+  // so enhance the message with instructions, keeping the original message.
+  if (message.toLowerCase().includes("internal error")) {
+    return createUserFriendlyErrorMessage(message, {
+      walletPublicKey,
+      airdropAmount,
+    });
+  }
+
+  // Case 2: User friendly message is presented, but the format is ugly and contains technical details.
+  // Use the cleaned message instead of the original message, enhanced with instructions.
+  const helpfulErrorMessages = [
+    "You've either reached your airdrop limit today or the airdrop faucet has run dry.",
+  ];
+  const helpfulMessage = helpfulErrorMessages.find((helpfulMessage) =>
+    message.includes(helpfulMessage)
+  );
+  if (helpfulMessage) {
+    return createUserFriendlyErrorMessage(helpfulMessage, {
+      walletPublicKey,
+      airdropAmount,
+    });
+  }
+
+  // Case 3: Use more generic message converter
+  return PgTerminal.convertErrorMessage(message);
+}
+
+function createUserFriendlyErrorMessage(
+  originalMessage: string,
+  params: { walletPublicKey: PublicKey; airdropAmount: number }
+) {
+  const { walletPublicKey, airdropAmount } = params;
+  const link = `https://faucet.solana.com/?walletAddress=${walletPublicKey.toBase58()}&amount=${airdropAmount}`;
+  const instruction = `Try requesting devnet SOL from Faucet (pre-filled with your wallet):\n${link}`;
+  return `${originalMessage}\n${instruction}`;
+}