Forget about initializing web3 and the RequestNetwork provider just start using Request now.
This library provides a set of helpers to facilitate the initialization of the connection to Web3 and Request Network.
- node
- npm/yarn
# contains RequestNetworkProvider
npm i @requestnetwork/react-components
# contains crowdfunding specific components
npm i @requestnetwork/crowdfunding-react-components<RequestNetworkProvider onInit={() => console.log('connected')}>
<Consumer>
{requestNetwork => (
<div>{requestNetwork.currentAccount}</div>
)}
</Consumer>
</RequestNetworkProvider>| Field | Description |
|---|---|
| isReady | set to true once the initialization is done |
| networkMismatch | compares the configured network with your running configuration (REACT_APP_NETWORK env variable) |
| currentNetwork | the configured network |
| currentAccount | the detected account (provided by web3) |
| Method | Description | Parameters |
|---|---|---|
| create | Convenience method to create a Request |
|
| get | Convenience method to get a Request |
|
| pay | Pay the request with given ID |
|
Publisher: create a crowdfunding request Backer: Pay a crowdfunding request
import React, { Fragment} from "react";
import RequestNetworkProvider, {
Publisher,
Backer
} from "@requestnetwork/crowdfunding-react-components";
// entrypoint
default () => (
<RequestNetworkProvider onInit={() => console.log('ready')}>
<Examples />
</RequestNetworkProvider>
)
const project = {
amount: "100",
category: "test category",
description: "test description",
id: "test id",
isOwner: "test id owner",
isPublished: false,
logoUrl: "test url",
paymentAddress: address,
projectImageUrl: "test image url",
title: "test title",
txHash: null
};
const requestId = "0x8fc2e7f2498f1d06461ee2d547002611b801202b000000000000000000000640";
const address = "0x0e8d9cb9e11278ad6e2ba1ca90385c7295dc6532";
const Examples = () => (
<Fragment>
<Backer requestId={requestId} component={props => console.log(props)} />
<Publisher payload={project} component={StorybookShowAll} />
</Fragment>lerna bootstrap
yarn storybook
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent