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 Hide whitespace changes
Inline Side-by-side
Showing with 406 additions and 366 deletions
package.json
View file @ c51eae9f
......@@ -25,7 +25,7 @@
"redux": "^3.7.2",
"redux-subscriber": "^1.1.0",
"redux-thunk": "^2.2.0",
"web3": "1.0.0-beta.22"
"web3": "^1.0.0-beta.36"
},
"scripts": {
"start": "react-scripts start",
......
src/components/CurrencyInputPanel/index.js
View file @ c51eae9f
......@@ -10,7 +10,6 @@ import SearchIcon from '../../assets/images/magnifying-glass.svg';
import './currency-panel.scss';
const TOKEN_ICON_API = 'https://raw.githubusercontent.com/TrustWallet/tokens/master/images';
const FUSE_OPTIONS = {
includeMatches: false,
threshold: 0.0,
......@@ -41,7 +40,7 @@ class CurrencyInputPanel extends Component {
};
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 } ];
for (let i = 0; i < tokens.length; i++) {
......@@ -170,5 +169,7 @@ class CurrencyInputPanel extends Component {
}
export default connect(
state => ({ web3Store: state.web3Store })
state => ({
web3: state.web3,
}),
)(CurrencyInputPanel);
src/components/Web3Status/index.js
View file @ c51eae9f
......@@ -56,4 +56,9 @@ Web3Status.defaultProps = {
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 @@
overflow: hidden;
text-align: right;
margin-left: 1rem;
font-size: .85rem;
}
}
\ No newline at end of file
src/ducks/index.js
View file @ c51eae9f
import { combineReducers } from 'redux';
// import global from './global-reducer';
import web3Store from './web3';
import web3 from './web3';
import exchangeContracts from './exchange-contract';
import tokenContracts from './token-contract';
import exchange from './exchange';
export default combineReducers({
web3Store,
web3,
exchangeContracts,
tokenContracts,
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 {
SET_WEB3_CONNECTION_STATUS,
SET_CURRENT_MASK_ADDRESS,
METAMASK_LOCKED,
METAMASK_UNLOCKED,
SET_INTERACTION_STATE,
FACTORY_CONTRACT_READY,
SET_NETWORK_MESSAGE,
SET_BLOCK_TIMESTAMP,
SET_EXCHANGE_TYPE,
INITIALIZE_GLOBAL_WEB3,
TOGGLE_ABOUT,
TOGGLE_INVEST
} from '../constants';
// this actions folder is actually full of action creators
// your asynchronous calls are going to be in redux-thunk style action creators
export const setWeb3ConnectionStatus = (connected) => ({
type: SET_WEB3_CONNECTION_STATUS,
connected
})
export const setCurrentMaskAddress = (currentMaskAddress) => ({
type: SET_CURRENT_MASK_ADDRESS,
currentMaskAddress
});
export const metamaskLocked = () => ({
type: METAMASK_LOCKED,
metamaskLocked: true
});
export const metamaskUnlocked = () => ({
type: METAMASK_UNLOCKED,
metamaskLocked: false
});
export const setInteractionState = (interaction) => ({
type: SET_INTERACTION_STATE,
interaction
})
export const factoryContractReady = (factoryContract) => ({
type: FACTORY_CONTRACT_READY,
factoryContract
});
export const setNetworkMessage = (networkMessage) => {
return async (dispatch) => {
let networkName;
switch (networkMessage) {
case "main":
networkName = 'Ethereum Mainet'
break;
case "morden":
networkName = 'Morden testnet'
break;
case "ropsten":
networkName = 'Ropsten testnet'
break;
case "rinkeby":
networkName = 'Rinkeby testnet'
break;
case "kovan":
networkName = 'Kovan testnet'
break;
default:
networkName = 'an unknown network'
}
dispatch ({
type: SET_NETWORK_MESSAGE,
networkMessage: networkName
})
}
};
export const setBlockTimestamp = () => {
return async (dispatch, getState) => {
const { web3 } = getState().web3Store;
await web3.eth.getBlock('latest', (error, blockInfo) => {
dispatch({
type: SET_BLOCK_TIMESTAMP,
timestamp: blockInfo.timestamp
})
import Web3 from "web3";
const INITIALIZE = 'app/web3/initialize';
const UPDATE_CURRENT_ADDRESS = 'app/web3/updateCurrentAddress';
// export const setWeb3ConnectionStatus = (connected) => ({
// type: SET_WEB3_CONNECTION_STATUS,
// connected
// })
//
// export const setCurrentMaskAddress = (currentMaskAddress) => ({
// type: SET_CURRENT_MASK_ADDRESS,
// currentMaskAddress
// });
//
// export const metamaskLocked = () => ({
// type: METAMASK_LOCKED,
// metamaskLocked: true
// });
//
// export const metamaskUnlocked = () => ({
// type: METAMASK_UNLOCKED,
// metamaskLocked: false
// });
//
// export const setInteractionState = (interaction) => ({
// type: SET_INTERACTION_STATE,
// interaction
// })
//
// export const factoryContractReady = (factoryContract) => ({
// type: FACTORY_CONTRACT_READY,
// factoryContract
// });
//
// export const setNetworkMessage = (networkMessage) => {
// return async (dispatch) => {
// let networkName;
// switch (networkMessage) {
// case "main":
// networkName = 'Ethereum Mainet'
// break;
// case "morden":
// networkName = 'Morden testnet'
// break;
// case "ropsten":
// networkName = 'Ropsten testnet'
// break;
// case "rinkeby":
// networkName = 'Rinkeby testnet'
// break;
// case "kovan":
// networkName = 'Kovan testnet'
// break;
// default:
// networkName = 'an unknown network'
// }
// dispatch ({
// type: SET_NETWORK_MESSAGE,
// networkMessage: networkName
// })
// }
// };
//
// export const setBlockTimestamp = () => {
// return async (dispatch, getState) => {
// const { web3 } = getState().web3Store;
// await web3.eth.getBlock('latest', (error, blockInfo) => {
// dispatch({
// type: SET_BLOCK_TIMESTAMP,
// timestamp: blockInfo.timestamp
// })
// });
// }
// }
//
// export const setExchangeType = (exchangeType) => ({
// type: SET_EXCHANGE_TYPE,
// exchangeType
// });
//
// export const toggleAbout = (toggle) => ({
// 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({
type: INITIALIZE,
payload: web3,
});
dispatch(updateCurrentAddress());
}
}
};
export const setExchangeType = (exchangeType) => ({
type: SET_EXCHANGE_TYPE,
exchangeType
});
export const updateCurrentAddress = () => (dispatch, getState) => {
const { web3: { web3 } } = getState();
export const toggleAbout = (toggle) => ({
type: TOGGLE_ABOUT,
aboutToggle: toggle
});
if (!web3) {
return;
}
export const toggleInvest = (toggle) => ({
type: TOGGLE_INVEST,
investToggle: toggle
});
web3.eth.getAccounts((err, accounts) => {
if (err) {
return;
}
export const initializeGlobalWeb3 = (web3) => ({
type: INITIALIZE_GLOBAL_WEB3,
web3
});
dispatch({
type: UPDATE_CURRENT_ADDRESS,
payload: accounts[0],
});
})
};
export default (state = {}, action) => {
const { connected, currentMaskAddress, metamaskLocked, interaction, factoryContract, networkMessage, timestamp, exchangeType, web3, aboutToggle, investToggle } = action
switch (action.type) {
case INITIALIZE_GLOBAL_WEB3:
return Object.assign({}, state, { web3: web3 });
case SET_WEB3_CONNECTION_STATUS:
return Object.assign({}, state, { connected: connected });
case SET_CURRENT_MASK_ADDRESS:
return Object.assign({}, state, { currentMaskAddress: currentMaskAddress });
case METAMASK_LOCKED:
return Object.assign({}, state, { metamaskLocked: metamaskLocked });
case METAMASK_UNLOCKED:
return Object.assign({}, state, { metamaskLocked: metamaskLocked });
case SET_INTERACTION_STATE:
return Object.assign({}, state, { interaction: interaction });
case FACTORY_CONTRACT_READY:
return Object.assign({}, state, { factoryContract: factoryContract});
case SET_NETWORK_MESSAGE:
return Object.assign({}, state, { networkMessage: networkMessage });
case SET_BLOCK_TIMESTAMP:
return Object.assign({}, state, { blockTimestamp: timestamp });
case SET_EXCHANGE_TYPE:
return Object.assign({}, state, { exchangeType: exchangeType });
case TOGGLE_ABOUT:
return Object.assign({}, state, { aboutToggle: aboutToggle })
case TOGGLE_INVEST:
return Object.assign({}, state, { investToggle: investToggle })
export default (state = {}, { type, payload }) => {
switch (type) {
case INITIALIZE:
return { ...state, web3: payload };
case UPDATE_CURRENT_ADDRESS:
return { ...state, currentAddress: payload };
// case SET_WEB3_CONNECTION_STATUS:
// return Object.assign({}, state, { connected: connected });
// case SET_CURRENT_MASK_ADDRESS:
// return Object.assign({}, state, { currentMaskAddress: currentMaskAddress });
// case METAMASK_LOCKED:
// return Object.assign({}, state, { metamaskLocked: metamaskLocked });
// case METAMASK_UNLOCKED:
// return Object.assign({}, state, { metamaskLocked: metamaskLocked });
// case SET_INTERACTION_STATE:
// return Object.assign({}, state, { interaction: interaction });
// case FACTORY_CONTRACT_READY:
// return Object.assign({}, state, { factoryContract: factoryContract});
// case SET_NETWORK_MESSAGE:
// return Object.assign({}, state, { networkMessage: networkMessage });
// case SET_BLOCK_TIMESTAMP:
// return Object.assign({}, state, { blockTimestamp: timestamp });
// case SET_EXCHANGE_TYPE:
// return Object.assign({}, state, { exchangeType: exchangeType });
// case TOGGLE_ABOUT:
// return Object.assign({}, state, { aboutToggle: aboutToggle })
// case TOGGLE_INVEST:
// return Object.assign({}, state, { investToggle: investToggle })
default: return state;
}
}
src/index.js
View file @ c51eae9f
import React from 'react';
import ReactDOM from 'react-dom';
// import { BrowserRouter } from 'react-router-dom'
import Web3 from 'web3';
import App from './pages/App';
import { Provider } from 'react-redux';
......@@ -9,12 +9,15 @@ import store from './store';
import './index.scss';
import registerServiceWorker from './registerServiceWorker';
// provider is going to need a store object passed into it
ReactDOM.render(
<Provider store={store}>
<App metamask={window.web3} />
</Provider>
, document.getElementById('root')
);
registerServiceWorker();
window.addEventListener('load', function() {
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root')
);
registerServiceWorker();
});
src/pages/App.js
View file @ c51eae9f
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
// import UniHead from '../components/UniHead'
// 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 { initialize } from '../ducks/web3'
import Swap from './Swap';
import Send from './Send';
import Pool from './Pool';
......@@ -17,50 +9,9 @@ import Pool from './Pool';
import './App.scss';
class App extends Component {
// renderMain() {
// return (
// <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>
// )
// }
componentWillMount() {
this.props.initializeWeb3();
}
render() {
return (
......@@ -77,9 +28,12 @@ class App extends Component {
export default connect(
state => ({
web3Store: state.web3Store,
web3: state.web3.web3,
exchangeContracts: state.exchangeContracts,
tokenContracts: state.tokenContracts,
exchange: state.exchange,
}),
dispatch => ({
initializeWeb3: () => dispatch(initialize()),
})
)(App);
src/store/initial-state.js
View file @ c51eae9f
export default {
web3Store: {
web3: {
web3: {},
connected: false,
aboutToggle: false,
investToggle: false,
currentMaskAddress: undefined,
metamaskLocked: true,
interaction: '',
networkMessage: '',
factoryAddress: '0x1dCcdeD9c35C0dd22dfC644BC17011Eb8e61ad91',
factoryContract: '',
blockTimestamp: '',
exchangeType: 'ETH to Token',
exchangeAddresses: {
addresses: [
['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