update : ui

NetSepio · Oct 1, 2024 · 2d03fda · 2d03fda
1 parent b66f414
commit 2d03fda
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 19 deletions.
diff --git a/components/Mintbox.tsx b/components/Mintbox.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react';
+import { FiPlus } from 'react-icons/fi';
+import { motion } from 'framer-motion';
+import { useRouter } from 'next/router';
+
+export default function Mintbox() {
+  const router = useRouter();
+
+  const handleNavigate = () => {
+    router.push('/mint');
+  };
+
+  return (
+    <div className="relative">
+      <motion.div
+        initial={{ opacity: 0, x: -20 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.3 }}
+        className="absolute top-0 right-full mr-4 w-[400px] z-10"
+      >
+        <div className="bg-[#202333] border border-[#0162FF] rounded-3xl p-6 w-full h-[350px] flex flex-col shadow-2xl">
+          <h2 className="text-2xl font-semibold text-white mb-4">Mint</h2>
+          <div 
+            className="flex-shrink-0 flex flex-col items-center justify-center border-2 border-dashed border-[#0162FF] rounded-xl p-6 mb-4 cursor-pointer"
+            onClick={handleNavigate}
+          >
+            <FiPlus className="text-[#0162FF] text-6xl mb-4" />
+            <p className="text-white text-lg mb-2">Click to navigate to Mint page</p>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/components/NftdataCard.tsx b/components/NftdataCard.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 // import { removePrefix } from "../utils/ipfsUtil";
 import React, {useEffect} from "react";
 import axios from "axios";
-// import eye2 from "../public/eye2.png";
+import { FaPaperclip } from "react-icons/fa";
 import Image from "next/image";
 
 interface ReviewCardProps {
@@ -139,7 +139,17 @@ const NftdataCard: React.FC<ReviewCardProps> = ({
 
   return (
     <div className="w-full cursor-pointer rounded-3xl" style={{ backgroundColor:'#202333', border: '1px solid #0162FF'}}>
-      <div className="w-full h-full rounded-lg p-6">
+      <div className="w-full h-full rounded-lg p-6 relative">
+        {chainSymbol === 'sol' && (
+          <div className="absolute top-2 left-2 flex items-center">
+            <img
+              src="./solanaicon.png" // Update with the correct path to your Solana icon
+              alt="Solana Icon"
+              className="w-10 h-10 rounded-full"
+            />
+
+          </div>
+        )}
         <div>
           <div className="flex flex-col">
             <div className="">
@@ -159,6 +169,14 @@ const NftdataCard: React.FC<ReviewCardProps> = ({
                   <div className="text-xl font-semibold mt-4">
                     {metaData.current_token_data.token_name}
                   </div>
+                  <a
+              href={`https://explorer.solana.com/tx/dyu7uefnn2Y2bKCDu6uTP4pVBPcBu4RPwsV522rjtbR6B2BJyA4vWC4eLGosDXqPzMpXsaBgzbE8VjqMkaYgf6g?cluster=devnet  -- <@748192618659315753>`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-5 text-white"
+            >
+              <FaPaperclip size={20} />
+            </a>
                 </div>
               </h3>
 
@@ -171,20 +189,23 @@ const NftdataCard: React.FC<ReviewCardProps> = ({
               </div>
 
               {attributes && chainSymbol === 'sol' && (
-          <div className="flex-wrap flex gap-2 text-xs text-white justify-center  rounded-full px-4 py-2 mt-4" style={{backgroundColor:'#0162FF'}}>
-            {attributes.map((attr, index) => (
-              <div key={index} className="">{attr.value}</div>
-            ))}
-          </div>
-        )}
+
+                <div className="flex-wrap flex gap-2 text-xs text-white justify-center rounded-full px-4 py-2 mt-4" style={{backgroundColor:'#0162FF'}}>
+                  {attributes.map((attr, index) => (
+                    <div key={index} className="">{attr.value}</div>
+                  ))}
+
+                </div>
+
+              )}
 
-        {attributes && chainSymbol !== 'sol' && (
-          <div className="flex-wrap flex gap-2 text-xs text-white  rounded-full px-4 py-2 mt-4" style={{backgroundColor:'#0162FF'}}>
-            {Object.entries(attributes).map(([key, value]) => (
-              <div key={key} className="ml-4">{key}: {value.toString()}</div>
-            ))}
-          </div>
-        )}
+              {attributes && chainSymbol !== 'sol' && (
+                <div className="flex-wrap flex gap-2 text-xs text-white rounded-full px-4 py-2 mt-4" style={{backgroundColor:'#0162FF'}}>
+                  {Object.entries(attributes).map(([key, value]) => (
+                    <div key={key} className="ml-4">{key}: {value.toString()}</div>
+                  ))}
+                </div>
+              )}
             </div>
           </div>
         </div>

diff --git a/components/UserNFTs.tsx b/components/UserNFTs.tsx
@@ -29,7 +29,7 @@ const fetchUserNFTs = async (userAddress: string, chainSymbol: string) => {
       const userNFTs = await metaplex.nfts().findAllByOwner({ owner: ownerPublicKey });
       console.log('All user NFTs:', userNFTs);
 
-      const erebrusNFTs = userNFTs.filter(nft => nft.name === "Erebrus Community NFT").map(nft => ({
+      const erebrusNFTs = userNFTs.filter(nft => nft.symbol === "EVPN").map(nft => ({
         amount: 1,
         current_token_data: {
           token_name: nft.name,

diff --git a/pages/mint.js b/pages/mint.js
@@ -251,7 +251,7 @@ const Mint = () => {
       const umiWithWallet = umi.use(walletAdapterIdentity(solanaWallet))
                                .use(mplTokenMetadata());
 
-      const metadataUri = "https://gateway.pinata.cloud/ipfs/QmX8Z8DT3vRSVyLyzTos1EVuTbWSgvWgCEPGL5vAgt95p4";
+      const metadataUri = "https://gateway.pinata.cloud/ipfs/QmNnMvEMnwNH9XhB1triVkVc1qVknV6dx61adDSSTFn54T";
       console.log("Using metadata URI:", metadataUri);
 
       // Fetch and log the metadata to verify its contents
@@ -271,7 +271,7 @@ const Mint = () => {
       const mint = generateSigner(umiWithWallet);
       const { signature } = await createNft(umiWithWallet, {
         mint,
-        name: "Erebrus Community NFT",
+        name: "Erebrus Community NFT #001",
         symbol: "EVPN",
         uri: metadataUri,
         sellerFeeBasisPoints: percentAmount(5.5), // 5.5% royalties

diff --git a/pages/subscription.tsx b/pages/subscription.tsx
@@ -27,6 +27,8 @@ const graphqlaptos = process.env.NEXT_PUBLIC_GRAPHQL_APTOS;
 import Login from "../components/loginComponent";
 import UserNFTs from "../components/UserNFTs";
 import fetchUserNFTs from "../components/UserNFTs";
+import Mintbox from "../components/Mintbox";
+
 
 export interface FlowIdResponse {
   eula: string;
@@ -901,6 +903,9 @@ const Subscription = () => {
                     </div>
                   )}
 
+
+
+
                   {trialsubscriptiondata && (
                     <div
                       className="lg:w-1/2  w-3/4 absolute rounded-3xl mt-2 mb-2 lg:relative min-h-96"
@@ -988,7 +993,7 @@ const Subscription = () => {
                     </div>
                   )}
                    </div>
-
+                  <Mintbox/>
                   <div className="h-auto ">
                     <FileStorage />
                   </div>