From bab0217d6c8827e137dbdfa68ab7c0ee047da7cf Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 10 Oct 2018 02:09:26 -0700 Subject: [PATCH] Add Drizzle to manage web3 and smart contracts call --- package.json | 3 + src/components/AddressInputPanel/index.js | 4 +- src/components/CurrencyInputPanel/index.js | 45 +- src/components/Exchange.js | 2 +- src/components/Header/index.js | 20 +- src/components/NetworkStatus.js | 2 +- src/components/Purchase.js | 2 +- src/components/SharePurchase.js | 2 +- src/components/Watcher/index.js | 65 -- src/components/Web3Status/index.js | 16 +- src/ducks/addresses.js | 28 + src/ducks/index.js | 7 +- src/ducks/web3.js | 104 --- src/index.js | 13 +- src/pages/App.js | 53 +- src/pages/Pool/index.js | 13 +- src/pages/Send/index.js | 13 +- src/pages/Swap/index.js | 13 +- src/store/initial-state.js | 6 +- src/store/store.dev.js | 26 +- yarn.lock | 709 ++++++++++++++++++++- 21 files changed, 855 insertions(+), 291 deletions(-) delete mode 100644 src/components/Watcher/index.js create mode 100644 src/ducks/addresses.js delete mode 100644 src/ducks/web3.js diff --git a/package.json b/package.json index 642fb93fcd..1c64733bc0 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,8 @@ "axios": "^0.18.0", "classnames": "^2.2.6", "d3": "^4.13.0", + "drizzle": "^1.2.3", + "drizzle-react": "^1.2.0", "fuse": "^0.4.0", "jazzicon": "^1.5.0", "node-sass": "^4.9.3", @@ -24,6 +26,7 @@ "react-select": "^1.2.1", "react-transition-group": "1.x", "redux": "^3.7.2", + "redux-saga": "^0.16.2", "redux-subscriber": "^1.1.0", "redux-thunk": "^2.2.0", "ua-parser-js": "^0.7.18", diff --git a/src/components/AddressInputPanel/index.js b/src/components/AddressInputPanel/index.js index 9f830e9c90..10b8700531 100644 --- a/src/components/AddressInputPanel/index.js +++ b/src/components/AddressInputPanel/index.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { connect } from 'react-redux'; +import { drizzleConnect } from 'drizzle-react'; import PropTypes from 'prop-types'; import './address-input-panel.scss'; @@ -39,4 +39,4 @@ class AddressInputPanel extends Component { } } -export default connect()(AddressInputPanel); +export default drizzleConnect(AddressInputPanel); diff --git a/src/components/CurrencyInputPanel/index.js b/src/components/CurrencyInputPanel/index.js index e6f912c774..0b53dce776 100644 --- a/src/components/CurrencyInputPanel/index.js +++ b/src/components/CurrencyInputPanel/index.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { connect } from 'react-redux'; +import { drizzleConnect } from 'drizzle-react' import PropTypes from 'prop-types'; import { CSSTransitionGroup } from "react-transition-group"; import classnames from 'classnames'; @@ -32,7 +32,11 @@ class CurrencyInputPanel extends Component { title: PropTypes.string, description: PropTypes.string, extraText: PropTypes.string, - web3: PropTypes.object.isRequired, + initialized: PropTypes.bool, + }; + + static contextTypes = { + drizzle: PropTypes.object, }; state = { @@ -44,15 +48,19 @@ class CurrencyInputPanel extends Component { getBalance() { const { balance, - web3, + initialized, } = this.props; - const { selectedTokenAddress } = this.state; + const { drizzle: { web3 } } = this.context; - if (!selectedTokenAddress) { + if (!selectedTokenAddress || !initialized || !web3 || !balance) { return ''; } + if (selectedTokenAddress === 'ETH') { + return `Balance: ${web3.utils.fromWei(balance, 'ether')}`; + } + const bn = balance[selectedTokenAddress]; if (!bn) { @@ -147,8 +155,6 @@ class CurrencyInputPanel extends Component { const { title, description, - balance, - web3, } = this.props; const { selectedTokenAddress } = this.state; @@ -201,13 +207,22 @@ class CurrencyInputPanel extends Component { } } -export default connect( - state => ({ - tokenAddresses: state.web3.tokenAddresses, - balance: state.web3.balance, - web3: state.web3.web3, - }), +export default drizzleConnect( + CurrencyInputPanel, + state => { + const { + drizzleStatus: { initialized }, + accounts, + accountBalances, + } = state; + + return { + tokenAddresses: state.addresses.tokenAddresses, + initialized, + balance: accountBalances[accounts[0]] || null, + }; + }, dispatch => ({ updateField: (name, value) => dispatch(updateField({ name, value })), - }) -)(CurrencyInputPanel); + }), +); diff --git a/src/components/Exchange.js b/src/components/Exchange.js index 0fab887ee2..1ddb91d32c 100644 --- a/src/components/Exchange.js +++ b/src/components/Exchange.js @@ -3,7 +3,7 @@ import React, { Component }from 'react'; import SelectToken from './SelectToken'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { setInteractionState, setExchangeType } from '../ducks/web3'; +import { setInteractionState, setExchangeType } from '../ducks/addresses'; import { setExchangeInputValue, setExchangeOutputValue, setExchangeRate, setExchangeFee, setInputToken, setOutputToken, setInputBalance, setOutputBalance, setAllowanceApprovalState } from '../ducks/exchange'; class Exchange extends Component { diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 28c538299b..eacbccc423 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; +import { drizzleConnect } from 'drizzle-react' import classnames from 'classnames'; import UAParser from 'ua-parser-js'; import Logo from '../Logo'; @@ -57,7 +57,9 @@ function Header (props) { })} >
No Ethereum wallet found
-
Please visit us from a web3-enabled mobile browser, such as Trust Wallet and Cipher Browser.
+
+ Please visit us from a web3-enabled mobile browser, such as Trust Wallet and Cipher Browser. +
window.open(getCipherLink(), '_blank')} /> window.open(getTrustLink(), '_blank')} /> @@ -72,7 +74,7 @@ function Header (props) {
Uniswap
- +
({ - web3: state.web3.web3, - currentAddress: state.web3.currentAddress, - isConnected: !!(state.web3.web3 && state.web3.currentAddress), + // web3: console.log(state) || state.web3, + currentAddress: state.accounts[0], + isConnected: !!(state.drizzleStatus.initialized && state.accounts[0]), }), -)(Header) \ No newline at end of file +); diff --git a/src/components/NetworkStatus.js b/src/components/NetworkStatus.js index fbcea27fe8..347ce162c5 100644 --- a/src/components/NetworkStatus.js +++ b/src/components/NetworkStatus.js @@ -2,7 +2,7 @@ import React, { Component }from 'react'; import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { subscribe } from 'redux-subscriber'; -import { setWeb3ConnectionStatus, setInteractionState, setNetworkMessage, metamaskLocked } from '../ducks/web3'; +import { setWeb3ConnectionStatus, setInteractionState, setNetworkMessage, metamaskLocked } from '../ducks/addresses'; class NetworkStatus extends Component { componentDidMount(){ diff --git a/src/components/Purchase.js b/src/components/Purchase.js index 984eb3d39c..b5c74f5a7a 100644 --- a/src/components/Purchase.js +++ b/src/components/Purchase.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { bindActionCreators } from 'redux' import { connect } from 'react-redux'; -import { setBlockTimestamp, setInteractionState } from '../ducks/web3'; +import { setBlockTimestamp, setInteractionState } from '../ducks/addresses'; import { setExchangeInputValue, setExchangeOutputValue } from '../ducks/exchange'; class Purchase extends Component { diff --git a/src/components/SharePurchase.js b/src/components/SharePurchase.js index 1e966d7004..c1a8eaf829 100644 --- a/src/components/SharePurchase.js +++ b/src/components/SharePurchase.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { bindActionCreators } from 'redux' import { connect } from 'react-redux'; -import { setBlockTimestamp, setInteractionState } from '../ducks/web3'; +import { setBlockTimestamp, setInteractionState } from '../ducks/addresses'; import { setExchangeInputValue, setExchangeOutputValue } from '../ducks/exchange'; class Purchase extends Component { diff --git a/src/components/Watcher/index.js b/src/components/Watcher/index.js deleted file mode 100644 index 8c6fda672e..0000000000 --- a/src/components/Watcher/index.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import { updateBalance } from '../../ducks/web3'; - -class Watcher extends Component { - state = { - watchlist: {}, - }; - - componentWillMount() { - this.startWatching(); - } - - componentWillUnmount() { - } - - add(address) { - const { watchlist } = this.state; - this.setState({ - ...watchlist, - [address]: true, - }); - } - - remove(address) { - const { watchlist } = this.state; - this.setState({ - ...watchlist, - [address]: false, - }); - } - - startWatching() { - if (this.interval) { - clearInterval(this.interval); - return; - } - - this.interval = setInterval(() => { - this.props.updateBalance(); - Object.keys(this.state.watchlist).forEach(address => { - - }); - }, 15000); - } - - stopWatching() { - if (this.interval) { - clearInterval(this.interval); - } - } - - render() { - return