├── .dockerignore ├── .gitignore ├── Dockerfile ├── LICENSE ├── Makefile ├── README.md ├── assets ├── NftViz.png ├── Search.png ├── arrow.png ├── creator1.png ├── creator10.jpg ├── creator2.png ├── creator3.png ├── creator4.png ├── creator5.png ├── creator6.png ├── creator7.png ├── creator8.png ├── creator9.png ├── cross.png ├── discord.png ├── github.png ├── heart-outline.png ├── heart.png ├── index.js ├── instagram.png ├── left.png ├── loader.gif ├── loader1.gif ├── logo02.png ├── menu.png ├── right.png ├── telegram.png ├── tick.png ├── twitter.png ├── up.png ├── upload.png └── youtube.png ├── components ├── ActionButtons.jsx ├── Banner.jsx ├── Button.jsx ├── CreatorCard.jsx ├── Footer.jsx ├── Input.jsx ├── Loader.jsx ├── Modal.jsx ├── NFTCard.jsx ├── Navbar.jsx ├── SearchBar.jsx ├── index.js └── withTransition.jsx ├── context ├── NFTContext.js ├── NFTMarketplace.json └── constants.js ├── contracts ├── NFTMarketplace.json └── NFTMarketplace.sol ├── docker-compose.yml ├── hardhat.config.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── create-nft.js ├── index.js ├── listed-nfts.js ├── my-nfts.js ├── nft-details.js └── resell-nft.js ├── postcss.config.js ├── public ├── favicon.ico └── vercel.svg ├── scripts └── deploy.js ├── styles └── globals.css ├── tailwind.config.js ├── test └── sample-test.js └── utils └── index.js /.dockerignore: -------------------------------------------------------------------------------- 1 | Dockerfile 2 | .dockerignore 3 | .gitignore 4 | node_modules 5 | npm-debug.log 6 | README.md 7 | .next 8 | .git -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | # next.js 4 | /.next/ 5 | /out/ 6 | 7 | # production 8 | /build 9 | 10 | # local env files 11 | .secret 12 | .env 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | # vercel 19 | .vercel 20 | 21 | #Hardhat files 22 | cache 23 | artifacts 24 | 25 | #vscode 26 | .vscode 27 | 28 | node_modules 29 | .env 30 | coverage 31 | coverage.json 32 | typechain 33 | 34 | #Hardhat files 35 | cache 36 | artifacts 37 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Specify the base image to use for the container 2 | FROM node:18-alpine 3 | 4 | # Set the working directory to /app in the container 5 | WORKDIR /app 6 | 7 | # Copy all files from the current directory to the /app directory in the container 8 | COPY . /app 9 | 10 | # Copy the package.json and package-lock.json files from the current directory to the /app directory in the container 11 | COPY package.json package-lock.json ./ 12 | 13 | # Install dependencies using npm 14 | RUN npm install 15 | 16 | # Copy the next.config.js file from the current directory to the /app directory in the container 17 | COPY next.config.js ./next.config.js 18 | 19 | # Expose port 3000 for the container 20 | EXPOSE 3000 21 | 22 | # Start the development server using npm when the container is run 23 | CMD ["npm", "run", "dev"] 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Kai Everdream 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | .DEFAULT_GOAL := help 2 | 3 | MKFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST))) 4 | CURRENT_DIR := $(dir $(MKFILE_PATH)) 5 | 6 | 7 | DAPP_CONTAINER := polyplace 8 | 9 | .PHONY: help 10 | help: 11 | @grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}' 12 | 13 | .PHONY: build-dev 14 | build-dev: ## Makes the static files and adds them to the project 15 | @docker rmi ${DAPP_CONTAINER} || true 16 | @docker build -t ${DAPP_CONTAINER} -f Dockerfile . 17 | 18 | .PHONY: run-dev 19 | run-dev: clean-dev ## Cleans, builds and runs the software on the DEVELOPMENT environment 20 | @docker-compose -p ${DAPP_CONTAINER} up --build -d 21 | 22 | .PHONY: recreate-dev 23 | recreate-dev: clean-dev ## Cleans & recreates everything on the DEVELOPMENT environment 24 | @docker-compose -p ${DAPP_CONTAINER} up --force-recreate -d 25 | 26 | .PHONY: clean-dev 27 | clean-dev: ## Cleans the software from the DEVELOPMENT environment 28 | @docker-compose -p ${DAPP_CONTAINER} down || true 29 | 30 | .PHONY: logs-dev 31 | logs-dev: ## Shows the logs of the DEVELOPMENT environment; CTRL+C to exit 32 | @docker-compose -p ${DAPP_CONTAINER} logs -f 33 | 34 | .PHONY: clean-dev 35 | clean-sso-dev: ## Cleans the software from the DEVELOPMENT environment 36 | @docker stop ${DAPP_CONTAINER} || true 37 | @docker rm ${DAPP_CONTAINER} || true 38 | 39 | .PHONY: purge 40 | purge: ## WARNING! Use this with care. It will stop and remove all containers, volumes, networks, etc 41 | @docker stop $(docker ps -aq) || true 42 | @docker rm $(docker ps -aq) || true 43 | @docker system prune -f && docker volume prune -f && docker network prune -f 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Alt text logo 4 | 5 |

6 | 7 | # Polyplace 8 | 9 | An open decentralized NFT Marketplace built with Solidity and Next.js, powered by Polygon Technologies. It basically is an open platform where users can mint and trade their own NFTs. 10 | 11 | 12 | ## Table of Contents 13 | 14 | - [The Project](#the-project) 15 | - [Developers](#developers) 16 | - [Resources](#resources) 17 | 18 | 19 | ## The Project 20 | 21 | An open platform where users can mint their own NFTs and list them on a Marketplace or buy NFTs from others. It includes: 22 | 23 | - A smart contract which represents a collection of NFTs by following the ERC-721 standard. 24 | - A smart contract which represents the NFT Marketplace and contains all the logic to make offers, execute offers... 25 | - A Next.js front-end application as a user interface. 26 | 27 | `NFTMarketplace` Polygon(Mumbai Testnet) smart contract address: 28 | 29 | https://mumbai.polygonscan.com/address/0xF5f6B924332C350E3Fcd3A50Fc94db822f0B760f 30 | 31 | ### Demo video 32 | 33 | https://www.youtube.com/watch?v=kVIb7MGJ53k&t=36s 34 | 35 | ### Project details 36 | 37 | Users can access the application via web-browser, and must have the Metamask wallet installed. The interface, built with Next.js, relies on the ethers.js library to communicate with the smart contracts through Metamask. This means that the data reflected on the front-end application is fetched from the Polygon blockchain. Each action performed by the user (mint an NFT, sell NFT, buy NFT...) creates a transaction on Polygon, which will require Metamask confirmation and a small fee, and this transaction will permanently modify the state of the NFTMarketplace smart contracts. On top of it, user's NFT Metadata will be uploaded to the IPFS, generating a hash which will be permanently recorded on the blockchain to prove ownership. 38 | 39 | ### Features 40 | 41 | Users can perform the following actions on the NFT Marketplace: 42 | 43 | #### Mint 44 | 45 | Input a name, description and upload a file (image) to mint an NFT. Once minted, a representation of this NFT will be displayed in the marketplace and it will be owned by its creator. This is open for everyone, meaning everyone can participate in this NFT creation through this platform. 46 | 47 | #### Buy NFT 48 | 49 | A user can buy NFTs which someone else offered. This will require paying the requested price and a small fee. 50 | 51 | #### Sell NFT 52 | 53 | Users can sell their NFT by specifying its price (in MATIC). If someone fulfills this offer, then the NFT and its ownership is transferred to the new owner. 54 | 55 | ### Smart Contract Visualization 56 | 57 | Below you can view the current's smart contract functions (and its interactions). 58 | 59 |

60 | SCV 61 |

62 | 63 | 64 | ## Developers 65 | 66 | These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. 67 | 68 | ### Connect to Mumbai Testnet 69 | 70 | First, it is required to install Metamask wallet browser extension: https://metamask.io/ 71 | 72 | Next, you need to configure Metamask to connect to the desired blockchain by using the following link: https://chainlist.org/ and add the network of your choice (Mumbai Testnet for now), by simply connecting your wallet from a test address. 73 | 74 | ### Getting test MATIC 75 | 76 | You can get up to 2 test MATIC / day by pasting your address here: https://mumbaifaucet.com/. 77 | 78 | ### Install locally 79 | 80 | First, you will need to `clone` or `fork` the repository into your Github account: 81 | 82 | ```shell 83 | git clone https://github.com/chrisstef/polyplace.git 84 | ``` 85 | 86 | Run the following command in your terminal after cloning the main repo: 87 | 88 | ```shell 89 | npm install 90 | ``` 91 | 92 | At this point you will be able to run the frontend with: 93 | 94 | ```shell 95 | npm run dev 96 | ``` 97 | 98 | ### Install & Run in Docker Environment 99 | 100 | Before you begin, you'll need to have Docker installed on your machine. If you haven't already installed it, you can follow the installation instructions for your operating system on the official Docker website: https://docs.docker.com/get-docker/ 101 | 102 | To run the app in a Docker environment, follow these steps: 103 | 104 | - Clone the repository to your local machine. 105 | - Navigate to the root directory of the project in your terminal. 106 | - Run the following command: 107 | 108 | ```sh 109 | docker-compose up --force-recreate 110 | ``` 111 | 112 | The `docker-compose up --force-recreate` command starts the container defined in the `docker-compose.yml` file. The `--force-recreate` flag forces recreation of containers even if their configuration appears to be unchanged. This is useful when you want to make sure you are running the latest version of the container. 113 | 114 | This command will start the container and map port `3000` on the container to port `3000` on your local machine. You can access the app by opening http://localhost:3000 in your web browser. 115 | 116 | To stop the container, use `Ctrl + C` in your terminal and run the following command: 117 | 118 | ```sh 119 | docker-compose down 120 | ``` 121 | 122 | ### Run with Makefile (Optional) 123 | 124 | `Makefile` provides convenient shortcuts for common tasks(docker instructions in our case). It is a way of automating software building procedure and other complex tasks with dependencies. Make sure you have `Makefile` installed and proceed with the following commands: 125 | 126 | ```shell 127 | ## Cleans, builds and runs the dapp on the DEVELOPMENT environment 128 | make run-dev 129 | ``` 130 | 131 | ```shell 132 | ## Cleans & recreates everything on the DEVELOPMENT environment 133 | make recreate-dev 134 | ``` 135 | 136 | ```shell 137 | ## Cleans the dapp from the DEVELOPMENT environment 138 | make clean-dev 139 | ``` 140 | 141 | To see the list of all the available commands: 142 | 143 | ```shell 144 | make help 145 | ``` 146 | 147 | That's it! You now have the `Next.js` app running in a Docker container. You can make changes to the app by modifying the files in the pages directory, and the changes will be automatically reflected in the running container. 148 | 149 | ### Smart Contract development 150 | 151 | Make sure to go through the official Docs: https://hardhat.org/hardhat-runner/docs/getting-started#overview. 152 | 153 | Initialize hardhat by running the following command: 154 | 155 | ``` 156 | npx hardhat 157 | ``` 158 | 159 | First, you will have to set up a local network by running the following command: 160 | 161 | ``` 162 | npx hardhat node 163 | ``` 164 | 165 | After you are happy with your changes in `NFTMarketplace.sol` file, compile the smart contract: 166 | 167 | ``` 168 | npx hardhat compile 169 | ``` 170 | 171 | ### Deployment on Local Blockchain 172 | 173 | Deploy the contracts on your local hardhat network by running the following command: 174 | 175 | ``` 176 | npx hardhat run scripts/deploy.js --network localhost 177 | ``` 178 | 179 | If all goes well, a new smart contract address refering the NFT Marketplace will be generated. Paste this address in the `constants.js` file. 180 | 181 | Next, remove the argument provided in the `JsonRpcProvider` which is located in the __line 111__ of the `NFTContext.js` file. 182 | 183 | Finally, run the frontend on a new terminal to open the User Interface: 184 | 185 | ``` 186 | npm run dev 187 | ``` 188 | 189 | A local instance of Polyplace will be up and running on your local environment. 190 | 191 | 192 | ### Tech stack 193 | 194 | - `Solidity` 195 | - `Next.js` 196 | - `hardhat` 197 | - `ethers.js` 198 | - `node.js` 199 | - `Metamask` 200 | - `IPFS` 201 | - `Infura` 202 | - `Alchemy` 203 | 204 | ### Future Ideas 205 | 206 | - Clear deploy on Polygon Mainnet. 207 | - Auction features. 208 | - Bulk upload of NFTs as collections. 209 | - Creator details page. 210 | 211 | 212 | ## Resources 213 | 214 | - [polygon.technology](https://polygon.technology/) 215 | - [Solidity](https://docs.soliditylang.org/en/v0.8.15/) 216 | - [node.js](https://nodejs.org/) 217 | - [ethers.js](https://docs.ethers.io/v5/) 218 | - [next.js](https://nextjs.org/) 219 | - [IPFS](https://ipfs.io/) 220 | - [Infura](https://infura.io/) 221 | - [Alchemy](https://www.alchemy.com/) 222 | - [Vercel](https://vercel.com/docs) 223 | -------------------------------------------------------------------------------- /assets/NftViz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/NftViz.png -------------------------------------------------------------------------------- /assets/Search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/Search.png -------------------------------------------------------------------------------- /assets/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/arrow.png -------------------------------------------------------------------------------- /assets/creator1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/creator1.png -------------------------------------------------------------------------------- /assets/creator10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/creator10.jpg -------------------------------------------------------------------------------- /assets/creator2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/creator2.png -------------------------------------------------------------------------------- /assets/creator3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/creator3.png -------------------------------------------------------------------------------- /assets/creator4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/creator4.png -------------------------------------------------------------------------------- /assets/creator5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/creator5.png -------------------------------------------------------------------------------- /assets/creator6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/creator6.png -------------------------------------------------------------------------------- /assets/creator7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/creator7.png -------------------------------------------------------------------------------- /assets/creator8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/creator8.png -------------------------------------------------------------------------------- /assets/creator9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/creator9.png -------------------------------------------------------------------------------- /assets/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/cross.png -------------------------------------------------------------------------------- /assets/discord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/discord.png -------------------------------------------------------------------------------- /assets/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/github.png -------------------------------------------------------------------------------- /assets/heart-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/heart-outline.png -------------------------------------------------------------------------------- /assets/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/heart.png -------------------------------------------------------------------------------- /assets/index.js: -------------------------------------------------------------------------------- 1 | import heartOutline from './heart-outline.png'; 2 | import heart from './heart.png'; 3 | import search from './Search.png'; 4 | import tick from './tick.png'; 5 | import cross from './cross.png'; 6 | import logo02 from './logo02.png'; 7 | import menu from './menu.png'; 8 | import discord from './discord.png'; 9 | import github from './github.png'; 10 | import telegram from './telegram.png'; 11 | import twitter from './twitter.png'; 12 | import upload from './upload.png'; 13 | import creator1 from './creator1.png'; 14 | import creator2 from './creator2.png'; 15 | import creator3 from './creator3.png'; 16 | import creator4 from './creator4.png'; 17 | import creator5 from './creator5.png'; 18 | import creator6 from './creator6.png'; 19 | import creator7 from './creator7.png'; 20 | import creator8 from './creator8.png'; 21 | import creator9 from './creator9.png'; 22 | import creator10 from './creator10.jpg'; 23 | import right from './right.png'; 24 | import left from './left.png'; 25 | import loader from './loader.gif'; 26 | import arrow from './arrow.png'; 27 | import youtube from './youtube.png'; 28 | import up from './up.png'; 29 | 30 | export default { 31 | heartOutline, 32 | heart, 33 | search, 34 | tick, 35 | cross, 36 | logo02, 37 | menu, 38 | discord, 39 | github, 40 | telegram, 41 | twitter, 42 | upload, 43 | creator1, 44 | creator2, 45 | creator3, 46 | creator4, 47 | creator5, 48 | creator6, 49 | creator7, 50 | creator8, 51 | creator9, 52 | creator10, 53 | right, 54 | left, 55 | loader, 56 | arrow, 57 | youtube, 58 | up 59 | }; 60 | -------------------------------------------------------------------------------- /assets/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/instagram.png -------------------------------------------------------------------------------- /assets/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/left.png -------------------------------------------------------------------------------- /assets/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/loader.gif -------------------------------------------------------------------------------- /assets/loader1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/loader1.gif -------------------------------------------------------------------------------- /assets/logo02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/logo02.png -------------------------------------------------------------------------------- /assets/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/menu.png -------------------------------------------------------------------------------- /assets/right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/right.png -------------------------------------------------------------------------------- /assets/telegram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/telegram.png -------------------------------------------------------------------------------- /assets/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/tick.png -------------------------------------------------------------------------------- /assets/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/twitter.png -------------------------------------------------------------------------------- /assets/up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/up.png -------------------------------------------------------------------------------- /assets/upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/upload.png -------------------------------------------------------------------------------- /assets/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisstef/polyplace/ce5592cbe936751c3048522ee70314e34a3223b2/assets/youtube.png -------------------------------------------------------------------------------- /components/ActionButtons.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { BiRefresh, BiLinkExternal, BiCopy } from 'react-icons/bi'; 3 | import { MdMoreVert } from 'react-icons/md'; 4 | 5 | import { MarketAddress } from '../context/constants'; 6 | 7 | const ActionButtons = () => { 8 | const [tooltipText, setTooltipText] = useState(''); 9 | 10 | const handleRefresh = () => { 11 | window.location.reload(); 12 | setTooltipText('Refreshing...'); 13 | }; 14 | 15 | const handleExternalLink = () => { 16 | const nftURL = `https://mumbai.polygonscan.com/token/${MarketAddress}?a=121`; 17 | window.open(nftURL, '_blank'); 18 | setTooltipText('Redirecting...'); 19 | }; 20 | 21 | const handleCopyURL = () => { 22 | const currentURL = window.location.href; 23 | navigator.clipboard.writeText(currentURL); 24 | setTooltipText('URL copied!'); 25 | }; 26 | 27 | const handleMouseLeave = () => { 28 | setTooltipText(''); // Reset the tooltip text when the mouse leaves 29 | }; 30 | 31 | const actionItems = [ 32 | { icon: , name: "Refresh" }, 33 | { icon: , name: "External" }, 34 | { icon: , name: "Copy" }, 35 | { icon: , name: "More" }, 36 | ]; 37 | 38 | const iconClassName = 'h-6 w-6 text-gray-500 dark:text-gray-400'; 39 | 40 | return ( 41 |
42 | {actionItems.map((item) => ( 43 |
48 | {React.cloneElement(item.icon, { 49 | className: iconClassName, 50 | onClick: item.icon.props.onClick, 51 | })} 52 | 53 | {tooltipText || item.name} 54 | 55 |
56 | ))} 57 |
58 | ); 59 | }; 60 | 61 | export default ActionButtons; 62 | -------------------------------------------------------------------------------- /components/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Banner = ({ name, childStyles, parentStyles }) => ( 4 |
5 |

{name}

6 |
7 | ); 8 | 9 | export default Banner; 10 | -------------------------------------------------------------------------------- /components/Button.jsx: -------------------------------------------------------------------------------- 1 | const Button = ({ btnName, classStyles, handleClick }) => ( 2 | 9 | ); 10 | 11 | export default Button; 12 | -------------------------------------------------------------------------------- /components/CreatorCard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import Image from 'next/image'; 4 | import images from '../assets'; 5 | import { NFTContext } from '../context/NFTContext'; 6 | 7 | const CreatorCard = ({ rank, creatorImage, creatorName, creatorEths }) => { 8 | const { nftCurrency } = useContext(NFTContext); 9 | 10 | const shouldRender = rank <= 10; 11 | 12 | return shouldRender ? ( 13 | 19 |
20 |

{rank}

21 |
22 | 23 | 29 |
30 | {creatorImage && ( 31 | creatorName 38 | )} 39 |
40 | {images.tick && ( 41 | tick 47 | )} 48 |
49 |
50 | 51 | 52 |
53 |

54 | {creatorName} 55 |

56 |

57 | {creatorEths.toFixed(2)} {nftCurrency} 58 |

59 |
60 | 61 | ) : null; 62 | }; 63 | 64 | export default CreatorCard; 65 | -------------------------------------------------------------------------------- /components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import Link from 'next/link'; 3 | import { useTheme } from 'next-themes'; 4 | 5 | import images from '../assets'; 6 | import Button from './Button'; 7 | 8 | const Footer = () => { 9 | const { theme } = useTheme(); 10 | 11 | return ( 12 | 87 | ); 88 | }; 89 | 90 | export default Footer; 91 | -------------------------------------------------------------------------------- /components/Input.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | 3 | import { NFTContext } from '../context/NFTContext'; 4 | 5 | const Input = ({ inputType, title, placeholder, handleClick }) => { 6 | const { nftCurrency } = useContext(NFTContext); 7 | 8 | return ( 9 |
10 |

{title}

11 | 12 | {inputType === 'number' ? ( 13 |
14 | 20 |

{nftCurrency}

21 |
22 | ) : inputType === 'textarea' ? ( 23 |