From 14ce79a4321290f5c03e9bdb8fdd48c73ffffc17 Mon Sep 17 00:00:00 2001
From: Rushikesh Nimkar <rushikeshnimkar396@gmail.com>
Date: Thu, 22 Aug 2024 13:22:02 +0530
Subject: [PATCH 1/2] dvpnnft page error handling

---
 pages/dvpnnft.tsx | 49 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/pages/dvpnnft.tsx b/pages/dvpnnft.tsx
index 8f97945..8c20753 100644
--- a/pages/dvpnnft.tsx
+++ b/pages/dvpnnft.tsx
@@ -23,16 +23,23 @@ const BaliDVPNNFTPage = () => {
       setResponse(result.data);
       setError(null);
       
-      // Check if the response contains a transaction hash
+      // Check if the response contains a transaction hash or if status is 302
       if (result.data && result.data.transaction_hash) {
         setShowPopup(true);
+      } else if (result.status === 302) {
+        setShowPopup(true);
+        setResponse({ alreadyMinted: true });
       }
     } catch (err) {
-      setError('An error occurred while processing your request.');
-      setResponse(null);
+      if (err.response && err.response.status === 302) {
+        setShowPopup(true);
+        setResponse({ alreadyMinted: true });
+      } else {
+        setError('An error occurred while processing your request.');
+        setResponse(null);
+      }
     }
   };
-
   const renderResponse = () => {
     if (error) {
       return <p className="text-red-500 mt-4">{error}</p>;
@@ -53,21 +60,37 @@ const BaliDVPNNFTPage = () => {
   const renderPopup = () => {
     if (!showPopup) return null;
   
+    const isAlreadyMinted = response && response.alreadyMinted;
+  
     return (
       <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
         <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full mx-4">
           <div className="text-center">
             <div className="mb-4">
-              <svg className="mx-auto h-12 w-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-            </div>
-            <h2 className="text-2xl font-bold mb-4 text-gray-800">Success!</h2>
-            <p className="text-gray-600 mb-6">Your transaction was successful.</p>
-            <div className="bg-gray-100 p-3 rounded-lg mb-6">
-              <p className="text-sm font-medium text-gray-500">Transaction Hash:</p>
-              <p className="text-xs text-gray-700 break-all">{response.transaction_hash}</p>
+              {isAlreadyMinted ? (
+                <svg className="mx-auto h-12 w-12 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              ) : (
+                <svg className="mx-auto h-12 w-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+              )}
             </div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-800">
+              {isAlreadyMinted ? "Already Minted" : "Success!"}
+            </h2>
+            <p className="text-gray-600 mb-6">
+              {isAlreadyMinted 
+                ? "You have already minted an NFT with this wallet address."
+                : "Your transaction was successful."}
+            </p>
+            {!isAlreadyMinted && (
+              <div className="bg-gray-100 p-3 rounded-lg mb-6">
+                <p className="text-sm font-medium text-gray-500">Transaction Hash:</p>
+                <p className="text-xs text-gray-700 break-all">{response.transaction_hash}</p>
+              </div>
+            )}
             <button 
               onClick={() => setShowPopup(false)}
               className="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300"

From aafe29dd5f9db2b3f92117571fd2994b5394f572 Mon Sep 17 00:00:00 2001
From: Rushikesh Nimkar <rushikeshnimkar396@gmail.com>
Date: Thu, 22 Aug 2024 13:32:44 +0530
Subject: [PATCH 2/2] ui fix

---
 pages/dvpnnft.tsx | 92 +++++++++++++++++++++++++++++------------------
 1 file changed, 58 insertions(+), 34 deletions(-)

diff --git a/pages/dvpnnft.tsx b/pages/dvpnnft.tsx
index 8c20753..afbc16c 100644
--- a/pages/dvpnnft.tsx
+++ b/pages/dvpnnft.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Footer from "../components/Footer";
 import { BrowserView, MobileView } from 'react-device-detect';
 import axios from 'axios';
@@ -10,35 +10,54 @@ const BaliDVPNNFTPage = () => {
   const [response, setResponse] = useState(null);
   const [error, setError] = useState(null);
   const [showPopup, setShowPopup] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleWalletAddressChange = (event) => {
     setWalletAddress(event.target.value);
   };
 
   const handleGoClick = async () => {
-    try {
-      const result = await axios.post(`${REACT_APP_GATEWAY_URL}api/v1.0/dvpnnft`, {
-        wallet_address: walletAddress
-      });
-      setResponse(result.data);
-      setError(null);
-      
-      // Check if the response contains a transaction hash or if status is 302
-      if (result.data && result.data.transaction_hash) {
-        setShowPopup(true);
-      } else if (result.status === 302) {
-        setShowPopup(true);
-        setResponse({ alreadyMinted: true });
-      }
-    } catch (err) {
-      if (err.response && err.response.status === 302) {
-        setShowPopup(true);
-        setResponse({ alreadyMinted: true });
-      } else {
-        setError('An error occurred while processing your request.');
-        setResponse(null);
+    setIsLoading(true);
+    
+    setTimeout(async () => {
+      try {
+        const result = await axios.post(`${REACT_APP_GATEWAY_URL}api/v1.0/dvpnnft`, {
+          wallet_address: walletAddress
+        });
+        setResponse(result.data);
+        setError(null);
+        
+        if (result.data && result.data.transaction_hash) {
+          setShowPopup(true);
+        } else if (result.status === 302) {
+          setShowPopup(true);
+          setResponse({ alreadyMinted: true });
+        }
+      } catch (err) {
+        if (err.response && err.response.status === 302) {
+          setShowPopup(true);
+          setResponse({ alreadyMinted: true });
+        } else {
+          setError('An error occurred while processing your request.');
+          setResponse(null);
+        }
+      } finally {
+        setIsLoading(false);
       }
-    }
+    }, 3000); // 3 second delay
+  };
+
+  const renderLoadingAnimation = () => {
+    if (!isLoading) return null;
+
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50">
+        <div className=" bg-transparent p-8 rounded-lg shadow-lg">
+          <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+          <p className="mt-4 text-lg font-semibold text-gray-700">Processing...</p>
+        </div>
+      </div>
+    );
   };
   const renderResponse = () => {
     if (error) {
@@ -120,11 +139,12 @@ const BaliDVPNNFTPage = () => {
       />
       
       <button
-        onClick={handleGoClick}
-        className="bg-blue-800 hover:bg-blue-900 text-white font-bold py-3 px-6 rounded-full text-xl mb-6 "
-      >
-        GO
-      </button>
+            onClick={handleGoClick}
+            className="bg-blue-800 hover:bg-blue-900 text-white font-bold py-3 px-6 rounded-full text-xl mb-6"
+            disabled={isLoading}
+          >
+            {isLoading ? 'Processing...' : 'GO'}
+          </button>
 
       <div className="w-full max-w-xs my-10">
         <img src="/bali-dvpn-nft.jpeg" alt="Erebrus DVPN" className="rounded-lg" />
@@ -166,12 +186,14 @@ const BaliDVPNNFTPage = () => {
                   />
                 </div>
                 <div className='text-center'>
-                  <button
-                    type="submit"
-                    className="bg-[#1C126C] text-3xl text-white px-6 py-3 rounded-[40px] font-semibold hover:bg-indigo-600 transition duration-300"
-                  >
-                    GO
-                  </button>
+                <button
+              type="submit"
+              className="bg-[#1C126C] text-3xl text-white px-6 py-3 rounded-[40px] font-semibold hover:bg-indigo-600 transition duration-300"
+              onClick={handleGoClick}
+              disabled={isLoading}
+            >
+              {isLoading ? 'Processing...' : 'GO'}
+            </button>
                 </div>
               </form>
               {renderPopup()}
@@ -180,6 +202,8 @@ const BaliDVPNNFTPage = () => {
         </div>
 
    </BrowserView>
+   {renderLoadingAnimation()}
+   
    <Footer/>
    </>
   );