This is a React dApp that uses the Rimble UI component library and Rimble Web3 Components to walk a new user through connecting, verifying and transacting with a smart contract deployed to the Ethereum Rinkeby testnet.
- Implements Rimble UI, a dApp-first design system for faster dApp development
- Integrates Rimble Web3 Components with web3 provider for better dApp UX
- Wraps common web3 functions for consumption by React components
Clone the repo
git clone https://github.com/ConsenSys/rimble-app-demoChange directories
cd rimble-toast-demoInstall dependencies
yarn installStart local server
yarn startNavigate to http://localhost:3000 in your browser
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.
The RimbleWeb3.js component passes a proper for the web3.eth.contract.send method and only needs the smart contract's method name.
The dApp demonstrates an informative, tested, and effective UI to get user's connected to your app and interacting with minimal frustration. The dApp addresses these scenarios:
- Not on a web3-capable browser
- No MetaMask (web3) extension available
- Connected to wrong Ethereum network
- EIP 1102 Connection request (with graceful fallback)
- Personal signature request of specialized nonce to ensure connection with wallet's owner
- Helper modals for low funds and instructions to acquire ETH
- Transaction-initiated modals that will connect, verify, and check funds with 1 click
- Polling for account changes and balance updates
You can customize the toast message content. See Rimble's content guidance for writing toast messages. Read content guidance
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