subscription: get collection image and name

NetSepio · Jan 22, 2024 · bb11cb6 · bb11cb6
1 parent c6b6255
commit bb11cb6
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git a/components/Myvpncard.tsx b/components/Myvpncard.tsx
@@ -7,6 +7,7 @@ import Cookies from "js-cookie";
 import QrCode from "./qrCode";
 import dlt from "../public/dlt.png";
 import Image from "next/image";
+import Link from "next/link";
 const REACT_APP_GATEWAY_URL = process.env.NEXT_PUBLIC_GATEWAY_URL;
 
 interface ReviewCardProps {
@@ -155,9 +156,7 @@ const MyVpnCard: React.FC<ReviewCardProps> = ({
           <div className="lg:flex md:flex justify-between w-1/4">
             <div>
               <button className="text-lg rounded-lg pr-1 text-white">
-                <a target="_blank" style={color2}>
-                  {metaData.name}
-                </a>
+                <div style={color2}>{metaData.name}</div>
               </button>
             </div>
           </div>
@@ -268,8 +267,20 @@ const MyVpnCard: React.FC<ReviewCardProps> = ({
                 name={metaData.name}
                 region={metaData.region}
               />
-              <div className="text-gray-300 mb-4">On your mobile, open the WireGuard app, and use the option to add a new connection by scanning a QR code. After scanning, the app will import the configuration. You can then connect to Erebrus VPN through the WireGuard app.</div>
-            <a href="https://www.wireguard.com/" target="_blank" className="text-green-500 font-bold px-4 rounded-lg pb-2 pt-1" style={{border:"1px solid white"}}>Wireguard</a>
+              <div className="text-gray-300 mb-4">
+                On your mobile, open the WireGuard app, and use the option to
+                add a new connection by scanning a QR code. After scanning, the
+                app will import the configuration. You can then connect to
+                Erebrus VPN through the WireGuard app.
+              </div>
+              <Link
+                href="https://www.wireguard.com/"
+                target="_blank"
+                className="text-green-500 font-bold px-4 rounded-lg pb-2 pt-1"
+                style={{ border: "1px solid white" }}
+              >
+                Wireguard
+              </Link>
             </div>
           </div>
         </div>

diff --git a/components/NftDataContainer.tsx b/components/NftDataContainer.tsx
@@ -1,8 +1,8 @@
 // ReviewContainer.tsx
-"use client"
+"use client";
 import React from "react";
 import NftdataCard from "./NftdataCard";
-import Link from 'next/link';
+import Link from "next/link";
 // import { useEffect, useState } from "react";
 
 interface MyReviewContainerProps {
@@ -27,22 +27,20 @@ const NftdataContainer: React.FC<MyReviewContainerProps> = ({
   //   call();
   // }, []);
 
-  const handleClick = (collection_id: string) => {
+  const handleClick = (
+    collection_id: string,
+    token_name: string,
+    cdn_image_uri: string
+  ) => {
     // Call the function passed as prop to change parent state
-    selectCollection(collection_id);
+    selectCollection(collection_id, token_name, cdn_image_uri);
   };
   const renderNoReviewsFound = () => (
     <div className="w-full text-center py-20">
-      <h2 className="text-4xl font-bold text-white">
-        No NFTs
-      </h2>
-      <div
-            className="bg-blue-500 text-white font-bold py-4 px-6 rounded-lg w-1/5 mx-auto my-20"
-          >
-            <Link href="/mint">
-              Mint Now
-            </Link>
-          </div>
+      <h2 className="text-4xl font-bold text-white">No NFTs</h2>
+      <div className="bg-blue-500 text-white font-bold py-4 px-6 rounded-lg w-1/5 mx-auto my-20">
+        <Link href="/mint">Mint Now</Link>
+      </div>
     </div>
   );
 
@@ -67,7 +65,11 @@ const NftdataContainer: React.FC<MyReviewContainerProps> = ({
                 key={index}
                 className="py-2 flex"
                 onClick={() =>
-                  handleClick(metaData.current_token_data.token_data_id)
+                  handleClick(
+                    metaData.current_token_data.token_data_id,
+                    metaData.current_token_data.token_name,
+                    metaData.current_token_data.cdn_asset_uris.cdn_image_uri
+                  )
                 }
               >
                 <NftdataCard

diff --git a/pages/subscription.tsx b/pages/subscription.tsx
@@ -79,6 +79,8 @@ const Subscription = () => {
   const [about, setabout] = useState<boolean>(false);
   const [collectionsPage, setcollectionsPage] = useState<boolean>(true);
   const [collectionId, setcollectionId] = useState<string>();
+  const [collectionName, setcollectionName] = useState<string>();
+  const [collectionImage, setcollectionImage] = useState<string>();
   const [vpnPage, setvpnPage] = useState<boolean>(false);
   //const txtvalue = localStorage.getItem("txtvalue");
 
@@ -470,8 +472,14 @@ const Subscription = () => {
     }
   };
 
-  const handleCollectionClick = (collection) => {
+  const handleCollectionClick = (
+    collection,
+    collectionName,
+    collectionImage
+  ) => {
     setcollectionId(collection);
+    setcollectionName(collectionName);
+    setcollectionImage(collectionImage);
     setvpnPage(true);
     setcollectionsPage(false);
   };