Add drizzle-utils official package

app/package.json

@@ -6,7 +6,10 @@
     "type": "git",
     "url": "https://gitlab.com/Ezerous/Apella.git"
   },
+  "homepage": ".",
   "dependencies": {
+    "@drizzle-utils/get-contract-instance": "0.2.0",
+    "@drizzle-utils/get-web3": "0.2.1",
     "connected-react-router": "6.4.0",
     "drizzle": "1.4.0",
     "history": "4.9.0",

app/src/config/drizzleOptions.js

@@ -1,4 +1,5 @@
 import Forum from '../contracts/Forum.json';
+// Docs: https://truffleframework.com/docs/drizzle/reference/drizzle-options
 
 const drizzleOptions = {
   web3: {

app/src/redux/sagas/web3UtilsSaga.js → app/src/redux/sagas/drizzleUtilsSaga.js

@@ -1,9 +1,12 @@
-import { call, put, select, takeLatest } from 'redux-saga/effects';
+import { call, put, select } from 'redux-saga/effects';
-import { getContractInstance, getWeb3 } from '../../utils/web3Utils';
+import getContractInstance from "@drizzle-utils/get-contract-instance";
+import getWeb3 from "@drizzle-utils/get-web3";
+import Web3 from "web3";
 
 import Forum from '../../contracts/Forum';
 import { WEB3_UTILS_SAGA_INITIALIZED } from '../actions/web3UtilsActions';
 import { DRIZZLE_INITIALIZED } from '../actions/drizzleActions';
+import { fork, take } from 'redux-saga/effects';
 
 const accounts = state => state.accounts;
 let initFlag, web3, forumContract;
@@ -11,10 +14,11 @@ let initFlag, web3, forumContract;
 function* init() {
   if (!initFlag) {
     try{
-      web3 = yield call(getWeb3);
+      const host = "http://127.0.0.1:8545"; //Ganache development blockchain
-      forumContract = yield call(getContractInstance, {
+      const fallbackProvider = new Web3.providers.HttpProvider(host);
-        web3, artifact: Forum
+      web3 = yield call(getWeb3, { fallbackProvider });
-      });
+
+      forumContract = yield call(getContractInstance, { web3, artifact: Forum });
       initFlag = true;
       yield put({
         type: WEB3_UTILS_SAGA_INITIALIZED, ...[]
@@ -25,7 +29,7 @@ function* init() {
     }
   }
   else
-    console.warn('Attempted to reinitialize web3UtilsSaga!');
+    console.warn('Attempted to reinitialize drizzleUtilsSaga!');
 }
 
 // If the method below proves to be problematic/ineffective (i.e. getting current account
@@ -35,10 +39,11 @@ function* getCurrentAccount() {
   return (yield select(accounts))[0];
 }
 
-function* web3UtilsSaga() {
+function* drizzleUtilsSaga() {
-  yield takeLatest(DRIZZLE_INITIALIZED, init);
+  yield take(DRIZZLE_INITIALIZED);
+  yield fork(init);
 }
 
 export { web3, forumContract, getCurrentAccount };
 
-export default web3UtilsSaga;
+export default drizzleUtilsSaga;

app/src/redux/sagas/orbitSaga.js

@@ -1,6 +1,6 @@
 import { all, call, put, select, take, takeEvery, takeLatest } from 'redux-saga/effects';
 import isEqual from 'lodash.isequal';
-import { forumContract, getCurrentAccount } from './web3UtilsSaga';
+import { forumContract, getCurrentAccount } from './drizzleUtilsSaga';
 import {
   createDatabases, determineDBAddress,
   loadDatabases,

app/src/redux/sagas/rootSaga.js

@@ -1,6 +1,6 @@
 import { all, fork } from 'redux-saga/effects';
 import { drizzleSagas } from 'drizzle';
-import web3UtilsSaga from './web3UtilsSaga';
+import drizzleUtilsSaga from './drizzleUtilsSaga';
 import userSaga from './userSaga';
 import orbitSaga from './orbitSaga';
 import transactionsSaga from './transactionsSaga';
@@ -9,11 +9,12 @@ import eventSaga from './eventSaga';
 export default function* root() {
   const sagas = [
     ...drizzleSagas,
-    web3UtilsSaga,
+    drizzleUtilsSaga,
     orbitSaga,
     userSaga,
     eventSaga,
-    transactionsSaga];
+    transactionsSaga
+  ];
   yield all(
     sagas.map(saga => fork(saga)),
   );

app/src/redux/sagas/userSaga.js

@@ -1,6 +1,6 @@
 import { call, put, select, take, takeEvery } from 'redux-saga/effects';
 
-import { forumContract, getCurrentAccount } from './web3UtilsSaga';
+import { forumContract, getCurrentAccount } from './drizzleUtilsSaga';
 import { WEB3_UTILS_SAGA_INITIALIZED } from '../actions/web3UtilsActions';
 import {
   ACCOUNT_CHANGED,

app/src/utils/EthereumIdentityProvider.js

@@ -1,4 +1,4 @@
-import { web3 } from '../redux/sagas/web3UtilsSaga';
+import { web3 } from '../redux/sagas/drizzleUtilsSaga';
 
 class EthereumIdentityProvider {
   constructor (options = {}) {  // Orbit's Identity Id (equals user's Ethereum address)

app/src/utils/web3Utils.js

@@ -1,86 +0,0 @@
-// See also: https://github.com/trufflesuite/drizzle-utils
-const Web3 = require('web3');
-
-const resolveWeb3 = (resolve, options, isBrowser) => {
-  let provider;
-
-  if (options.customProvider) {
-    // use custom provider from options object
-    provider = options.customProvider;
-  } else if (isBrowser && window.ethereum) {
-    // use `ethereum` object injected by MetaMask
-    provider = window.ethereum;
-  } else if (isBrowser && typeof window.web3 !== 'undefined') {
-    // use injected web3 object by legacy dapp browsers
-    provider = window.web3.currentProvider;
-  } else if (options.fallbackProvider) {
-    // use fallback provider from options object
-    provider = options.fallbackProvider;
-  } else {
-    // connect to development blockchain from `truffle develop`
-    provider = new Web3.providers.HttpProvider('http://127.0.0.1:9545');
-  }
-
-  const web3 = new Web3(provider);
-  resolve(web3);
-};
-
-const getWeb3 = (options = {
-}) => new Promise((resolve) => {
-  // handle server-side and React Native environments
-  const isReactNative = typeof navigator !== 'undefined' && navigator.product
-          === 'ReactNative';
-  const isNode = typeof window === 'undefined';
-  if (isNode || isReactNative) {
-    return resolveWeb3(resolve, options, false);
-  }
-
-  // if page is ready, resolve for web3 immediately
-  if (document.readyState === 'complete') {
-    return resolveWeb3(resolve, options, true);
-  }
-
-  // otherwise, resolve for web3 when page is done loading
-  return window.addEventListener('load', () => resolveWeb3(resolve, options, true));
-});
-
-const getContractInstance = (options = {
-}) => new Promise(async (resolve, reject) => {
-  if (!options.web3) {
-    return reject(new Error('The options object with web3 is required.'));
-  }
-
-  const { web3 } = options;
-
-  let instance;
-  try {
-    if (options.artifact) {
-      // if artifact exists, attempt to get network ID and the deployed address
-      const { artifact } = options;
-      const networkId = await web3.eth.net.getId(); // web3 v1.0.0-beta.47 breaks here
-      const deployedNetwork = artifact.networks[networkId];
-
-      // if no deployed address is found, instantiate without the address
-      const address = deployedNetwork && deployedNetwork.address;
-
-      instance = new web3.eth.Contract(artifact.abi, address);
-    } else if (options.abi) {
-      // otherwise, use passed-in ABI and deployed address (optional)
-      const { abi, address } = options;
-
-      instance = new web3.eth.Contract(abi, address);
-    } else {
-      return reject(
-        new Error(
-          'You must pass in a contract artifact or the ABI of a deployed contract.',
-        ),
-      );
-    }
-
-    return resolve(instance);
-  } catch (err) {
-    return reject(err);
-  }
-});
-
-export { getWeb3, getContractInstance };