Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Merging main with prod #103

Merged
merged 4 commits into from
Aug 22, 2024
Merged

Merging main with prod #103

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
14ce79a
dvpnnft page error handling
Rushikeshnimkar Aug 22, 2024
72b00b1
Merge pull request #101 from NetSepio/rushikesh-subscription
Rushikeshnimkar Aug 22, 2024
aafe29d
ui fix
Rushikeshnimkar Aug 22, 2024
12a0f85
Merge pull request #102 from NetSepio/rushikesh-subscription
Rushikeshnimkar Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 82 additions & 35 deletions pages/dvpnnft.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -10,29 +10,55 @@ 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
if (result.data && result.data.transaction_hash) {
setShowPopup(true);
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);
}
} catch (err) {
setError('An error occurred while processing your request.');
setResponse(null);
}
}, 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) {
return <p className="text-red-500 mt-4">{error}</p>;
Expand All @@ -53,21 +79,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"
Expand Down Expand Up @@ -97,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" />
Expand Down Expand Up @@ -143,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()}
Expand All @@ -157,6 +202,8 @@ const BaliDVPNNFTPage = () => {
</div>

</BrowserView>
{renderLoadingAnimation()}

<Footer/>
</>
);
Expand Down
Loading