Skip to content

I
interface
Commit c51eae9f authored by Chi Kei Chan's avatar Chi Kei Chan
Browse files
Options

Connect to Web3 and get current wallet address

parent f2c9e5ac
Expand all Show whitespace changes
Inline Side-by-side
Showing with 406 additions and 366 deletions
package.json
View file @ c51eae9f
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
"redux": "^3.7.2", "redux": "^3.7.2",
"redux-subscriber": "^1.1.0", "redux-subscriber": "^1.1.0",
"redux-thunk": "^2.2.0", "redux-thunk": "^2.2.0",
"web3": "1.0.0-beta.22" "web3": "^1.0.0-beta.36"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
......
src/components/CurrencyInputPanel/index.js
View file @ c51eae9f
...@@ -10,7 +10,6 @@ import SearchIcon from '../../assets/images/magnifying-glass.svg'; ...@@ -10,7 +10,6 @@ import SearchIcon from '../../assets/images/magnifying-glass.svg';
import './currency-panel.scss'; import './currency-panel.scss';
const TOKEN_ICON_API = 'https://raw.githubusercontent.com/TrustWallet/tokens/master/images';
const FUSE_OPTIONS = { const FUSE_OPTIONS = {
includeMatches: false, includeMatches: false,
threshold: 0.0, threshold: 0.0,
...@@ -41,7 +40,7 @@ class CurrencyInputPanel extends Component { ...@@ -41,7 +40,7 @@ class CurrencyInputPanel extends Component {
}; };
createTokenList = () => { createTokenList = () => {
let tokens = this.props.web3Store.tokenAddresses.addresses; let tokens = this.props.web3.tokenAddresses.addresses;
let tokenList = [ { value: 'ETH', label: 'ETH', address: 'ETH', clearableValue: false } ]; let tokenList = [ { value: 'ETH', label: 'ETH', address: 'ETH', clearableValue: false } ];
for (let i = 0; i < tokens.length; i++) { for (let i = 0; i < tokens.length; i++) {
...@@ -170,5 +169,7 @@ class CurrencyInputPanel extends Component { ...@@ -170,5 +169,7 @@ class CurrencyInputPanel extends Component {
} }
export default connect( export default connect(
state => ({ web3Store: state.web3Store }) state => ({
web3: state.web3,
}),
)(CurrencyInputPanel); )(CurrencyInputPanel);
src/components/Web3Status/index.js
View file @ c51eae9f
...@@ -56,4 +56,9 @@ Web3Status.defaultProps = { ...@@ -56,4 +56,9 @@ Web3Status.defaultProps = {
address: 'Disconnected', address: 'Disconnected',
}; };
export default connect()(Web3Status); export default connect(
({ web3: { web3, currentAddress } }) => ({
address: currentAddress,
isConnected: !!(web3 && currentAddress),
})
)(Web3Status);
src/components/Web3Status/web3-status.scss
View file @ c51eae9f
...@@ -26,5 +26,6 @@ ...@@ -26,5 +26,6 @@
overflow: hidden; overflow: hidden;
text-align: right; text-align: right;
margin-left: 1rem; margin-left: 1rem;
font-size: .85rem;
} }
} }
\ No newline at end of file
src/ducks/index.js
View file @ c51eae9f
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
// import global from './global-reducer'; // import global from './global-reducer';
import web3Store from './web3'; import web3 from './web3';
import exchangeContracts from './exchange-contract'; import exchangeContracts from './exchange-contract';
import tokenContracts from './token-contract'; import tokenContracts from './token-contract';
import exchange from './exchange'; import exchange from './exchange';
export default combineReducers({ export default combineReducers({
web3Store, web3,
exchangeContracts, exchangeContracts,
tokenContracts, tokenContracts,
exchange exchange
......
src/ducks/web3.js
View file @ c51eae9f
// these will take in an action, have a default state set in the arguments and return a new state import Web3 from "web3";
import {
SET_WEB3_CONNECTION_STATUS, const INITIALIZE = 'app/web3/initialize';
SET_CURRENT_MASK_ADDRESS, const UPDATE_CURRENT_ADDRESS = 'app/web3/updateCurrentAddress';
METAMASK_LOCKED,
METAMASK_UNLOCKED, // export const setWeb3ConnectionStatus = (connected) => ({
SET_INTERACTION_STATE, // type: SET_WEB3_CONNECTION_STATUS,
FACTORY_CONTRACT_READY, // connected
SET_NETWORK_MESSAGE, // })
SET_BLOCK_TIMESTAMP, //
SET_EXCHANGE_TYPE, // export const setCurrentMaskAddress = (currentMaskAddress) => ({
INITIALIZE_GLOBAL_WEB3, // type: SET_CURRENT_MASK_ADDRESS,
TOGGLE_ABOUT, // currentMaskAddress
TOGGLE_INVEST // });
} from '../constants'; //
// export const metamaskLocked = () => ({
// type: METAMASK_LOCKED,
// this actions folder is actually full of action creators // metamaskLocked: true
// your asynchronous calls are going to be in redux-thunk style action creators // });
//
export const setWeb3ConnectionStatus = (connected) => ({ // export const metamaskUnlocked = () => ({
type: SET_WEB3_CONNECTION_STATUS, // type: METAMASK_UNLOCKED,
connected // metamaskLocked: false
}) // });
//
export const setCurrentMaskAddress = (currentMaskAddress) => ({ // export const setInteractionState = (interaction) => ({
type: SET_CURRENT_MASK_ADDRESS, // type: SET_INTERACTION_STATE,
currentMaskAddress // interaction
}); // })
//
export const metamaskLocked = () => ({ // export const factoryContractReady = (factoryContract) => ({
type: METAMASK_LOCKED, // type: FACTORY_CONTRACT_READY,
metamaskLocked: true // factoryContract
}); // });
//
export const metamaskUnlocked = () => ({ // export const setNetworkMessage = (networkMessage) => {
type: METAMASK_UNLOCKED, // return async (dispatch) => {
metamaskLocked: false // let networkName;
}); // switch (networkMessage) {
// case "main":
export const setInteractionState = (interaction) => ({ // networkName = 'Ethereum Mainet'
type: SET_INTERACTION_STATE, // break;
interaction // case "morden":
}) // networkName = 'Morden testnet'
// break;
export const factoryContractReady = (factoryContract) => ({ // case "ropsten":
type: FACTORY_CONTRACT_READY, // networkName = 'Ropsten testnet'
factoryContract // break;
}); // case "rinkeby":
// networkName = 'Rinkeby testnet'
export const setNetworkMessage = (networkMessage) => { // break;
return async (dispatch) => { // case "kovan":
let networkName; // networkName = 'Kovan testnet'
switch (networkMessage) { // break;
case "main": // default:
networkName = 'Ethereum Mainet' // networkName = 'an unknown network'
break; // }
case "morden": // dispatch ({
networkName = 'Morden testnet' // type: SET_NETWORK_MESSAGE,
break; // networkMessage: networkName
case "ropsten": // })
networkName = 'Ropsten testnet' // }
break; // };
case "rinkeby": //
networkName = 'Rinkeby testnet' // export const setBlockTimestamp = () => {
break; // return async (dispatch, getState) => {
case "kovan": // const { web3 } = getState().web3Store;
networkName = 'Kovan testnet' // await web3.eth.getBlock('latest', (error, blockInfo) => {
break; // dispatch({
default: // type: SET_BLOCK_TIMESTAMP,
networkName = 'an unknown network' // timestamp: blockInfo.timestamp
} // })
dispatch ({ // });
type: SET_NETWORK_MESSAGE, // }
networkMessage: networkName // }
}) //
} // export const setExchangeType = (exchangeType) => ({
}; // type: SET_EXCHANGE_TYPE,
// exchangeType
export const setBlockTimestamp = () => { // });
return async (dispatch, getState) => { //
const { web3 } = getState().web3Store; // export const toggleAbout = (toggle) => ({
await web3.eth.getBlock('latest', (error, blockInfo) => { // type: TOGGLE_ABOUT,
// aboutToggle: toggle
// });
//
// export const toggleInvest = (toggle) => ({
// type: TOGGLE_INVEST,
// investToggle: toggle
// });
export const initialize = () => dispatch => {
if (typeof window.web3 !== 'undefined') {
const web3 = new Web3(window.web3.currentProvider);
dispatch({ dispatch({
type: SET_BLOCK_TIMESTAMP, type: INITIALIZE,
timestamp: blockInfo.timestamp payload: web3,
})
}); });
dispatch(updateCurrentAddress());
} }
} };
export const setExchangeType = (exchangeType) => ({ export const updateCurrentAddress = () => (dispatch, getState) => {
type: SET_EXCHANGE_TYPE, const { web3: { web3 } } = getState();
exchangeType
});
export const toggleAbout = (toggle) => ({ if (!web3) {
type: TOGGLE_ABOUT, return;
aboutToggle: toggle }
});
export const toggleInvest = (toggle) => ({ web3.eth.getAccounts((err, accounts) => {
type: TOGGLE_INVEST, if (err) {
investToggle: toggle return;
}); }
export const initializeGlobalWeb3 = (web3) => ({ dispatch({
type: INITIALIZE_GLOBAL_WEB3, type: UPDATE_CURRENT_ADDRESS,
web3 payload: accounts[0],
}); });
})
};
export default (state = {}, action) => { export default (state = {}, { type, payload }) => {
const { connected, currentMaskAddress, metamaskLocked, interaction, factoryContract, networkMessage, timestamp, exchangeType, web3, aboutToggle, investToggle } = action switch (type) {
switch (action.type) { case INITIALIZE:
case INITIALIZE_GLOBAL_WEB3: return { ...state, web3: payload };
return Object.assign({}, state, { web3: web3 }); case UPDATE_CURRENT_ADDRESS:
case SET_WEB3_CONNECTION_STATUS: return { ...state, currentAddress: payload };
return Object.assign({}, state, { connected: connected }); // case SET_WEB3_CONNECTION_STATUS:
case SET_CURRENT_MASK_ADDRESS: // return Object.assign({}, state, { connected: connected });
return Object.assign({}, state, { currentMaskAddress: currentMaskAddress }); // case SET_CURRENT_MASK_ADDRESS:
case METAMASK_LOCKED: // return Object.assign({}, state, { currentMaskAddress: currentMaskAddress });
return Object.assign({}, state, { metamaskLocked: metamaskLocked }); // case METAMASK_LOCKED:
case METAMASK_UNLOCKED: // return Object.assign({}, state, { metamaskLocked: metamaskLocked });
return Object.assign({}, state, { metamaskLocked: metamaskLocked }); // case METAMASK_UNLOCKED:
case SET_INTERACTION_STATE: // return Object.assign({}, state, { metamaskLocked: metamaskLocked });
return Object.assign({}, state, { interaction: interaction }); // case SET_INTERACTION_STATE:
case FACTORY_CONTRACT_READY: // return Object.assign({}, state, { interaction: interaction });
return Object.assign({}, state, { factoryContract: factoryContract}); // case FACTORY_CONTRACT_READY:
case SET_NETWORK_MESSAGE: // return Object.assign({}, state, { factoryContract: factoryContract});
return Object.assign({}, state, { networkMessage: networkMessage }); // case SET_NETWORK_MESSAGE:
case SET_BLOCK_TIMESTAMP: // return Object.assign({}, state, { networkMessage: networkMessage });
return Object.assign({}, state, { blockTimestamp: timestamp }); // case SET_BLOCK_TIMESTAMP:
case SET_EXCHANGE_TYPE: // return Object.assign({}, state, { blockTimestamp: timestamp });
return Object.assign({}, state, { exchangeType: exchangeType }); // case SET_EXCHANGE_TYPE:
case TOGGLE_ABOUT: // return Object.assign({}, state, { exchangeType: exchangeType });
return Object.assign({}, state, { aboutToggle: aboutToggle }) // case TOGGLE_ABOUT:
case TOGGLE_INVEST: // return Object.assign({}, state, { aboutToggle: aboutToggle })
return Object.assign({}, state, { investToggle: investToggle }) // case TOGGLE_INVEST:
// return Object.assign({}, state, { investToggle: investToggle })
default: return state; default: return state;
} }
} }
src/index.js
View file @ c51eae9f
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
// import { BrowserRouter } from 'react-router-dom' import Web3 from 'web3';
import App from './pages/App'; import App from './pages/App';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
...@@ -9,12 +9,15 @@ import store from './store'; ...@@ -9,12 +9,15 @@ import store from './store';
import './index.scss'; import './index.scss';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
// provider is going to need a store object passed into it
ReactDOM.render( window.addEventListener('load', function() {
ReactDOM.render(
<Provider store={store}> <Provider store={store}>
<App metamask={window.web3} /> <App />
</Provider> </Provider>
, document.getElementById('root') , document.getElementById('root')
); );
registerServiceWorker();
});
registerServiceWorker();
src/pages/App.js
View file @ c51eae9f
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { BrowserRouter, Switch, Route } from 'react-router-dom'; import { BrowserRouter, Switch, Route } from 'react-router-dom';
// import UniHead from '../components/UniHead' import { initialize } from '../ducks/web3'
// import Header from '../components/Header';
// import ConnectionHelper from '../components/ConnectionHelper'
// import Exchange from '../components/Exchange';
// import RateAndFee from '../components/RateAndFee';
// import Purchase from '../components/Purchase';
// import About from '../components/About';
// import Links from '../components/Links';
// import SharePurchase from '../components/SharePurchase';
import Swap from './Swap'; import Swap from './Swap';
import Send from './Send'; import Send from './Send';
import Pool from './Pool'; import Pool from './Pool';
...@@ -17,50 +9,9 @@ import Pool from './Pool'; ...@@ -17,50 +9,9 @@ import Pool from './Pool';
import './App.scss'; import './App.scss';
class App extends Component { class App extends Component {
// renderMain() { componentWillMount() {
// return ( this.props.initializeWeb3();
// <div className="app"> }
// <UniHead />
// <Header metamask={this.props.metamask}/>
// <ConnectionHelper
// metamask={this.props.metamask}
// approveAllowance={this.approveAllowance}
// toggleAbout={this.toggleAbout}
// />
// <Exchange
// getAccountInfo={this.getAccountInfo}
// getMarketInfo={this.getMarketInfo}
// symbolToTokenContract={this.symbolToTokenContract}
// symbolToExchangeAddress={this.symbolToExchangeAddress}
// />
// <RateAndFee
// exchangeRate={this.props.exchange.rate}
// outputTokenValue={this.props.exchange.outputToken.value}
// inputTokenValue={this.props.exchange.inputToken.value}
// exchangeFee={this.props.exchange.fee}
// />
// <Purchase
// symbolToExchangeContract={this.symbolToExchangeContract}
// symbolToTokenAddress={this.symbolToTokenAddress}
// />
// {/* <Visualization /> */}
// <Links
// toggleInvest={this.toggleInvest}
// location={this}
// symbolToTokenContract={this.symbolToTokenContract}
// symbolToExchangeContract={this.symbolToExchangeContract}
// symbolToExchangeAddress={this.symbolToExchangeAddress}
// />
// <SharePurchase
// symbolToTokenContract={this.symbolToTokenContract}
// symbolToExchangeContract={this.symbolToExchangeContract}
// symbolToTokenAddress={this.symbolToTokenAddress}
// symbolToExchangeAddress={this.symbolToExchangeAddress}
// />
// <About toggleAbout={this.toggleAbout} location={this}/>
// </div>
// )
// }
render() { render() {
return ( return (
...@@ -77,9 +28,12 @@ class App extends Component { ...@@ -77,9 +28,12 @@ class App extends Component {
export default connect( export default connect(
state => ({ state => ({
web3Store: state.web3Store, web3: state.web3.web3,
exchangeContracts: state.exchangeContracts, exchangeContracts: state.exchangeContracts,
tokenContracts: state.tokenContracts, tokenContracts: state.tokenContracts,
exchange: state.exchange, exchange: state.exchange,
}), }),
dispatch => ({
initializeWeb3: () => dispatch(initialize()),
})
)(App); )(App);
src/store/initial-state.js
View file @ c51eae9f
export default { export default {
web3Store: { web3: {
web3: {}, web3: {},
connected: false,
aboutToggle: false,
investToggle: false,
currentMaskAddress: undefined,
metamaskLocked: true,
interaction: '',
networkMessage: '',
factoryAddress: '0x1dCcdeD9c35C0dd22dfC644BC17011Eb8e61ad91',
factoryContract: '',
blockTimestamp: '',
exchangeType: 'ETH to Token',
exchangeAddresses: { exchangeAddresses: {
addresses: [ addresses: [
['BAT','0x80f5C1beA2Ea4a9C21E4c6D7831ae2Dbce45674d'], ['BAT','0x80f5C1beA2Ea4a9C21E4c6D7831ae2Dbce45674d'],
......
yarn.lock
View file @ c51eae9f
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment