Request Network React components

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.

Prerequisites

• node
• npm/yarn

Usage

# contains RequestNetworkProvider
npm i @requestnetwork/react-components
# contains crowdfunding specific components
npm i @requestnetwork/crowdfunding-react-components

Code usage in your library

<RequestNetworkProvider onInit={() => console.log('connected')}>
    <Consumer>
      {requestNetwork => (
          <div>{requestNetwork.currentAccount}</div>
      )}
    </Consumer>
</RequestNetworkProvider>

Available fields

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)

Available Methods

Method	Description	Parameters
create	Convenience method to create a Request	paymentAddress (string): the address that will receive the payment amount (string): the amount to send, in string to avoid losing data data (any): additional data
get	Convenience method to get a Request	id: an object with a hash property, corresponding to the transaction hash. Later, will allow to choose other identifiers
pay	Pay the request with given ID	requestId (string): amount (string): the amount to send, in string to avoid losing data

Domain Specific Packages

crowdfunding-react-components

Available Components

Publisher: create a crowdfunding request Backer: Pay a crowdfunding request

Example

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>

Build this library and play around

lerna bootstrap
yarn storybook