Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/austintgriffith/dapparatus
📦📃Dapparatus: reusable dapp components in react: contract loader, metamask, gas, transaction ui, event parers, etc
https://github.com/austintgriffith/dapparatus
Last synced: 5 days ago
JSON representation
📦📃Dapparatus: reusable dapp components in react: contract loader, metamask, gas, transaction ui, event parers, etc
- Host: GitHub
- URL: https://github.com/austintgriffith/dapparatus
- Owner: austintgriffith
- License: mit
- Created: 2018-07-21T23:11:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T20:41:59.000Z (almost 2 years ago)
- Last Synced: 2024-10-23T00:39:05.292Z (13 days ago)
- Language: JavaScript
- Homepage:
- Size: 1.78 MB
- Stars: 200
- Watchers: 12
- Forks: 39
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-web3 - dapparatus - Reusable dApp components in React. (Software Development / JavaScript)
- DeFi-Developer-Road-Map - dapparatus - Reusable React Dapp components (Roadmap)
README
# 📦📃Dapparat.us
After building out a handful of Dapps in React, I decided to carve out all the common components and provide them in an NPM package.
Should help get a Dapp up and running quickly so you can focus on your functionality, not wrestling with the blockchain and ethereum network.
Watch the demo video using Dapparatus over in the [Clevis repo](https://github.com/austintgriffith/clevis).
A good example and development walkthrough is
[nifties-vs-nfties](https://github.com/austintgriffith/nifties-vs-nfties/blob/master/README.md).
## install
```
npm install --save dapparatus
```
## import
```
import { Metamask, Gas, ContractLoader, Transactions, Events, Scaler, Blockie, Address, Button } from "dapparatus"
```
## usage
### Dapparatus
```javascript
const METATX = {
endpoint:"http://0.0.0.0:10001/",
contract:"0xf5bf6541843D2ba2865e9aeC153F28aaD96F6fbc",
//accountGenerator: "//account.metatx.io",
}
const WEB3_PROVIDER = 'http://0.0.0.0:8545'
{
console.log("metamask state update:",state)
if(state.web3Provider) {
state.web3 = new Web3(state.web3Provider)
this.setState(state)
}
}}
/>
```
### PrivateKeyCatcher
If you are using paper wallets or other methods to pass in a private key to dapparatus:
```javascript
{
this.setState({newPrivateKey:pk})
}}/>
```
### Metamask
Looks for injected web3 and provides an interface to the rest of the components. Also displays a nice HUD for users to see what account is logged in, what network they are on, and how much Ethereum they have.
```javascript
{
console.log("metamask state update:",state)
if(state.web3Provider) {
state.web3 = new Web3(state.web3Provider)
this.setState(state)
}
}}
/>
```
### Gas
Keeps track of the best gas price in gwei and delivers it to other components.
```javascript
{
console.log("Gas price update:",state)
this.setState(state,()=>{
console.log("GWEI set:",this.state)
})
}}
/>
```
### Transactions
Displays transactions and blocks as progress bars and provides a **tx** function to make calling smart contract functions and sending transactions easier and more transparent to the user.
```javascript
{
//loads in tx() function
// use to send transactions: tx(contracts.YOURCONTRACT.YOURFUNCTION(),GASLIMIT,TXDATA,TXVALUE,CALLBACK)
console.log("Transactions component is ready:",state)
this.setState(state)
}}
/>
```
## ContractLoader
Loads your contracts published from [Clevis](https://github.com/austintgriffith/clevis) into **this.state.contracts**.
Note: Contracts must first be injected into the /src folder by running `clevis test publish` or `clevis test full`.
```javascript
{return require(`${__dirname}/${path}`)}}
onReady={(contracts,customLoader)=>{
console.log("contracts loaded",contracts)
this.setState({
customLoader: customLoader,
contracts:contracts,
},()=>{
console.log("Contracts Are Ready:",this.state.contracts)
})
}}
/>
```
You can then use the customLoader to load dynamic contracts using the ABI from current contracts:
```javascript
let lootTokenContract = this.state.customLoader("LootToken",lootTokenAddress)
```
### Events
Listens for events and parses down the chain. Use an **id** field for unique keys so it will only fire the **onUpdate** function when a new event is detected. Provide a **filter** object to filter indexed fields.
```javascript
{
console.log("EVENT DATA:",eventData)
this.setState({events:allEvents})
}}
/>
```
### Address
Renders an address with the blockie (identicon) and the current balance in Eth.
```javascript
```
### Button
Renders a button
```javascript
{
//do some transaction on button click
tx(contracts.SomeContract.someFunction(someArgument),(receipt)=>{
//when the transaction goes through you'll have a receipt here
})
}}>
Send
```
### Blockie
Renders an identicon for an address
```javascript
```
### Scaler
Scales components based on a target screen width vs actual screen width. Get your Dapp looking awesome on mobile.
```javascript
```
### Demo App
Ether Jam Jam is a demo app I built that uses Dapparatus for meta transactions:
[](https://youtu.be/cNcSXovVPdg)