DOCUMENTATION

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>
  )
}