[WIP] Feature/mobile app

dapp/config/custom-environment-variables.json

@@ -1,6 +1,9 @@
 {
   "web3": {
-    "apiKey": "COMMUNITY_WEB3_API_KEY"
+    "apiKey": "COMMUNITY_WEB3_API_KEY",
+    "portis": {
+      "id": "COMMMUNITY_WEB3_PORTIS_ID"
+    }
   },
   "api": {
     "url": {

dapp/config/default.json

@@ -1,7 +1,9 @@
 {
   "web3": {
-    "fuseProvider": "http://rpc.fuse.io",
+    "fuseProvider": "https://rpc.fuse.io",
     "supportedNetworks": ["main", "ropsten", "fuse"],
+    "portis": {
+    },
     "addresses": {
       "ropsten": {
         "ColuLocalNetwork": "0x41C9d91E96b933b74ae21bCBb617369CBE022530",
@@ -35,7 +37,14 @@
     },
     "options": {
       "fuse": {
-        "gasPrice": 1e9
+        "gasPrice": 1e9,
+        "transactionConfirmationBlocks": 1
+      },
+      "ropsten": {
+        "transactionConfirmationBlocks": 1
+      },
+      "main": {
+        "transactionConfirmationBlocks": 2
       }
     }
   },

dapp/config/production.json

@@ -1,5 +1,6 @@
 {
   "web3": {
+    "fuseProvider": "https://rpc.fuse.io",
     "addresses": {
       "ropsten": {
         "ColuLocalNetwork": "0x41C9d91E96b933b74ae21bCBb617369CBE022530",

dapp/config/qa.json

@@ -1,4 +1,7 @@
 {
+  "web3": {
+    "fuseProvider": "https://rpc.fuse.io"
+  },
   "api": {
     "auth": {
         "domain": {

dapp/package.json

@@ -28,6 +28,11 @@
     ]
   },
   "dependencies": {
+    "3box": "^1.9.0",
+    "@portis/web3": "^2.0.0-beta.30",
+    "@fuse/entities-contracts": "../contracts/entities/",
+    "@fuse/roles": "../packages/roles",
+    "@fuse/token-factory-contracts": "../contracts/token-factory/",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
@@ -40,6 +45,7 @@
     "config": "^1.30.0",
     "connected-react-router": "^6.2.2",
     "css-loader": "^2.1.1",
+    "ethereumjs-wallet": "^0.6.3",
     "file-loader": "^1.1.11",
     "formik": "^1.5.1",
     "foundation-sites": "^6.5.3",
@@ -71,14 +77,12 @@
     "sass-loader": "^7.0.1",
     "style-loader": "^0.20.3",
     "superagent": "^3.8.3",
-    "web3": "1.0.0-beta.37",
+    "web3": "^1.0.0-beta.55",
+    "web3-provider-engine": "git+https://github.com/mikeshultz/web3-provider-engine.git#skipcache-option",
     "webpack": "^4.6.0",
     "webpack-cli": "^3.1.2",
     "websocket": "^1.0.28",
-    "yup": "^0.27.0",
-    "@fuse/token-factory-contracts": "../contracts/token-factory/",
-    "@fuse/entities-contracts": "../contracts/entities/",
-    "@fuse/roles": "../packages/roles"
+    "yup": "^0.27.0"
   },
   "devDependencies": {
     "chai": "^4.1.2",

dapp/src/actions/accounts.js

@@ -11,10 +11,16 @@ export const FETCH_BALANCES = createRequestTypes('FETCH_BALANCES')
 export const FETCH_TOKENS_WITH_BALANCES = createRequestTypes('FETCH_TOKENS_WITH_BALANCES')
 export const ADD_USER = createRequestTypes('ADD_USER')
 
+export const SIGN_IN = createRequestTypes('SIGN_IN')
+export const CREATE_3BOX_PROFILE = createRequestTypes('CREATE_3BOX_PROFILE')
+
 export const balanceOfToken = (tokenAddress, accountAddress, options) => action(BALANCE_OF_TOKEN.REQUEST, { tokenAddress, accountAddress, options })
 export const balanceOfNative = (accountAddress) => action(BALANCE_OF_NATIVE.REQUEST, { accountAddress })
 export const balanceOfCln = (accountAddress) => action(BALANCE_OF_CLN.REQUEST, { accountAddress })
 
 export const fetchBalances = (tokens, accountAddress) => action(FETCH_BALANCES.REQUEST, { accountAddress, tokens })
 export const fetchTokensWithBalances = (accountAddress) => action(FETCH_TOKENS_WITH_BALANCES.REQUEST, { accountAddress })
 export const fetchCommunities = (accountAddress) => communitiesAction(FETCH_COMMUNITIES.REQUEST, { accountAddress })
+
+export const signIn = (accountAddress) => action(SIGN_IN.REQUEST, { accountAddress })
+export const create3boxProfile = (accountAddress, data) => action(CREATE_3BOX_PROFILE.REQUEST, { accountAddress, data })

dapp/src/actions/communityEntities.js

@@ -17,18 +17,24 @@ export const REMOVE_ADMIN_ROLE = createTransactionRequestTypes('REMOVE_ADMIN_ROL
 export const CONFIRM_USER = createTransactionRequestTypes('CONFIRM_USER')
 
 export const FETCH_ENTITY = createRequestTypes('FETCH_ENTITY')
+export const JOIN_COMMUNITY = createRequestTypes('JOIN_COMMUNITY')
+export const IMPORT_EXISTING_ENTITY = createRequestTypes('IMPORT_EXISTING_ENTITY')
+export const UPLOAD_IMAGE = createRequestTypes('UPLOAD_IMAGE')
 
 export const fetchEntities = (communityAddress) => entitiesAction(FETCH_USERS_ENTITIES.REQUEST, { communityAddress })
 export const fetchUsersEntities = (communityAddress, entityType = 'user') => entitiesAction(FETCH_USERS_ENTITIES.REQUEST, { communityAddress, entityType })
 export const fetchBusinessesEntities = (communityAddress, entityType = 'business') => entitiesAction(FETCH_BUSINESSES_ENTITIES.REQUEST, { communityAddress, entityType })
 
-export const fetchEntity = (account) => entitiesAction(FETCH_ENTITY.REQUEST, { account })
+export const fetchEntity = (communityAddress, account) => entitiesAction(FETCH_ENTITY.REQUEST, { communityAddress, account })
 
 export const addEntity = (communityAddress, data, isClosed) => action(ADD_ENTITY.REQUEST, { communityAddress, data, isClosed })
 export const removeEntity = (communityAddress, account) => action(REMOVE_ENTITY.REQUEST, { communityAddress, account })
 export const addAdminRole = (account) => action(ADD_ADMIN_ROLE.REQUEST, { account })
 export const removeAdminRole = (account) => action(REMOVE_ADMIN_ROLE.REQUEST, { account })
 export const confirmUser = (account) => action(CONFIRM_USER.REQUEST, { account })
 export const editEntity = (listAddress, hash, data) => action(EDIT_ENTITY.REQUEST, { listAddress, hash, data })
+export const joinCommunity = (communityAddress, data) => action(JOIN_COMMUNITY.REQUEST, { communityAddress, data })
+export const importExistingEntity = (accountAddress, communityAddress, isClosed) => action(IMPORT_EXISTING_ENTITY.REQUEST, { accountAddress, communityAddress, isClosed })
+export const uploadImage = (image) => action(UPLOAD_IMAGE.REQUEST, { image })
 
 export const toggleCommunityMode = (communityAddress, isClosed) => action(TOGGLE_COMMUNITY_MODE.REQUEST, { communityAddress, isClosed })

dapp/src/actions/metadata.js

@@ -4,6 +4,7 @@ export const entityName = 'metadata'
 
 export const FETCH_METADATA = createRequestTypes('FETCH_METADATA')
 export const CREATE_METADATA = createRequestTypes('CREATE_METADATA')
+export const CREATE_ENTITY_METADATA = createRequestTypes('CREATE_ENTITY_METADATA')
 
 export const fetchMetadata = (tokenURI) => action(FETCH_METADATA.REQUEST, { tokenURI })
 export const createMetadata = (metadata) => action(CREATE_METADATA.REQUEST, { metadata })

dapp/src/actions/network.js

@@ -3,6 +3,7 @@ import { requestAction, createRequestTypes } from './utils'
 export const GET_NETWORK_TYPE = createRequestTypes('GET_NETWORK_TYPE')
 export const GET_BLOCK_NUMBER = createRequestTypes('GET_BLOCK_NUMBER')
 
+export const CHANGE_NETWORK = createRequestTypes('CHANGE_NETWORK')
 export const UNSUPPORTED_NETWORK_ERROR = 'UNSUPPORTED_NETWORK_ERROR'
 
 export const CHECK_ACCOUNT_CHANGED = createRequestTypes('CHECK_ACCOUNT_CHANGED')
@@ -11,9 +12,10 @@ export const ACCOUNT_LOGGED_OUT = 'ACCOUNT_LOGGED_OUT'
 export const FETCH_GAS_PRICES = createRequestTypes('FETCH_GAS_PRICES')
 
 export const getNetworkType = () => requestAction(GET_NETWORK_TYPE)
+export const getBlockNumber = (networkType, bridgeType) => requestAction(GET_BLOCK_NUMBER, { networkType, bridgeType })
 
+export const changeNetwork = (networkType) => requestAction(CHANGE_NETWORK, { networkType })
 export const checkAccountChanged = (selectedAddress) => requestAction(CHECK_ACCOUNT_CHANGED,
   { selectedAddress })
 
 export const fetchGasPrices = () => requestAction(FETCH_GAS_PRICES)
-export const getBlockNumber = (networkType, bridgeType) => requestAction(GET_BLOCK_NUMBER, { networkType, bridgeType })

dapp/src/components/common/CommunityLogo/index.jsx

@@ -2,36 +2,26 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Loader from 'components/common/Loader'
 import classNames from 'classnames'
-// import logoDarkBlue from 'images/token-dark_blue.svg'
-// import logoGreen from 'images/token-green.svg'
-// import logoGreenGradiant from 'images/token-green_gradient.svg'
-// import logoMain from 'images/token-main.svg'
-// import logoMainDark from 'images/token-main-dark.svg'
-// import logoMainGradiant from 'images/token-main-gradient.svg'
 import DAI_1 from 'images/DAI_CoinIcon1.svg'
 import DAI_2 from 'images/DAI_CoinIcon2.svg'
 import DAI_3 from 'images/DAI_CoinIcon3.svg'
 import tokenOne from 'images/CoinIcon1.svg'
 import tokenTwo from 'images/CoinIcon2.svg'
 import tokenThird from 'images/CoinIcon3.svg'
 
-const getImages = (networkType) => {
-  // const isRopsten = networkType === 'ropsten'
-  const pictureEnum = {
-    'CoinIcon1.svg': tokenOne,
-    'CoinIcon2.svg': tokenTwo,
-    'CoinIcon3.svg': tokenThird
-  }
-  return pictureEnum
-}
+const getImages = () => ({
+  'CoinIcon1.svg': tokenOne,
+  'CoinIcon2.svg': tokenTwo,
+  'CoinIcon3.svg': tokenThird
+})
 
 const getDaiIcons = () => ({
   'CoinIcon1.svg': DAI_1,
   'CoinIcon2.svg': DAI_2,
   'CoinIcon3.svg': DAI_3
 })
 
-const CommunityLogo = ({ networkType, metadata: { communityLogo }, token: { symbol }, isSmall = false, isBig = false, isDaiToken = false }) => {
+const CommunityLogo = ({ networkType, metadata: { communityLogo = 'CoinIcon1.svg' }, token: { symbol }, isSmall = false, isBig = false, isDaiToken = false }) => {
   const wrapperClasses = classNames(`logo-circle__outer`,
     { 'logo-circle__outer--normal': !isSmall && !isBig },
     { 'logo-circle__outer--small': isSmall && !isBig },
@@ -44,7 +34,7 @@ const CommunityLogo = ({ networkType, metadata: { communityLogo }, token: { symb
     <div className={wrapperClasses}>
       {
         communityLogo
-          ? <img src={!isDaiToken ? (getImages(networkType)[communityLogo] || tokenOne) : getDaiIcons()[communityLogo]} className='logo-circle__inner' alt='Community Logo' />
+          ? <img src={!isDaiToken ? (getImages()[communityLogo] || tokenOne) : getDaiIcons()[communityLogo]} className='logo-circle__inner' alt='Community Logo' />
           : <Loader color='#fff' className='logo-img' />
       }
       {!isDaiToken && <span className='logo-circle__name'>{symbol}</span>}

dapp/src/components/common/JoinCommunity/index.jsx

@@ -0,0 +1,34 @@
+import { Component } from 'react'
+import { withNetwork, withAccount, withBox } from 'containers/Web3'
+import { connect } from 'react-redux'
+import { joinCommunity } from 'actions/communityEntities'
+import { withRouter } from 'react-router-dom'
+
+class JoinCommunity extends Component {
+  componentDidMount () {
+    const { joinCommunity, data, communityAddress } = this.props
+    joinCommunity(communityAddress, { ...data, type: 'user' })
+  }
+
+  componentDidUpdate (prepProps, prevState) {
+    if (this.props.isBoxConnected && (!prepProps.join && this.props.join)) {
+      window.location.replace('http://communities-qa.cln.network')
+    }
+
+    if (this.props.isBoxConnected && (!prepProps.join && this.props.join === false)) {
+      window.location.replace('http://communities-qa.cln.network')
+    }
+  }
+
+  render = () => null
+}
+
+const mapStateToProps = (state) => ({
+  join: state.screens.communityEntities && state.screens.communityEntities.join
+})
+
+const mapDispatchToProps = {
+  joinCommunity
+}
+
+export default withRouter(withNetwork(withAccount(withBox(connect(mapStateToProps, mapDispatchToProps)(JoinCommunity)))))

dapp/src/components/common/NavBar/index.jsx

@@ -60,7 +60,7 @@ class NavBar extends Component {
     const { withLogo, networkType } = this.props
     const { isHelpOpen, isProfileOpen } = this.state
     return (
-      <div className={classNames('navbar', { 'navbar--scroll': this.state.scrollTop > 70 })}>
+      <div className={classNames('navbar', { 'navbar--scroll': this.state.scrollTop > 70 })} style={{ width: (this.state.scrollTop > 70 && !isMobileOnly) && !withLogo ? '80%' : null }}>
         { (withLogo || (isMobileOnly && this.state.scrollTop > 70)) && <div className='navbar__logo'><Logo onClick={this.goToHome} isBlue={this.state.scrollTop < 70} /></div> }
         <div className='navbar__links' style={{ marginLeft: !withLogo ? 'auto' : null }}>
           <div

dapp/src/components/common/ProfileDropDown/index.jsx

@@ -89,12 +89,12 @@ class ProfileDropDown extends Component {
           <div className='profile__account__avatar cell small-24'>
             <img src={Avatar} />
           </div>
-          <span className='cell small-24 profile__account__address'>
+          {accountAddress && <span className='cell small-24 profile__account__address'>
             {formatAddress(accountAddress)}
             <CopyToClipboard text={accountAddress}>
               <FontAwesome name='clone' />
             </CopyToClipboard>
-          </span>
+          </span>}
         </div>
         <InnerCommunities
           showDashboard={this.showDashboard}

dapp/src/components/common/SignIn/index.jsx

@@ -0,0 +1,42 @@
+import { Component } from 'react'
+import { connect } from 'react-redux'
+import { signIn, create3boxProfile } from 'actions/accounts'
+import { withRouter } from 'react-router-dom'
+
+class SignInLayout extends Component {
+  componentDidMount () {
+    const { createNew, accountAddress } = this.props
+
+    if (createNew) {
+      const { create3boxProfile, data } = this.props
+      create3boxProfile(accountAddress, data)
+    } else {
+      const { signIn } = this.props
+      signIn(accountAddress)
+    }
+  }
+
+  componentDidUpdate (prepProps, prevState) {
+    if (!prepProps.isBoxConnected && this.props.isBoxConnected && this.props.isMobileApp) {
+      window.location.replace('http://communities-qa.cln.network')
+    }
+  }
+
+  render = () => null
+}
+
+const mapStateToProps = (state, { match }) => ({
+  accountAddress: state.network.accountAddress,
+  isBoxConnected: state.network.isBoxConnected,
+  isMobileApp: match.params.isMobileApp
+})
+
+const mapDispatchToProps = {
+  signIn,
+  create3boxProfile
+}
+
+export default withRouter(connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SignInLayout))

dapp/src/components/dashboard/components/AddUserForm/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import omit from 'lodash/omit'
+import get from 'lodash/get'
 import { Formik, Field, ErrorMessage } from 'formik'
 import userEntity from 'utils/validation/shapes/userEntity'
 import TransactionButton from 'components/common/TransactionButton'
@@ -11,6 +12,8 @@ class AddUserForm extends Component {
   constructor (props) {
     super(props)
 
+    const { entity } = props
+
     this.initialValues = {
       firstName: '',
       lastName: '',
@@ -20,7 +23,7 @@ class AddUserForm extends Component {
       country: '',
       city: '',
       address: '',
-      account: ''
+      account: get(entity, 'account', '')
     }
 
     this.validationSchema = userEntity
@@ -36,7 +39,7 @@ class AddUserForm extends Component {
     submitEntity(entity)
   }
 
-  renderForm = ({ handleSubmit, setFieldValue, setFieldTouched, values, isValid }) => {
+  renderForm = ({ handleSubmit, setFieldValue, isValid }) => {
     return (
       <form className='user-form' onSubmit={handleSubmit}>
         <h5 className='user-form__title'>Add new user</h5>

dapp/src/components/dashboard/components/Bridge/index.jsx

@@ -2,7 +2,7 @@ import React, { Component, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { BigNumber } from 'bignumber.js'
-import web3 from 'web3'
+import { toWei } from 'web3-utils'
 import FontAwesome from 'react-fontawesome'
 import { balanceOfToken } from 'actions/accounts'
 import * as actions from 'actions/bridge'
@@ -78,7 +78,7 @@ class Bridge extends Component {
   setTransferAmount = (e) => this.setState({ transferAmount: e.target.value })
 
   handleTransfer = () => {
-    const value = web3.utils.toWei(this.state.transferAmount)
+    const value = toWei(this.state.transferAmount)
     if (this.props.bridgeStatus.to.bridge === 'home') {
       this.props.transferToHome(this.props.foreignTokenAddress, this.props.foreignBridgeAddress, value)
     } else {