+
+ );
+};
+
+export default EthereumInteraction;
diff --git a/nft-marketplace/src/components/IPFSUpload.js b/nft-marketplace/src/components/IPFSUpload.js
new file mode 100644
index 0000000..95ace46
--- /dev/null
+++ b/nft-marketplace/src/components/IPFSUpload.js
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { create } from 'ipfs-http-client';
+
+// Initialize the IPFS client (using Infura)
+const client = create('https://ipfs.infura.io:5001/api/v0');
+
+export default function IPFSUpload() {
+ const [file, setFile] = useState(null);
+ const [fileHash, setFileHash] = useState('');
+ const [cid, setCid] = useState('');
+ const [retrievedFile, setRetrievedFile] = useState('');
+
+ // Handle file input change
+ const handleFileChange = (e) => {
+ const uploadedFile = e.target.files[0];
+ setFile(uploadedFile);
+ };
+
+ // Upload file to IPFS
+ const handleFileUpload = async () => {
+ try {
+ const added = await client.add(file);
+ const url = `https://ipfs.infura.io/ipfs/${added.path}`;
+ setFileHash(url);
+ console.log('File uploaded to IPFS:', url);
+ } catch (error) {
+ console.error('Error uploading file to IPFS:', error);
+ }
+ };
+
+ // Retrieve file from IPFS
+ const handleRetrieveFile = async () => {
+ try {
+ const url = `https://ipfs.infura.io/ipfs/${cid}`;
+ setRetrievedFile(url);
+ } catch (error) {
+ console.error('Error retrieving file from IPFS:', error);
+ }
+ };
+
+ return (
+ Ethereum Interaction
+ {account ? ( +
+
+ setRecipient(e.target.value)}
+ />
+ setTokenURI(e.target.value)}
+ />
+
+
+
+ {/* Transfer NFT */}
+
+ setRecipient(e.target.value)}
+ />
+ setTokenId(e.target.value)}
+ />
+
+
+
+ {/* Burn NFT */}
+
+ setTokenId(e.target.value)}
+ />
+
+
+
+ ) : (
+
+ )}
+ Connected Account: {account}
+Balance: {balance} ETH
+ + {/* Mint NFT */} +
+
+ );
+}
diff --git a/nft-marketplace/src/components/NFTCard.js b/nft-marketplace/src/components/NFTCard.js
new file mode 100644
index 0000000..1b4c4c9
--- /dev/null
+++ b/nft-marketplace/src/components/NFTCard.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../components/ui/card"
+import { Button } from "../components/ui/button"
+import Badge from '../components/ui/badge';
+import Tooltip from '../components/ui/tooltip';
+import {TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip"
+import { Eye, Heart, Share2 } from 'lucide-react'
+
+const NFTCard = ({ tokenURI, owner, name, description, likes = 0 }) => {
+ return (
+ Upload File to IPFS
+ + + + {fileHash && ( +
+
+ )}
+
+ Uploaded File:
+ + {fileHash} + +Retrieve File from IPFS
+ setCid(e.target.value)} + className="p-2 border rounded" + /> + + + {retrievedFile && ( +
+
+ )}
+ Retrieved File:
+ + {retrievedFile} + +
+ 
+
+ #{tokenURI.split('/').pop()}
+
+
+ {description || "No description available"}
++ {owner} +
+Owner: {owner}
+
+
+
+
+
+
+ {nfts.map((nft, index) => (
+
+ );
+};
+
+export default NFTList;
diff --git a/nft-marketplace/src/components/TezosInteraction.js b/nft-marketplace/src/components/TezosInteraction.js
new file mode 100644
index 0000000..972b482
--- /dev/null
+++ b/nft-marketplace/src/components/TezosInteraction.js
@@ -0,0 +1,52 @@
+// src/components/TezosInteraction.js
+import React, { useState, useEffect } from 'react';
+import { connectTezosWallet, getTezosAccount, getTezosBalance } from '../services/tezosService';
+
+const TezosInteraction = () => {
+ const [account, setAccount] = useState('');
+ const [balance, setBalance] = useState('');
+
+ useEffect(() => {
+ const loadAccountData = async () => {
+ try {
+ const acc = await getTezosAccount();
+ const bal = await getTezosBalance();
+ setAccount(acc);
+ setBalance(bal);
+ } catch (error) {
+ console.error('Error fetching Tezos account data:', error);
+ }
+ };
+
+ // Load account data if wallet is already connected
+ loadAccountData();
+ }, []);
+
+ const handleConnectWallet = async () => {
+ try {
+ await connectTezosWallet();
+ const acc = await getTezosAccount();
+ const bal = await getTezosBalance();
+ setAccount(acc);
+ setBalance(bal);
+ } catch (error) {
+ console.error('Error connecting to Tezos wallet:', error);
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default TezosInteraction;
diff --git a/nft-marketplace/src/components/UIComponents.js b/nft-marketplace/src/components/UIComponents.js
new file mode 100644
index 0000000..2c41003
--- /dev/null
+++ b/nft-marketplace/src/components/UIComponents.js
@@ -0,0 +1,29 @@
+// UIComponents.js
+
+import React from 'react';
+
+export const Button = ({ onClick, children }) => (
+
+);
+
+export const Input = ({ placeholder, value, onChange }) => (
+
+);
+
+export const Card = ({ title, children }) => (
+ Tezos Interaction
+ {account ? ( +
+
+ ) : (
+
+ )}
+ Connected Account: {account}
+Balance: {balance} XTZ
+
+
+);
\ No newline at end of file
diff --git a/nft-marketplace/src/components/getComponents.js b/nft-marketplace/src/components/getComponents.js
new file mode 100644
index 0000000..e4e17f7
--- /dev/null
+++ b/nft-marketplace/src/components/getComponents.js
@@ -0,0 +1,28 @@
+// src/components/GetBalance.js
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const GetBalance = () => {
+ const [balance, setBalance] = useState(null);
+
+ useEffect(() => {
+ // Make the API call to the backend
+ axios.get('http://localhost:3000/api/balance')
+ .then(response => {
+ // Set the state with the balance data from the backend
+ setBalance(response.data.amount);
+ })
+ .catch(error => {
+ console.error("There was an error fetching the balance!", error);
+ });
+ }, []); // Empty dependency array means this runs once when the component mounts
+
+ return (
+ {title}
+ {children} +
+
+ );
+};
+
+export default GetBalance;
diff --git a/nft-marketplace/src/components/nftService.js b/nft-marketplace/src/components/nftService.js
new file mode 100644
index 0000000..4e809a8
--- /dev/null
+++ b/nft-marketplace/src/components/nftService.js
@@ -0,0 +1,241 @@
+import { ethers } from 'ethers';
+
+// Contract details
+const CONTRACT_ADDRESS = '0x903c9b908a9FCb1C799ED97FEa382811CFB77C6c';
+const ETHERLINK_RPC_URL = 'https://etherlink-testnet.rpc-url.com'; // Replace with the actual Etherlink RPC URL
+
+// ABI (unchanged, with mint, burn, transfer functions)
+const abi = [
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "to",
+ "type": "address"
+ },
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "approve",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "burnMeme",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "string",
+ "name": "tokenURI",
+ "type": "string"
+ }
+ ],
+ "name": "mintMeme",
+ "outputs": [
+ {
+ "internalType": "uint256",
+ "name": "",
+ "type": "uint256"
+ }
+ ],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "to",
+ "type": "address"
+ },
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "transferMeme",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "getApproved",
+ "outputs": [
+ {
+ "internalType": "address",
+ "name": "",
+ "type": "address"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "ownerOf",
+ "outputs": [
+ {
+ "internalType": "address",
+ "name": "",
+ "type": "address"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "tokenURI",
+ "outputs": [
+ {
+ "internalType": "string",
+ "name": "",
+ "type": "string"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ }
+];
+
+// Initialize ethers with the user's MetaMask wallet for Ethereum or custom provider for Etherlink
+export const initializeProvider = async (network = 'ethereum') => {
+ try {
+ let provider;
+ if (network === 'etherlink') {
+ provider = new ethers.JsonRpcProvider(ETHERLINK_RPC_URL); // Etherlink testnet provider
+ } else if (typeof window.ethereum !== 'undefined') {
+ await window.ethereum.request({ method: 'eth_requestAccounts' });
+ provider = new ethers.BrowserProvider(window.ethereum); // Ethereum mainnet via MetaMask
+ } else {
+ throw new Error('MetaMask is not installed for Ethereum mainnet');
+ }
+
+ return provider;
+ } catch (error) {
+ console.error('Error initializing provider:', error);
+ throw error;
+ }
+};
+export const getConnectedAddress = async () => {
+ try {
+ if (typeof window.ethereum !== 'undefined') {
+ const provider = new ethers.BrowserProvider(window.ethereum);
+ const accounts = await provider.send("eth_requestAccounts", []); // Request account access
+ return accounts[0]; // Return the first connected account
+ } else {
+ console.error("MetaMask is not installed!");
+ return null;
+ }
+ } catch (error) {
+ console.error("Error fetching connected address:", error);
+ return null;
+ }
+};
+
+// Get contract instance based on the network
+export const getContract = async (network = 'ethereum') => {
+ try {
+ const provider = await initializeProvider(network);
+ const signer = await provider.getSigner();
+ const contract = new ethers.Contract(CONTRACT_ADDRESS, abi, signer);
+
+ console.log("Contract instance:", contract);
+ return contract;
+ } catch (error) {
+ console.error("Error initializing contract:", error);
+ }
+};
+
+// Mint an NFT
+export const mintMeme = async (tokenURI, network = 'ethereum') => {
+ try {
+ const contract = await getContract(network);
+ if (!contract) throw new Error("Contract is not initialized");
+
+ const tx = await contract.mintMeme(tokenURI);
+ await tx.wait();
+
+ return tx;
+ } catch (error) {
+ console.error("Error minting NFT:", error);
+ throw error;
+ }
+};
+
+// Transfer an NFT
+export const transferMeme = async (recipient, tokenId, network = 'ethereum') => {
+ try {
+ const contract = await getContract(network);
+ const tx = await contract.transferMeme(recipient, tokenId);
+ await tx.wait();
+
+ return tx;
+ } catch (error) {
+ console.error("Error transferring NFT:", error);
+ throw error;
+ }
+};
+
+// Burn an NFT
+export const burnMeme = async (tokenId, network = 'ethereum') => {
+ try {
+ const contract = await getContract(network);
+ const tx = await contract.burnMeme(tokenId);
+ await tx.wait();
+
+ return tx;
+ } catch (error) {
+ console.error("Error burning NFT:", error);
+ throw error;
+ }
+};
+
+// Fetch NFTs
+export const fetchNFTs = async (contractAddress, tokenId, network = 'ethereum') => {
+ try {
+ const contract = await getContract(network);
+ const tokenURI = await contract.tokenURI(tokenId);
+ const owner = await contract.ownerOf(tokenId);
+
+ return { tokenURI, owner };
+ } catch (error) {
+ console.error("Error fetching NFT:", error);
+ throw error;
+ }
+};
diff --git a/nft-marketplace/src/components/simple.json b/nft-marketplace/src/components/simple.json
new file mode 100644
index 0000000..4cd0434
--- /dev/null
+++ b/nft-marketplace/src/components/simple.json
@@ -0,0 +1,678 @@
+[
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "to",
+ "type": "address"
+ },
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "approve",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "burnMeme",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "stateMutability": "nonpayable",
+ "type": "constructor"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "sender",
+ "type": "address"
+ },
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ },
+ {
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ }
+ ],
+ "name": "ERC721IncorrectOwner",
+ "type": "error"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "operator",
+ "type": "address"
+ },
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "ERC721InsufficientApproval",
+ "type": "error"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "approver",
+ "type": "address"
+ }
+ ],
+ "name": "ERC721InvalidApprover",
+ "type": "error"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "operator",
+ "type": "address"
+ }
+ ],
+ "name": "ERC721InvalidOperator",
+ "type": "error"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ }
+ ],
+ "name": "ERC721InvalidOwner",
+ "type": "error"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "receiver",
+ "type": "address"
+ }
+ ],
+ "name": "ERC721InvalidReceiver",
+ "type": "error"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "sender",
+ "type": "address"
+ }
+ ],
+ "name": "ERC721InvalidSender",
+ "type": "error"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "ERC721NonexistentToken",
+ "type": "error"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "string",
+ "name": "tokenURI",
+ "type": "string"
+ }
+ ],
+ "name": "mintMeme",
+ "outputs": [
+ {
+ "internalType": "uint256",
+ "name": "",
+ "type": "uint256"
+ }
+ ],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ }
+ ],
+ "name": "OwnableInvalidOwner",
+ "type": "error"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "account",
+ "type": "address"
+ }
+ ],
+ "name": "OwnableUnauthorizedAccount",
+ "type": "error"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "approved",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "Approval",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "operator",
+ "type": "address"
+ },
+ {
+ "indexed": false,
+ "internalType": "bool",
+ "name": "approved",
+ "type": "bool"
+ }
+ ],
+ "name": "ApprovalForAll",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "_fromTokenId",
+ "type": "uint256"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "_toTokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "BatchMetadataUpdate",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "MemeBurned",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "creator",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ },
+ {
+ "indexed": false,
+ "internalType": "string",
+ "name": "tokenURI",
+ "type": "string"
+ }
+ ],
+ "name": "MemeMinted",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "from",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "to",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "MemeTransferred",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "_tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "MetadataUpdate",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "previousOwner",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "newOwner",
+ "type": "address"
+ }
+ ],
+ "name": "OwnershipTransferred",
+ "type": "event"
+ },
+ {
+ "inputs": [],
+ "name": "renounceOwnership",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "from",
+ "type": "address"
+ },
+ {
+ "internalType": "address",
+ "name": "to",
+ "type": "address"
+ },
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "safeTransferFrom",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "from",
+ "type": "address"
+ },
+ {
+ "internalType": "address",
+ "name": "to",
+ "type": "address"
+ },
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ },
+ {
+ "internalType": "bytes",
+ "name": "data",
+ "type": "bytes"
+ }
+ ],
+ "name": "safeTransferFrom",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "operator",
+ "type": "address"
+ },
+ {
+ "internalType": "bool",
+ "name": "approved",
+ "type": "bool"
+ }
+ ],
+ "name": "setApprovalForAll",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "from",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "to",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "Transfer",
+ "type": "event"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "from",
+ "type": "address"
+ },
+ {
+ "internalType": "address",
+ "name": "to",
+ "type": "address"
+ },
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "transferFrom",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "to",
+ "type": "address"
+ },
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "transferMeme",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "newOwner",
+ "type": "address"
+ }
+ ],
+ "name": "transferOwnership",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ }
+ ],
+ "name": "balanceOf",
+ "outputs": [
+ {
+ "internalType": "uint256",
+ "name": "",
+ "type": "uint256"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "getApproved",
+ "outputs": [
+ {
+ "internalType": "address",
+ "name": "",
+ "type": "address"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ },
+ {
+ "internalType": "address",
+ "name": "operator",
+ "type": "address"
+ }
+ ],
+ "name": "isApprovedForAll",
+ "outputs": [
+ {
+ "internalType": "bool",
+ "name": "",
+ "type": "bool"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "name",
+ "outputs": [
+ {
+ "internalType": "string",
+ "name": "",
+ "type": "string"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "owner",
+ "outputs": [
+ {
+ "internalType": "address",
+ "name": "",
+ "type": "address"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "ownerOf",
+ "outputs": [
+ {
+ "internalType": "address",
+ "name": "",
+ "type": "address"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "bytes4",
+ "name": "interfaceId",
+ "type": "bytes4"
+ }
+ ],
+ "name": "supportsInterface",
+ "outputs": [
+ {
+ "internalType": "bool",
+ "name": "",
+ "type": "bool"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "symbol",
+ "outputs": [
+ {
+ "internalType": "string",
+ "name": "",
+ "type": "string"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint256",
+ "name": "tokenId",
+ "type": "uint256"
+ }
+ ],
+ "name": "tokenURI",
+ "outputs": [
+ {
+ "internalType": "string",
+ "name": "",
+ "type": "string"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "totalMinted",
+ "outputs": [
+ {
+ "internalType": "uint256",
+ "name": "",
+ "type": "uint256"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ }
+]
\ No newline at end of file
diff --git a/nft-marketplace/src/components/token.json b/nft-marketplace/src/components/token.json
new file mode 100644
index 0000000..7421dbb
--- /dev/null
+++ b/nft-marketplace/src/components/token.json
@@ -0,0 +1,11 @@
+{
+ "name": "My Hackathon NFT",
+ "description": "An exclusive NFT minted during a hackathon!",
+ "image": "ipfs://QmdPBXtXmfdZ29En7YGuwk9m1DerQuXjwE2yKUpSnHCAkR",
+ "attributes": [
+ {
+ "trait_type": "Rarity",
+ "value": "Unique"
+ }
+ ]
+ }
\ No newline at end of file
diff --git a/nft-marketplace/src/components/ui/badge.js b/nft-marketplace/src/components/ui/badge.js
new file mode 100644
index 0000000..1cf4714
--- /dev/null
+++ b/nft-marketplace/src/components/ui/badge.js
@@ -0,0 +1,17 @@
+// src/components/ui/badge.js
+import React from 'react';
+
+const Badge = ({ text, variant = 'primary' }) => {
+ const baseStyles = "inline-flex items-center px-3 py-1 rounded-full font-semibold text-sm";
+ const variants = {
+ primary: "bg-blue-500 text-white",
+ secondary: "bg-gray-500 text-white",
+ success: "bg-green-500 text-white",
+ danger: "bg-red-500 text-white",
+ warning: "bg-yellow-500 text-black",
+ };
+
+ return {text};
+};
+
+export default Badge;
diff --git a/nft-marketplace/src/components/ui/button.js b/nft-marketplace/src/components/ui/button.js
new file mode 100644
index 0000000..82d663c
--- /dev/null
+++ b/nft-marketplace/src/components/ui/button.js
@@ -0,0 +1,37 @@
+import React from 'react'
+
+const Button = React.forwardRef(({ className, variant, size, children, ...props }, ref) => {
+ const baseStyles = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background"
+
+ const variants = {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline: "border border-input hover:bg-accent hover:text-accent-foreground",
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "underline-offset-4 hover:underline text-primary",
+ }
+
+ const sizes = {
+ default: "h-10 py-2 px-4",
+ sm: "h-9 px-3 rounded-md",
+ lg: "h-11 px-8 rounded-md",
+ }
+
+ const variantStyles = variants[variant] || variants.default
+ const sizeStyles = sizes[size] || sizes.default
+
+ return (
+
+ )
+})
+
+Button.displayName = "Button"
+
+export { Button }
\ No newline at end of file
diff --git a/nft-marketplace/src/components/ui/card.js b/nft-marketplace/src/components/ui/card.js
new file mode 100644
index 0000000..ff7f9e1
--- /dev/null
+++ b/nft-marketplace/src/components/ui/card.js
@@ -0,0 +1,53 @@
+import React from 'react'
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
\ No newline at end of file
diff --git a/nft-marketplace/src/components/ui/input.js b/nft-marketplace/src/components/ui/input.js
new file mode 100644
index 0000000..6da2a9d
--- /dev/null
+++ b/nft-marketplace/src/components/ui/input.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+ return (
+
+ )
+})
+
+Input.displayName = "Input"
+
+export { Input }
\ No newline at end of file
diff --git a/nft-marketplace/src/components/ui/label.js b/nft-marketplace/src/components/ui/label.js
new file mode 100644
index 0000000..5074699
--- /dev/null
+++ b/nft-marketplace/src/components/ui/label.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export function Label({ htmlFor, children }) {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/nft-marketplace/src/components/ui/tabs.js b/nft-marketplace/src/components/ui/tabs.js
new file mode 100644
index 0000000..46c5622
--- /dev/null
+++ b/nft-marketplace/src/components/ui/tabs.js
@@ -0,0 +1,51 @@
+import React from 'react'
+
+const Tabs = ({ children, defaultValue }) => {
+ const [activeTab, setActiveTab] = React.useState(defaultValue)
+
+ return (
+ Account Balance
+ {balance ?Your balance is: {balance}
:Loading...
} +
+ {React.Children.map(children, (child) => {
+ if (child.type === TabsList) {
+ return React.cloneElement(child, { activeTab, setActiveTab })
+ }
+ if (child.type === TabsContent) {
+ return React.cloneElement(child, { activeTab })
+ }
+ return child
+ })}
+
+ )
+}
+
+const TabsList = ({ children, activeTab, setActiveTab }) => {
+ return (
+
+ {React.Children.map(children, (child) => {
+ return React.cloneElement(child, { activeTab, setActiveTab })
+ })}
+
+ )
+}
+
+const TabsTrigger = ({ children, value, activeTab, setActiveTab }) => {
+ return (
+
+ )
+}
+
+const TabsContent = ({ children, value, activeTab }) => {
+ if (activeTab !== value) return null
+ return {children}
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
\ No newline at end of file
diff --git a/nft-marketplace/src/components/ui/tooltip.js b/nft-marketplace/src/components/ui/tooltip.js
new file mode 100644
index 0000000..6d82147
--- /dev/null
+++ b/nft-marketplace/src/components/ui/tooltip.js
@@ -0,0 +1,27 @@
+// src/components/ui/tooltip.js
+import React from 'react';
+
+// TooltipProvider (if necessary, depends on your specific needs)
+export const TooltipProvider = ({ children }) => {children}
;
+
+// Tooltip Trigger
+export const TooltipTrigger = ({ children }) => (
+ {children}
+);
+
+// Tooltip Content
+export const TooltipContent = ({ text }) => (
+
+ {text}
+
+);
+
+// Tooltip Component
+const Tooltip = ({ text, children }) => (
+
+ {children}
+
+);
+
+export default Tooltip;
diff --git a/nft-marketplace/src/exampleIMG/nft1.jpg b/nft-marketplace/src/exampleIMG/nft1.jpg
new file mode 100644
index 0000000..31f124a
Binary files /dev/null and b/nft-marketplace/src/exampleIMG/nft1.jpg differ
diff --git a/nft-marketplace/src/index.css b/nft-marketplace/src/index.css
new file mode 100644
index 0000000..ec2585e
--- /dev/null
+++ b/nft-marketplace/src/index.css
@@ -0,0 +1,13 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/nft-marketplace/src/index.js b/nft-marketplace/src/index.js
new file mode 100644
index 0000000..d563c0f
--- /dev/null
+++ b/nft-marketplace/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+ {children}
+);
+
+const Title = ({ children }) => (
+ {children}
+); + +const NFTCard = ({ name, image, price, creator }) => ( +Discover and collect unique digital assets.
+
+ {nfts.map((nft) => (
+
+
+
+ );
+}
diff --git a/nft-marketplace/src/pages/home.js b/nft-marketplace/src/pages/home.js
new file mode 100644
index 0000000..7b444ac
--- /dev/null
+++ b/nft-marketplace/src/pages/home.js
@@ -0,0 +1,14 @@
+// src/pages/Home.js
+import React from 'react';
+import { Container, Title } from '../styles';
+
+const Home = () => {
+ return (
+ As dope as me
+Your personal NFT collection is displayed here.
+ +
+ {/* Render the NFTList here */}
+
+
+
+
+ Explore the world of NFTs!
+