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

add : dynamic price #112

Merged
merged 1 commit into from
Aug 25, 2024
Merged

add : dynamic price #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
74 changes: 74 additions & 0 deletions components/price conversion/price.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import React, { useState, useEffect, useCallback } from "react";
import Cookies from "js-cookie";

const CHAIN_CONFIG = {
apt: { id: "aptos", currency: "APT" },
sui: { id: "sui", currency: "SUI" },
evm: { id: "ethereum", currency: "ETH" },
sol: { id: "solana", currency: "SOL" },
peaq: { id: "krest", currency: "KREST" },
};

const DEFAULT_CHAIN = "apt";
const SUBSCRIPTION_PRICE_USD = 5.99;

const CryptoPrice = () => {
const [price, setPrice] = useState(null);
const [displayText, setDisplayText] = useState("");
const [isLoading, setIsLoading] = useState(true);

const fetchPrice = useCallback(async (cryptoId) => {
try {
const response = await fetch(
`https://api.coingecko.com/api/v3/simple/price?ids=${cryptoId}&vs_currencies=usd`
);
const data = await response.json();
return data[cryptoId]?.usd;
} catch (error) {
console.error("Error fetching crypto price:", error);
return null;
}
}, []);

useEffect(() => {
const chainSymbol = Cookies.get("Chain_symbol") || DEFAULT_CHAIN;
const wallet = Cookies.get("erebrus_token");
const { id: cryptoId, currency } = CHAIN_CONFIG[chainSymbol] || CHAIN_CONFIG[DEFAULT_CHAIN];

const updatePrice = async () => {
setIsLoading(true);
const currentPrice = await fetchPrice(cryptoId);
if (currentPrice) {
setPrice(currentPrice.toFixed(2));
const cryptoAmount = (SUBSCRIPTION_PRICE_USD / currentPrice).toFixed(4);

if (wallet) {
setDisplayText(`${cryptoAmount} ${currency}/month`);
} else {
setDisplayText("");
}
} else {
setPrice("N/A");
setDisplayText("");
}
setIsLoading(false);
};

updatePrice();
const interval = setInterval(updatePrice, 60000); // Update every minute

return () => clearInterval(interval);
}, [fetchPrice]);

return (
<div className="container mb-1">
{isLoading ? (
<p className="text-white mt-4 text-3xl font-semibold">Loading...</p>
) : displayText ? (
<p className="text-white mt-4 text-3xl font-semibold">{displayText}</p>
) : null}
</div>
);
};

export default CryptoPrice;
112 changes: 42 additions & 70 deletions pages/plans.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import Link from "next/link";
import Cookies from "js-cookie";
import CryptoPrice from "../components/price conversion/price";
const EREBRUS_GATEWAY_URL = process.env.NEXT_PUBLIC_EREBRUS_BASE_URL;

const Plans = () => {
Expand Down Expand Up @@ -78,77 +79,33 @@ const Plans = () => {
</div>

<div className="lg:flex mt-10 mx-auto justify-center gap-10">
{(chainSymbol=="apt" || chainSymbol=='sol' ) &&(

<div className="bg-[#202333E5] rounded-3xl p-10 w-full border-[2px] border-[#0162FF] md:w-5/12 lg:w-4/12 text-white"
>
<h2 className="text-2xl font-semibold text-[#5696FF] mb-4">NFT</h2>
<p className="text-2xl mb-4">{displayText}</p>
<button className="bg-[#0162FF] text-white rounded-lg px-4 py-2 mb-4 w-2/3">
Start Your Plan Now
</button>
<div className="flex gap-10 mb-4 w-1/2">
<button className="bg-white text-black rounded py-1 text-sm flex-1">
Pay with Crypto
</button>
{/* <button className="bg-white text-black rounded text-sm py-1 flex-1">
Pay with Credit Card
</button> */}
</div>
<ul className="space-y-2">
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Limited collection of only 111
</li>
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Tradable with VPN access benefits
</li>
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Unlimited Clients
</li>
{/* <li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Access and submit reviews
</li>
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
AI insights, web summary & critical alerts
</li>
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Mobile app
</li> */}
</ul>
<button className="bg-[#0162FF] text-white px-2 py-5 rounded-full mt-32 w-3/4 ml-10 ">
<Link
href="/mint">
Mint NFT
</Link>
</button>
</div>
)}

<div className="bg-[#202333E5] rounded-3xl p-10 w-full border-[2px] border-[#0162FF] md:w-5/12 lg:w-4/12 text-white"


<div className="bg-[#202333E5] rounded-[40px] p-10 w-full border-[2px] border-[#0162FF] md:w-5/12 lg:w-4/12 text-white"
>
<h2 className="text-2xl font-semibold text-[#5696FF] mb-4">Standard</h2>
<p className="text-2xl mb-4">$5.99/month</p>
<button className="bg-[#0162FF] text-white rounded-lg px-4 py-2 mb-4 w-2/3">
Start Free Trial for 7 Days
<h2 className="text-2xl text-[#5696FF] mb-4">Standard</h2>
<CryptoPrice/>
<p className="text-xl font-light mb-4">$5.99/month</p>
<button className="bg-[#0162FF] text-white rounded-lg px-4 py-2 mb-4 w-2/8">
7 days Free trial
</button>
<div className="flex gap-10 mb-4">
<button className="bg-white text-black rounded py-1 text-sm flex-1">
Pay with Crypto
</button>
<button className="bg-white text-black rounded text-sm py-1 flex-1">
Pay with Credit Card
</button>
</div>
<div className="flex gap-5 w-5/6 mb-4">
<button className="bg-white text-black rounded py-1 text-sm flex-1 md:w-2/5 lg:w-2/3">
Pay with Crypto
</button>
<button
className="bg-white text-black rounded text-sm py-1 flex-1 md:w-3/5 lg:w-4/5 opacity-50 cursor-not-allowed"
disabled
>
Pay with Credit Card
</button>

</div>

<ul className="space-y-2">
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Decentralized Wi-Fi
Decentralized Wi-Fi (Pay for what you use)
</li>
<li className="flex items-center">
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
Expand All @@ -171,11 +128,26 @@ const Plans = () => {
Mobile app
</li>
</ul>
<button className="bg-[#0162FF] text-white px-2 py-5 rounded-full mt-6 w-3/4 ml-10 "
onClick={trialbuy}>
Start Free Trial
</button>
<div className="flex gap-5">
<button
className="border-2 border-[#0162FF] text-white text-lg bg-transparent px-auto py-2 rounded-[10px] mt-10 w-1/2 focus:outline-none focus:ring-2 focus:ring-[#0162FF] focus:ring-offset-2"
onClick={trialbuy}
>
Start Free Trial
</button>
<button
className="bg-white text-black text-lg border-2 border-white px-auto py-2 rounded-[10px] mt-10 w-1/2 focus:outline-none"
>
<Link href="/mint">
Mint NFT Now
</Link>
</button>
</div>

</div>




</div>
</div>
Expand Down
30 changes: 27 additions & 3 deletions pages/subscription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { lib, enc } from "crypto-js";
import { generateKeyPair } from "curve25519-js";
import { Network } from "@aptos-labs/ts-sdk";
import Button from "../components/Button";
import { useRouter } from 'next/router';
import SingleSignerTransaction from "../components/transactionFlow/SingleSigner";
const REACT_APP_GATEWAY_URL = process.env.NEXT_PUBLIC_GATEWAY_URL;
const EREBRUS_GATEWAY_URL = process.env.NEXT_PUBLIC_EREBRUS_BASE_URL;
Expand Down Expand Up @@ -70,7 +71,7 @@ const Subscription = () => {
const [trialsubscriptiondata, settrialsubscriptiondata] = useState<any>(null);
const [selectedIndex, setSelectedIndex] = useState(null);
const { account, connected, network, signMessage } = useWallet();

const router = useRouter();
let sendable = isSendableNetwork(connected, network?.name);

const bg = {
Expand Down Expand Up @@ -229,6 +230,26 @@ const Subscription = () => {
}
};

const [isDataChecked, setIsDataChecked] = useState(false);

useEffect(() => {
if (!loading && isDataChecked && !nftdata && !trialsubscriptiondata) {
const redirectTimer = setTimeout(() => {
router.push('/plans');
}, 1000); // 1 second delay

// Cleanup the timer if the component unmounts
return () => clearTimeout(redirectTimer);
}
}, [nftdata, trialsubscriptiondata, loading, isDataChecked]);

useEffect(() => {
if (!loading && nftdata !== undefined && trialsubscriptiondata !== undefined) {
setIsDataChecked(true);
}
}, [loading, nftdata, trialsubscriptiondata]);


useEffect(() => {
const fetchProjectsData = async () => {
setLoading(true);
Expand Down Expand Up @@ -708,6 +729,7 @@ const Subscription = () => {
(node) => node.region === regionname
);
console.log("Filtered nodes based on region:", filteredNodes, regionname);


if (!loggedin) {
return (
Expand Down Expand Up @@ -752,6 +774,8 @@ const Subscription = () => {
);
}



return (
<div className="py-0 min-h-screen">
<section className="">
Expand All @@ -762,7 +786,7 @@ const Subscription = () => {
<div className="text-2xl text-white font-semibold text-left ml-4 my-6 border-b border-gray-700 pb-4">
Subscription
</div>
{!nftdata && !trialsubscriptiondata && !loading && (
{/* {!nftdata && !trialsubscriptiondata && !loading && (
<div className="mx-auto px-4 min-h-screen">
<div className="w-full text-center py-20">
<h2 className="text-4xl font-bold text-white">
Expand All @@ -773,7 +797,7 @@ const Subscription = () => {
</div>
</div>
</div>
)}
)} */}

{loading && (
<div
Expand Down