├── .gitignore ├── .vscode ├── extensions.json └── settings.json ├── README.md ├── assets ├── dk.png ├── opensea.png └── profile.png ├── components ├── AdminTable.js ├── CollectionCard.js ├── Footer.js ├── Header.js ├── Hero.js ├── HomeCard.js ├── NftCard.js ├── PreLoader │ └── LoadingScreen.js ├── ProfileCard.js ├── SmallCard.js ├── TransactionLoader.js ├── blog │ ├── BlogCard.js │ ├── BlogFooter.js │ ├── ReviewCard.js │ └── Stack.js ├── nft │ ├── GeneralDetails.js │ ├── ItemActivity.js │ ├── NFTImage.js │ ├── Purchase.js │ └── itemActivity │ │ └── EventItem.js └── toast │ ├── Loading.js │ └── WelcomeUser.js ├── context ├── TransactionContext.js └── lib │ ├── Transactions.json │ └── constants.js ├── docs └── images │ ├── all_nfts.png │ ├── blog.png │ ├── collections.png │ ├── home.png │ ├── profile.png │ ├── singleC.png │ └── singleN.png ├── lib └── sanityClient.js ├── new.js ├── next-env.d.ts ├── next.config.js ├── opensea.png ├── package.json ├── pages ├── _app.tsx ├── admin.js ├── allnfts.js ├── api │ └── hello.ts ├── blog.js ├── blogs │ └── [blogId].js ├── collections.js ├── contract │ └── [contractAddress].js ├── index.js ├── nfts │ └── [nftId].js ├── profile.js └── reviews.js ├── postcss.config.js ├── prettier.config.js ├── public ├── favicon.ico ├── opensea.ico └── vercel.svg ├── sanity.js ├── smart_contract ├── .gitignore ├── README.md ├── contracts │ └── Transactions.sol ├── hardhat.config.js ├── package-lock.json ├── package.json ├── scripts │ ├── deploy.js │ └── sample-script.js └── test │ └── sample-test.js ├── static ├── dummyCards.js └── dummyEvents.js ├── studio ├── .eslintrc ├── .npmignore ├── README.md ├── config │ ├── .checksums │ └── @sanity │ │ ├── data-aspects.json │ │ ├── default-layout.json │ │ ├── default-login.json │ │ └── form-builder.json ├── package.json ├── plugins │ └── .gitkeep ├── sanity.json ├── schemas │ ├── blogPost.js │ ├── itemImage.js │ ├── schema.js │ ├── testImage.js │ └── transactionSchema.js ├── static │ ├── .gitkeep │ └── favicon.ico ├── tsconfig.json └── yarn.lock ├── styles └── globals.css ├── tailwind.config.js ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | 39 | *constants 40 | 41 | 42 | .yarn 43 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "esbenp.prettier-vscode" 4 | ] 5 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.enable": false 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nft Marketplace 2 | 3 | 4 | 5 | A Web3.0 Block-chain application to discover, collect, and sell extraordinary NFTs. The Decentralized application was built on the Ethereum Blockchain with Nextjs, and Smart contracts written in Solidity. 6 | 7 | > ## ⭐ Show Your Support 8 | > If you like this project, do not forget to give ⭐s. So it can get more attention and get more support from the community. Don't underestimate one star, one star you give will convince others to give the project another star. 9 | 10 | 16 | 17 | ## 🔧 Technology Stack & Tools 18 | 19 | - [Solidity](https://docs.soliditylang.org/en/v0.8.13/) (Writing Smart Contracts) 20 |
21 | 22 | - [NextJs](https://nextjs.org/) (React Framework for Production) 23 |
24 | 25 | 26 | - [Ethers](https://docs.ethers.io/) 27 |
28 | 29 | - [Hardhat](https://hardhat.org/) 30 |
31 | 32 | - [Sanity.io](https://www.sanity.io/) (Backend Database) 33 |
34 | 35 | - [MetaMask]() (User Authentication) 36 | 37 | > ### View [live](https://baseminty.com) project. 😁 38 | 39 | ## 🖥️ Screenshoots 40 | 41 | ### Home 42 | 43 | ![](docs/images/home.png) 44 | 45 |
46 |
47 | 48 | 49 | ### Explore 50 | 51 | 53 | 54 |

55 | Light 56 |         57 | Dark 58 |

59 | 60 |
61 |
62 | 63 | ### Nft Detail 64 | 65 | 66 | 67 |

68 | Light 69 |         70 | Dark 71 |

72 | 73 | 74 | 75 | 76 | ## 🎉 Roadmap 77 | 78 | 79 | 80 | - [x] Base Components of the Project 81 | - [x] Search Filters for Explore Page 82 | - [x] Connect Wallet (ETH Wallets 🚀) 83 | - [x] NFT Collections Page 84 | - [x] NFT Detail Page 85 | - [x] Smartcontract Backend (Truffle) 86 | - [x] Blog Page 87 | - [x] Login 88 | - [x] User's Profile Page 89 | - [x] User Collections 90 | - [x] Connect MetaMast Wallet Popup 91 | - [x] Supported Mobile Devices 92 | ## 🗞️ Blog 93 | Everything and anything you need to know about Web3, NFTs, Decentralized apps and games. 94 | - [BaseMint Blog](https://baseminty.com/blog) 95 | 96 |

97 | 98 | Light 99 |

100 | 101 | ## 🔮 Usage 102 | To use this application as your own, follow these simple steps: 103 | 107 | 123 | 124 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 136 | 137 | 138 | 139 | ## 🤝 Contribute 140 | Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated. 😊 141 |

142 |  1. Fork Project 143 | 144 |

145 |

146 | 147 |  2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 148 |

149 | 150 |

151 | 152 |  3. Commit your changes(`git commit -m "Add Some Amazing Feature" `) 153 |

154 | 155 |

156 | 157 |  4. Push to the Branch (`git push origin feature/AmazingFeature`) 158 |

159 | 160 |

161 |  5. Open a Pull Request 162 | 163 |

164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 |
175 |
176 |
177 | 178 | 179 | ## 📞 Contact 180 | - [LinkedIn](https://www.linkedin.com/in/joshua-inyang-2753841b7/) 181 |
182 | 183 | - [My Website](https://www.bouncei.herokuapp.com) 184 |
185 | 186 | - [twitter ](https://twitter.com/InyangJoshua8) 187 | -------------------------------------------------------------------------------- /assets/dk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/assets/dk.png -------------------------------------------------------------------------------- /assets/opensea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/assets/opensea.png -------------------------------------------------------------------------------- /assets/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/assets/profile.png -------------------------------------------------------------------------------- /components/AdminTable.js: -------------------------------------------------------------------------------- 1 | const AdminTable = ({ address, index }) => { 2 | 3 | return ( 4 | 5 | {index} 6 |   {address}     7 | 8 | 9 | ) 10 | } 11 | 12 | export default AdminTable 13 | -------------------------------------------------------------------------------- /components/CollectionCard.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import Router from 'next/router' 3 | import React, { cloneElement, useState } from 'react' 4 | import { MdLocalPrintshop } from 'react-icons/md' 5 | import { sanityClient, urlFor } from '../sanity' 6 | // import { urlFor } from '../sanity'; 7 | import { Route } from 'react-router-dom' 8 | 9 | const style = { 10 | wrapper: `bg-[#303339] max-w-sm flex-auto w-[14rem] h-[30rem] my-10 mx-5 overflow-hidden cursor-pointer rounded-xl hover:border-solid hover:shadow-2xl hover:bg-grey-100 hover:scale-105 transition transform duration-100 ease-out border-dashed border-2 border-[#6e7687] `, 11 | imagecontainer: `h-2/3 w-full overflow-hidden`, 12 | imgtag: `h-full w-full`, 13 | infoconainer: `h-20 bg-[#313338] p-4 rounded-b-lg flex items-center text-white mx-4`, 14 | 15 | title: `flex flex-col justify-center ml-4 text-white`, 16 | } 17 | 18 | const CollectionCard = ({ title, image, contractAddress }) => { 19 | // console.log(contractAddress) 20 | 21 | return ( 22 |
{ 25 | Router.push({ 26 | pathname: `contract/${contractAddress}`, 27 | }) 28 | }} 29 | > 30 |
31 | {image} 36 |
37 |
38 |
{title}
39 |
40 |
41 | ) 42 | } 43 | 44 | export default CollectionCard 45 | -------------------------------------------------------------------------------- /components/Footer.js: -------------------------------------------------------------------------------- 1 | import Image from 'next/image' 2 | import Link from 'next/link' 3 | import appLogo from '../assets/opensea.png' 4 | 5 | const style = { 6 | mainContainer: ` grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-10 px-[40px] md:px-[45px] lg:px-[55px] xl:px-32 py-14 text-gray-600 space-x-4`, 7 | mainDiv: `space-y-4 text-grey-800 text-xs`, 8 | h5Element: `font-bold text-lg `, 9 | ptag: `text-base text-left`, 10 | } 11 | 12 | function Footer() { 13 | return ( 14 |
15 |
16 |
17 | 18 |
19 | 20 | 21 |
22 | 23 | BaseMint 24 | 25 |
26 |
27 | {/*

BaseMint

*/} 28 | 29 | 30 |

31 | Base Mint is the largest and most active NFT marketplace on the 32 | Ethereum blockchain. Through BaseMint, anybody can easily and 33 | quickly, mint, and buy NFTs at a fraction of the cost of other NFT 34 | platforms. Base Mint also provides feeless NFT transfers. 35 |

36 |
37 |
38 |
GENERAL
39 | 40 |
41 | Explore 42 |
43 | 44 | 45 | 46 |
47 | All Collections 48 |
49 | 50 | 51 | 52 |
53 | All NFTs 54 |
55 | 56 | 57 |
58 | Stats 59 |
60 | 61 |
62 | 63 |
64 |
HOST
65 | 66 |
67 | Explore 68 |
69 | 70 | 71 | 72 |
73 | Auctions 74 |
75 | 76 | 77 | 78 |
79 | Offers 80 |
81 | 82 | 83 |
84 | Stats 85 |
86 | 87 |
88 | 89 |
90 |
ECOSYSTEM
91 | 92 |
93 | Buy Mint Token 94 |
95 | 96 | 97 | 98 |
99 | Trade Mint 100 |
101 | 102 | 103 | 104 |
105 | Mint RIch List 106 |
107 | 108 | 109 | 110 |
111 | Mint Telegram 112 |
113 | 114 |
115 |
116 | 117 |
118 |
119 |
120 | © Copyright 2022   121 | 122 | 123 | BaseMint 124 | 125 | 126 |   -All Rights Reserved 127 |
128 |
129 | 130 | {/*
Social Media Handles
*/} 131 |
132 |
133 | ) 134 | } 135 | 136 | export default Footer 137 | -------------------------------------------------------------------------------- /components/Header.js: -------------------------------------------------------------------------------- 1 | import Image from 'next/image' 2 | import Link from 'next/link' 3 | import React, { useContext, useEffect, useState } from 'react' 4 | import appLogo from '../assets/opensea.png' 5 | import { AiOutlineSearch } from 'react-icons/ai' 6 | import { CgProfile } from 'react-icons/cg' 7 | import { MdOutlineAccountBalanceWallet } from 'react-icons/md' 8 | import { TransactionContext } from '../context/TransactionContext' 9 | import toast, { Toaster } from 'react-hot-toast' // Receiving toast 10 | import { HiMenu } from 'react-icons/hi' 11 | import { GrClose } from 'react-icons/gr' 12 | import { AiOutlineClose } from 'react-icons/ai' 13 | 14 | const style = { 15 | wrapper: `bg-[#04111d] w-screen px-[1.2rem] py-[0.8rem] md:flex md:justify-between`, 16 | logoContainer: `flex items-center cursor-pointer`, 17 | logoText: ` ml-[0.8rem] text-white font-semibold text-2xl`, 18 | searchBar: `flex flex-1 mx-[0.8rem] w-max-[520px] items-center md:bg-[#363840] rounded-[0.8rem] hover:bg-[#4c505c]`, 19 | searchIcon: `text-[#8a939b] mx-3 font-bold text-lg`, 20 | searchInput: `h-[2.6rem] w-full border-0 bg-transparent outline-0 ring-0 px-2 pl-0 text-[#e6e8eb] placeholder:text-[#8a939b]`, 21 | headerItems: ` md:flex md:items-center justify-end bg-white md:bg-inherit z-[1] md:z-auto md:static absolute left-0 h-1/3 w-full md:w-auto rounded-xl md:opacity-100 opacity-0`, 22 | MenuItems: ` md:flex md:items-center justify-end bg-inherit md:bg-inherit z-[1] md:z-auto md:static absolute left-0 w-full md:w-auto rounded-xl md:opacity-100 opacity-100 mt-3`, 23 | 24 | headerItem: `text-white px-4 font-bold md:text-[#c8cacd] hover:text-white duration-500 cursor-pointer py-2`, 25 | headerIcon: `text-[#8a939b] text-3xl font-black px-4 hover:text-white duration-500 cursor-pointer`, 26 | addressProfile: `flex items-center space-x-2 pt-0 md:pt-0`, 27 | 28 | buttonsContainer: `flex w-1/4 justify-end items-center`, 29 | button: `flex items-center md:bg-[#191B1F] bg-none rounded-2xl mx-2 text-[0.9rem] font-semibold cursor-pointer`, 30 | buttonPadding: `p-2`, 31 | buttonTextContainer: `h-8 flex items-center`, 32 | buttonIconContainer: `flex items-center justify-center w-8 h-8`, 33 | buttonAccent: `bg-[#172A42] border border-[#163256] hover:border-[#234169] h-full rounded-2xl flex items-center justify-center text-[#4F90EA]`, 34 | menuButton: ``, 35 | } 36 | 37 | const Header = () => { 38 | const { ab, currentAccount } = useContext(TransactionContext) 39 | const [userName, setUserName] = useState() 40 | const [checkMenu, setcheckMenu] = useState(true) 41 | 42 | const value = useContext(TransactionContext) 43 | const connectWallet = Object.values(value)[0] 44 | 45 | useEffect(() => { 46 | if (!currentAccount) return 47 | 48 | const str1 = currentAccount.slice(0, 4) 49 | const str2 = currentAccount.slice(38) 50 | const finalStr = str1 + '...' + str2 51 | setUserName(finalStr) 52 | }, [currentAccount]) 53 | 54 | // Dropdown Menu 55 | // function menu(e) { 56 | // e.preventDefault() 57 | // console.log('You clicked on this menu icon ') 58 | // setcheckMenu(false) 59 | // console.log(checkMenu) 60 | 61 | return ( 62 |
63 |
64 | 65 | 66 | 67 |
BaseMint
68 | 69 | 70 | 71 | 72 | {currentAccount ? ( 73 |
74 | 75 |
76 | 77 | 78 |
79 |
{userName}
80 |
81 |
82 | 83 |
84 | ) : ( 85 | '' 86 | )} 87 | 88 |
setcheckMenu(!checkMenu)}> 89 |
90 | {checkMenu ? : } 91 |
92 |
93 | 94 |
95 | 96 |
97 |
98 | 99 |
100 | 101 | 105 |
106 | 107 | 108 | {!currentAccount ? ( 109 |
110 | 111 |
Home
112 | 113 | 114 | 115 |
Collections
116 | 117 | 118 | 119 |
NFTs
120 | 121 | 122 | 123 |
NFT Blog
124 | 125 |
126 | ) : ( 127 | '' 128 | )} 129 | 130 | {currentAccount ? ( 131 | 132 |
133 | 134 |
Home
135 | 136 | 137 | 138 |
Collections
139 | 140 | 141 | 142 |
NFTs
143 | 144 | 145 | 146 |
NFT Blog
147 | 148 | 149 | {checkMenu ? ( 150 |
151 | 152 |
153 | 154 |
155 |
{userName}
156 |
157 |
158 | 159 |
160 | ) : ( 161 | '' 162 | )} 163 |
164 | ) : ( 165 |
connectWallet()} 167 | className={`${style.button} ${style.buttonPadding}`} 168 | > 169 |
170 | Connect Wallet 171 |
172 |
173 | )} 174 |
175 | ) 176 | } 177 | 178 | export default Header 179 | -------------------------------------------------------------------------------- /components/Hero.js: -------------------------------------------------------------------------------- 1 | import Image from 'next/image' 2 | import Link from 'next/link' 3 | import React from 'react' 4 | import profileIcon from '../assets/dk.png' 5 | 6 | const style = { 7 | wrapper: `relative`, 8 | container: `before:content-[''] before:bg-red-500 before:absolute before:top-0 before:left-0 before:right-0 before:bottom-0 before:bg-[url('https://lh3.googleusercontent.com/ujepnqpnL0nDQIHsWxlCXzyw4pf01yjz1Jmb4kAQHumJAPrSEj0-e3ABMZlZ1HEpJoqwOcY_kgnuJGzfXbd2Tijri66GXUtfN2MXQA=s250')] before:bg-cover before:bg-center before:opacity-30 before:blur`, 9 | contentWrapper: `flex h-full md:h-screen relative justify-start md:justify-center items-center`, 10 | copyContainer: `md:w-1/2 pt-9 md:pt-auto pl-12 md:pl-auto p-[20px] md:p-[20px] text-left `, 11 | title: `relative text-white text-[46px] font-semibold`, 12 | description: `text-[#8a939b] container-[400px] text-2xl mt-[0.8rem] mb-[2.5rem]`, 13 | ctaContainer: `flex`, 14 | accentedButton: ` relative text-lg font-semibold px-12 py-4 bg-[#2181e2] rounded-lg mr-5 text-white hover:bg-[#42a0ff] cursor-pointer`, 15 | button: ` relative text-lg font-semibold px-12 py-4 bg-[#363840] rounded-lg mr-5 text-[#e4e8ea] hover:bg-[#4c505c] cursor-pointer`, 16 | cardContainer: `rounded-[3rem] invisible md:visible`, 17 | infoContainer: `h-20 bg-[#313338] p-4 rounded-b-lg flex items-center text-white`, 18 | profileimg: `h-[2.25rem] rounded-full`, 19 | author: `flex flex-col justify-center ml-4`, 20 | name: ``, 21 | infoIcon: `flex justify-end items-center flex-1 text-[#8a939b] text-3xl font-bold`, 22 | } 23 | 24 | const Hero = () => { 25 | return ( 26 |
27 |
28 |
29 |
30 |
31 | Discover, collect, and sell extraordinary NFTs 32 |
33 |
34 | BaseMint is the world's largest and most reliable NFT 35 | marketplace 36 |
37 | 38 |
39 | 40 | 41 | 42 | 43 | {/* */} 44 |
45 |
46 | 47 |
48 | Hero Image 53 | 54 |
55 | profile picture 60 | 61 |
62 |
Future Proof Visions #108
63 | 64 | 69 | Scott 70 | 71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 |
79 |
80 |
81 | ) 82 | } 83 | 84 | export default Hero 85 | -------------------------------------------------------------------------------- /components/HomeCard.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import Router from 'next/router' 3 | import React, { cloneElement } from 'react' 4 | import { MdLocalPrintshop } from 'react-icons/md' 5 | import { sanityClient, urlFor } from '../sanity' 6 | // import { urlFor } from '../sanity'; 7 | import { Route } from 'react-router-dom' 8 | 9 | const style = { 10 | wrapper: `bg-[#303339] max-w-sm flex-auto w-[14rem] h-[36rem] my-10 mx-5 overflow-hidden cursor-pointer rounded-sm hover:shadow-2xl hover:bg-grey-100 hover:scale-105 transition transform duration-100 ease-out`, 11 | imagecontainer: `h-2/3 w-full overflow-hidden`, 12 | imgtag: `h-full w-full object-cover`, 13 | infoconainer: `h-20 bg-[#313338] p-4 rounded-b-lg flex items-center text-white mx-4`, 14 | infoimage: `h-[3.25rem] rounded-full w-[3.25rem] object-contain`, 15 | title: `flex flex-col justify-center ml-4 text-white`, 16 | } 17 | 18 | const HomeCard = ({ 19 | profileImage, 20 | title, 21 | collectionItem, 22 | description, 23 | bannerImage, 24 | }) => { 25 | // const refer = `contract/${collectionItem}` 26 | // console.log(refer) 27 | 28 | // console.log(collectionItem) 29 | 30 | return ( 31 |
{ 34 | Router.push({ 35 | pathname: `contract/${collectionItem}`, 36 | }) 37 | }} 38 | > 39 |
40 | 44 |
45 |
46 |
47 | image 52 | 53 |
{title}
54 |
55 |

{description}

56 |
57 |
58 | ) 59 | } 60 | 61 | export default HomeCard 62 | -------------------------------------------------------------------------------- /components/NftCard.js: -------------------------------------------------------------------------------- 1 | // import React from "react" 2 | import { urlFor } from '../sanity' 3 | import { useEffect, useState } from "react"; 4 | import { BiHeart } from "react-icons/bi"; 5 | import Router from 'next/router'; 6 | 7 | const style = { 8 | wrapper: `bg-[#303339] flex-auto w-[14rem] h-[22rem] my-10 mx-5 rounded-2xl overflow-hidden cursor-pointer hover:shadow-2xl hover:bg-grey-100 hover:scale-105 transition transform duration-100 ease-out`, 9 | imgContainer: `h-2/3 w-full overflow-hidden flex justify-center items-center`, 10 | nftImg: `w-full object-cover`, 11 | details: `p-3`, 12 | info: `flex justify-between text-[#e4e8eb] drop-shadow-xl`, 13 | infoLeft: `flex-0.6 flex-wrap`, 14 | collectionName: `font-semibold text-sm text-[#8a939b]`, 15 | assetName: `font-bold text-lg text-[#ffffff] mt-2`, 16 | infoRight: `flex-0.4 text-right`, 17 | priceTag: `font-semibold text-sm text-[#8a939b]`, 18 | priceValue: `flex items-center text-xl font-bold mt-2`, 19 | ethLogo: `h-5 mr-2`, 20 | likes: `text-[#8a939b] font-bold flex items-center w-full justify-end mt-3`, 21 | likeIcon: `text-xl mr-2`, 22 | } 23 | 24 | const NftCard = ({title, likes, nftItem, listing}) => { 25 | const [isListed, setIsListed] = useState(false) 26 | const [price, setPrice] = useState(0) 27 | 28 | // console.log(nftItem) 29 | const id = Object.values(nftItem)[1] 30 | 31 | // console.log("yes to id", id) 32 | 33 | // console.log(id[1]) 34 | 35 | useEffect(() => { 36 | if (Boolean(listing)){ 37 | setIsListed(true) 38 | setPrice(nftItem.price) 39 | } 40 | 41 | }, [listing, nftItem]) 42 | 43 | 44 | return ( 45 |
{ 48 | Router.push({ 49 | pathname: `/nfts/${id}`, 50 | query: {isListed: isListed}, 51 | }) 52 | }} 53 | > 54 |
55 | {nftItem.caption} 56 |

57 |
58 | 59 |
60 |
61 |
62 |
{title}
63 |
#{nftItem.caption}
64 |
65 | {isListed && ( 66 |
67 |
Price
68 |
69 | eth 74 | { 75 | price 76 | ? price 77 | : "0.1" 78 | } 79 |
80 |
81 | )} 82 |
83 | 84 |
85 | 86 | 87 | {' '} 88 | {likes} 89 |
90 | 91 | 92 |
93 |
94 | 95 | ) 96 | } 97 | 98 | 99 | export default NftCard -------------------------------------------------------------------------------- /components/PreLoader/LoadingScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | 4 | const Screen = styled.div` 5 | position: relative; 6 | height: 100vh; 7 | width: 100%; 8 | opacity: 0; 9 | animation: fade 0.4s ease-in forwards; 10 | background: #0a1d2e; 11 | 12 | @keyframes fade { 13 | 0% { 14 | opacity: 0.4; 15 | } 16 | 50% { 17 | opacity: 0.8; 18 | } 19 | 100% { 20 | opacity: 1; 21 | } 22 | } 23 | `; 24 | 25 | 26 | 27 | const Balls = styled.div` 28 | display: flex; 29 | position: absolute; 30 | top: 50%; 31 | left: 50%; 32 | transform: translate(-50%, -50%); 33 | 34 | .ball { 35 | height: 20px; 36 | width: 20px; 37 | border-radius: 50%; 38 | background: #1b5299; 39 | margin: 0 6px 0 0; 40 | animation: oscillate 0.7s ease-in forwards infinite; 41 | } 42 | 43 | .one { 44 | animation-delay: 0.5s; 45 | } 46 | .two { 47 | animation-delay: 1s; 48 | } 49 | .three { 50 | animation-delay: 2s; 51 | } 52 | 53 | @keyframes oscillate { 54 | 0% { 55 | transform: translateY(0); 56 | } 57 | 50% { 58 | transform: translateY(20px); 59 | } 60 | 100% { 61 | transform: translateY(0); 62 | } 63 | } 64 | `; 65 | 66 | 67 | 68 | 69 | const LoadingScreen = ({ loading }) => { 70 | return ( 71 |
72 | {loading ? ( 73 | 74 | 75 |
76 |
77 |
78 | 79 | 80 | 81 | ) : ( 82 | '' 83 | )} 84 | 85 |
86 | ); 87 | }; 88 | 89 | export default LoadingScreen; -------------------------------------------------------------------------------- /components/ProfileCard.js: -------------------------------------------------------------------------------- 1 | // import React from "react" 2 | import { urlFor } from '../sanity' 3 | import { useEffect, useState } from 'react' 4 | import { BiHeart } from 'react-icons/bi' 5 | import Router from 'next/router' 6 | 7 | const style = { 8 | wrapper: `bg-[#303339] flex-auto w-[14rem] h-[22rem] my-10 mx-5 rounded-2xl overflow-hidden cursor-pointer hover:shadow-2xl hover:bg-grey-100 hover:scale-105 transition transform duration-100 ease-out`, 9 | imgContainer: `h-2/3 w-full overflow-hidden flex justify-center items-center`, 10 | nftImg: `w-full object-cover`, 11 | details: `p-3`, 12 | info: `flex justify-between text-[#e4e8eb] drop-shadow-xl`, 13 | infoLeft: `flex-0.6 flex-wrap`, 14 | collectionName: `font-semibold text-sm text-[#8a939b]`, 15 | assetName: `font-bold text-lg text-[#ffffff] mt-2`, 16 | infoRight: `flex-0.4 text-right`, 17 | priceTag: `font-semibold text-sm text-[#8a939b]`, 18 | priceValue: `flex items-center text-xl font-bold mt-2`, 19 | ethLogo: `h-5 mr-2`, 20 | likes: `text-[#8a939b] font-bold flex items-center w-full justify-end mt-3`, 21 | likeIcon: `text-xl mr-2`, 22 | } 23 | 24 | const ProfileCard = ({nftItem}) => { 25 | const [price, setPrice] = useState(0) 26 | 27 | useEffect(() => { 28 | if (!nftItem) return 29 | 30 | setPrice(nftItem.amount) 31 | }, [nftItem]) 32 | 33 | // console.log(nftItem) 34 | return ( 35 |
36 |
37 | {nftItem.cName} 43 |
44 | 45 |
46 |
47 |
48 |
49 |
#{nftItem.cName}
50 |
51 | 52 |
53 |
Price
54 |
55 | eth 60 | {nftItem.amount} 61 |
62 |
63 |
64 |
65 |
66 | ) 67 | } 68 | 69 | export default ProfileCard 70 | -------------------------------------------------------------------------------- /components/SmallCard.js: -------------------------------------------------------------------------------- 1 | import { urlFor } from '../sanity' 2 | import Image from 'next/image' 3 | import Router from 'next/router' 4 | 5 | const style = { 6 | imgClass: `relative h-[3.25rem] rounded-lg w-[3.25rem] object-contain`, 7 | } 8 | 9 | const SmallCard = ({ name, noOfNfts, image, volumeTraded, index, collectionItem }) => { 10 | return ( 11 |
{ 13 | Router.push({ 14 | pathname: `contract/${collectionItem}`, 15 | }) 16 | }} 17 | > 18 | {/* LEFT */} 19 |
20 |
21 | {index + 1}. 22 |
23 | 28 | 29 |
30 | 31 |

{name}

32 | 33 |

{volumeTraded}

34 |
35 |
36 | 37 | {/* RIGHT */} 38 |
39 | 40 |
41 |

{noOfNfts.length}

42 |
43 | 44 |
45 |
46 | ) 47 | } 48 | 49 | export default SmallCard 50 | -------------------------------------------------------------------------------- /components/TransactionLoader.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from '@emotion/react' 3 | import { MoonLoader } from 'react-spinners' 4 | 5 | const style = { 6 | wrapper: `text-white h-96 w-72 flex flex-col justify-center items-center`, 7 | title: `font-semibold text-xl mb-12`, 8 | } 9 | 10 | const cssOverride = css` 11 | display: block; 12 | margin: 0 auto; 13 | border-color: white; 14 | ` 15 | 16 | const TransactionLoader = () => { 17 | return ( 18 |
19 |
Transaction in progress...
20 | 21 |
22 | ) 23 | } 24 | 25 | export default TransactionLoader -------------------------------------------------------------------------------- /components/blog/BlogCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'next/link' 3 | import Router from 'next/router' 4 | import { urlFor } from '../../sanity' 5 | import BlogFooter from './BlogFooter' 6 | 7 | const style = { 8 | wrapper: `max-w-sm flex-auto w-[14rem] h-[full] my-10 mx-5 overflow-hidden cursor-pointer rounded-sm hover:shadow-2xl hover:bg-grey-100 hover:scale-105 transition transform duration-500 ease-out`, 9 | imagecontainer: `h-2/3 w-full overflow-hidden`, 10 | imgtag: `h-full w-full object-cover`, 11 | infoconainer: `h-20 bg-[#313338] p-4 rounded-b-lg flex items-center text-white mx-4`, 12 | infoimage: `h-[3.25rem] rounded-full w-[3.25rem] object-contain`, 13 | title: `flex flex-col justify-center ml-4 text-white`, 14 | } 15 | 16 | function BlogCard({ image, title, date, description }) { 17 | return ( 18 |
{ 21 | Router.push({ 22 | pathname: `blogs/${title}`, 23 | }) 24 | }} 25 | > 26 |
27 | Blog Image 32 |
33 | 34 |
35 | {title} 36 |
37 | 38 |

39 | {description} 40 |

41 | 42 |
43 | 44 | 45 |

{date}

46 | 47 |
48 |
49 | 50 | 51 |
52 | ) 53 | } 54 | 55 | export default BlogCard 56 | -------------------------------------------------------------------------------- /components/blog/BlogFooter.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import React from 'react' 3 | import { BsInstagram, BsTelegram, BsTwitter } from 'react-icons/bs' 4 | import { FaDiscord } from "react-icons/fa" 5 | 6 | 7 | const style = { 8 | SocialIcons: `text-3xl px-2 cursor-pointer`, 9 | } 10 | 11 | function BlogFooter() { 12 | return ( 13 |
14 | 15 | {/* Link Button to home */} 16 | 17 | 18 | 19 | 20 | 21 | 22 | {/* Follow us on ... */} 23 |
24 |

Follow us on:

25 | 26 | {/* Social Media Handles */} 27 |
28 | 29 | 30 |
31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 |
39 | 40 | 41 | 42 |
43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 |
54 | ) 55 | } 56 | 57 | export default BlogFooter -------------------------------------------------------------------------------- /components/blog/ReviewCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { urlFor } from '../../sanity' 3 | import { useState } from 'react' 4 | 5 | const style = { 6 | imgClass: `relative h-[3.25rem] rounded-lg w-[3.25rem] object-contain`, 7 | } 8 | 9 | 10 | 11 | function ReviewCard({ name, image, stars, index }) { 12 | const [displayStars, setStars] = useState() 13 | // const [checkList, setCheckList] = useState(true) 14 | 15 | const starList = [] 16 | 17 | for (var i = 0; i < stars; i++) { 18 | starList.push("⭐") 19 | 20 | } 21 | 22 | // setCheckList(true) 23 | 24 | // while (checkList) { 25 | 26 | // if (starList.length < 6) { 27 | // starList.push(".") 28 | // } else if (starList === 5) { 29 | // setCheckList(false) 30 | // break 31 | // } 32 | 33 | 34 | 35 | 36 | // } 37 | 38 | 39 | 40 | 41 | 42 | console.log("complete star list", starList); 43 | 44 | // setStars(starList) 45 | // console.log(displayStars) 46 | 47 | return ( 48 |
50 | {/* LEFT */} 51 |
52 |
53 | {index + 1}. 54 |
55 | 60 | 61 |
62 |
63 |

{name}

64 | 65 | 66 | 67 |
68 | 69 | 70 |

{starList}

71 |
72 |
73 | 74 | {/* RIGHT */} 75 |
76 | 77 | {/*
78 |

{noOfNfts.length}

79 |
*/} 80 | 81 |
82 |
83 | 84 | 85 | ) 86 | } 87 | 88 | export default ReviewCard 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /components/blog/Stack.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { urlFor } from '../../sanity' 3 | import PortableText from '@sanity/block-content-to-react' //Serializes Portable Text from sanity.io using GraphQL 4 | 5 | 6 | const style = { 7 | pText: `text-2xl font-normal text-grey-700 pb-10`, 8 | h1Tag: `text-left text-7xl font-semibold pb-10 text-[#ced6e0]`, 9 | h2Tag: `text-left text-3xl md:text-5xl font-semibold pb-10 text-[#ced6e0]` 10 | } 11 | 12 | function Stack({ details, block }) { 13 | 14 | return ( 15 | 16 |
17 |

{details.caption}

18 | Blog Details Image 24 | 25 | 26 | 27 |
28 | 29 | 33 |
34 | 35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | ) 43 | } 44 | 45 | export default Stack -------------------------------------------------------------------------------- /components/nft/GeneralDetails.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { AiFillHeart } from 'react-icons/ai' 3 | import { MdRefresh } from 'react-icons/md' 4 | import { RiShareBoxLine } from 'react-icons/ri' 5 | import { FiMoreVertical } from 'react-icons/fi' 6 | import { GiShare } from 'react-icons/gi' 7 | import { TransactionContext } from '../../context/TransactionContext' 8 | 9 | const style = { 10 | wrapper: `flex`, 11 | infoContainer: `h-36 flex flex-col flex-1 justify-between mb-6 w-screen md:w-0`, 12 | accent: `text-[#2081e2]`, 13 | nftTitle: `text-3xl font-extrabold`, 14 | otherInfo: `flex`, 15 | ownedBy: `text-[#8a939b] mr-4`, 16 | likes: `flex items-center text-[#8a939b]`, 17 | likeIcon: `mr-1`, 18 | actionButtonsContainer: `w-44 invisible md:visible`, 19 | actionButtons: `flex container justify-between text-[1.4rem] border-2 rounded-lg`, 20 | actionButton: `my-2`, 21 | divider: `border-r-2`, 22 | } 23 | 24 | // General Details for a selected nft item. 25 | const GeneralDetails = ({ selectedNft }) => { 26 | return ( 27 |
28 |
29 |
Listed NFT
30 |
# {selectedNft.caption}
31 |
32 |
33 | Owned by e88vault 34 |
35 |
36 | 2.3K favorites 37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 | 48 |
49 |
50 |
51 | 52 |
53 |
54 |
55 | 56 |
57 |
58 |
59 |
60 | ) 61 | } 62 | 63 | export default GeneralDetails 64 | -------------------------------------------------------------------------------- /components/nft/ItemActivity.js: -------------------------------------------------------------------------------- 1 | import { CgArrowsExchangeV } from 'react-icons/cg' 2 | import { IoMdAddCircleOutline } from 'react-icons/io' 3 | import { useState } from 'react' 4 | import { AiOutlineUp, AiOutlineDown } from 'react-icons/ai' 5 | import { dummyEvents } from '../../static/dummyEvents' 6 | import EventItem from './itemActivity/EventItem' 7 | 8 | const style = { 9 | wrapper: `w-full mt-8 border border-[#151b22] rounded-xl bg-[#303339] overflow-hidden `, 10 | title: `bg-[#262b2f] px-6 py-4 flex items-center`, 11 | titleLeft: `flex-1 flex items-center text-xl font-bold`, 12 | titleIcon: `text-3xl mr-2`, 13 | titleRight: `text-xl`, 14 | filter: `flex items-center border border-[#151b22] mx-4 my-6 px-3 py-4 rounded-xl bg-[#363840]`, 15 | filterTitle: `flex-1`, 16 | tableHeader: `flex w-full bg-[#262b2f] border-y border-[#151b22] mt-8 px-4 py-1`, 17 | eventItem: `flex px-4`, 18 | ethLogo: `h-5 mr-2`, 19 | accent: `text-[#2081e2]`, 20 | } 21 | 22 | const ItemActivity = () => { 23 | const [toggle, setToggle] = useState(true) 24 | return ( 25 |
26 |
setToggle(!toggle)}> 27 |
28 | 29 | 30 | 31 | Item Activity 32 |
33 |
34 | {toggle ? : } 35 |
36 |
37 | {toggle && ( 38 |
39 |
40 |
Filter
41 |
42 | {' '} 43 | {' '} 44 |
45 |
46 |
47 |
Event
48 |
Price
49 |
From
50 |
To
51 |
Date
52 |
53 | {dummyEvents.map((event, id) => ( 54 | // 55 | 56 | ))} 57 |
58 | )} 59 |
60 | ) 61 | } 62 | 63 | export default ItemActivity 64 | -------------------------------------------------------------------------------- /components/nft/NFTImage.js: -------------------------------------------------------------------------------- 1 | import { IoMdSnow } from 'react-icons/io' 2 | import { AiOutlineHeart } from 'react-icons/ai' 3 | import { urlFor } from '../../sanity' 4 | 5 | const style = { 6 | topBar: `bg-[#303339] p-2 rounded-t-lg border-[#151c22] border`, 7 | topBarContent: `flex items-center`, 8 | likesCounter: `flex-1 flex items-center justify-end`, 9 | } 10 | 11 | const NFTImage = ({ selectedNft, alt }) => { 12 | return ( 13 |
14 |
15 |
16 | 17 |
18 | 19 | 2.3K 20 |
21 |
22 |
23 |
24 | {/* {console.log(selectedNft, '🎆')} */} 25 | {/* */} 26 | {alt} 27 |
28 |
29 | ) 30 | } 31 | 32 | export default NFTImage 33 | -------------------------------------------------------------------------------- /components/nft/Purchase.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | import { HiTag } from 'react-icons/hi' 4 | import { IoMdWallet } from 'react-icons/io' 5 | import toast, { Toaster } from 'react-hot-toast' 6 | 7 | const style = { 8 | button: `mr-8 flex items-center py-2 px-12 rounded-lg cursor-pointer`, 9 | buttonIcon: `text-xl`, 10 | buttonText: `ml-2 text-lg font-semibold`, 11 | } 12 | 13 | const MakeOffer = ({ isListed, selectedNft, listings, buyItem }) => { 14 | const [selectedMarketNft, setSelectedMarketNft] = useState() 15 | const [enableButton, setEnableButton] = useState(false) 16 | 17 | // useEffect(() => { 18 | // if (!listings || isListed === 'false') return 19 | // ;(async () => { 20 | // setSelectedMarketNft( 21 | // listings.find((marketNft) => marketNft.asset?.id === selectedNft.id) 22 | // ) 23 | // })() 24 | // }, [selectedNft, listings, isListed]) 25 | 26 | useEffect(() => { 27 | if (!selectedNft) return 28 | 29 | setEnableButton(true) 30 | }, [selectedNft]) 31 | 32 | const confirmPurchase = (toastHandler = toast) => 33 | toastHandler.success(`Purchase successful!`, { 34 | style: { 35 | background: '#04111d', 36 | color: '#fff', 37 | }, 38 | }) 39 | 40 | // const buyItem = async ( 41 | // listingId = selectedMarketNft.id, 42 | // quantityDesired = 1, 43 | // module = marketPlaceModule 44 | // ) => { 45 | // console.log(listingId, quantityDesired, module, 'david') 46 | // // yo RAZA lets goooo!!! 47 | // //yo Qazi, ok 48 | // // sure okay about to run it... 49 | // // just clicked buy now... 50 | // // still error 51 | // // where can i see the contract address of the marketplace module 52 | // // in [nftId.js] 53 | // await module 54 | // .buyoutDirectListing({ 55 | // listingId: listingId, 56 | // quantityDesired: quantityDesired, 57 | // }) 58 | // .catch((error) => console.error(error)) 59 | 60 | // confirmPurchase() 61 | // } 62 | 63 | return ( 64 |
65 | 66 | {isListed === 'true' ? ( 67 | <> 68 |
72 | 73 |
Buy Now
74 |
75 | {/*
78 | 79 |
Make Offer
80 |
*/} 81 | 82 | ) : ( 83 |
84 | 85 |
List Item
86 |
87 | )} 88 |
89 | ) 90 | } 91 | 92 | export default MakeOffer 93 | -------------------------------------------------------------------------------- /components/nft/itemActivity/EventItem.js: -------------------------------------------------------------------------------- 1 | import { BsFillCartFill } from 'react-icons/bs' 2 | 3 | const style = { 4 | eventItem: `flex px-4 py-5 font-medium`, 5 | event: `flex items-center`, 6 | eventIcon: `mr-2 text-xl`, 7 | eventName: `text-lg font-semibold`, 8 | eventPrice: `flex items-center`, 9 | eventPriceValue: `text-lg`, 10 | ethLogo: `h-5 mr-2`, 11 | accent: `text-[#2081e2]`, 12 | } 13 | 14 | const EventItem = ({ event }) => { 15 | return ( 16 |
17 |
18 |
19 | 20 |
21 |
Sale
22 |
23 |
24 | eth 29 |
{event.price}
30 |
31 |
{event.from}
32 |
{event.to}
33 |
{event.date}
34 |
35 | ) 36 | } 37 | 38 | export default EventItem -------------------------------------------------------------------------------- /components/toast/Loading.js: -------------------------------------------------------------------------------- 1 | import toast from "react-hot-toast";// Receiving toast 2 | 3 | 4 | const Loading = (toastHandler = toast) => { 5 | const resolveAfter3sec = new Promise((resolve, reject) => { 6 | setTimeout(resolve, 15000); 7 | }) 8 | //toast function for welcome user 9 | toastHandler.promise(resolveAfter3sec, { 10 | loading: 'Transaction pending... \n Please wait.', 11 | success: 'Transaction complete', 12 | reject: "Insufficient Funds", 13 | }); 14 | } 15 | 16 | 17 | 18 | 19 | export default Loading 20 | -------------------------------------------------------------------------------- /components/toast/WelcomeUser.js: -------------------------------------------------------------------------------- 1 | import toast from "react-hot-toast";// Receiving toast 2 | 3 | 4 | const WelcomeUser = (name, toastHandler = toast) => { 5 | //toast function for welcome user 6 | toastHandler.success(`Welcome back ${name !== "Unnamed"? name : " "}!`, { 7 | style: { 8 | background: '#04111d', 9 | color: '#fff', 10 | }, 11 | }) 12 | } 13 | 14 | 15 | 16 | 17 | export default WelcomeUser 18 | -------------------------------------------------------------------------------- /context/TransactionContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useEffect, useState } from 'react' 3 | import { contractABI, contractAddress } from './lib/constants' 4 | import { ethers } from 'ethers' 5 | import { client } from '../lib/sanityClient' 6 | import { useRouter } from 'next/router' 7 | import WelcomeUser from '../components/toast/WelcomeUser' 8 | import Loading from '../components/toast/Loading' 9 | 10 | export const TransactionContext = React.createContext() 11 | 12 | let eth 13 | 14 | 15 | 16 | if (typeof window != 'undefined') { 17 | eth = window.ethereum 18 | } 19 | 20 | const getEthereumContract = () => { 21 | const provider = new ethers.providers.Web3Provider(ethereum) 22 | const signer = provider.getSigner() 23 | const transactionContract = new ethers.Contract( 24 | contractAddress, 25 | contractABI, 26 | signer 27 | ) 28 | 29 | return transactionContract 30 | } 31 | 32 | export const TransactionProvider = ({ children }) => { 33 | const [currentAccount, setCurrentAccount] = useState() 34 | const [isLoading, setIsLoading] = useState() 35 | const [amount, setAmount] = useState() 36 | const [image, setImage] = useState() 37 | const [name, setName] = useState() 38 | const router = useRouter() 39 | // const location = useLocation() 40 | 41 | const address = '0x7E219E6f983187EB35F9B2D6816DF084a616d28c' 42 | 43 | const formData = { 44 | addressTo: { address }, 45 | amount: { amount }, 46 | } 47 | 48 | const NftData = { 49 | image: { image }, 50 | name: { name }, 51 | } 52 | 53 | useEffect(() => { 54 | checkIfWalletIsConnected() 55 | }, []) 56 | 57 | /** 58 | * Create user profile in Sanity 59 | */ 60 | useEffect(() => { 61 | if (!currentAccount) return 62 | ;(async () => { 63 | const userDoc = { 64 | _type: 'users', 65 | _id: currentAccount, 66 | userName: 'Unnamed', 67 | walletAddress: currentAccount, 68 | } 69 | 70 | await client.createIfNotExists(userDoc) 71 | 72 | 73 | WelcomeUser(userDoc.userName) 74 | })() 75 | }, [currentAccount]) 76 | 77 | const connectWallet = async (metamask = eth) => { 78 | try { 79 | if (!metamask) return alert('Please install metamask') 80 | const accounts = await metamask.request({ method: 'eth_requestAccounts' }) 81 | setCurrentAccount(accounts[0]) 82 | } catch (error) { 83 | console.log(error) 84 | throw new Error('No ethereum object.') 85 | } 86 | } 87 | 88 | const checkIfWalletIsConnected = async (metamask = eth) => { 89 | try { 90 | if (!metamask) return alert('Please install metamask') 91 | const accounts = await metamask.request({ method: 'eth_accounts' }) 92 | 93 | if (accounts.length) { 94 | setCurrentAccount(accounts[0]) 95 | console.log('wallet is already connected to metamask') 96 | } 97 | } catch (error) { 98 | console.log(error) 99 | throw new Error('No ethereum object.') 100 | } 101 | } 102 | 103 | const sendTransaction = async ( 104 | metamask = eth, 105 | connectedAccount = currentAccount 106 | ) => { 107 | try { 108 | if (!metamask) return alert('Please install metamask ') 109 | 110 | const { addressTo, amount } = formData // gets a destructured value for the receiver address and amount 111 | const { image, name } = NftData //gets a destructured value for the imageUrl and the NFT name from the usestate hook 112 | 113 | const transactionContract = getEthereumContract() 114 | 115 | const parsedAmount = ethers.utils.parseEther(amount.amount) 116 | const parsedAddress = addressTo.address 117 | 118 | 119 | await metamask.request({ 120 | method: 'eth_sendTransaction', 121 | params: [ 122 | { 123 | from: connectedAccount, 124 | to: addressTo.address, 125 | gas: '0x7EF40', // 520000 Gwei 126 | value: parsedAmount._hex, 127 | }, 128 | ], 129 | }) 130 | 131 | const transactionHash = await transactionContract.publishTransaction( 132 | addressTo.address, 133 | parsedAmount, 134 | `Transferring ETH ${parsedAmount} to ${addressTo.address}`, 135 | 'TRANSFER' 136 | ) 137 | 138 | setIsLoading(true) 139 | Loading() 140 | 141 | await transactionHash.wait() 142 | 143 | // FOR DB 144 | await saveTransaction( 145 | transactionHash.hash, 146 | amount.amount, 147 | connectedAccount, 148 | parsedAddress, 149 | image.image, 150 | name.name 151 | ) 152 | 153 | setIsLoading(false) 154 | } catch (error) { 155 | console.log(error) 156 | } 157 | } 158 | 159 | const handleChange = (price) => { 160 | return setAmount(price) 161 | } 162 | 163 | const handleImage = (image) => { 164 | return setImage(image) 165 | } 166 | 167 | const handleName = (name) => { 168 | return setName(name) 169 | } 170 | 171 | 172 | 173 | // Adding Selected Nft to set of Collected Item 174 | const saveTransaction = async ( 175 | txHash, 176 | amount, 177 | fromAddress = currentAccount, 178 | toAddress, 179 | image, 180 | name 181 | ) => { 182 | const txDoc = { 183 | _type: 'transactions', 184 | _id: txHash, 185 | fromAddress: fromAddress, 186 | toAddress: toAddress, 187 | timestamp: new Date(Date.now()).toISOString(), 188 | txHash: txHash, 189 | cImg: image, 190 | cName: name, 191 | amount: parseFloat(amount), 192 | } 193 | 194 | await client.createIfNotExists(txDoc) 195 | 196 | 197 | 198 | 199 | 200 | await client 201 | .patch(currentAccount) 202 | .setIfMissing({ transactions: [] }) 203 | .insert('after', 'transactions[-1]', [ 204 | { 205 | _key: txHash, 206 | _ref: txHash, 207 | _type: 'reference', 208 | }, 209 | ]) 210 | .commit() 211 | return 212 | } 213 | 214 | // console.log("checking the isLoadng", typeof isLoading) 215 | 216 | // Preloader Modal for trandaction in progress 217 | useEffect(() => { 218 | 219 | if(typeof isLoading === 'undefined') return 220 | 221 | if(isLoading) { 222 | // console.log(window.location.href) 223 | router.push(`${window.location.href}/?loading=${currentAccount}`) 224 | } 225 | else{ 226 | 227 | router.push('/profile') 228 | // WelcomeUser("transaction") 229 | } 230 | 231 | }, [isLoading]) 232 | 233 | 234 | return ( 235 | 248 | {children} 249 | 250 | ) 251 | } 252 | -------------------------------------------------------------------------------- /context/lib/Transactions.json: -------------------------------------------------------------------------------- 1 | { 2 | "_format": "hh-sol-artifact-1", 3 | "contractName": "Transactions", 4 | "sourceName": "contracts/Transactions.sol", 5 | "abi": [ 6 | { 7 | "anonymous": false, 8 | "inputs": [ 9 | { 10 | "indexed": false, 11 | "internalType": "address", 12 | "name": "sender", 13 | "type": "address" 14 | }, 15 | { 16 | "indexed": false, 17 | "internalType": "address", 18 | "name": "receiver", 19 | "type": "address" 20 | }, 21 | { 22 | "indexed": false, 23 | "internalType": "uint256", 24 | "name": "amount", 25 | "type": "uint256" 26 | }, 27 | { 28 | "indexed": false, 29 | "internalType": "string", 30 | "name": "message", 31 | "type": "string" 32 | }, 33 | { 34 | "indexed": false, 35 | "internalType": "uint256", 36 | "name": "timestamp", 37 | "type": "uint256" 38 | }, 39 | { 40 | "indexed": false, 41 | "internalType": "string", 42 | "name": "keyword", 43 | "type": "string" 44 | } 45 | ], 46 | "name": "Transfer", 47 | "type": "event" 48 | }, 49 | { 50 | "inputs": [ 51 | { 52 | "internalType": "address payable", 53 | "name": "receiver", 54 | "type": "address" 55 | }, 56 | { 57 | "internalType": "uint256", 58 | "name": "amount", 59 | "type": "uint256" 60 | }, 61 | { 62 | "internalType": "string", 63 | "name": "message", 64 | "type": "string" 65 | }, 66 | { 67 | "internalType": "string", 68 | "name": "keyword", 69 | "type": "string" 70 | } 71 | ], 72 | "name": "publishTransaction", 73 | "outputs": [], 74 | "stateMutability": "nonpayable", 75 | "type": "function" 76 | } 77 | ], 78 | "bytecode": "0x608060405234801561001057600080fd5b5061049a806100206000396000f3fe608060405234801561001057600080fd5b506004361061002b5760003560e01c80637d0ee35714610030575b600080fd5b61004a60048036038101906100459190610125565b61004c565b005b7f416cfa4330a4565f45c2fd2dd4826a83a37443aba2ce6f79477c7355afac35fa3385858542866040516100859695949392919061021e565b60405180910390a150505050565b60006100a66100a1846102b2565b61028d565b9050828152602081018484840111156100be57600080fd5b6100c9848285610383565b509392505050565b6000813590506100e081610436565b92915050565b600082601f8301126100f757600080fd5b8135610107848260208601610093565b91505092915050565b60008135905061011f8161044d565b92915050565b6000806000806080858703121561013b57600080fd5b6000610149878288016100d1565b945050602061015a87828801610110565b935050604085013567ffffffffffffffff81111561017757600080fd5b610183878288016100e6565b925050606085013567ffffffffffffffff8111156101a057600080fd5b6101ac878288016100e6565b91505092959194509250565b6101c18161034d565b82525050565b6101d0816102ff565b82525050565b60006101e1826102e3565b6101eb81856102ee565b93506101fb818560208601610392565b61020481610425565b840191505092915050565b61021881610343565b82525050565b600060c08201905061023360008301896101c7565b61024060208301886101b8565b61024d604083018761020f565b818103606083015261025f81866101d6565b905061026e608083018561020f565b81810360a083015261028081846101d6565b9050979650505050505050565b60006102976102a8565b90506102a382826103c5565b919050565b6000604051905090565b600067ffffffffffffffff8211156102cd576102cc6103f6565b5b6102d682610425565b9050602081019050919050565b600081519050919050565b600082825260208201905092915050565b600061030a82610323565b9050919050565b600061031c82610323565b9050919050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60006103588261035f565b9050919050565b600061036a82610371565b9050919050565b600061037c82610323565b9050919050565b82818337600083830152505050565b60005b838110156103b0578082015181840152602081019050610395565b838111156103bf576000848401525b50505050565b6103ce82610425565b810181811067ffffffffffffffff821117156103ed576103ec6103f6565b5b80604052505050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b6000601f19601f8301169050919050565b61043f81610311565b811461044a57600080fd5b50565b61045681610343565b811461046157600080fd5b5056fea2646970667358221220b97a9458972f58c1041c589e6359505f6ac4255cb025c6e4235096aa03e66b4964736f6c63430008040033", 79 | "deployedBytecode": "0x608060405234801561001057600080fd5b506004361061002b5760003560e01c80637d0ee35714610030575b600080fd5b61004a60048036038101906100459190610125565b61004c565b005b7f416cfa4330a4565f45c2fd2dd4826a83a37443aba2ce6f79477c7355afac35fa3385858542866040516100859695949392919061021e565b60405180910390a150505050565b60006100a66100a1846102b2565b61028d565b9050828152602081018484840111156100be57600080fd5b6100c9848285610383565b509392505050565b6000813590506100e081610436565b92915050565b600082601f8301126100f757600080fd5b8135610107848260208601610093565b91505092915050565b60008135905061011f8161044d565b92915050565b6000806000806080858703121561013b57600080fd5b6000610149878288016100d1565b945050602061015a87828801610110565b935050604085013567ffffffffffffffff81111561017757600080fd5b610183878288016100e6565b925050606085013567ffffffffffffffff8111156101a057600080fd5b6101ac878288016100e6565b91505092959194509250565b6101c18161034d565b82525050565b6101d0816102ff565b82525050565b60006101e1826102e3565b6101eb81856102ee565b93506101fb818560208601610392565b61020481610425565b840191505092915050565b61021881610343565b82525050565b600060c08201905061023360008301896101c7565b61024060208301886101b8565b61024d604083018761020f565b818103606083015261025f81866101d6565b905061026e608083018561020f565b81810360a083015261028081846101d6565b9050979650505050505050565b60006102976102a8565b90506102a382826103c5565b919050565b6000604051905090565b600067ffffffffffffffff8211156102cd576102cc6103f6565b5b6102d682610425565b9050602081019050919050565b600081519050919050565b600082825260208201905092915050565b600061030a82610323565b9050919050565b600061031c82610323565b9050919050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60006103588261035f565b9050919050565b600061036a82610371565b9050919050565b600061037c82610323565b9050919050565b82818337600083830152505050565b60005b838110156103b0578082015181840152602081019050610395565b838111156103bf576000848401525b50505050565b6103ce82610425565b810181811067ffffffffffffffff821117156103ed576103ec6103f6565b5b80604052505050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b6000601f19601f8301169050919050565b61043f81610311565b811461044a57600080fd5b50565b61045681610343565b811461046157600080fd5b5056fea2646970667358221220b97a9458972f58c1041c589e6359505f6ac4255cb025c6e4235096aa03e66b4964736f6c63430008040033", 80 | "linkReferences": {}, 81 | "deployedLinkReferences": {} 82 | } 83 | -------------------------------------------------------------------------------- /context/lib/constants.js: -------------------------------------------------------------------------------- 1 | import abi from './Transactions.json' 2 | 3 | export const contractABI = abi.abi 4 | export const contractAddress = '0x195fcD4a17434da34a374b373D943c071b783CaF' 5 | -------------------------------------------------------------------------------- /docs/images/all_nfts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/docs/images/all_nfts.png -------------------------------------------------------------------------------- /docs/images/blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/docs/images/blog.png -------------------------------------------------------------------------------- /docs/images/collections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/docs/images/collections.png -------------------------------------------------------------------------------- /docs/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/docs/images/home.png -------------------------------------------------------------------------------- /docs/images/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/docs/images/profile.png -------------------------------------------------------------------------------- /docs/images/singleC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/docs/images/singleC.png -------------------------------------------------------------------------------- /docs/images/singleN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/docs/images/singleN.png -------------------------------------------------------------------------------- /lib/sanityClient.js: -------------------------------------------------------------------------------- 1 | import sanityClient from "@sanity/client"; 2 | // import { createImageUrlBuilder } from "next-sanity" 3 | 4 | // const config = { 5 | // dataset: 'production', 6 | // projectId: 'nm1pp7pw', 7 | // // apiVersion: '2021-03-25', 8 | // // token: 'skhfV0K4zdOkbzQJqoHM6yrj7L6WLsBm4PudItsS5eAlPfeZAYbVYGClJAq85PJc8igowqCZiCHBsLQoyg6m8kqira4cSjjVAYzizuVJGBMRfKlsZNFW0KwknfVixU1kOmdZWsVLUhT2kPqW5amAhloC1b948FBFgVyXzELAVbyVxdc0KCV3', 9 | // useCdn: false, 10 | // } 11 | 12 | // export const urlFor = (source) => createImageUrlBuilder(config).image(source) 13 | 14 | export const client = sanityClient({ // Creating client funtion for sanity.io 15 | projectId: 'nm1pp7pw', 16 | dataset: 'production', 17 | apiVersion: '2021-03-25', 18 | token: 'skhfV0K4zdOkbzQJqoHM6yrj7L6WLsBm4PudItsS5eAlPfeZAYbVYGClJAq85PJc8igowqCZiCHBsLQoyg6m8kqira4cSjjVAYzizuVJGBMRfKlsZNFW0KwknfVixU1kOmdZWsVLUhT2kPqW5amAhloC1b948FBFgVyXzELAVbyVxdc0KCV3', 19 | useCdn: false, 20 | // ignoreBrowserTokenWarning: true, 21 | 22 | }) 23 | 24 | 25 | -------------------------------------------------------------------------------- /new.js: -------------------------------------------------------------------------------- 1 | // 0, 1, 2, 3, 5 ,8, 12, 21, ... 2 | 3 | let sequence = [0, 1] 4 | 5 | function listSequence(num) { 6 | for (let i = 1; i < num; i++) { 7 | sequence.push(sequence[i] + sequence[i - 1]) 8 | } 9 | 10 | console.log(sequence) 11 | } 12 | 13 | listSequence(15) 14 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | module.exports = { 3 | reactStrictMode: true, 4 | } 5 | -------------------------------------------------------------------------------- /opensea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/opensea.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "next dev", 5 | "build": "next build", 6 | "start": "next start" 7 | }, 8 | "dependencies": { 9 | "@3rdweb/hooks": "^1.9.2", 10 | "@3rdweb/sdk": "^1.39.4", 11 | "@emotion/react": "^11.8.2", 12 | "@sanity/block-content-to-react": "^3.0.0", 13 | "@sanity/client": "^3.0.3", 14 | "ethers": "^5.6.0", 15 | "next": "latest", 16 | "next-sanity": "^0.4.0", 17 | "nprogress": "^0.2.0", 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2", 20 | "react-hot-toast": "^2.2.0", 21 | "react-icons": "^4.3.1", 22 | "react-modal": "^3.14.4", 23 | "react-router-dom": "^6.2.2", 24 | "react-spinners": "^0.11.0", 25 | "styled-components": "^5.3.5" 26 | }, 27 | "devDependencies": { 28 | "@types/node": "17.0.4", 29 | "@types/react": "17.0.38", 30 | "autoprefixer": "^10.4.0", 31 | "postcss": "^8.4.5", 32 | "prettier": "^2.5.1", 33 | "prettier-plugin-tailwindcss": "^0.1.1", 34 | "tailwindcss": "^3.0.7", 35 | "typescript": "4.5.4" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | // import { ThirdwebWeb3Provider } from "@3rdweb/hooks"; 4 | import Head from 'next/head'; 5 | import { TransactionProvider } from '../context/TransactionContext' 6 | import React from 'react'; 7 | // import "../styles/globals.css"; 8 | import LoadingScreen from "../components/PreLoader/LoadingScreen"; 9 | import { useState, useEffect } from "react"; 10 | // import Header from '../components/Header'; 11 | import { useRouter } from 'next/router'; 12 | import Header from '../components/Header'; 13 | 14 | // import NProgress from 'nprogress'; 15 | // import 'nprogress/nprogress.css'; 16 | // import Router from 'next/router'; 17 | 18 | 19 | 20 | 21 | // Router.events.on('routeChangeStart', (url) => { 22 | // console.log(`Loading: ${url}`); 23 | // NProgress.start(); 24 | // }); 25 | 26 | // Router.events.on('routeChangeComplete', () => NProgress.done()); 27 | // Router.events.on('routeChangeError', () => NProgress.done()); 28 | 29 | function MyApp({ Component, pageProps }: AppProps) { 30 | const [loading, setLoading] = useState(false); 31 | const router = useRouter() 32 | 33 | useEffect(() => { 34 | const handleStart = (url: string) => { 35 | url !== router.pathname ? setLoading(true) : setLoading(false); 36 | }; 37 | const handleComplete = (url: string) => setLoading(false); 38 | 39 | router.events.on("routeChangeStart", handleStart); 40 | router.events.on("routeChangeComplete", handleComplete); 41 | router.events.on("routeChangeError", handleComplete); 42 | }, [router]); 43 | 44 | return ( 45 |
46 | 47 | Base Mint 48 | 49 | 50 | 51 | 52 | 53 |
54 | 55 | 56 | 57 | 58 |
59 | 60 | ) 61 | } 62 | 63 | export default MyApp 64 | -------------------------------------------------------------------------------- /pages/admin.js: -------------------------------------------------------------------------------- 1 | import Header from '../components/Header' 2 | import { sanityClient } from '../sanity' 3 | import AdminTable from '../components/AdminTable' 4 | 5 | export default function Admin({ items }) { 6 | // console.log('check', items) 7 | return ( 8 |
9 |

10 | ADMIN 11 |

12 | 13 |
14 | {/* {items.map((item, id) => ( 15 | 16 | ))} */} 17 | 18 | 19 | 20 | 21 | 22 | {/* */} 23 | 24 | 25 | 26 |
27 | 28 | {items.map((item, id) => ( 29 | 33 | ))} 34 | 35 |
S/N   NameWallet Address
36 |
37 |
38 | ) 39 | } 40 | 41 | export async function getServerSideProps() { 42 | const query = `*[_type == "users"]{ 43 | walletAddress, 44 | }` 45 | 46 | const items = await sanityClient.fetch(query) 47 | 48 | if (!items) { 49 | return { 50 | props: null, 51 | notFound: true, 52 | } 53 | } else { 54 | return { 55 | props: { 56 | items: items, 57 | }, 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /pages/allnfts.js: -------------------------------------------------------------------------------- 1 | import Header from "../components/Header" 2 | import { sanityClient } from "../sanity" 3 | import NftCard from "../components/NftCard" 4 | import Footer from "../components/Footer" 5 | 6 | 7 | 8 | export default function AllNfts({ 9 | items, 10 | }) { 11 | // console.log(items) 12 | 13 | return ( 14 |
15 |

ALL NFTs

16 | 17 |
18 |
19 |
20 | {items.map((item, id) => ( 21 | 28 | 29 | 30 | ))} 31 |
32 |
33 |
34 | 35 | 36 | 37 |
38 | 39 |
40 | ) 41 | } 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | export async function getServerSideProps() { 51 | 52 | const query = `*[_type == "testImage"]` 53 | 54 | 55 | const items = await sanityClient.fetch(query) 56 | 57 | 58 | if (!items) { 59 | return { 60 | props: null, 61 | notFound: null, 62 | } 63 | } else { 64 | return { 65 | props: { 66 | 67 | items: items, 68 | }, 69 | } 70 | } 71 | 72 | } -------------------------------------------------------------------------------- /pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /pages/blog.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import Header from '../components/Header' 3 | import Footer from '../components/Footer' 4 | import { sanityClient } from '../sanity' 5 | import BlogCard from '../components/blog/BlogCard' 6 | import BlogFooter from '../components/blog/BlogFooter' 7 | import ReviewCard from '../components/blog/ReviewCard' 8 | import SmallCard from '../components/SmallCard' 9 | import Link from 'next/link' 10 | import { WiDirectionRight } from 'react-icons/wi' 11 | 12 | function Blog({ items }) { 13 | // console.log(another) 14 | 15 | 16 | 17 | return ( 18 |
19 |
20 | {/* Blog Posts */} 21 | 22 |
23 |

24 | NFT Blog 25 |

26 |

27 | Learn how to get the most from your NFTs. Explore the latest NFTs 28 | news and tips and tricks all brought to you by your friendly, 29 | talkative NFT marketplace on BSC. 30 |

31 |
32 | 33 | {items.map((item, id) => ( 34 | 35 | ))} 36 | 37 | 38 |
39 | 40 | {/* Reviews(use Grid) */} 41 | 42 |

43 | Reviews 44 |

45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
53 |
54 |
55 |
56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
67 | 68 | 69 | 70 |
71 | 72 |
73 |
74 | ) 75 | } 76 | 77 | export async function getServerSideProps() { 78 | 79 | 80 | const query = `*[_type == "blogs" ]{ 81 | blogTitle, 82 | mainImage, 83 | blogDetails, 84 | date, 85 | refReview, 86 | description, 87 | }` 88 | 89 | 90 | 91 | 92 | const items = await sanityClient.fetch(query) 93 | 94 | 95 | 96 | 97 | 98 | if (!items) { 99 | return { 100 | props: null, 101 | notFound: true, 102 | } 103 | } else { 104 | return { 105 | props: { 106 | 107 | items: items, 108 | }, 109 | } 110 | } 111 | } 112 | 113 | export default Blog 114 | -------------------------------------------------------------------------------- /pages/blogs/[blogId].js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useId } from 'react' 3 | import { useRouter } from 'next/router' 4 | // import BlogCard from '../../components/BlogCard' 5 | import { sanityClient } from '../../sanity' 6 | import { urlFor } from '../../sanity' 7 | import Header from '../../components/Header' 8 | import Footer from '../../components/Footer' 9 | import BlogFooter from '../../components/blog/BlogFooter' 10 | import PortableText from '@sanity/block-content-to-react' //Serializes Portable Text from sanity.io using GraphQL 11 | import Stack from '../../components/blog/Stack' 12 | 13 | 14 | const style = { 15 | pText: `text-2xl font-normal text-grey-700 pb-10`, 16 | h1Tag: `text-left text-4xl md:text-7xl font-semibold pb-10 text-[#ced6e0]`, 17 | h2Tag: `text-left text-5xl font-semibold pb-10 text-[#ced6e0]` 18 | } 19 | 20 | // function toPlainText(blocks = []) { 21 | // return blocks 22 | // // loop through each block 23 | // .map(block => { 24 | // // if it's not a text block with children, 25 | // // return nothing 26 | // if (block._type !== 'block' || !block.children) { 27 | // return '' 28 | // } 29 | // // loop through the children spans, and join the 30 | // // text strings 31 | // return block.children.map(child => child.text).join('') 32 | // }) 33 | // // join the paragraphs leaving split by two linebreaks 34 | // .join('\n\n') 35 | // } 36 | 37 | 38 | const Item = ({ details, blogTitle, mainImage, description, another, date }) => { 39 | 40 | // console.log(date) 41 | return ( 42 |
43 | 44 |
45 | 46 |
47 | 48 | 49 | {/* Blog Posts */} 50 |
51 |

{blogTitle}

52 | 53 |

{description}

54 | 55 |

{date}

56 | 57 | Blog Image 62 | 63 |

64 | 65 | 66 |

67 | 68 |
69 | 70 | 71 | {/* Details Div Block */} 72 | {details.map((detail, id) => ( 73 | 79 | ))} 80 | 81 | 82 | 83 | 84 | 85 | 86 | {/* Reviews */} 87 |
88 | 89 |
90 |
91 |
92 | 93 | 94 | 95 | 96 | 97 |
98 | 99 | 100 |
101 | 102 |
103 | 104 |
105 | 106 | ) 107 | } 108 | 109 | export async function getServerSideProps(context) { 110 | const { params } = context 111 | const id = Object.values(params)[0] 112 | 113 | 114 | const query = `*[_type == "blogs" && blogTitle == "${id}"][0]{ 115 | blogTitle, 116 | description, 117 | mainImage, 118 | date, 119 | another, 120 | "Details": blogDetails[]->, 121 | } 122 | ` 123 | 124 | const items = await sanityClient.fetch(query) 125 | 126 | if (!items) { 127 | return { 128 | props: null, 129 | notFound: true, 130 | } 131 | } else { 132 | return { 133 | props: { 134 | blogTitle: items.blogTitle, 135 | mainImage: items.mainImage, 136 | details: items.Details, 137 | description: items.description, 138 | another: items.another, 139 | date: items.date, 140 | 141 | // items: items 142 | }, 143 | } 144 | } 145 | } 146 | 147 | export default Item 148 | -------------------------------------------------------------------------------- /pages/collections.js: -------------------------------------------------------------------------------- 1 | import Header from '../components/Header' 2 | import CollectionCard from '../components/CollectionCard' 3 | import { sanityClient } from '../sanity' 4 | import Footer from '../components/Footer' 5 | 6 | const style = { 7 | wrapper: `overflow-hidden`, 8 | } 9 | 10 | export default function Collection({ items }) { 11 | // console.log(items) 12 | 13 | return ( 14 |
15 |

16 | COLLECTIONS 17 |

18 | 19 |
20 |
21 |
22 | {items.map((item, id) => ( 23 | 31 | ))} 32 |
33 |
34 |
35 | 36 |
37 |
38 | ) 39 | } 40 | 41 | export async function getServerSideProps() { 42 | const query = `*[_type == "marketItems"]{ 43 | title, 44 | "image": profileImage.asset, 45 | contractAddress, 46 | }` 47 | 48 | const items = await sanityClient.fetch(query) 49 | 50 | if (!items) { 51 | return { 52 | props: null, 53 | notFound: null, 54 | } 55 | } else { 56 | return { 57 | props: { 58 | items: items, 59 | }, 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /pages/contract/[contractAddress].js: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | import React from 'react' 3 | import Header from '../../components/Header' 4 | import { sanityClient } from '../../sanity' 5 | import { CgWebsite } from 'react-icons/cg' 6 | import { AiOutlineInstagram, AiOutlineTwitter } from 'react-icons/ai' 7 | import { HiDotsVertical } from 'react-icons/hi' 8 | import NewImage from '../../components/NftCard' 9 | import NftCard from '../../components/NftCard' 10 | import Footer from '../../components/Footer' 11 | 12 | const style = { 13 | bannerImageContainer: `h-[20vh] w-screen overflow-hidden flex justify-center items-center`, 14 | bannerImage: `w-full object-cover`, 15 | infoContainer: `w-screen px-4`, 16 | midRow: `w-fit md:w-full flex justify-center text-white items-center`, 17 | endRow: `w-full flex justify-end text-white`, 18 | profileImg: `w-40 h-40 object-cover rounded-full border-2 border-[#202225] mt-[-4rem]`, 19 | socialIconsContainer: `flex text-3xl mb-[-2rem] invisible md:visible`, 20 | socialIconsWrapper: `w-44`, 21 | socialIconsContent: `flex container justify-between text-[1.4rem] border-2 rounded-lg px-2`, 22 | socialIcon: `my-2`, 23 | divider: `border-r-2`, 24 | title: `text-5xl font-bold mb-4`, 25 | createdBy: `text-lg mb-4`, 26 | statsContainer: `w-full md:w-[44vw] flex justify-between py-4 border border-[#151b22] rounded-xl mb-4`, 27 | collectionStat: `w-1/4 mx-[27px]`, 28 | statValue: `text-3xl font-bold w-full flex items-center justify-center`, 29 | ethLogo: `h-6 mr-2`, 30 | statName: `text-lg w-full text-center mt-1`, 31 | description: `text-[#8a939b] text-xl w-max-1/4 flex-wrap mt-4`, 32 | 33 | } 34 | 35 | const Item = ({ 36 | imageUrl, 37 | bannerImageUrl, 38 | volumeTraded, 39 | createdBy, 40 | images, 41 | nftItems, 42 | contractAddress, 43 | creator, 44 | title, 45 | floorPrice, 46 | allOwners, 47 | description, 48 | params, 49 | }) => ( 50 |
51 |
52 | banner 56 |
57 | 58 |
59 |
60 | profile image 64 |
65 | 66 |
67 |
68 |
69 |
70 |
71 | 72 |
73 | 74 |
75 | 76 |
77 | 78 |
79 | 80 |
81 | 82 |
83 | 84 |
85 | 86 |
87 | 88 |
89 | 90 |
91 |
92 |
93 |
94 |
95 | 96 |
97 |
{title}
98 |
99 | 100 |
101 |
102 | Created by {creator} 103 |
104 |
105 | 106 |
107 |
108 |
109 |
{nftItems.length}
110 |
Items
111 |
112 | {/*
113 |
114 | {allOwners ? allOwners.length : ""} 115 |
116 |
owners
117 |
*/} 118 |
119 |
120 | eth 124 | {floorPrice} 125 |
126 |
Floor Price
127 |
128 | 129 |
130 |
131 | eth 135 | {volumeTraded}.5k 136 |
137 |
Volume Traded
138 |
139 |
140 |
141 | 142 |
143 |
{description}
144 |
145 |
146 | 147 |
148 | {nftItems.map((nftItem, id) => { 149 | return ( 150 | 155 | ) 156 | })} 157 | 158 |
159 | 160 |
161 |
162 | ) 163 | 164 | export const getServerSideProps = async (context) => { 165 | const { params } = context 166 | const id = Object.values(params)[0] 167 | 168 | const query = `*[_type == "marketItems" && contractAddress == "${id}"][0] { 169 | "imageUrl": profileImage.asset->url, 170 | "bannerImageUrl": bannerImage.asset->url, 171 | volumeTraded, 172 | createdBy, 173 | contractAddress, 174 | "creator": createdBy->userName, 175 | title, floorPrice, 176 | "allOwners": owners[]->, 177 | "nftItems": images[]->, 178 | description, 179 | }` 180 | const items = await sanityClient.fetch(query) 181 | 182 | if (!items) { 183 | return { 184 | props: null, 185 | notFound: true, 186 | } 187 | } else { 188 | return { 189 | props: { 190 | imageUrl: items.imageUrl, 191 | bannerImageUrl: items.bannerImageUrl, 192 | volumeTraded: items.volumeTraded, 193 | createdBy: items.createdBy, 194 | // images: items.nftImage, 195 | nftItems: items.nftItems, 196 | contractAddress: items.contractAddress, 197 | creator: items.creator, 198 | title: items.title, 199 | floorPrice: items.floorPrice, 200 | allOwners: items.allOwners, 201 | description: items.description, 202 | params, 203 | }, 204 | } 205 | } 206 | } 207 | 208 | export default Item 209 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import { useWeb3 } from '@3rdweb/hooks' 2 | import Head from 'next/head' 3 | import { useContext, useEffect } from 'react' 4 | import { sanityClient } from '../sanity' 5 | import Header from '../components/Header' 6 | import Hero from '../components/Hero' 7 | import { client } from '../lib/sanityClient' 8 | import toast, { Toaster } from 'react-hot-toast' // Receiving toast 9 | import { title } from 'process' 10 | import HomeCard from '../components/HomeCard' 11 | import { urlFor } from '../sanity' 12 | import Link from 'next/link' 13 | import Footer from '../components/Footer' 14 | import SmallCard from '../components/SmallCard' 15 | // import { TransactionContext } from '../context/TransactionContext' 16 | 17 | const style = { 18 | wrapper: `overflow-hidden`, 19 | walletConnectWrapper: `flex flex-col justify-center items-center h-screen w-screen bg-[#3b3d42] `, 20 | button: `border border-[#282b2f] bg-[#2081e2] p-[0.8rem] text-xl font-semibold rounded-lg cursor-pointer text-black`, 21 | details: `text-lg text-center text=[#282b2f] font-semibold mt-4`, 22 | cardgrid: `w-1/3 px-2`, 23 | sectionContainer: `max-w-7xl mx-auto px-8 sm:px-16 pt-6`, 24 | } 25 | 26 | export default function Home({ items }) { 27 | // const { isLoading, currentAccount } = useContext(TransactionContext) 28 | 29 | // useEffect(() => { 30 | // setIs 31 | 32 | // }, [isLoading, currentAccount]) 33 | 34 | return ( 35 |
36 | {/* {address ? ( //Conditional Rendering */} 37 | 38 | <> 39 |
40 | 41 | 42 |
43 |
44 | 45 | {/* FEATURED COLLECTION SECTION */} 46 |
47 |
48 |

49 | Featured Collections 50 |

51 | 52 |
53 | {/* {items?.map((item, id) => ( 54 | 62 | ))} */} 63 | 64 | 71 | 72 | 79 | 80 | 87 | 88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 | {/* TOP COLLECTION SECTION */} 96 |
97 |
98 |

99 | Top Collections 100 |

101 | 102 |
103 | {items?.map((item, id) => ( 104 | 113 | ))} 114 |
115 | 116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 | 126 |
127 | 128 |
129 | ) 130 | } 131 | 132 | export async function getServerSideProps() { 133 | const query = `*[ _type == "marketItems" ]{ 134 | "imageUrl" : profileImage.asset, 135 | "bannerUrl" : bannerImage.asset, 136 | title, 137 | description, 138 | contractAddress, 139 | volumeTraded, 140 | images, 141 | }` 142 | 143 | const items = await sanityClient.fetch(query) 144 | 145 | if (!items) { 146 | return { 147 | props: null, 148 | notFound: true, 149 | } 150 | } else { 151 | return { 152 | props: { 153 | items: items, 154 | }, 155 | } 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /pages/nfts/[nftId].js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Header from '../../components/Header' 3 | import { useRouter } from 'next/router' 4 | import { useEffect, useState, useContext } from 'react' 5 | import GeneralDetails from '../../components/nft/GeneralDetails' 6 | import ItemActivity from '../../components/nft/ItemActivity' 7 | import { sanityClient } from '../../sanity' 8 | import { client } from '../../lib/sanityClient' 9 | import Purchase from '../../components/nft/Purchase' 10 | import { urlFor } from '../../sanity' 11 | import { IoMdSnow } from 'react-icons/io' 12 | import { AiOutlineHeart } from 'react-icons/ai' 13 | import NFTImage from '../../components/nft/NFTImage' 14 | import { TransactionContext } from '../../context/TransactionContext' 15 | import Modal from 'react-modal' 16 | import TransactionLoader from '../../components/TransactionLoader' 17 | import Footer from '../../components/Footer' 18 | // import TransactionContext from '../../context/TransactionContext' 19 | import WelcomeUser from '../../components/toast/WelcomeUser' 20 | 21 | 22 | Modal.setAppElement('#__next') 23 | 24 | const style = { 25 | wrapper: `flex flex-col items-center container-lg text-[#e5e8eb] overflow-hidden`, 26 | container: `container p-6`, 27 | topContent: `flex`, 28 | nftImgContainer: `flex-1 mr-4`, 29 | detailsContainer: `flex-[2] ml-4`, 30 | 31 | topBar: `bg-[#303339] p-2 rounded-t-lg border-[#151c22] border`, 32 | topBarContent: `flex items-center`, 33 | likesCounter: `flex-1 flex items-center justify-end`, 34 | } 35 | 36 | const customStyles = { 37 | content: { 38 | top: '50%', 39 | left: '50%', 40 | right: 'auto', 41 | bottom: 'auto', 42 | transform: 'translate(-50%, -50%)', 43 | backgroundColor: '#ffffff', 44 | padding: 0, 45 | border: 'none', 46 | }, 47 | overlay: { 48 | backgroundColor: 'rgba(10, 11, 13, 0.75)', 49 | }, 50 | } 51 | 52 | const Nft = ({ selectedNft }) => { 53 | const { formData, NftData, handleImage, handleName, handleChange, sendTransaction, currentAccount } = useContext(TransactionContext) 54 | 55 | // const [ listings, setlistings ] = useState([]) 56 | // console.log("location", window.location.href) 57 | 58 | 59 | const router = useRouter() 60 | const { check } = router.query 61 | // const [selectedNft, setSelectedNft] = useState({}) 62 | 63 | 64 | //Payment Configurations 65 | const price = handleChange(selectedNft.price ? selectedNft.price : "0.1") 66 | const image = handleImage(selectedNft.imageTest) 67 | const name = handleName(selectedNft.caption) 68 | 69 | 70 | 71 | const handleSubmit = async (e) => { 72 | const { addressTo, amount } = formData 73 | const { image, name } = NftData 74 | e.preventDefault() 75 | 76 | // console.log('got image', image) 77 | // console.log('got name', name) 78 | 79 | if (!addressTo || !amount || !image || !name) return 80 | 81 | 82 | 83 | sendTransaction() 84 | 85 | 86 | } 87 | 88 | 89 | return ( 90 |
91 |
92 |
93 |
94 |
95 | 99 |
100 |
101 | 102 | handleSubmit(e)} 107 | // Get the id from the route.query 108 | 109 | /> 110 | 111 | 112 |
113 |
114 |
115 | 116 | 117 |
118 |
119 |
120 | 121 |
122 | 123 | {/* */} 124 | 125 |
126 | ) 127 | } 128 | 129 | export async function getServerSideProps(context) { 130 | const id = context.params 131 | 132 | 133 | const query = `*[_type == "testImage" && _id == "${id.nftId}"][0]{ 134 | caption, 135 | imageTest, 136 | price, 137 | }` 138 | 139 | 140 | const items = await sanityClient.fetch(query) 141 | 142 | 143 | if (!items) { 144 | return { 145 | props: null, 146 | notFound: true, 147 | } 148 | 149 | } else { 150 | return { 151 | props: { 152 | selectedNft: items 153 | } 154 | } 155 | } 156 | } 157 | 158 | export default Nft 159 | -------------------------------------------------------------------------------- /pages/profile.js: -------------------------------------------------------------------------------- 1 | import { title } from 'process' 2 | import { useContext, useEffect, useState } from 'react' 3 | import Header from '../components/Header' 4 | import NftCard from '../components/NftCard' 5 | import { TransactionContext } from '../context/TransactionContext' 6 | import { client } from '../lib/sanityClient' 7 | import { sanityClient } from '../sanity' 8 | import { CgWebsite } from 'react-icons/cg' 9 | import { AiOutlineInstagram, AiOutlineTwitter } from 'react-icons/ai' 10 | import { HiDotsVertical } from 'react-icons/hi' 11 | import { BsFillShareFill } from 'react-icons/bs' 12 | import ProfileCard from '../components/ProfileCard' 13 | import profile from '../assets/profile.png' 14 | 15 | // const style = { 16 | // wrapper: `overflow-hidden`, 17 | // } 18 | 19 | const style = { 20 | bannerImageContainer: `h-[20vh] w-screen overflow-hidden flex justify-center items-center`, 21 | bannerImage: `w-full object-cover`, 22 | infoContainer: `w-screen px-4`, 23 | midRow: `w-fit md:w-full flex justify-center text-white`, 24 | endRow: `w-full flex justify-end text-white`, 25 | profileImg: `w-40 h-40 object-cover rounded-full border-2 border-[#202225] mt-[-4rem]`, 26 | socialIconsContainer: `flex text-3xl mb-[-2rem] invisible md:visible`, 27 | socialIconsWrapper: `w-40`, 28 | socialIconsContent: `flex container justify-between text-[1.4rem] border-2 rounded-lg px-2`, 29 | socialIcon: `my-2`, 30 | divider: `border-r-2`, 31 | title: `text-4xl font-semibold mb-4`, 32 | createdBy: `text-lg mb-4`, 33 | statsContainer: `w-[44vw] flex justify-between py-4 border border-[#151b22] rounded-xl mb-4`, 34 | collectionStat: `w-1/4`, 35 | statValue: `text-3xl font-bold w-full flex items-center justify-center`, 36 | ethLogo: `h-6 mr-2`, 37 | statName: `text-lg w-full text-center mt-1`, 38 | description: `text-[#8a939b] text-xl w-max-1/4 flex-wrap mt-4`, 39 | } 40 | 41 | export default function Profile() { 42 | const { isLoading, currentAccount } = useContext(TransactionContext) 43 | const [transactionHistory, setTransactionHistory] = useState([]) 44 | const [userName, setUserName] = useState() 45 | 46 | useEffect(() => { 47 | ; (async () => { 48 | if (!isLoading && currentAccount) { 49 | const query = ` 50 | *[_type=="users" && _id == "${currentAccount}"] { 51 | "transactionList": transactions[]->{amount, toAddress, cImg, cName, timestamp, txHash}|order(timestamp desc) 52 | } 53 | ` 54 | 55 | const clientRes = await client.fetch(query) 56 | 57 | setTransactionHistory(clientRes[0].transactionList) 58 | } 59 | })() 60 | }, [isLoading, currentAccount]) 61 | 62 | useEffect(() => { 63 | if (!currentAccount) return 64 | 65 | const str1 = currentAccount.slice(0, 7) 66 | const str2 = currentAccount.slice(35) 67 | const finalStr = str1 + '...' + str2 68 | setUserName(finalStr) 69 | }, [currentAccount]) 70 | 71 | return ( 72 |
73 | {/*

Profile Page

*/} 74 | 75 |
76 | banner 81 |
82 | 83 |
84 |
85 | profile image 90 |
91 | 92 |
93 |
94 |
95 |
96 | {/*
97 | 98 |
99 | 100 |
101 | 102 |
103 | 104 |
105 | 106 |
*/} 107 | 108 |
109 | 110 |
111 | 112 |
113 | 114 |
115 | 116 |
117 |
118 |
119 |
120 |
121 | 122 |
123 |
Unnamed
124 |
125 | 126 |
127 |
128 | eth 133 |
{userName}
134 |
135 |
136 | 137 | {/*
138 |
timestamp
139 |
*/} 140 |
141 | 142 |
143 |

144 | Collected Nfts 145 |

146 |
147 |
148 |
149 | 150 |
151 | {transactionHistory && 152 | transactionHistory?.map((transaction, id) => ( 153 | 154 | ))} 155 |
156 |
157 | ) 158 | } 159 | 160 | // export const getServerSideProps = async () => { 161 | // const query = `` 162 | 163 | // const items = await sanityClient.fetch(query) 164 | 165 | // if (!items) { 166 | // return { 167 | // props: null, 168 | // notFound: true, 169 | // } 170 | 171 | // } else { 172 | // return { 173 | // props: { 174 | 175 | // }, 176 | // } 177 | // } 178 | // } 179 | -------------------------------------------------------------------------------- /pages/reviews.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReviewCard from '../components/blog/ReviewCard' 3 | import Footer from '../components/Footer' 4 | import Header from '../components/Header' 5 | import { sanityClient } from '../sanity' 6 | 7 | function reviews({ items }) { 8 | // console.log(items) 9 | return ( 10 |
11 | 12 | 13 |
14 |
15 |

16 | Reviews 17 |

18 | 19 | 20 |
21 | 22 | {items.map((item, id) => ( 23 | 31 | 32 | ))} 33 | 34 | 35 |
36 |
37 | 38 |
39 | 40 | 41 |
42 |
43 | ) 44 | } 45 | 46 | export async function getServerSideProps() { 47 | const query = `*[_type == "reviews" ]{ 48 | name, 49 | stars, 50 | picture, 51 | }` 52 | 53 | const items = await sanityClient.fetch(query) 54 | 55 | 56 | if (!items) { 57 | return { 58 | props: null, 59 | notFound: true, 60 | } 61 | } else { 62 | return { 63 | props: { 64 | items: items, 65 | }, 66 | } 67 | } 68 | 69 | 70 | } 71 | 72 | 73 | 74 | 75 | export default reviews 76 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'always', 3 | singleQuote: true, 4 | tabWidth: 2, 5 | semi: false, 6 | tailwindConfig: './tailwind.config.js', 7 | } 8 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/public/favicon.ico -------------------------------------------------------------------------------- /public/opensea.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bouncei/b-blockchain-nft/1798eba343b9d0ab3c5f7d477851820c0ccced4b/public/opensea.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /sanity.js: -------------------------------------------------------------------------------- 1 | import { createClient, createImageUrlBuilder } from 'next-sanity' 2 | 3 | const config = { 4 | dataset: 'production', 5 | projectId: 'nm1pp7pw', 6 | // apiVersion: '2021-03-25', 7 | // token: 'skhfV0K4zdOkbzQJqoHM6yrj7L6WLsBm4PudItsS5eAlPfeZAYbVYGClJAq85PJc8igowqCZiCHBsLQoyg6m8kqira4cSjjVAYzizuVJGBMRfKlsZNFW0KwknfVixU1kOmdZWsVLUhT2kPqW5amAhloC1b948FBFgVyXzELAVbyVxdc0KCV3', 8 | useCdn: false, 9 | } 10 | 11 | // formating the .jpg from sanity.io into a source attribute in an image tag. 12 | export const urlFor = (source) => createImageUrlBuilder(config).image(source) 13 | 14 | export const sanityClient = createClient(config) 15 | -------------------------------------------------------------------------------- /smart_contract/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env 3 | coverage 4 | coverage.json 5 | typechain 6 | 7 | #Hardhat files 8 | cache 9 | artifacts 10 | -------------------------------------------------------------------------------- /smart_contract/README.md: -------------------------------------------------------------------------------- 1 | # Basic Sample Hardhat Project 2 | 3 | This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, a sample script that deploys that contract, and an example of a task implementation, which simply lists the available accounts. 4 | 5 | Try running some of the following tasks: 6 | 7 | ```shell 8 | npx hardhat accounts 9 | npx hardhat compile 10 | npx hardhat clean 11 | npx hardhat test 12 | npx hardhat node 13 | node scripts/sample-script.js 14 | npx hardhat help 15 | ``` 16 | -------------------------------------------------------------------------------- /smart_contract/contracts/Transactions.sol: -------------------------------------------------------------------------------- 1 | 2 | 3 | // SPDX-License-Identifier: MIT 4 | 5 | pragma solidity ^0.8.0; 6 | 7 | contract Transactions { 8 | event Transfer (address sender, address receiver, uint amount, string message, uint256 timestamp, string keyword); 9 | 10 | function publishTransaction(address payable receiver, uint amount, string memory message, string memory keyword) public { 11 | emit Transfer(msg.sender, receiver, amount, message, block.timestamp, keyword); 12 | } 13 | } -------------------------------------------------------------------------------- /smart_contract/hardhat.config.js: -------------------------------------------------------------------------------- 1 | require("@nomiclabs/hardhat-waffle"); 2 | 3 | /** 4 | * @type import('hardhat/config').HardhatUserConfig 5 | */ 6 | module.exports = { 7 | solidity: "0.8.4", 8 | networks: { 9 | rinkeby: { 10 | url: 'https://eth-rinkeby.alchemyapi.io/v2/cZTxqnlB02OiRZQYCVIuj3U3LR20_MbV', 11 | accounts: [ 12 | 'fc47f40a84f71488a356a43caa05512743609e1df51e866a4d196496f5db92a7', 13 | ], 14 | 15 | } 16 | } 17 | }; 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /smart_contract/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hardhat-project", 3 | "devDependencies": { 4 | "@nomiclabs/hardhat-ethers": "^2.0.5", 5 | "@nomiclabs/hardhat-waffle": "^2.0.3", 6 | "chai": "^4.3.6", 7 | "ethereum-waffle": "^3.4.0", 8 | "ethers": "^5.6.0", 9 | "hardhat": "^2.9.1" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /smart_contract/scripts/deploy.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const main = async () => { 4 | const transactionFactory = await hre.ethers.getContractFactory('Transactions') 5 | const transactionContract = await transactionFactory.deploy() 6 | 7 | await transactionContract.deployed() 8 | 9 | console.log('Transactions deployed to:', transactionContract.address) 10 | } 11 | 12 | ;(async () => { 13 | try { 14 | await main() 15 | process.exit(0) 16 | } catch (error) { 17 | console.error(error) 18 | process.exit(1) 19 | } 20 | })() -------------------------------------------------------------------------------- /smart_contract/scripts/sample-script.js: -------------------------------------------------------------------------------- 1 | // We require the Hardhat Runtime Environment explicitly here. This is optional 2 | // but useful for running the script in a standalone fashion through `node