Giter VIP home page Giter VIP logo

nextjs-moralis-nft-marketplace's Introduction

Full-Stack Setup

1. Git clone the contracts repo and Front-end repo

Contracts repo with setup instructions

In it's own terminal / command line, run:

git clone https://github.com/Nedick/hardhat-nft-marketplace
cd hardhat-nft-marketplace
yarn

Front-end repo with setup instructions

git clone https://github.com/Nedick/nextjs-moralis-nft-marketplace.git
cd nextjs-moralis-nft-marketplace
yarn

2. Start your node from contracts repo

After installing dependencies, start a node on it's own terminal with:

yarn hardhat node

3. Connect your codebase to your moralis server from Front-end repo

Setup your event moralis. You'll need a new moralis server to get started.

Sign up for a free account here.

Once setup, update / create your .env file.

NEXT_PUBLIC_APP_ID=XXXX
NEXT_PUBLIC_SERVER_URL=XXXX
moralisApiKey=XXX
moralisSubdomain=XXX
masterKey=XXX
chainId=31337

With the values from your account.

Then, in your ./package.json update the following lines:

"moralis:sync": "moralis-admin-cli connect-local-devchain --chain hardhat --moralisSubdomain XXX.usemoralis.com --frpcPath ./frp/frpc",
"moralis:cloud": "moralis-admin-cli watch-cloud-folder  --moralisSubdomain XXX.usemoralis.com --autoSave 1 --moralisCloudfolder ./cloudFunctions",

Replace the XXX.usemoralis.com with your subdomain, like 212ug12gYourSubDomain.usemoralis.com and update the moralis:sync script's path to your instance of frp (downloaded as part of the Moralis "Devchain Proxy Server" instructions mentioned above)

4. Globally install the moralis-admin-cli

yarn global add moralis-admin-cli

5. Setup your Moralis reverse proxy in Front-end repo

Optionally: On your server, click on "View Details" and then "Devchain Proxy Server" and follow the instructions. You'll want to use the hardhat connection. (This instruction is for legacy UI)

  • Download the latest reverse proxy code from FRP and add the binary to ./frp/frpc.
  • Replace your content in frpc.ini, based on your devchain. You can find the information on the DevChain Proxy Server tab of your moralis server.

In some Windows Versions, FRP could be blocked by firewall, just use a older release, for example frp_0.34.3_windows_386

Mac / Windows Troubleshooting: https://docs.moralis.io/faq#frpc

Once you've got all this, you can run:

yarn moralis:sync

You'll know you've done it right when you can see a green connected button after hitting the refresh symbol next to DISCONNECTED. You'll want to keep this connection running.

IMPORTANT

Anytime you reset your hardhat node, you'll need to press the RESET LOCAL CHAIN button on your UI!

6. Setup your Cloud functions in Front-end repo

In a separate terminal (you'll have a few up throughout these steps)

Run yarn moralis:cloud in one terminal. If you don't have moralis-admin-cli installed already, install it globally with yarn global add moralis-admin-cli.

Note: You can stop these after running them once if your server is at max CPU capactity.

If you hit the little down arrow in your server, then hit Cloud Functions you should see text in there.

Make sure you've run yarn moralis:sync from the previous step to connect your local Hardhat devchain with your Moralis instance. You'll need these 3 moralis commands running at the same time.

7. Add your event listeners from Front-end repo

You can do this programatically by running:

node addEvents.js

Or, if you want to do it manually

Finally, go to View Details -> Sync and hit Add New Sync -> Sync and Watch Contract Events

Add all 3 events by adding it's information, like so:

  1. ItemListed:
    1. Description: ItemListed
    2. Sync_historical: True
    3. Topic: ItemListed(address,address,uint256,uint256)
    4. Abi:
{
  "anonymous": false,
  "inputs": [
    {
      "indexed": true,
      "internalType": "address",
      "name": "seller",
      "type": "address"
    },
    {
      "indexed": true,
      "internalType": "address",
      "name": "nftAddress",
      "type": "address"
    },
    {
      "indexed": true,
      "internalType": "uint256",
      "name": "tokenId",
      "type": "uint256"
    },
    {
      "indexed": false,
      "internalType": "uint256",
      "name": "price",
      "type": "uint256"
    }
  ],
  "name": "ItemListed",
  "type": "event"
}
5. Address: <YOUR_NFT_MARKETPLACE_DEPLOYED_ADDRESS_FROM_HARDHAT>
6. TableName: ItemListed

You can add the canceled and bought events later.

8. Mint and List your NFT from Contracts repo

Back in the contract directory, run:

yarn hardhat run scripts/mint-and-list.js --network localhost

And you'll now have an NFT listed on your marketplace.

9. Start your front end from Front-end repo

At this point, you'll have a few terminals running:

  • Your Hardhat Node (From Contracts repo)
  • Your Hardhat Node syncing with your moralis server (From Front-end repo)
  • Your Cloud Functions syncing (From Front-end repo)

And you're about to have one more for your front end (From Front-end repo).

yarn run dev

And you'll have your front end, indexing service running, and blockchain running.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.