Brownie-next-mix - Everything you need to use NextJS with Brownie

Last update: Jun 20, 2022

Brownie NextJS Mix

This mix comes with everything you need to start using NextJS with a Brownie project.

Installation

  1. Install Brownie, if you haven't already. You must be using version 1.9.0 or newer.

  2. Download the mix.

    git clone https://github.com/rafael-abuawad/next-mix.git
  3. Install the Next (React) client dependencies.

    cd ./client
    yarn install

    or

    cd ./client
    npm install 
  4. If you want to be able to deploy to testnets, do the following.

    Set your WEB3_INFURA_PROJECT_ID, and PRIVATE_KEY environment variables.

    You can get a WEB3_INFURA_PROJECT_ID by getting a free trial of Infura. At the moment, it does need to be infura with brownie. If you get lost, follow the instructions at https://ethereumico.io/knowledge-base/infura-api-key-guide/. You can find your PRIVATE_KEY from your ethereum wallet like metamask.

    You'll also need testnet ETH. You can get ETH into your wallet by using the faucet for the appropriate testnet. For Kovan, a faucet is available at https://linkfaucet.protofire.io/kovan.

    You can add your environment variables to a .env file. You can use the .env_example in this repo as a template, just fill in the values and rename it to '.env'.

    Here is what your .env should look like:

    export WEB3_INFURA_PROJECT_ID=<PROJECT_ID>
    export PRIVATE_KEY=<PRIVATE_KEY>
  5. Create brownie account(s) following instructions here: https://eth-brownie.readthedocs.io/en/stable/account-management.html

  6. Import the brownie account to MetaMask using their private key(s)

Usage

  1. Open the Brownie console. Starting the console launches a fresh Ganache instance in the background.

    $ brownie console
    Brownie v1.9.0 - Python development framework for Ethereum
    
    ReactMixProject is the active project.
    Launching 'ganache-cli'...
    Brownie environment is ready.

    Alternatively, to run on Kovan, set the network flag to kovan

    $ brownie console --network kovan
    Brownie v1.14.6 - Python development framework for Ethereum
    
    ReactMixProject is the active project.
    Brownie environment is ready.
  2. Run the deployment script to deploy the project's smart contracts.

    >>> run("deploy")
    Running 'scripts.deploy.main'...
    Transaction sent: 0xd1000d04fe99a07db864bcd1095ddf5cb279b43be8e159f94dbff9d4e4809c70
    Gas price: 0.0 gwei   Gas limit: 6721975
    SolidityStorage.constructor confirmed - Block: 1   Gas used: 110641 (1.65%)
    SolidityStorage deployed at: 0xF104A50668c3b1026E8f9B0d9D404faF8E42e642
    
    Transaction sent: 0xee112392522ed24ac6ab8cc8ba09bfe51c5d699d9d1b39294ba87e5d2a56212c
    Gas price: 0.0 gwei   Gas limit: 6721975
    VyperStorage.constructor confirmed - Block: 2   Gas used: 134750 (2.00%)
    VyperStorage deployed at: 0xB8485421abC325D172652123dBd71D58b8117070
  3. While Brownie is still running, start the React app in a different terminal.

    The first time this app is used, the node modules have to be installed in /src. To do this, navigate to ./client/src and run

    # make sure to use a different terminal, not the brownie console
    npm install
    npm audit fix
  4. Connect Metamask to the local Ganache network. In the upper right corner, click the network dropdown menu. Select Localhost 8545, or Kovan test network:

  5. Interact with the smart contracts using the web interface or via the Brownie console.

    # get the newest vyper storage contract
    >>> vyper_storage = VyperStorage[-1]
    
    # the default sender of the transaction is the contract creator
    >>> vyper_storage.set(1337)

    Any changes to the contracts from the console should show on the website after a refresh, and vice versa.

Ending a Session

When you close the Brownie console, the Ganache instance also terminates and the deployment artifacts are deleted.

To retain your deployment artifacts (and their functionality) you can launch Ganache yourself prior to launching Brownie. Brownie automatically attaches to the ganache instance where you can deploy the contracts. After closing Brownie, the chain and deployment artifacts will persist.

Further Possibilities

Testing

To run the test suite:

brownie test

Deploying to a Live Network

To deploy your contracts to the mainnet or one of the test nets, first modify scripts/deploy.py to use a funded account.

Then:

brownie run deploy --network kovan

Replace kovan with the name of the network you wish you use. You may also wish to adjust Brownie's network settings.

For contracts deployed on a live network, the deployment information is stored permanently unless you:

  • Delete or rename the contract file or
  • Manually remove the client/artifacts/ directory

Resources

This mix provides a bare-bones implementation of Create Next App, configured to work with Brownie.

To get started with React and building a front-end for your dApps:

  • Rimble is an open-source library of React components and guides to help you make dApps. Along with components they provide guides and tutorials to help you get started.
  • For more in-depth information, read the NextJS documentation

To get started with Brownie:

Any questions? Join our Gitter channel to chat and share with others in the community.

GitHub

https://github.com/rafael-abuawad/brownie-next-mix
You might also like...

Create-dapp-solana-nextjs - Scaffolding for a Solana dapp using TS, Next.JS, Tailwinds CSS, and Daisy UI

Create Solana Dapp with Next.JS Want to start develop with Solana fetching NFTs

Aug 4, 2022

🥯Papanasi is the Frontend UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components

🥯 Papanasi is a UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components. Is based on the Mitosis library and documented using Storybook.

Jul 28, 2022

An example of how you can use Tailwind UI and React with Deno

Deno Tailwind UI React example I built this example application to show how you can use Tailwind UI and React with Deno. The navigation bar is from Ta

May 16, 2022

Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Jul 7, 2022

In this course you learn how to use MUI components in your React applications

In this course you learn how to use MUI components in your React applications

React + MUI In this course you learn how to use MUI components in your React applications. But, what is MUI? MUI offers a comprehensive suite of UI to

Jul 25, 2022

Use TypeScript, TailwindCSS & Sass to quick start your new Next.js app!!

Next.js TypeScript TailwindCSS & Sass Starter Use TypeScript, TailwindCSS & Sass to quick start your new Next.js app!! ⚡️ Quick Start 🚀 Getting Start

Aug 4, 2022

An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.

Universal Redux What and Why Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) render

May 22, 2022

React-practice - A tool which organize daily activites, and gives you a list where you can mark completed tasks

React-practice - A tool which organize daily activites, and gives you a list where you can mark completed tasks

React Todo-app Todo-list Todo-list project: Todo is a tool which organize daily

Apr 18, 2022

Buildspace-epic-nfts-ui - Project that will allow you to connect your wallet and mint an NFT, you will be able to resell the NFT on OpenSea

Buildspace-epic-nfts-ui - Project that will allow you to connect your wallet and mint an NFT, you will be able to resell the NFT on OpenSea

🐲 Epic NFTs [UI] El proyecto se encuentra deployado en Vercel para que puedan v

Aug 3, 2022
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

react-antd-redux-router-starter This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, ro

Apr 13, 2022
A simple & easy to use private note-taking app that encrypts everything on the client side.
A simple & easy to use private note-taking app that encrypts everything on the client side.

Notesnook Take private notes, capture ideas, make lists & sync them anywhere ?? Features Privacy isn't the only thing we have: Cross platform - Notesn

Aug 10, 2022
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)

nwb nwb is a toolkit for: Quick Development with React, Inferno, Preact or vanilla JavaScript Developing: React Apps Preact Apps Inferno Apps Vanilla

Aug 4, 2022
Jul 28, 2022
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites

Basic Next.js boilerplate ready to use in any type of websites. View demo » My L

Jun 29, 2022
Boilerplate in typescript with : Next / Next-Auth / Siwe / Web3modal / useDapp / next-i18n / reactMUI

Boilerplate in typescript with : Next / Next-Auth / Siwe / Web3modal / useDapp / next-i18n / reactMUI

Jul 27, 2022
Nextjs-chakra-navigation-example - NextJS with chakra-ui responsive nav example

nextjs-chakra-navigation-example I looked at how to implement navigation in next

Jan 23, 2022
This workshop will show you how to dev a full Starknet dApp with NextJS & Starknet.js
This workshop will show you how to dev a full Starknet dApp with NextJS & Starknet.js

This workshop will show you how to dev a full Starknet dApp with NextJS & Starknet.js, including multi-wallets support(Argent-x | Braavos) and multi-call transactions.

Aug 4, 2022
Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter
Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

nextjs-ts-mui5-scss-storybook-starter ?? Next.js + TypeScript + Material UI v5 +

Jul 13, 2022
Nextjs-starter - A TypeScript starter for Next.js

Next.js TypeScript Starter Features ⚡️ Next.js 12 ⚛️ React 17 ⛑ TypeScript ?? ES

Jul 1, 2022