npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@symfoni/buidler-react

v0.0.21

Published

Create a react component from buidler output.

Downloads

18

Readme

buidler

Part of contribution to the ETHOnline hackathon

Projects

  • buidler-plugins - Lerna repo containing a demo project, buidler-react plugin and buidler-storage plugin.
  • buidler-react-boilerplate - A boilerplate which contains barebones for a smart-contract and react app project. Where all smart contracts are compiled, deployed and typed out to the react app.
  • fork of buidler-typechain - usees latest release of typechain (v3) and removed peer dependencies on web3 packages.

Buidler-react

Aplha release, interfaces will change.

A buidler plugin to use in buidler projects.

If you want to quikly get started with with a new buidler project and a react application. Try this boilerplate.

Install

Yarn

yarn add @symfoni/buidler-react

NPM

npm install --save @symfoni/buidler-react

The plugin will hook into npx buidler node when you run that. Untill this issue is resolved it will only run when you start the node. After that issue is resolved it will run each time you make a change to your smart contracts and react will hot-reload it.

You can mnaully trigger it by running npx buidler react --network localhost. You probably need to run npx buidler typechain and npx buidler deployfirst to have artifacts, deployments and typechain files ready.

Frontend

This plugin makes an assumption that you are building your frontend inside a buidler project (we later want to go away from this assumption). So we recommed you to create a frontend folder inside your buidler project where all your frontend code and packages reside. Take a look at https://github.com/symfoni/buidler-plugins/tree/master/packages/buidler-demo for demonstration.

Configuration

This project applies some opinions on your frontend project. It must use react, typescript, ethers v5 and web3modal (can be removed later).

Run this command in your frontend project root to install those dependencies:

npm install --save ethers web3modal yarn add ethers web3modal

There are two buidler configrations.

React

Here you can set how the react context should try to connect to a provider. In this config it will first try to connect with a web3modal then buidler config network dev and then a custom RPC url. In alpha version, only web3modal is supported.

config.react = {
  providerPriority: ["web3modal", "dev", "HTTP://127.0.0.1:8545"], // default ["web3modal"]
};

Here you can set where buidler-react should put the react component files that can be consumed by your frontend application.

paths: {
    react: "./frontend/src/buidler", // default "./frontend/src/buidler"
  },

Cavats

Can i only use Metemask?

Web3modal supports many wallets. We will soon provide configuration for each of them.

We will also provide you the possiblity to inject your "whatever" buidler development node you are useing as a fallback provider when developing. We think this is a nice tool for new Ethereum developers also as then they dont need to wrap their head around a provider while building smart-contract and a provider in the frontend.

Why does not react component get generated when i run `npx buidler node``

We need to hook into buidler-deploy watch process. An issue is filed wiht buidler to open the possiblity for buidler-deploy plugin to do this. https://github.com/nomiclabs/buidler/issues/899

Why cant the react component be buildt as a package which i can import.

We dont know enough of the react build process to effeciently create a typescript react component which can be consumed by any other React build process. This is something we deffinitiy want to achive!

Do i have to create context of all contracts?

It will do so by default, but we will later provide an option to be explicitt about which contracts to create context of.

Will you support other frontend framworks?

Not planned atm.

Users get Metamask up in their face right after they enter the webpage. BAD UX!

Yea, we know. We have some patterns with a fallback provider that solves this. But for the hackathon we have not that had time to implement that. Coming

Development

If you want to develop in this plugin in any way, we suggest you fork this lerna repo; buidler-plugins. There are instructions inside that readme.