NextJS Smartcontract Lottery (Raffle) FCC

This is my first deployed WEB3 application.

Example App here!

Example App on IPFS here!

Built with ❤️ using: NextJS Solidity Chainlink Moralis web3uikit Ethers Hardhat IPFS

• NextJS Smartcontract Lottery (Raffle) FCC
• Getting Started
  • Requirements
  • Quickstart
  • Typescript
    • Optional Gitpod
  • Formatting in VSCode
• Usage
  • Testing
• Deploying to IPFS
• Deploy to IPFS using Fleek
• Linting
• Thank you!

Getting Started

Requirements

• git
  • You'll know you did it right if you can run git --version and you see a response like git version x.x.x
• Nodejs
  • You'll know you've installed nodejs right if you can run:
    • node --version and get an ouput like: vx.x.x
• Yarn instead of npm
  • You'll know you've installed yarn right if you can run:
    • yarn --version and get an output like: x.x.x
    • You might need to install it with npm or corepack

Quickstart

git clone https://github.com/sebaszeledon/hardhat-smartcontract-lottery-fcc
cd nextjs-smartcontract-lottery-fcc
yarn
yarn dev

Formatting in VSCode

To have VSCode extension prettier auto-format .jsx and .tsx, add the following to your settings.json file:

  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

Usage

1. Run your local blockchain with the lottery code

In a different terminal / command line

git clone https://github.com/sebaszeledon/hardhat-fund-me-fcc
cd hardhat-fund-me-fcc
yarn 
yarn hardhat node

2. Add hardhat network to your metamask/wallet

• Get the RPC_URL of your hh node (usually http://127.0.0.1:8545/)
• Go to your wallet and add a new network. See instructions here.
  • Network Name: Hardhat-Localhost
  • New RPC URL: http://127.0.0.1:8545/
  • Chain ID: 31337
  • Currency Symbol: ETH (or GO)
  • Block Explorer URL: None

Ideally, you'd then import one of the accounts from hardhat to your wallet/metamask.

3. Run this code

Back in a different terminal with the code from this repo, run:

yarn dev

4. Go to UI and have fun!

Head over to your localhost and play with the lottery!

Testing

I didn't write any front end tests 😢

If you'd like to create some tests for this repo, please make a PR!

Deploying to IPFS

1. Build your static code.

yarn build

2. Export your site

yarn next export

Note: Some features of NextJS & Moralis are not static, if you're deviating from this repo, you might run into errors.

3. Deploy to IPFS

• Download IPFS desktop
• Open your IPFS desktop app
• Select import and choose the folder the above step just created (should be out)

4. Copy the CID of the folder you pinned

5. Get IPFS companion for your browser (or use Brave Browser)

6. Go to ipfs://YOUR_CID_HERE and see your ipfs deployed site!

Deploy to IPFS using Fleek

You can also have Fleek auto-deploy your website if you connect your github. Connect to fleek and follow along the docs there. You'll get an IPFS hash and a "regular" URL for your site.

Linting

To check linting / code formatting:

yarn lint

Thank you!