fix: ui , aptos price , usernode page

NetSepio · Aug 29, 2024 · a8bf898 · a8bf898
1 parent 8e6cb42
commit a8bf898
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 20 deletions.
diff --git a/components/price conversion/price.jsx b/components/price conversion/price.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import Cookies from "js-cookie";
 
 const CHAIN_CONFIG = {
-  apt: { id: "aptos", currency: "APT" },
+  apt: { id: "aptos", currency: "APT", fixedAmount: 1.11 },
   sui: { id: "sui", currency: "SUI" },
   evm: { id: "ethereum", currency: "ETH" },
   sol: { id: "solana", currency: "SOL" },
@@ -33,17 +33,22 @@ const CryptoPrice = () => {
   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 { id: cryptoId, currency, fixedAmount } = 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`);
+          if (chainSymbol === 'apt') {
+            const usdPrice = (fixedAmount * currentPrice).toFixed(2);
+            setDisplayText(`${fixedAmount} ${currency}/month `);
+          } else {
+            const cryptoAmount = (SUBSCRIPTION_PRICE_USD / currentPrice).toFixed(4);
+            setDisplayText(`${cryptoAmount} ${currency}/month`);
+          }
         } else {
           setDisplayText("");
         }

diff --git a/pages/plans.js b/pages/plans.js
@@ -10,6 +10,7 @@ const Plans = () => {
   const [erebrusWallet, setErebrusWallet] = useState(null);
   const [displayText, setDisplayText] = useState('1.11 APT/3 months');
   const [displayText2, setDisplayText2] = useState(' Pay by APT, crytocurrency or Fiat');
+  const [usdPrice, setUsdPrice] = useState('');
 
   const chainSymbol = Cookies.get('Chain_symbol');
   useEffect(() => {
@@ -22,23 +23,40 @@ const Plans = () => {
     if (wallet) {
       if (chainSym === 'sui') {
         setDisplayText('4.91 SUI/ 3 month');
-        setDisplayText2(' Pay by SUI, crytocurrency or Fiat')
+        setDisplayText2(' Pay by SUI, cryptocurrency or Fiat')
       } else if (chainSym === 'evm') {
         setDisplayText('0.0019 ETH/ 3 month');
-        setDisplayText2(' Pay by ETH, crytocurrency or Fiat')
-      }
-      else if (chainSym === 'peaq') {
+        setDisplayText2(' Pay by ETH, cryptocurrency or Fiat')
+      } else if (chainSym === 'peaq') {
         setDisplayText('0.0019 KRST/ 3 month');
-        setDisplayText2(' Pay by KRST, crytocurrency or Fiat')
+        setDisplayText2(' Pay by KRST, cryptocurrency or Fiat')
       } else if (chainSym === 'sol') {
         setDisplayText('0.035 SOL/ 3 month');
-        setDisplayText2(' Pay by SOL, crytocurrency or Fiat')
-      }else if (chainSym === 'google') {
+        setDisplayText2(' Pay by SOL, cryptocurrency or Fiat')
+      } else if (chainSym === 'google') {
         setDisplayText('$ 15/ 3 month');
-        setDisplayText2(' Pay by dollars, crytocurrency or Fiat')
+        setDisplayText2(' Pay by dollars, cryptocurrency or Fiat')
+      } else if (chainSym === 'apt') {
+        setDisplayText('1.11 APT/ 3 month');
+        setDisplayText2(' Pay by APT, cryptocurrency or Fiat')
+        // Fetch the current APT price and calculate USD equivalent
+        fetchAptPrice();
       }
     }
   }, []);
+
+  const fetchAptPrice = async () => {
+    try {
+      const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=aptos&vs_currencies=usd');
+      const data = await response.json();
+      const aptPrice = data.aptos.usd;
+      const usdEquivalent = (1.11 * aptPrice).toFixed(2);
+      setUsdPrice(usdEquivalent);
+    } catch (error) {
+      console.error('Error fetching APT price:', error);
+      setUsdPrice('N/A');
+    }
+  };
 
   const trialbuy = async () => {
     const auth = Cookies.get("erebrus_token");
@@ -82,7 +100,11 @@ const Plans = () => {
         <div className="bg-[#202333E5] rounded-[40px] p-6 sm:p-8 md:p-10 w-full max-w-md border-[2px] border-[#0162FF] text-white">
           <h2 className="text-xl sm:text-2xl text-[#5696FF] mb-4">Standard</h2>
           <CryptoPrice />
-          <p className="text-lg sm:text-xl font-light mb-4">$5.99/month</p>
+          {chainSym !== 'apt' ? (
+              <p className="text-lg sm:text-xl font-light mb-4">$5.99/month</p>
+            ) : (
+              <p className="text-lg sm:text-xl font-light mb-4">${usdPrice}/month</p>
+            )}
           <button className="bg-[#0162FF] text-white rounded-lg px-6 py-2 mb-4 w-2/8">
       7 days Free trial
       </button>

diff --git a/pages/subscription.tsx b/pages/subscription.tsx
@@ -232,9 +232,11 @@ const Subscription = () => {
   };
 
   const [isDataChecked, setIsDataChecked] = useState(false);
+  const loggedin = Cookies.get("erebrus_token");
+  const wallet = Cookies.get("erebrus_wallet");
 
   useEffect(() => {
-    if (!loading && isDataChecked && !nftdata && !trialsubscriptiondata) {
+    if (loggedin &&!loading && isDataChecked && !nftdata && !trialsubscriptiondata) {
       const redirectTimer = setTimeout(() => {
         router.push("/plans");
       }, 1000); // 1 second delay
@@ -404,8 +406,7 @@ const Subscription = () => {
   //   setregion(e.target.value);
   // };
 
-  const loggedin = Cookies.get("erebrus_token");
-  const wallet = Cookies.get("erebrus_wallet");
+
 
   const getAptosWallet = () => {
     if ("aptos" in window) {

diff --git a/pages/usernodes.tsx b/pages/usernodes.tsx
@@ -5,10 +5,10 @@ import { motion } from "framer-motion";
 
 const Dwifi = () => {
   return (
-    <div className="bg-gradient-to-b from-[#040819] via-[#092187] to-[#20253A] min-h-screen">
-      <div className="container mx-auto ">
+
+      <div className="  bg-gradient-to-b from-[#040819] via-[#092187] to-[#20253A]">
         <div
-          className="flex flex-col items-center justify-center lg:h-[40vw] mb-36 lg:mb-0 px-4  "
+          className="flex flex-col items-center justify-center lg:h-[40vw] mb-36 lg:mb-0   w-full h-full "
           style={{
             backgroundImage: 'url("/explorerhero.png")',
             backgroundSize: 'cover',
@@ -29,11 +29,12 @@ const Dwifi = () => {
           >
             <p>Discover data across your ÐWi-Fi network</p>
           </motion.h1>
-        </div>
+
       </div>
       <NodeDwifiStreamUser />
       <NodesDataStreamDvpn />
     </div>
+
   );
 };