fix: show faucet return error and reset captcha (#407)

packages/app/src/systems/Faucet/components/FaucetApp.tsx

@@ -1,4 +1,5 @@
 import cx from "classnames";
+import { useState } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
 
 import { useCaptcha, useFaucet } from "../hooks";
@@ -16,7 +17,13 @@ export function FaucetApp({
   isLoading,
   onSuccess,
 }: FaucetAppProps) {
-  const faucet = useFaucet({ onSuccess });
+  // We need to re-render the captcha widget when it faucet
+  // endpoint fails and need to retrigger the captcha.
+  const [version, setVersion] = useState(0);
+  const faucet = useFaucet({
+    onSuccess,
+    onError: () => setVersion(version + 1),
+  });
   const captcha = useCaptcha();
 
   return (
@@ -34,7 +41,7 @@ export function FaucetApp({
               "is-hidden": captcha.isLoading,
             })}
           >
-            <ReCAPTCHA {...captcha.getProps()} />
+            <ReCAPTCHA key={version} {...captcha.getProps()} />
           </div>
           {captcha.isFailed && (
             <div className="faucetCaptcha--error">

packages/app/src/systems/Faucet/hooks/useFaucet.ts

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { useMutation, useQuery } from 'react-query';
 
 import { FUEL_FAUCET_URL } from '~/config';
-import { useBalances, useWallet } from '~/systems/Core';
+import { handleError, useBalances, useWallet } from '~/systems/Core';
 import type { Maybe } from '~/types';
 import { Queries } from '~/types';
 
@@ -22,6 +22,7 @@ export async function fetchFaucet(input: RequestInit) {
 
 type UseFaucetOpts = {
   onSuccess?: () => void;
+  onError?: () => void;
 };
 
 export function useFaucet(opts: UseFaucetOpts = {}) {
@@ -49,6 +50,10 @@ export function useFaucet(opts: UseFaucetOpts = {}) {
         await balances.refetch();
         opts.onSuccess?.();
       },
+      onError: (err) => {
+        handleError(err);
+        opts.onError?.();
+      },
     }
   );