Ethers-react-system NPM

Ethers React System

Warning: this repo is experimental, unstable, unsupported, and might break at any time. You've been warned.

npm install ethers-react-system

Example

import { EthersProvider } from 'ethers-react-system';

<App>
  <EthersProvider>...</EthersProvider>
</App>;

The package pairs with the 3box-system library. The design system library hooks into the state system to help manage user logins, connecting to spaces, posting to threads, etc....

Add Linting back to package.json "lint": "xo && remark . -qfo",

Install

npm

npm install ethers-react-system

yarn

yarn add ethers-react-system

Getting Started

import { EthersProvider, EthersConsumer } from 'ethers-react-system';

const App = () => {
  return (
    <EthersProvider>
      <WrappedApp />
    </EthersProvider>
  );
};

const WrappedApp = () => {
  return (
    <EthersConsumer>
      {ethers => {
        return <h1>There are {ethers.deployed.length} deployed.</h1>;
      }}
    </EthersConsumer>
  );
};

export default App;
// script

Initializing Contracts

There are two major ways of initializing contracts. Either through the action creator or by passing it to the top-level provider.

Via Actions Creator

ethers.initContract(Contract[,deployedAddress]);
// script

the function requires the contract address and ABI and has additional optional requirements.

import React from 'react';
import { withEthers } from 'ethers-react-system';
import TestContract from './build/TestContract.json';
// you can optionally pass the deployedAddress but by default
// it will be initialized to the latest deployment address
const deployedAddress = '0x...';

class WrappedApp extends React.Component {
  constructor(props) {
    super(props);
    const { ethers } = props;
    ethers.initContract(TestContract);
  }
  render() {
    const { ethers } = this.props;
    const contracts = Object.keys(ethers.contracts);
    return <h1>There are {contracts.length} initialized</h1>;
  }
}

export default withEthers(WrappedApp);
// script

Via Ethers Provider

import React from 'react';
import { EthersProvider } from 'ethers-react-system';
import WrappedApp from './WrappedApp';
import TestContract from './build/TestContract.json';

const App = () => {
  return (
    <EthersProvider contracts={[TestContract]}>
      <WrappedApp />
    </EthersProvider>
  );
};

export default App;
// script

Wallet Generation

Although the provider defaults to utilizing the Ethereum provider (either via Metamask or a dApp browser). It is possible to generate a burner wallet that can be utilized in the absence of Metamask or dApp browser.

The following action creator will generate a wallet with the set provider(defaulting the JSON if none). It will set the wallet and address property of the ethers state object.

ethers.generateWallet();
// script

import React from 'react';
import { withEthers } from 'ethers-provider';

class Home extends React.Component {
  constructor(props) {
    super(props);
    const { ethers } = props;
    ethers.generateWallet();
  }

  render() {
    const { ethers } = this.props;
    return <h1>The address is {ethers.address}</h1>;
  }
}

export default withEthers(Home);
// script

Deploy Contracts

Deploy Contracts Functionality WIP. Once the fucntionality is implemented and tested the documentation will be added.

Send Transaction

The ether object contains a sendTransaction function that can be used to interfact with a smart contract. The contractID and functionName to interfact with must be provided as well as an array of the parameters of the given function.

ethers.sendTransaction(contractID, functionName, params);
//script

The action creator will sign and send the transaction to the network currently connected to.

Warning

Presently there are known issues with error handling with send transactions. This error causes transactions to fail silently. Until the issue is solved directly utilize the initiated contracts to send transactions.