From 96ce02edc80218bf7415423944fa2d55e98c538e Mon Sep 17 00:00:00 2001
From: Lucemans <luc@lucemans.nl>
Date: Fri, 15 Nov 2024 12:21:12 +0100
Subject: [PATCH] Introduce loading page & error handling

---
 web/package.json   |  1 +
 web/pnpm-lock.yaml | 12 ++++++++++++
 web/src/App.tsx    | 22 +++++++++++++++++++---
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/web/package.json b/web/package.json
index f7e0f44..3146d1f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -22,6 +22,7 @@
         "postcss-nested": "^6.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "tailwindcss": "^3.3.3",
         "vite": "^5.4.11"
     },
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 9df6364..1bf6819 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-icons:
+        specifier: ^5.3.0
+        version: 5.3.0(react@18.3.1)
       tailwindcss:
         specifier: ^3.3.3
         version: 3.4.15
@@ -1408,6 +1411,11 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-icons@5.3.0:
+    resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
+    peerDependencies:
+      react: '*'
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -3095,6 +3103,10 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-icons@5.3.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 2fb713f..578ffcc 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,11 +1,12 @@
 import './global.css';
 
 import { useMutation } from '@tanstack/react-query';
+import { FiLoader } from 'react-icons/fi';
 
 export const BACKEND_URL = 'https://music-poap-distributor.c5.v3x.systems';
 
 export const App = () => {
-    const { mutate } = useMutation({
+    const { mutate, isPending, isError, error } = useMutation({
         mutationFn: async () => {
             const response = await fetch(`${BACKEND_URL}/poap`, {
                 method: 'POST',
@@ -18,7 +19,11 @@ export const App = () => {
 
             if (response.ok) {
                 window.location.href = data.url;
+
+                return;
             }
+
+            throw new Error(data.error);
         },
     });
 
@@ -36,11 +41,22 @@ export const App = () => {
                 </div>
                 <p>Click the button below to claim your POAP.</p>
                 <button
-                    className="bg-ens-light-blue-primary w-full text-ens-light-background-primary px-4 py-2 rounded-md block"
+                    className="bg-ens-light-blue-primary flex justify-between items-center w-full text-ens-light-background-primary px-4 py-2 rounded-md disabled:opacity-50"
+                    disabled={isPending}
                     onClick={() => mutate()}
                 >
-                    Claim POAP
+                    <span></span>
+                    <span>Claim POAP</span>
+                    <span>
+                        {isPending && <FiLoader className="animate-spin" />}
+                    </span>
                 </button>
+                {isError && (
+                    <div className="text-red-500">
+                        <p className="font-bold">Error claiming POAP</p>
+                        <p>{error.message}</p>
+                    </div>
+                )}
             </div>
         </div>
     );