useDApp
Ethereum 🤝 React
Framework for rapid DApp development.

Why useDApp?
Simple. Robust.
Extendable. Testable.
Problem
A well-designed DApp
UX:
Development:
🔄
Refresh
Refreshes after a new block arrives
✨
Easy to work
Works on both mainnet and testnets
📺
View mode
Works in view mode before connecting a wallet
🛡️
Easy to test
Error proof and easy to test
✅
Status
Shows the status of the current transactions
🍼
Easy to develop
Easy to develop and extend
Solution
Combines the best practices
🏗️
React hooks
Uses React hooks as your primary building ingredient
🔧
Modern stack
Employs ethers.js, web3-react, multicall & Waffle.
🚅
Auto refresh
Refreshes after a new block arrives, wallet or network changes
📚
Extend
Extends easily with custom hooks
🛒
Multicall
Combines multiple blockchain calls into a single multicall
💡
Tests
Simple integration tests for UI and blockchain
Example
Test it here
const config: Config = {
readOnlyChain: ChainId.Mainnet,
readOnlyUrls: {
[ChainId.Mainnet]: 'https://mainnet.infura.io/v3/62687d1a985d4508b2b7a24827551934',
},
}
ReactDOM.render(
<React.StrictMode>
<DAppProvider config={config}>
<App />
</DAppProvider>
</React.StrictMode>,
document.getElementById('root')
)
export function App() {
const { activateBrowserWallet, account } = useEthers()
return (
<div>
<button onClick={() => activateBrowserWallet()}>Connect</button>
{account && <p>Account: {account}</p>}
</div>
)
}