formatted errors toast

gnosischain · Mar 4, 2024 · e68bb89 · e68bb89
1 parent 0f76f90
commit e68bb89
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 25 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -22,7 +22,7 @@ function App(): JSX.Element {
     return axios.get(`${process.env.REACT_APP_FAUCET_API_URL}/info`)
   }
 
-  console.log(enabledTokens.length)
+  // console.log(enabledTokens.length)
 
   useEffect(() => {
     getFaucetInfo()
@@ -34,12 +34,12 @@ function App(): JSX.Element {
         toast.error("Network error")
       })
       .finally(() => {
-        setTimeout(()=> {
-          setLoading(false)
-          setFaucetLoading(false)
-        }, 2000)
-        // setFaucetLoading(false)
-        // setLoading(false)
+        // setTimeout(()=> {
+        //   setLoading(false)
+        //   setFaucetLoading(false)
+        // }, 2000)
+        setFaucetLoading(false)
+        setLoading(false)
       })
   }, [])
 
@@ -48,18 +48,18 @@ function App(): JSX.Element {
     ? "Loading..."
     : (chainId === "100" ? "Faucet" : "Testnet Faucet")
 
-  const enabledTokens1 = [
-    {
-      address: "0x01",
-      name: "GNO",
-      maximumAmount: 2,
-    },
-    {
-      address: "0x02",
-      name: "xDAI",
-      maximumAmount: 10,
-    }
-  ]
+  // const enabledTokens1 = [
+  //   {
+  //     address: "0x01",
+  //     name: "GNO",
+  //     maximumAmount: 2,
+  //   },
+  //   {
+  //     address: "0x02",
+  //     name: "xDAI",
+  //     maximumAmount: 10,
+  //   }
+  // ]
 
   return (
     <>
@@ -80,7 +80,7 @@ function App(): JSX.Element {
         </div>
         <Faucet
           chainId={chainId}
-          enabledTokens={enabledTokens1}
+          enabledTokens={enabledTokens}
           setLoading={setLoading}
         />
       </div>

diff --git a/app/src/components/FaucetForm/Faucet.css b/app/src/components/FaucetForm/Faucet.css
@@ -1,7 +1,7 @@
 .faucet-container {
   display: flex;
   flex-direction: column;
-  align-items: end;
+  align-items: flex-end;
   max-width: 500px;
   background: rgba(62, 105, 87, 0.7);
   border-radius: 10px;

diff --git a/app/src/components/FaucetForm/Faucet.tsx b/app/src/components/FaucetForm/Faucet.tsx
@@ -27,6 +27,14 @@ function Faucet({ enabledTokens, chainId, setLoading }: FaucetProps): JSX.Elemen
     return () => window.removeEventListener("resize", handleResize)
   }, [])
 
+  function formatErrors(errors: string[]) {
+    return (
+      <div>
+        { errors.map((item, index) => <div key={index}>{item}</div>)}
+      </div>
+    )
+  }
+
   const handleChangeAddress = (event: ChangeEvent<HTMLInputElement>) => {
     setWalletAddress(event.target.value)
   }
@@ -67,16 +75,14 @@ function Faucet({ enabledTokens, chainId, setLoading }: FaucetProps): JSX.Elemen
             setTxHash(`${response.data.transactionHash}`)
           })
           .catch((error) => {
-            console.log(error)
-            toast.error(error.message ?? "Network error")
+            toast.error(formatErrors(error.response.data.errors))
           })
       } catch (error) {
         if (error instanceof Error) {
           toast.error(error.message)
         }
       } finally {
-        // setLoading(false)
-        setTimeout(()=> {setLoading(false)}, 2000)
+        setLoading(false)
       }
     }
   }