ryancreatescopy / rimble-app-demo

Simple React starter app that integrates Rimble Design System with Web3.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Rimble Toast Demo

Rimble toast demo

This is a starter React dApp that uses the Rimble UI component library to call methods on a smart contract deployed to the Ethereum Rinkeby testnet.

Live Demo

Overview

  • Implements a web3 component library (Rimble UI)
  • Wraps common web3 functions for consumption by React components
  • Integrates Rimble UI web3 components with web3 provider

Requirements

Quick start

Clone the repo

git clone https://github.com/ConsenSys/rimble-app-demo

Change directories

cd rimble-toast-demo

Install dependencies

yarn install

Start local server

yarn develop

Navigate to http://localhost:3000 in your browser

Modifying smart contract

The smart contract address and the application binary interface (ABI) for the contract are both in the SmartContractCard.js file. Update these constants with your own smart contract details.

Calling methods

The RimbleWeb3.js component passes a proper for the web3.eth.contract.send method and only needs the smart contract's method name.

Customize toast message content

You can customize the toast message content. See Rimble's content guidance for writing toast messages. Read content guidance

Lifecycle states

This is meant to enhance the existing web3 states and show relevant transaction detail to the user to monitor the progress of the transaction.

  • Start
  • Pending
  • First confirmation
  • Success
  • Failure

Resources

About

Simple React starter app that integrates Rimble Design System with Web3.js

License:MIT License


Languages

Language:JavaScript 97.9%Language:HTML 2.1%