trufflesuite / drizzle-legacy Goto Github PK

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Example:

contract A {
  ERC20 token;
  constructor(ERC20 _token) public {
     token = _token;
  }

  function balance() public view{
     return token.balanceOf(address(this));
  }
}

Drizzle will only refresh the state of balance() when a transaction is sent to the contract, thus it will not change due to changes in the state if the token contract (e.g transfer to/from the contract, minting etc...).

Is this correct?

I wrote the below helper saga to make it easier to write other sagas which depend on transactions fired off by drizzle (don't judge me by the quality of this code, it's first-pass and hasn't been cleaned up). It seems when I fire off a transaction but click the reject button, I can't read the status of the transaction from the transaction stack after the TX_ERROR action has fired off.

Is there a better way to do this? If not, perhaps Drizzle should ship with some sagas like this one, and a similar one for handling calls.

import { take, put, call } from 'redux-saga/effects';                                                
                                                                                                     
export function* handleTransaction(drizzle, fxn, ...args) {                                          
  let txId = yield call(fxn.cacheSend, ...args);                                                     
  let txComplete = false;                                                                            
                                                                                                     
  while (!txComplete) {                                                                              
    // wait until something happens                                                                  
    yield take(action =>                                                                             
      action.type == 'TX_SUCCESSFUL' || action.type == 'TX_ERROR'                                    
    )                                                                                                
                                                                                                     
    //TODO: use a selector!                                                                          
    let state = yield call(drizzle.store.getState)                                                   
                                                                                                     
    let txHash = state.transactionStack[txId];                                                                                                                                                  
    return txHash && state.transactions[txHash].status === 'success'                                                                                                 
}

It'd be great to be able to get back error strings and translate those into informative application-specific error messages in the UI.

After a transaction while I wait for confirmation I get a bunch of these errors popping through console (though eventaully the transaction is successful and state is updated)

I ran into an issue with the latest update which I believe has to do with last releases's webpack update. This can be easily resolved by simply updating webpack config with the following:

output: {
...
  globalObject: 'typeof self !== \'undefined\' ? self : this',
...
},

I believe this is is an issue relating to webpack/webpack#6784

When updating the config and building on my machine, it seems to work fine.

Drizzle receives all contract information (including the address for instantiating the contract object) from the artifact JSON files compiled by Truffle.
In the drizzle-box example, these objects are passed to DrizzleProvider, the highest order component in the entire application.
I'd like to build an application that sets these contract addresses dynamically. Is this currently possible with Drizzle? Maybe I'm lacking React/Redux/Saga knowledge, but it looks like the current architecture doesn't allow for that.

It should has a default keyword after export!
https://github.com/trufflesuite/drizzle/blob/f80781ccdee0d01cc238cc5b3475437844be2614/src/index.js#L41

Using ganache-cli version 6.1.5 (with command ganache-cli -b 3)
And drizzle options

import myContract from "./contract/build/contracts/myContract.json"

const options = {
  contracts: [
    myContract
  ],
  events: {
    myContract: ['Transfer']
  },
  web3: {
    block: false,
    fallback: {
      type: 'ws',
      url: 'ws://127.0.0.1:8545'
    }
  },
  polls: {
    accounts: 1500
  }
};

I get the following error message:

No web3 instance injected, using fallback.
HomePage.jsx:129 uncaught at root at root 
 at contractsSaga 
 at takeEvery 
 at addContract 
 at instantiateContract 
 TypeError: Cannot read property 'address' of undefined

Any clue what's wrong? I am not able to trace the problem

Drizzle is massive, thanks a bunch! But can't pass an issue with BigNumbers. Not having seen info on Drizzle issues, have to post this here:

value = <ContractData contract="Market" method="priceOf" methodArgs={this.props.id}/> - returns a BigNumber object in Wei.

web3.fromWei(value, 'ether') gives an error new BigNumber() not a number: [object Object]

How to actually convert the Drizzle component output into a number or parse the value from the BigNumber and store it within a number?

I guess it would be possible to .then()nify the conversion into the function itself, but can't find a source to read on how to interact with the web3js behind the Drizzle components.

drizzle v1.2.2
node v8.11.3

I would like to use drizzle to monitor events happening from my smart contract. Reading the docs I setup drizzleOptions.js with an array of strings that correspond to the contract's events, but when checking the state there are no events populated in the contract's event array.

// drizzleOptions.js
import SomeToken from '../../build/contracts/SomeToken.json'

const drizzleOptions = {
  web3: {
    block: false,
    fallback: {
      type: 'ws',
      url: 'ws://127.0.0.1:8545'
    }
  },
  contracts: [
    SomeToken
  ],
  events: {
    'SomeToken': [
      'Approval',
      'Transfer',
      'Purchased',
    ]
  },
  polls: {
    accounts: 1500
  }
}

export default drizzleOptions

Here is the state tree (events array being a child of SomeToken contract):

Using version drizzle: "1.2.0"

We upgraded the latest truffle box to drizzle 1.2.0 as given version seemed to have an invalid version of drizzle installed, with no state initialisation helper.

We installed the latest version of these to:

• "deepmerge": "^2.1.0",
• "is-plain-object": "^2.0.4"

on our master package.json file and error was fixed.

Can you use this in conjunction with uport? As uport injects its own web3 instance?

I opened a similar issue on the drizzle-react side, but it would be very helpful to publish non-minified/source-mapped code to npm!

Hi! I'm new to web3 and truffle, but I've did everything as described in tutorial:

• I have unboxed drizze-box
• I have ganache-cli running on localhost:8545
• I have deployed needed contracts successfully
• ran webpack-server on localhost:3000
• also my Metamask connected to localhost:8545 and shows a valid account from testrpc with right amount of ETH (99.675 ETH), considering small amount was spent when deploying those contracts.

Now, the webpage on localhost:3000 shows nothing and throws this error:
TypeError: (0 , _drizzle.generateContractsInitialState) is not a function

Any ideas what is wrong with that?

EDIT: I'm sorry, I should address it to drizzle-box discussion.

For example, I deploy the contract to one network, but user switch to another network, then drizzle init will fail. My question is: how can I know that?

I can't rely on anything of state to detect that error. After reading source code, I find that drizzle put the DRIZZLE_FAILED action, but no take to handle it. Besides, the error is caught and console.errored without re-throw, so I can't catch it in my code.

Currently subscribing to events via drizzle options is not configurable. It would be great to extend the drizzle event options to match the web3 Contract.events options.

The main use-case I have is pulling in events since contract creation and then listening for future events. I understand that this can easily be accomplished using the existing web3 methods (that DrizzleContract.js extends) but it would be cleaner if those events can exist in the drizzle state.

What's the best way to access past events for a given contract event? If I call the getPastEvents method on a specific contract from the drizzle context, it throws an error that it's not a function.

TypeError: this.drizzle.contracts.Contract.getPastEvents is not a function

Or maybe there's a "Drizzle way" for accessing past events that i'm not aware of. Thank you!

In the past when writing dapps we've always needed a caching layer in between to speed things up. How would drizzle handle this?

Hey guys,

First off, thanks for Truffle and Drizzle, these tools are awesome!

I feel like this is a noob question, but since I've exhausted all the google searches and Solidity docs I decided to post it here. Here it goes:

I have a main contract A I'm deploying that inherits from another contract B. I setup a react project to work with Drizzle using the truffle box. I can access the main contract and I can see its direct methods, however, the public methods inherited from Contract B are not present. Is this expected behaviour ? From what I can see in the Solidity docs on inheritance, those should be exposed as well.

Here's a simplified view of the contracts

pragma solidity ^0.4.18;

contract ContractA {
  struct Object {
    bytes32 code;
    address owner;
  }

function createObject(...) public {
}

pragma solidity ^0.4.18;

import './ContractA.sol';

contract ContractB is ContractA {
function balanceOf(...) {}

I'm migrating just ContractB and that's the ABI I'm loading in the React / Drizzle app. I'm attaching the contract to the window object to try test it out. Drizzle get initialized and I can see the auto-completed methods, ContractB does not list createObject like I would expect.

Thanks in advance!

First of all. This looks super amazing! Thank you!

Using this with Metamask results in Error: The current provider doesn't support subscriptions: MetamaskInpageProvider metamask-extension/2601 & metamask-extension/2350

Does this mean that the subscription parts of Drizzle can't be used with Metamask at the moment?

edit: Note I'm using the drizzle truffle box with Ganache

Setting syncAlways option (added in trufflesuite/drizzle@ffd17f9) to true has no affect.

Heya team,

love this! I coded up a very similar layer for my dapp services.

I'd love to give this a try, but my workflow works a bit differently than the usual truffle setup. I use Truffle to code & test, but sometimes deploy the contract by hand (not through truffle migrate) and also, I use contract factories to deploy copies of the contract for other users. Meaning, that I end up with addresses that's not listed in the truffle builds.

I was wondering, and I'm pretty sure this might come up in the future, is there a possibility that we can add a feature to specify the contract address when instantiating the drizzle contract?

Curious to hear your thoughts on this more and if this perhaps on the roadmap? I can help too if you're stuck with time/priorities.

When going from a logged out state in metamask to a logged in state there is this console error that I get. Not sure exactly what it is related to though.

uncaught at getAccounts Error: Please pass numbers as strings or BigNumber objects to avoid precision errors.
at Object.fromWei (http://localhost:3000/static/js/bundle.js:64029:16)
    at t.value (http://localhost:3000/static/js/bundle.js:103485:180)
    at http://localhost:3000/static/js/bundle.js:27623:22
    at measureLifeCyclePerf (http://localhost:3000/static/js/bundle.js:26903:13)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:3000/static/js/bundle.js:27622:26)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:3000/static/js/bundle.js:27649:33)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:3000/static/js/bundle.js:27189:31)
    at ReactCompositeComponentWrapper.mountComponent (http://localhost:3000/static/js/bundle.js:27085:22)
    at Object.mountComponent (http://localhost:3000/static/js/bundle.js:19420:36)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:3000/static/js/bundle.js:27198:35)

With the last update (1.2.0) (installed the library directly from the github url since the npm package is needs dependencies which aren't there) I'm having this error:

TypeError: (0 , _generateContractsInitialState.generateContractsInitialState) is not a function

This blog has been making the rounds as of recent.
https://medium.freecodecamp.org/replacing-redux-with-the-new-react-context-api-8f5d01a00e8c
They actually got it working with the Redux timeline debugger if you scroll down too.

It would be great to unbundle from Redux if we are infact moving into a redux-less future and into one that leans on the Context Api for React. Redux is one level out from React so not sure if this feature request makes sense here. Maybe this repo could be split off into Drizzle-Redux? Maybe it doesn't matter when you really look at the guts of it?

Thoughts?
TLDR; I'm starting to feel "over" redux in my react apps. Maybe this library doesn't have to change at all though?

There are several issues with the build setup at the moment - will open a PR shortly:

• babel-polyfill modifies the global namespace, so should be avoided in libraries, this results in an error if used in another project that also uses babel-polyfill: Uncaught Error: only one instance of babel-polyfill is allowed. babel-plugin-transform-runtime should be used instead
• webpack is currently adding is adding dependencies to the build fileredux, redux-saga, web3 - these should be set as 'external'
• .gitignore should not exclude dist folder so that the library can be installed via github (testing, using different versions) + without libraries code is 200K

It occured to me that there is no license file. Can this be added? The package.json uses the default license when creating a new npm package, so that's not very helpful either. Maybe just add a MIT license?

installing drizzle through npm install gives a minified version. That's a shame, cause I'd prefer to get the sources to debug and understand the workflow better ::sweat_smile:. Then If I want to, I can minify it myself with webpack.

I'm not an expert with Webpack and all of the different ways javascript can import/require modules. But the issue (that other people seem to be having) of (0 , _drizzle.generateContractsInitialState) is not a function when doing an import { generateContractsInitialState } from 'drizzle' seems to be caused by some recent updates to the way the individual packages are exported from their files in Drizzle.

Not far back, the generateContractsInitialState file was changed from module.exports to an ES6 export keyword. This works in one of the other two files it is imported in (generateStore) because it does a import { generateContractsInitialState } from './generateContractsInitialState'

Expecting the function to not be the default export (even though its the only thing in the file and probably should be). The issue is that in drizzle's index.js it is being imported as import generateContractsInitialState from './generateContractsInitialState' This is an issue because webpack is now marking the module as __esModule which in turn causes this:
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
to return the module as-is, where later in index.js's output it tries to do a .default (and it doesn't have one). This causes the index.js to have undefined for the generateContractsInitialState key, and now the recommendation from the docs and from the drizzle truffle box to do this fails (when "using with an existing redux store"):

import { generateContractsInitialState } from 'drizzle'

...

const initialState = {
  contracts: generateContractsInitialState(drizzleOptions)
}

With the error in the browser console as mentioned above.

I believe the solve is either to change index.js to import the module the way generateStore.js does OR better yet to make it a default export and change generateStore.js to import it the way index.js does.

Drizzle seems to assume that contracts are deployed when it is initialised. Our dapp actually lets users deploy their own contracts or even connect to existing deployed contract by a 3rd party.
Would it make sense to allow DrizzleContract to not try to instantiate contracts which have not been deployed (right now it raises an error when that happens), and even add the ability to later 'add' contracts which would be retrieved by getContracts?

If the answers are yes, I'll be happy to provide a PR ;)

I'm not sure but could there be an error on which files is npm downloading into a fresh node_modules?

{
"author": {
"name": "Josh Quintal",
"email": "[email protected]",
"url": "http://truffleframework.com/drizzle"
},
"bundleDependencies": false,
"deprecated": false,
"description": "A reactive data store for web3 and smart contracts.",
"keywords": [
"ethereum",
"redux",
"redux-saga"
],
"license": "ISC",
"main": "drizzle.js",
"name": "drizzle",
"repository": {
"type": "git",
"url": "https://github.com/trufflesuite/drizzle"
},
"version": "1.1.5"
}

That is the package.json it's downloading, totally different from the original repo one plus a lot of files are missing.

More information about this problem can be seen here.

The way of accessing the state is shown as:

// Use the dataKey to display data from the store.
return state.contracts.SimpleStorage.methods.storedData[dataKey].value

However 'methods' is undefined. I am able to access the state using:

// Use the dataKey to display data from the store.
return state.contracts.SimpleStorage.storedData[dataKey].value

drizzle 1.1.5

Is not possible to use Drizzle using MetaMask, that's because Drizzle uses subscriptions.
web3.eth.subscribe('newBlockHeaders' /* ... */)
Is not possible to check the updates asking for the block number?
I did this to check the updates closer to the real change (using rxjs, but can be done simplest):

 Observable
    .interval(100)
    .startWith(undefined)
    .mergeMap(() => Observable.fromPromise(web3.eth.getBlockNumber()))
    .distinctUntilChanged()
    .share();

Thanks for your work! The project looks amazing!

I have a method in a contract which returns a uint:

    function numberTest() public pure returns(uint) {
        return 10;
    }

However when I call the method from my React component it returns as a string.

To the best of my knowledge the returned value should be:

BigNumber { s: 1, e: 1, c: [ 10 ] }

Anyone have any idea what the deal is?

Thanks!

What's the recommended approach for estimating gas prior to calling cacheSend? I'm finding that if I don't set a gas limit, in many cases my transactions are failing with out of gas exceptions.

I'm finding myself needing to do this before every call:

let method = contract.methods.methodName;

let gas = await method(...values).estimateGas();

method.cacheSend(...values, { gas });

Is there a cleaner pattern for this? Would it make sense to add this to drizzle? I'm using drizzle with drizzle-react and drizzle-react-components for what it's worth, and the ContractForm doesn't give you a way to set gas limit from the component props.

Hi,

I am following this tutorial to create a simple Dapp using React. So far everything looks fine except when I tried it on my another browser that doesn't has MetaMask installed.

Before that, this is my App.js file:

import React, { Component } from "react";
import { drizzleConnect } from "drizzle-react";
import { ContractData, ContractForm } from "drizzle-react-components";
import "./App.css";

class App extends Component {
  render() {
    const { drizzleStatus, accounts } = this.props;

    if (drizzleStatus.initialized) {
      return (
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Tutorial Token</h1>
            <p>
              <strong>Web3 Account:</strong>{" "}
              {accounts[0]}
            </p>
            <p>
              <strong>Total Supply</strong>:{" "}
              <ContractData
                contract="TutorialToken"
                method="totalSupply"
                methodArgs={[{ from: accounts[0] }]}
              />{" "}
              <ContractData
                contract="TutorialToken"
                method="symbol"
                hideIndicator
              />
            </p>
            <p>
              <strong>My Balance</strong>:{" "}
              <ContractData
                contract="TutorialToken"
                method="balanceOf"
                methodArgs={[accounts[0]]}
              />
            </p>
          </header>
          <h3>Send Tokens</h3>
          <div className="App-intro">
            <ContractForm
              contract="TutorialToken"
              method="transfer"
              labels={["To Address", "Amount to Send"]}
            />
          </div>
        </div>
      );
    }

    return <div>Loading Dapp</div>;
  }
}

const mapStateToProps = state => {
  return {
    accounts: state.accounts,
    drizzleStatus: state.drizzleStatus,
    TutorialToken: state.contracts.TutorialToken,
    web3: state.web3
  }
}

const AppContainer = drizzleConnect(App, mapStateToProps);
export default AppContainer;

And, this is the contract:

pragma solidity ^0.4.17;

import 'zeppelin-solidity/contracts/token/ERC20/StandardToken.sol';

contract TutorialToken is StandardToken {
  string public name = 'TutorialToken';
  string public symbol = 'TUT';
  uint8 public decimals = 2;

  uint public INITIAL_SUPPLY = 1000000;

  function TutorialToken() public {
    totalSupply_ = INITIAL_SUPPLY;
    balances[msg.sender] = INITIAL_SUPPLY;
  }
}

My browsers:

• Chrome - no MetaMask installed
• Firefox - has MetaMask installed and connected to my private blockchain (Geth with websocket)

Accounts

• Etherbase/Coinbase: 0x802b6e099e7a306cd769f20a692001ab4b9a2e6e
• A 'loose' account that was imported to MetaMask (in Firefox): 0x65A347c340981356CE8FDc76d877021091822a11

The problem

When I look at my Firefox (with MetaMask installed), I can see the 0x65A347c340981356CE8FDc76d877021091822a11 has 0 token. This is expected.

On Firefox:

But when I look at my Chrome (doesn't has MetaMask installed), it shows Etherbase/Coinbase account with 1000000 TUT tokens.

On Chrome:

That's odd. The expected behaviour in Chrome is not to show any address and the balance should be 0 because I don't have MetaMask installed in Chrome.

The help that I need now

How do I achieve the following:

• Shows Please install MetaMask message when user doesn't has MetaMask installed?
• Block the AppContainer from being initialized when MetaMask is not installed?
• Block accounts state from taking Etherbase/Coinbase address when MetaMask isn't installed?

The source code for this project can be found here.

Thank you in advance!

the account is not polling by the interval as set in the drizzleOption file.

const drizzleOptions = {
web3: {
fallback: {
type: 'ws',
url: 'wss://ropsten.infura.io/ws'
}
},
contracts: [],
events: {},
polls: {
blocks: 3000,
accounts: 3000,
}
}

When I switched the account from Metamask, the page is not reloaded automatically, I have to manually refresh the page.

Version that I am using:
"drizzle": "^1.1.5",
"drizzle-react": "^1.1.1",
"drizzle-react-components": "^1.1.0",

Please advise!!

If the final argument of your cacheCall or cacheSend is an array, it doesn't work.

See: https://github.com/trufflesuite/drizzle/blob/71f37bbbbed7f9e8bd5484d4917fb73ce8b5e30d/src/contracts/contractsSaga.js#L92-L102

The check on Line 92, checking for an options hash as the final argument is catching a false positive when an array is the final argument. Not sure about an easy fix for this - the API may need to be changed?

Also, mutating the actual args (line 99 and elsewhere in the file) seems like a bad pattern, rather than keeping them immutable and making a new array to use in the txObject?

I'm incorporating drizzle into a larger redux project, and feel like it would beneficial to group all the drizzle state into a single object.

ex:

const reducer = combineReducers({
  drizzleState: combineReducers({
    accounts: accountsReducer,
    accountBalances: accountBalancesReducer,
    contracts: contractsReducer,
    drizzleStatus: drizzleStatusReducer,
    transactions: transactionsReducer,
    transactionStack: transactionStackReducer,
    web3: web3Reducer
  })
})

This will avoid any naming collisions in the state of a bigger project and keep things more organized.
This change would require modifying the code whenever state is accessed in the library (maybe this could be a dynamic param?)
ex:

var state = this.store.getState()[options.drizzleState]

Firstly, thanks for starting this project! Very serendipitous as I was able to start writing a state manager for my React+Redux app for managing web3 and contract calls.

Onto the serious stuff. Redux best practices (according to their repo) says that you should only have one store for your app. If my Redux store is already instantiated with createStore(), I do not believe there is a way to easily merge the Drizzle instantiated store with my existing Redux store. Correct me if I'm wrong!

What is the best way that Drizzle can integrate into existing React+Redux dApps?

P.S. I am happy to contribute to the repo if you can point me on the right direction on the best way to implement easy integration into existing Redux stores.

Perhaps we should add a CONTRIBUTING file, or add a section in the README about how to contribute? It should cover:

• To which branch to submit PRs
• Wether PR should include the dist/drizzle.js build file in the PR or not
• Wether PR should include updates to package-lock.json in addition to package.json when updating npm module dependencies

We use react-router 4.3.1 in our project.

How can I connect the router history to drizzle

I get te follwoing error on the browser console:

The above error occurred in the <Connect(ConnectedRouter)> component:
    in Connect(ConnectedRouter) (at index.js:51)
    in Loading
    in Connect(Loading)
    in DrizzledComponent (at index.js:50)
    in DrizzleProvider (at index.js:49)

I have the following setup:
index.js

// react imports
import React from 'react';
import ReactDOM from "react-dom";
//import { BrowserRouter as Router } from 'react-router-dom'
import { Route, Switch } from 'react-router-dom'
//import { syncHistoryWithStore } from 'react-router-redux'

//import { Router } from 'react-router-dom'
//import { ConnectedRouter } from 'react-router-redux'
import { ConnectedRouter } from 'connected-react-router'
import createHistory from 'history/createHashHistory';

// container imports
import AppContainer from './containers/AppContainer';
import LoadingContainer from './containers/LoadingContainer';

// redux imports
import store from "./redux/store";

// drizzle imports
import { DrizzleProvider } from 'drizzle-react'
import drizzleOptions from './drizzle/options'

import "./styles/semantic-dist/semantic.css";
import browserHistory from './redux/history'

// make the store avialable to the browser console
window.store = store

//const history = syncHistoryWithStore(browserHistory, store)

/*
ReactDOM.render((
	<DrizzleProvider options={drizzleOptions} store={store}>
		<LoadingContainer>
			<Router>
				<Route path='/' component={AppContainer} />
			</Router>
		</LoadingContainer>
	</DrizzleProvider>
	),
	document.getElementById('root')
);
*/
ReactDOM.render((
	<DrizzleProvider options={drizzleOptions} store={store}>
		<LoadingContainer>
			<ConnectedRouter history={browserHistory}>
				<Switch>
					<Route path='/' component={AppContainer} />
				</Switch>
			</ConnectedRouter>
		</LoadingContainer>
	</DrizzleProvider>
	),
	document.getElementById('root')
);

history.js

import createHistory from 'history/createBrowserHistory'

const browserHistory = createHistory()

export default browserHistory

store.js

import { createStore, applyMiddleware, compose } from 'redux'
import thunkMiddleware from 'redux-thunk'
//import { routerMiddleware } from 'react-router-redux'
import rootReducer from './reducer'
import rootSaga from './rootSaga'
import createSagaMiddleware from 'redux-saga'
import { generateContractsInitialState } from 'drizzle'
import drizzleOptions from '../drizzle/options'

import browserHistory from './history'


// new
import { connectRouter, routerMiddleware } from 'connected-react-router'


// Redux DevTools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const routingMiddleware = routerMiddleware(browserHistory)
const sagaMiddleware = createSagaMiddleware()

const initialState = {
  contracts: generateContractsInitialState(drizzleOptions)
}

const store = createStore(
  //rootReducer,
  connectRouter(browserHistory)(rootReducer),
  initialState,
  composeEnhancers(
    applyMiddleware(
      thunkMiddleware,
      routingMiddleware,
      sagaMiddleware
    )
  )
)

sagaMiddleware.run(rootSaga)

export default store

package.json

"dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "connected-react-router": "^4.3.0",
    "drizzle": "^1.2.2",
    "drizzle-react": "^1.1.1",
    "drizzle-react-components": "^1.1.0",
    "history": "^4.7.2",
    "openzeppelin-solidity": "^1.11.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "semantic-ui-react": "^0.82.1",
    "truffle-contract": "^3.0.6",
    "web3": "^1.0.0-beta.35"
  },

I follow the guidelines, but it seemed to show this error in console :Error: Contract has not been deployed to the detected network (network/artifact mismatch)
How can I get the network_id?

Thanks for writing Drizzle!
I am working on a dapp which uses it but I think I need clarification on how to listen to the contract's events. Our dapp is using drizzle-react and we have a mapStateToProps. I see that the events array for the contract is being updated in the state passed to mapStateToProps but I am not sure this is what the dapp should use to trigger actions.

Any clarification would be more than welcome! Thanks!

https://github.com/trufflesuite/drizzle/blob/master/dist/package.json

Drizzle dependencies are not defined, I had to manually update my project web3 version to match drizzle requirements and add:

+    "eth-block-tracker-es5": "^2.3.2",
+    "redux": "^4.0.0",
+    "redux-saga": "^0.16.0",
-    "web3": "^0.20.6",
+    "web3": "1.0.0-beta.34",

Expected behavior: The contract is added to the drizzle object which is then accessed via context throughout the other components within the project.

Current behavior: The contract is not added to drizzle, and instead error messages show in the console.

With the contract defined as a contractConfig object with a contractName and a web3Contract as listed on the drizzle repo readme, I get the following error:

uncaught at addContract TypeError: Cannot read property 'length' of undefined
at generateContractInitialState (http://localhost:3000/static/js/bundle.js:46470:30)
at contractsReducer (http://localhost:3000/static/js/bundle.js:46379:181)
at combination (http://localhost:3000/static/js/bundle.js:41875:30)
at dispatch (http://localhost:3000/static/js/bundle.js:41264:23)
at http://localhost:3000/static/js/bundle.js:51965:23
at http://localhost:3000/static/js/bundle.js:39050:19
at http://localhost:3000/static/js/bundle.js:147272:17
at dispatch (http://localhost:3000/static/js/bundle.js:42030:19)
at http://localhost:3000/static/js/bundle.js:50095:13
at http://localhost:3000/static/js/bundle.js:50625:53

The error originates at the getAbi helper function, the var abi is never defined. In printing the instance of web3Contract.options before the addContract function is called everything looks ok.

Steps to reproduce:

Heres the snippet of code from my project,

var contractConfig = {
contractName: 'calendar',
web3Contract: new this.web3.eth.Contract(Calendar.abi, newCalAddr, {from: this.props.accounts[0]});
};

    var events = ['NewCalendarEventAdded', 'CalendarEventUpdated', 'CalendarEventDeleted'];

    return this.drizzle.addContract({contractConfig, events});

Other info:

Drizzle 1.2.0
I've tried using a truffle artifact instance (instead of an object with a name and web3 contract instance) in addContract and get the same error.

Update the version of drizzle-react-component in the Drizzle Truffle Box, probable also the version of drizzle-react.

First of all drizzle.js (/node_modules/drizzle/drizzle.js) now is minimized and has strange date: 26.10.1985.

My dapp returns this errors in the console:

Error initializing Drizzle:
__stack_frame_overlay_proxy_console__ @ index.js:2178
TypeError: Cannot read property 'blocks' of undefined
    at drizzle.js:8
    at _ (drizzle.js:13)
    at Generator._invoke (drizzle.js:13)
    at Generator.t.(:3000/anonymous function) [as next] (http://localhost:3000/static/js/bundle.js:8248:76586)
    at P (drizzle.js:8)
    at Object.y [as cont] (drizzle.js:8)
......

I am noob with all these tools and just worked under tutorial:
http://maksimivanov.com/posts/ethereum-react-dapp-tutorial-part-2