# React Web3
![demo](https://d3vv6lp55qjaqc.cloudfront.net/items/0x0U0Y2G3W3L3R203l2X/Screen%20Recording%202017-07-30%20at%2005.07%20AM.gif?X-CloudApp-Visitor-Id=1754851&v=759f0b27)
Ensure web3 is available before your app loads.
This package is compatible with both [email protected] and [email protected]
`react-web3` exports a `<Web3Provider />` React component which wraps your app
and ensures it doesn't render until web3 is available. It also renders a nice
message to the user to guide them in the following cases:
1. The user is not using a web3-capable browser, or
2. The user has web3 support, but their account is locked (their ETH address is inaccessible)
Along with the above, `<Web3Provider />` also:
* Reacts to the user unlocking their wallet or switching accounts.
* Provides a context to your entire app with useful data.
* Accepts a callback that is called when user switches to a different account.
## Installation
```
$ npm install react-web3
```
## Test
```
$ npm test
```
## Usage
Wrap your root-level react component:
```js
import { Web3Provider } from 'react-web3';
// ...
// Ensure that <App /> doesn't render until we confirm web3 is available
ReactDOM.render(rootEl,
<Web3Provider>
<App />
</Web3Provider>
);
```
### Context
`<Web3Provider />` provides a child context to your app with useful data:
```js
import React from 'react';
import PropTypes from 'prop-types';
function SomeComponent(props, context) {
const web3Context = context.web3;
/**
* web3Context = {
* accounts: {Array<string>} - All accounts
* selectedAccount: {string} - Default ETH account address (coinbase)
* network: {string} - One of 'MAINNET', 'ROPSTEN', or 'UNKNOWN'
* networkId: {string} - The network ID (e.g. '1' for main net)
* }
*/
return (
<div>
Hello Web3
</div>
);
}
SomeComponent.contextTypes = {
web3: PropTypes.object
};
export default SomeComponent;
```
### Accepted Props
`<Web3Provider />` accepts the following optional props:
* **`onChangeAccount`** *(Function)*: Callback which is called when the user switches to
a new account. Callback will receive the new ETH address as an argument.
* **Example:** `onChangeAccount={nextAddress => console.log(nextAddress)}`
* **`web3UnavailableScreen`** *(ReactElement)*: React component to override the screen that is
shown when web3 is unavailable.
* **Example:** `web3UnavailableScreen={() => <div>You need web3!</div>}`
* **`accountUnavailableScreen`** *(ReactElement)*: React component to override the screen that
is shown when the user's wallet is locked.
* **Example:** `accountUnavailableScreen={() => <div>Please unlock your wallet!</div>}`
* **`passive`** *(Boolean)*: If true, your app will be rendered right away
even if an ETH address is not available, and the message screens will become
irrelevant and never be rendered. This is useful for apps that don't
require web3 in order to render the app, but which has optional features that
require web3. An example would be if you had an online store that simply
allowed ETH as a payment option. In this case, you could read the web3 context
and handle it manually in any of your components.
* **Example:**
```js
const methods = ['Credit Card', 'Check', 'Ether'];
const PaymentMethods = (props, context) => (
<div>
{methods.filter(
// filter out the 'Ether' option if no account is available
method => method !== 'Ether' || !!context.web3.selectedAccount
).map(
method => <PaymentMethod method={method} key={method} />
)}
</div>
)
```
### Redux Support
If you're using `react-redux`, then you most likely have a `<Provider />`
component at the very root of your app. If this is the case, `<Web3Provider />`
will dispatch the following actions to your redux store:
* **`web3/RECEIVE_ACCOUNT`:** Dispatched the first time an ETH account is
available.
* **`web3/CHANGE_ACCOUNT`:** Dispatched when the user switches between accounts.
* **`web3/LOGOUT`:** Dispatched when user logs out (accounts are no longer available).
Both actions provide the ETH address at `action.address`;
#### Example Usage:
```js
// In your reducer:
function reducer(state, action) {
switch(action.type) {
case 'web3/RECEIVE_ACCOUNT':
return {
...state,
ethAddress: action.address
};
case 'web3/CHANGE_ACCOUNT':
return {
...state,
ethAddress: action.address
};
case 'web3/LOGOUT':
return {
...state,
ethAddress: null
}
}
}
```
没有合适的资源?快使用搜索试试~ 我知道了~
react-web3:在您的应用渲染之前确保web3可用
共20个文件
js:9个
jsx:7个
json:2个
需积分: 50 2 下载量 196 浏览量
2021-02-20
12:12:27
上传
评论
收藏 51KB ZIP 举报
温馨提示
ReactWeb3 在加载应用之前,请确保web3可用。 该软件包与和兼容 react-web3导出一个<Web3Provider> React组件,该组件包装您的应用程序并确保在web3可用之前不呈现。 它还在以下情况下向用户提供了很好的消息,以指导他们: 用户未使用支持Web3的浏览器,或 用户具有web3支持,但其帐户已锁定(无法访问其ETH地址) 除上述内容外, <Web3Provider>还: 对用户解锁其钱包或切换帐户做出React。 提供有用数据到整个应用程序的上下文。 接受当用户切换到其他帐户时调用的回调。 安装 $ npm install react-web3 测试 $ npm test 用法 包装您的根级React组件: import { Web3Provider } from 'react-web3' ; // ... // Ensure th
资源详情
资源评论
资源推荐
收起资源包目录
react-web3-master.zip (20个子文件)
react-web3-master
webpack.config.js 789B
src
stylesheet.js 866B
CheckIcon.jsx 382B
AccountUnavailable.jsx 416B
ErrorTemplate.jsx 724B
Web3Provider.jsx 6KB
Web3Unavailable.jsx 437B
IconNoWeb3.jsx 3KB
index.js 244B
test
provider-styles.test.js 641B
Web3Provider.test.js 5KB
helpers
web3-v1.mock.js 851B
web3.mock.js 524B
utils.js 404B
Component.jsx 461B
.setup.js 776B
README.md 5KB
.gitignore 20B
package-lock.json 196KB
package.json 2KB
共 20 条
- 1
柠小檬的雷诺
- 粉丝: 23
- 资源: 4597
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0