@cogitojs/cogito-react

    0.2.18 • Public • Published

    @cogitojs/cogito-react

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

    Usage

    Add @cogitojs/cogito-react as a dependency:

    yarn add @cogitojs/cogito-react

    and import it:

    import { CogitoReact } from '@cogitojs/cogito-react'

    Props

    The CogitoReact component accepts the following props:

    prop name description
    contracts Contract information - see Working with Contracts below.
    channelId identifier of the Telepath channel. If omitted a new random channel id will be created.
    channelKey a symmetric key of the Telepath channel. If omitted a new random key will be created.
    appName the name of the app. Cogito app shows the appName when requesting user signature.
    onTelepathChanged function to be called when the telepath channel has been updated. Provides an object { channelId, channelKey, appName } as an argument.
    render render prop - a function that will be called every time the component is updated. It provides { web3, channel, contracts } as an argument, where web3 is an instance of Web3 that uses CogitoProvider, channel is an instance of Telepath, and contracts is an object holding the references to either deployed contracts or the raw proxies (see Working with Contracts below). If this prop is present, it will take precedence over the childrens.

    Example

    The example below illustrates how to use the CogitoReact component:

    class Main extends React.Component {
      web3IsReady = ({web3, channel, contracts}) => {
        return (web3 && channel && contracts)
      }
    
      onTelepathChanged = ({ channelId, channelKey, appName }) => {
        console.log('Telepath channel changed:')
        console.log(`channelId: ${channelId}`)
        console.log(`channelKey: ${channelKey}`)
        console.log(`appName: ${appName}`)
      }
    
      render () {
        return (
          <CogitoReact contracts={contractsInfo}
            channelId={channelId}
            channelKey={channelKey}
            appName='Cogito Demo App'
            onTelepathChanged={this.onTelepathChanged}
          >
            {web3Props => {
              if (this.web3IsReady(web3Props)) {
                return (
                  <p>Ready!</p>
                )
              } else {
                return (
                  <p>Please wait...</p>
                )
              }
            }}
          </CogitoReact>
        )
      }
    }
    
    export { Main }

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

    render () {
      return (
        <CogitoReact contracts={contractsInfo}
          channelId={channelId}
          channelKey={channelKey}
          appName='Cogito Demo App'
          onTelepathChanged={this.onTelepathChanged}
          render={web3Props => {
            if (this.web3IsReady(web3Props)) {
              return (
                <p>Ready!</p>
              )
            } else {
              return (
                <p>Please wait...</p>
              )
            }
          }} />
      )
    }

    Working with Contracts

    Developers working with Ethereum contract often use a convenience package truffle-contract. To get an instance of a contract you first import truffle-contract. What you will get from importing truffle-contract is a function that takes a contract definition as an argument and returns a proxy object that you can use to interact with your contract. Before you can do that, however, you still need to set the provider on the returned proxy object:

    import Web3 from 'web3'
    import initContract from 'truffle-contract'
    import simpleStorage from 'contracts/SimpleStorage.json'
    
    const providerUrl = 'http://localhost:9545' // example for the local development
    const provider = new Web3.providers.HttpProvider(providerUrl)
    const web3 = new Web3(provider)
    const contract = initContract(simpleStorage)
    contract.setProvider(provider)
    // or if you got web3 already initialized
    contract.setProvider(web3.currentProvider)

    To get the actual instance of the contract, you can either request the deployed version that will return an instance of the contract deployed at the default address managed by the contract itself, or a raw version for which you can request an instance of the contract at a specific address. The deployed contracts are often used as a facade that represents a fixed entry point to some more complex functionality. When you call methods of the deployed contracts, they often emit events carrying addresses of other contract instances created as a result of the method invocation. In order to get a grip on those contract instances, you need to be able to call the at method of the contract proxy object.

    The raw representation is therefore more versatile, because you can either request a deployed version by calling deployed() method on the proxy object, or you can call at(address) to get an instance at a given address.

    You can choose which contracts you would like to have returned as deployed contracts and which ones as raw contracts. Here is an example:

    import dataStore from 'contracts/DataStore.json'
    import dataRequest from 'contracts/DataRequest.json'
    import dataResponse from 'contracts/DataResponse.json'
    
    const contractsInfo = {
      deployedContractsInfo: [
        { contractName: 'dataStore', contractDefinition: dataStore }
      ],
      rawContractsInfo: [
        { contractName: 'dataRequest', contractDefinition: dataRequest },
        { contractName: 'dataResponse', contractDefinition: dataResponse }
      ]
    }

    In the example above, we see that dataStore is requested to be a deployed version, while dataRequest and dataResponse are specified to be returned as raw instances.

    CogitoReact (via Cogito) processes this input structure and returns an object holding the references to either deployed contracts or the raw proxies:

    contracts.dataStore    // deployed
    contracts.dataRequest  // raw
    contracts.dataResponse // raw

    Keywords

    none

    Install

    npm i @cogitojs/cogito-react

    Homepage

    cogito.mobi/

    DownloadsWeekly Downloads

    3

    Version

    0.2.18

    License

    MIT

    Unpacked Size

    139 kB

    Total Files

    15

    Last publish

    Collaborators

    • philips-software-fa
    • everydayproductive
    • markspanbroek
    • jeroenknoops