Ethereum nft marketplace template using react

Overview

ethereum-marketplace-template

⭐️ Star us

If this boilerplate helps you build Ethereum dapps faster - please star this project, every star makes us very happy!

🚀 Quick Start

📄 Clone or fork ethereum-nft-marketplace-template:

git clone 

💿 Install all dependencies:

cd ethereum-nft-marketplace
yarn install 

Rename .env.example to .env in the main folder and provide your appId and serverUrl from Moralis (How to start Moralis Server) Example:

REACT_APP_MORALIS_APPLICATION_ID = xxxxxxxxxxxx
REACT_APP_MORALIS_SERVER_URL = https://xxxxxx.grandmoralis.com:2053/server

🔎 Locate the Project Settings in src/components/Admin/index.js and paste the deployed project smart contract address and chainId

export const ProjectAddress = "" // Project Contract
export const ProjectChainId = "" // Project Chain Id

🔃 Sync the ModuleUpdated event from project contract with your Moralis Server, calling tableName ModuleSync

🚴‍♂️ Run your App:

yarn start
You might also like...
This is used for minting NFTs and getting metadata , token owner, wallet address assigned to an NFT, just check it out and enjoy

nft-minter A Heroku web server to easily mint non-fungible tokens via an API Example Configuration: Blockchain: Ethereum Testnet: Rinkeby Contract: ER

Aviasales React-Redux-MobX- - A quick start Redux + TypeScript Create React App template

A quick start Redux + TypeScript Create React App template An opinionated quick

Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by

Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by

Small React three fiber multiplayer template
Small React three fiber multiplayer template

R3F.Multiplayer React three fiber, socket.io boilerplate multiplayer server and client 💻 Getting started Getting started To quickly get started Clone

React.js, Typescript, Effector, Storybook, Eslint+Prettier, husky template

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

🚀🚀 A Shopify App template for serverless, non-embedded Apps.

🚀 Free Shopify x Next.js App Template for serverless non-embedded Apps Everything to build your next non-embedded Shopify App and Marketing pages in

A drum machine built with React using the Create React App toolchain.

drum-machine A simple drum machine built with React using the Create React App toolchain. Getting Started Clone or download the repository. Open a com

Calculator-in-react - Calculator made in React.JS using Hooks as useReducer
Calculator-in-react - Calculator made in React.JS using Hooks as useReducer

Calculator-in-react - Calculator made in React.JS using Hooks as useReducer

A simple blog- Using React, Router v6, Tailwind, React-hook-form and more packages.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Comments
  • × Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'address')

    × Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'address')

    I'm getting this error when trying to deploy project on

    Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'address') (anonymous function) src/views/Admin/Module/contracts/Registry/useRegistry.ts:87 84 | }, 85 | onSuccess: results => { 86 | (results as any).wait().then((e) => {

    87 | save({admin: account, uri: uri, protocol: e.logs[0].address, chain: chainId}).then(console.log).catch(console.log).then( () => { | ^ 88 | setCanSetProject(false) 89 | setLoading(false) 90 | })

    opened by Mohaimen13 1
  • Failing deployment, Vercel Payment has failed

    Failing deployment, Vercel Payment has failed

    Hey guys, looks like the payment info needs to be updated for Vercel or need to figure out another deployment platform.

    https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-template/commit/a7f835a94f5121434bad14db79d462e3988550ce#commitcomment-67518947

    Thanks for all your hard work!

    I guess while I am here (off-topic...) what is the difference between this template project and the boilerplate project? Off the bat I see this template project uses the new Moralis web3ui kit, does that mean the template is the one to use moving forward?

    Thanks again.

    opened by rsmets 1
  • add module causes a react ui error

    add module causes a react ui error

    looks great, i'm learning alot here, but im digging into the code now to figure out what 'add module' is trying to do and why its failing...

    I'm running yarn build now, to see if that is all that its missing

    thanks so much for what you do!
    g

    invariant

    /home/packages/react-router/index.tsx:24

      21 | export type { Hash, Location, Path, Pathname, Search, To };  22 |   23 | function invariant(cond: any, message: string): asserts cond {> 24 |   if (!cond) throw new Error(message);  25 | }  26 |   27 | function warning(cond: any, message: string): void {
    

    useHref

    /home/packages/react-router/index.tsx:358

      355 |  * @see https://reactrouter.com/docs/en/v6/api#usehref  356 |  */  357 | export function useHref(to: To): string {> 358 |   invariant(  359 |     useInRouterContext(),  360 |     // TODO: This error is probably because they somehow have 2 versions of the  361 |     // router loaded. We can help them understand how to avoid that.
    

    LinkWithRef

    /home/packages/react-router-dom/index.tsx:263

      260 |   { onClick, reloadDocument, replace = false, state, target, to, ...rest },  261 |   ref  262 | ) {> 263 |   let href = useHref(to);      | ^  264 |   let internalOnClick = useLinkClickHandler(to, { replace, state, target });  265 |   function handleClick(  266 |     event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
    
    opened by biomassives 1
  • Error when starting the base project

    Error when starting the base project

    Hey, I'm trying to run the base project following the tutorial on : https://bestofreactjs.com/repo/ethereum-boilerplate-ethereum-nft-marketplace-template-react-miscellaneous But I get the following error:

    TypeScript error in /home/XXXXX/Documents/ethereum-nft-marketplace-template/src/views/Admin/Module/Adder/components/ModuleSelector.tsx(70,37):
    Type '{ position: "bottom"; text: string; children: ReactNode[]; }' is not assignable to type 'IntrinsicAttributes & TooltipProps & { children?: ReactNode; }'.
      Property 'text' does not exist on type 'IntrinsicAttributes & TooltipProps & { children?: ReactNode; }'.  TS2322
    
        68 |                                 <Tooltip
        69 |                                     position={"bottom"}
      > 70 |                                     text={"Coming Soon 👀"}
           |                                     ^
        71 |                                     children={printCard(module)}
        72 |                                 />
        73 |                             ) }
    

    Thanks in advance for the help :)

    opened by papy-ganjha 1
Owner
Ethereum Boilerplates
Collecting all Ethereum Boilerplates in order to accelerate Ethereum development process and enable faster development cycles. Feel free to fork or contribute!
Ethereum Boilerplates
Ethereum's missing NFT swap library for web3 developers. Written in TypeScript. Powered by 0x.

NFT Swap SDK _The missing NFT swap SDK for Ethereum and EVM compatible chains, powered by the 0x protocol, written in TypeScript for web3 developers.

trader.xyz 191 Dec 25, 2022
This Project is a fork of Ethereum Boilerplate and demonstrates how you can build your own NFT Rarity Ranker.

This Project is a fork of Ethereum Boilerplate and demonstrates how you can build your own NFT Rarity Ranker.

null 88 Dec 20, 2022
React-NFT-App - NFT-Web-Application built using Third web , ReactJs and use Crypto Punks with API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Ali Aftab Sheikh 8 Oct 24, 2022
Blockchain-Cryptogram - Decentralized Social Media web app using Ethereum Blockchain

Decentralized Social Media web app using Ethereum Blockchain. Team Details Team

achyut 11 Dec 6, 2022
Example implementation of how to implement Sign In with Ethereum

Sign in with Ethereum authentication flow A basic example of how to create an authentication flow using Next.js, public key encryption, and an Ethereu

Nader Dabit 88 Jan 4, 2023
A plug-and-play hook that will send data about Ethereum contract interactions straight to FullStory

use-fullstory-web3 Automatically record web3 events into FullStory useFullStoryWeb3 is a plug-and-play hook that will send data about Ethereum contrac

Ralf Popescu 2 Nov 24, 2021
This is a proof of concept of an NFT vending machine built using Solana Pay, Metaplex, Phantom Mobile, and Next.js

Solana NFT Vending Machine This is a proof of concept of an NFT vending machine built using Solana Pay, Metaplex, Phantom Mobile, and Next.js. This wa

Matt Rosenzweig 55 Dec 15, 2022
How to mint your own NFT token with react

Mint your own basic off chain NFT Description This project teaches you how to mint your own NFT token. Here are some important packages that we will b

null 6 May 17, 2022
Youtube Tutorial showcasing how to create a fullstack NFT mingint dapp.

Emoji Faces NFT Minting dApp This a complete example of fullstack NFT minting dApp. EmojiFaces is built with the purpose of providing an entry point f

codingwithdidem 53 Dec 25, 2022