Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @cogitojs/cogito-ethereum-react with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var cogitoEthereumReact = require("@cogitojs/cogito-ethereum-react")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@cogitojs/cogito-ethereum-react v0.2.23

Cogito Ethereum React library

@cogitojs/cogito-ethereum-react

@cogitojs/cogito-ethereum-react is a React version of @cogitojs/cogito-ethereum.

Usage

Add @cogitojs/cogito-ethereum-react as a dependency:

yarn add @cogitojs/cogito-ethereum-react

and import it:

import { CogitoEthereumReact } from '@cogitojs/cogito-ethereum-react'

Props

The CogitoEthereumReact component accepts the following props:

prop namedescription
contractsBlobsArray of contracts JSON blobs - see Working with Contracts for more details.
channelIdidentifier of the Telepath channel. If omitted a new random channel id will be created.
channelKeya symmetric key of the Telepath channel. If omitted a new random key will be created.
appNamethe name of the app. Cogito app shows the appName when requesting user signature.
onTelepathChangedfunction to be called when the telepath channel has been updated. Provides an object { channelId, channelKey, appName } as an argument.
renderrender prop - a function that will be called every time the component is updated. It provides { cogitoWeb3, telepathChannel, contractsProxies, newChannel } as an argument, where cogitoWeb3 is an instance of Web3 that uses CogitoProvider, telepathChannel is an instance of Telepath, and contractsProxies is an object holding the references to contracts proxies corresponding to the provided contracts JSON blobs (see Working with Contracts for details). newChannel is a function to change the current channel to a new one. This function will trigger calling the render prop (or child) function, which means the whole tree below it will be (re)rendered. If this prop is present, it will take precedence over the children.

Example

The example below illustrates how to use the CogitoEthereumReact component:

import { CogitoEthereumReact } from '@cogitojs/cogito-ethereum-react'
import { SimpleStorage } from '@cogitojs/demo-app-contracts'

class Main extends React.Component {
  web3IsReady = ({cogitoWeb3, telepathChannel, contractsProxies}) => {
    return (cogitoWeb3 && telepathChannel && contractsProxies.SimpleStorage)
  }

  onTelepathChanged = ({ channelId, channelKey, appName }) => {
    console.log('Telepath channel changed:')
    console.log(`channelId: ${channelId}`)
    console.log(`channelKey: ${channelKey}`)
    console.log(`appName: ${appName}`)
  }

  render () {
    return (
      <CogitoEthereumReact contractsBlobs={[SimpleStorage()]}
        channelId={channelId}
        channelKey={channelKey}
        appName='Cogito Demo App'
        onTelepathChanged={this.onTelepathChanged}
      >
        {web3Props => {
          if (this.web3IsReady(web3Props)) {
            return (
              <div>
                <p>Ready!</p>
                <button onClick={web3Props.newChannel()}>
                  Change channel
                </button>
              </div>
            )
          } else {
            return (
              <p>Please wait...</p>
            )
          }
        }}
      </CogitoEthereumReact>
    )
  }
}

export { Main }

If you prefer using render prop, the render method would look like this:

render () {
  return (
    <CogitoEthereumReact contractsBlobs={[SimpleStorage()]}
      channelId={channelId}
      channelKey={channelKey}
      appName='Cogito Demo App'
      onTelepathChanged={this.onTelepathChanged}
      render={web3Props => {
        if (this.web3IsReady(web3Props)) {
          return (
            <div>
              <p>Ready!</p>
              <button onClick={web3Props.newChannel()}>
                Change channel
              </button>
            </div>
          )
        } else {
          return (
            <p>Please wait...</p>
          )
        }
      }} />
  )
}
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free