ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

major render refactor, minor logout error

Browse Source
This commit is contained in:
Uciel 2018-03-20 00:11:30 -04:00
parent 9f2d5ee958
commit 22845601b9
18 changed files with 704 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -7867,6 +7867,11 @@
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.11.tgz",
"integrity": "sha1-xUYBd4rVYPEULODgG8yotW0TQm0="
},
"object-path": {
"version": "0.11.4",
"resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.4.tgz",
"integrity": "sha1-NwrnUvvzfePqcKhhwju6iRVpGUk="
},
"object-visit": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
@ -9998,6 +10003,14 @@
"symbol-observable": "1.2.0"
}
},
"redux-subscriber": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/redux-subscriber/-/redux-subscriber-1.1.0.tgz",
"integrity": "sha1-PKwopnTOwHtungFcp6q7vawVVUM=",
"requires": {
"object-path": "0.11.4"
}
},
"redux-thunk": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.2.0.tgz",

1
package.json
View File

@ -15,6 +15,7 @@
"react-scroll-to-component": "^1.0.2",
"react-select": "^1.2.1",
"redux": "^3.7.2",
"redux-subscriber": "^1.1.0",
"redux-thunk": "^2.2.0",
"web3": "1.0.0-beta.22"
},

332
src/App.js
View File

@ -1,15 +1,22 @@
import React, { Component } from 'react';
import Web3 from 'web3';
import scrollToComponent from 'react-scroll-to-component';
import cookie from 'react-cookies'
import Head from './components/Head'
import NetworkStatus from './components/NetworkStatus'
import ConnectionHelper from './components/ConnectionHelper'
import Transactions from './components/Transactions'
import SelectToken from './components/SelectToken'
// import SelectToken from './components/SelectToken'
import './App.css';
// enter the react refactor
import About from './components/About';
import Links from './components/Links';
import Swap from './components/Swap';
import Order from './components/Order';
import OrderContainer from './containers/OrderContainer';
import RateAndFee from './components/RateAndFee';
import { exchangeABI } from './helpers/exchangeABI.js'
import { tokenABI } from './helpers/tokenABI.js'
import { factoryABI } from './helpers/factoryABI.js'
@ -28,7 +35,7 @@ import {
setNetworkMessage,
setBlockTimestamp,
setExchangeType,
putWeb3InStore
initializeGlobalWeb3
} from './actions/web3-actions';
import {
@ -59,6 +66,9 @@ import {
setExchangeFee
} from './actions/exchange-actions';
// redux-subscribe
import { subscribe } from 'redux-subscriber';
// enter d3
// import Candlesticks from './components/Candlesticks'
@ -78,14 +88,12 @@ class App extends Component {
swapAdded: false, // cookie stuff
firstRun: true, // cookie stuff
transactions: [], // cookie stuff
about: false,
}
}
// lets start with what's in the componentDidMount
componentWillMount(){
this.props.putWeb3InStore(localweb3);
console.log('props', this.props)
// TODO: get rid of redundant localweb3 === 'undefined' checks in componentWill/DidMount
// STATUS: kind of done
componentWillMount() {
console.log('props', this.props);
if(localweb3 === 'undefined') {
this.props.web3ConnectionUnsuccessful();
} else {
@ -95,63 +103,52 @@ class App extends Component {
uniAdded: cookie.load('uniAdded') || false,
transactions: cookie.load('transactions') || [],
})
// we're working with asynchronous redux
this.props.initializeGlobalWeb3(localweb3)
this.getInfoFirstTime();
this.checkNetwork();
}
}
componentDidMount (){
if(localweb3 === 'undefined') {
this.props.web3ConnectionUnsuccessful();
this.props.putWeb3InStore(localweb3);
} else if(this.props.web3Store.connected === true) {
console.log('successfully connected to metamask');
setInterval(this.getMarketInfo, 15000);
setInterval(this.getAccountInfo, 15000);
setInterval(this.getUserAddress, 10000);
} else {
setInterval(this.getUserAddress, 500);
}
// basic format to wrap functions you want firing upon a certain state change
// eslint-disable-next-line no-unused-vars
const web3Subscriber = subscribe('web3Store.connected', state => {
if(state.web3Store.connected === true && !state.web3Store.metamaskLocked) {
console.log('successfully connected to metamask', state.web3Store.currentMaskAddress);
setInterval(this.getMarketInfo, 15000);
setInterval(this.getAccountInfo, 15000);
setInterval(this.getUserAddress, 10000);
} else {
console.log('web3 not connected, getting user address')
setInterval(this.getUserAddress, 500);
}
})
}
componentWillReceiveProps(nextProps) {
// console.log('nextProps', nextProps)
//console.log('nextProps', nextProps)
}
// getInfoFirstTime = async () => {
// await this.getUserAddress();
// if(this.props.web3Store.currentMaskAddress !== '') {
// await this.getContracts();
// this.getMarketInfo();
// this.getAccountInfo();
// }
// }
// TODO: getInfoFirstTime and getUserAddress are WET af
// lets do something about it
getInfoFirstTime = () => {
localweb3.eth.getAccounts((error, result) => {
console.log('getInfoFirstTime result', result)
if(result.length > 0){
// REEEEDUUUUUUXXX
this.props.setCurrentMaskAddress(result[0]);
this.props.metamaskUnlocked();
this.props.web3ConnectionSuccessful();
this.getContracts();
}
else {
} else {
this.props.metamaskLocked();
this.props.web3ConnectionUnsuccessful();
this.props.setInteractionState('locked');
}
})
}
getUserAddress = async () => {
// kind of redundant
// only difference is getInfoFirstTime fires getContracts too
// THIS FIRES EVERY TEN SECONDS, NEEDS A REFACTOR
await localweb3.eth.getAccounts(async (error, result) => {
if(result.length > 0) {
// fun fact, localweb3.eth.getAccounts will return something even without anything inside
getUserAddress = () => {
localweb3.eth.getAccounts((error, result) => {
if (result.length > 0) {
this.props.setCurrentMaskAddress(result[0]);
this.props.metamaskUnlocked();
this.props.web3ConnectionSuccessful();
@ -163,33 +160,8 @@ class App extends Component {
}
})
}
getContracts = async () => {
const uniExchangeAddress = this.props.web3Store.exchangeAddresses.UNI;
const uniExchangeContract = new localweb3.eth.Contract(exchangeABI, uniExchangeAddress);
this.props.uniExchangeContractReady(uniExchangeContract);
const swapExchangeAddress = this.props.web3Store.exchangeAddresses.SWT;
const swapExchangeContract = new localweb3.eth.Contract(exchangeABI, swapExchangeAddress);
this.props.swtExchangeContractReady(swapExchangeContract);
const uniTokenAddress = this.props.web3Store.tokenAddresses.UNI;
const uniTokenContract = new localweb3.eth.Contract(tokenABI, uniTokenAddress);
this.props.uniTokenContractReady(uniTokenContract);
const swapTokenAddress = this.props.web3Store.tokenAddresses.SWT;
const swapTokenContract = new localweb3.eth.Contract(tokenABI, swapTokenAddress);
this.props.swtTokenContractReady(swapTokenContract);
const factoryAddress = this.props.web3Store.factoryAddress;
const factoryContract = new localweb3.eth.Contract(factoryABI, factoryAddress);
this.props.factoryContractReady(factoryContract);
this.getAccountInfo();
this.getMarketInfo();
}
checkNetwork() {
checkNetwork = () => {
localweb3.eth.net.getNetworkType((err, networkId) => {
console.log("Connected to " + networkId)
switch (networkId) {
@ -226,11 +198,42 @@ class App extends Component {
})
}
// will require rewriting the connectionStatus reducer to take in true or falsa
// connectionSetter = (networkMessage, connectionStatus, interactionState) => {
// this.props.setNetworkMessage(networkMessage)
// }
// could possibly use refactoring
getContracts = () => {
const uniExchangeAddress = this.props.web3Store.exchangeAddresses.UNI;
const uniExchangeContract = new localweb3.eth.Contract(exchangeABI, uniExchangeAddress);
this.props.uniExchangeContractReady(uniExchangeContract);
const swapExchangeAddress = this.props.web3Store.exchangeAddresses.SWT;
const swapExchangeContract = new localweb3.eth.Contract(exchangeABI, swapExchangeAddress);
this.props.swtExchangeContractReady(swapExchangeContract);
const uniTokenAddress = this.props.web3Store.tokenAddresses.UNI;
const uniTokenContract = new localweb3.eth.Contract(tokenABI, uniTokenAddress);
this.props.uniTokenContractReady(uniTokenContract);
const swapTokenAddress = this.props.web3Store.tokenAddresses.SWT;
const swapTokenContract = new localweb3.eth.Contract(tokenABI, swapTokenAddress);
this.props.swtTokenContractReady(swapTokenContract);
const factoryAddress = this.props.web3Store.factoryAddress;
const factoryContract = new localweb3.eth.Contract(factoryABI, factoryAddress);
this.props.factoryContractReady(factoryContract);
this.getAccountInfo();
this.getMarketInfo();
}
symbolToTokenAddress = (symbol) => {
if(symbol === 'UNI') {
return this.props.web3Store.exchangeAddresses.UNI;
return this.props.web3Store.tokenAddresses.UNI;
} else if (symbol === 'SWAP') {
return this.props.web3Store.exchangeAddresses.SWT;
return this.props.web3Store.tokenAddresses.SWT;
}
}
@ -273,7 +276,9 @@ class App extends Component {
default:
}
}
// this quadruplet of functions will end up being shared amongst multiple components
// will need to bring this out into a higher order component (we'll put that to the side for now)
// TODO: multiple components currently need this function, we will pass it to them via props
getAccountInfo = () => {
switch (this.props.web3Store.exchangeType) {
case 'ETH to Token':
@ -294,7 +299,7 @@ class App extends Component {
}
console.log("Getting account info");
}
getExchangeState = (type) => {
var exchange;
if (type === 'input') {
@ -398,73 +403,13 @@ class App extends Component {
}
}
// TODO: stuff
tokenToExchangeFactoryLookup = (tokenAddress) => {
this.props.web3Store.factoryContract.methods.tokenToExchangeLookup(tokenAddress).call((error, exchangeAddress) => {
console.log(exchangeAddress)
console.log(exchangeAddress)
});
}
onSelectToken = async (selected, type) => {
this.props.setExchangeInputValue(0);
this.props.setExchangeOutputValue(0);
this.props.setExchangeRate(0);
this.props.setExchangeFee(0);
this.props.setInteractionState('connected');
this.setState({ firstRun: true })
if (type === 'input') {
await this.props.setInputToken(selected);
} else if (type === 'output'){
await this.props.setOutputToken(selected);
}
await this.getMarketType();
this.getAccountInfo();
this.getMarketInfo();
}
getMarketType = () => {
var marketType = '';
if (this.props.exchange.inputToken.value === this.props.exchange.outputToken.value) {
marketType = 'Invalid';
this.props.setInteractionState('error1');
} else if (this.props.exchange.inputToken.value === 'ETH'){
marketType = 'ETH to Token';
} else if (this.props.exchange.outputToken.value === 'ETH'){
marketType = 'Token to ETH';
} else{
marketType = 'Token to Token';
}
this.props.setExchangeType(marketType);
console.log('type: ', marketType);
console.log('input: ', this.props.exchange.inputToken.value);
console.log('output: ', this.props.exchange.outputToken.value);
}
onInputChange = async (event) => {
var inputValue = event.target.value;
await this.props.setExchangeInputValue(inputValue);
this.setExchangeOutput();
}
setExchangeOutput = () => {
var inputValue = this.props.exchange.inputValue;
if (this.props.web3Store.exchangeType === 'Invalid'){
this.props.setExchangeOutputValue(0);
this.props.setInteractionState('error1');
} else if(inputValue && inputValue !== 0 && inputValue !== '0'){
this.props.setInteractionState('input');
this.getExchangeRate(inputValue);
} else {
this.props.setExchangeOutputValue(0);
this.props.setInteractionState('connected');
}
}
getExchangeRate = (input) => {
console.log(this.props.web3Store.globalWeb3, 'this better be defined')
if (this.props.web3Store.exchangeType === 'ETH to Token') {
console.log('Getting Rate: ETH to ' + this.props.exchange.outputToken.value);
this.ethToTokenRate(input);
@ -593,7 +538,7 @@ class App extends Component {
var tokensSold = this.props.exchange.inputValue;
var tokensSoldInt = localweb3.utils.toWei(tokensSold);
var timeout = this.props.web3Store.blockTimestamp + 300; //current block time + 5mins
exchange.methods.tokenToEthSwap(tokensSoldInt, minEthInt, timeout).send({from: this.props.web3Store.currentMaskAddress})
.on('transactionHash', (result) => {
console.log('Transaction Hash created')
@ -618,6 +563,10 @@ class App extends Component {
var tokensSold = this.props.exchange.inputValue;
var tokensSoldInt = localweb3.utils.toWei(tokensSold);
var timeout = this.props.web3Store.blockTimestamp + 300; //current block time + 5mins
console.log('tokenOutAddress', tokenOutAddress);
console.log('minTokensInt', minTokensInt);
console.log('tokensSoldInt', tokensSoldInt);
console.log('timeout', timeout);
exchange.methods.tokenToTokenSwap(tokenOutAddress, tokensSoldInt, minTokensInt, timeout).send({from: this.props.web3Store.currentMaskAddress})
.on('transactionHash', (result) => {
@ -648,16 +597,6 @@ class App extends Component {
}
}
toggleAbout = () => {
this.setState({about: !this.state.about})
setTimeout(this.scrollToAbout, 300);
}
scrollToAbout = () => {
scrollToComponent(this.About, { offset: 0, align: 'top', duration: 500})
}
render() {
return (
<div className={this.props.web3Store.connected && !this.props.web3Store.metamaskLocked && this.props.web3Store.interaction !== 'disconnected' ? "App" : "App dim"}>
@ -673,7 +612,8 @@ class App extends Component {
interaction={this.props.web3Store.interaction}
address={this.props.web3Store.currentMaskAddress}
locked={this.props.web3Store.metamaskLocked}
balance={this.props.exchange.inputBalance}/>
balance={this.props.exchange.inputBalance}
/>
</section>
<ConnectionHelper
network={this.props.web3Store.networkMessage}
@ -697,74 +637,30 @@ class App extends Component {
outputToken={this.props.exchange.outputToken}
about={this.state.about}
/>
<section className="order">
<div className="value border pa2">
<input type="number" value={this.props.exchange.inputValue} placeholder="0" onChange={this.onInputChange} />
<SelectToken token={this.props.exchange.inputToken} onSelectToken={this.onSelectToken} type="input" />
<p className="dropdown">{'<'}</p>
</div>
<div className="arrow border pa2">
<p>→</p>
</div>
<div className="value border pa2">
<input type="number" readOnly={true} value={(this.props.exchange.outputValue/10**18).toFixed(5)} placeholder="0"/>
<SelectToken token={this.props.exchange.outputToken} onSelectToken={this.onSelectToken} type="output"/>
<p className="dropdown">{'<'}</p>
</div>
</section>
<section className="rate border pa2">
<span className="rate-info">
<p>Rate</p>
<p>{(this.props.exchange.rate).toFixed(5)} {this.props.exchange.outputToken.value + "/" + this.props.exchange.inputToken.value}</p>
</span>
<span className="rate-info">
<p>Fee</p>
<p>{(this.props.exchange.fee/10**18).toFixed(5)} {this.props.exchange.inputToken.value}</p>
</span>
</section>
{this.props.web3Store.interaction === 'input' ?
<a className="swap border pa2" role="button" onClick={() => {this.purchaseTokens()}}>
<b>{"I want to swap " + this.props.exchange.inputValue + " " + this.props.exchange.inputToken.value + " for " + this.props.exchange.outputValue/10**18 + " " + this.props.exchange.outputToken.value}</b>
</a>
: <a className="swap grey-bg hidden border pa2"></a>}
<section className="About" ref={(section) => { this.About = section; }}>
<a onClick={() => {this.toggleAbout()}} className="link border pa2 f-a">
<p className="underline">About Uniswap.</p>
<p>↘</p>
</a>
</section>
{this.state.about ?
<section className="expand grey-bg border pa2">
<p>Uniswap is a trustless, decentralized exchange for Ether and ERC20 tokens. It uses a market maker mechanism, where liquidity providers invest a reserve of ETH and a single ERC20 token within an Ethereum smart contract. An exchange rate is set between the tokens and ETH based on the relative availibility of each token. A small transaction fee is payed to the liquidity providers proportional to their investment.</p>
<p>There is a separate contract for each ETH-ERC20 pair. These contracts can "tunnel" between each other for direct ERC20-ERC20 trades. Only one exchange can exist per token, and anyone can contribute liquidity to any exchange. A factory/registry contract provides a public interface for creating new Uniswap exchanges, and looking up the exchange associated a given token address.</p>
<p>A full writeup will be available soon. Until then, here is some more info on Market Makers:</p>
<p>Please reach out if you would like to get involved or support the project.</p>
<p>Email: <a href="mailto:hayden@uniswap.io">hayden@uniswap.io</a></p>
</section>
: <section className="expand grey-bg border pa2 hidden"> </section>
}
<section className="links">
<a href="" className="link border pa2 liq">
<p className="underline">Provide liquidity to collect fees</p>
<p>+</p>
</a>
<a href="" className="link border pa2 ex">
<p className="underline">Launch a new exchange</p>
<p>+</p>
</a>
</section>
{this.state.transactions.length > 0 && this.props.web3Store.interaction !== 'disconnected' ?
<section className="transaction border pa2">
<p className="underline">Past Transactions:</p>
<Transactions transactions={this.state.transactions}/>
</section>
: <section className="hidden border pa2"></section>}
<Order
getAccountInfo={this.getAccountInfo}
getMarketInfo={this.getMarketInfo}
getExchangeRate={this.getExchangeRate}
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}
/>
<Swap
interaction={this.props.web3Store.interaction}
inputValue={this.props.exchange.inputValue }
inputTokenValue={this.props.exchange.inputToken.value}
outputValue={this.props.exchange.outputValue}
outputTokenValue={this.props.exchange.outputToken.value}
purchaseTokens={this.purchaseTokens}
/>
<About />
<Links />
<Transactions transactions={this.state.transactions} interaction={this.props.web3Store.interaction} />
</div>
)
}
@ -808,7 +704,7 @@ const mapDispatchToProps = (dispatch) => {
setExchangeOutputValue,
setExchangeRate,
setExchangeFee,
putWeb3InStore
initializeGlobalWeb3
}, dispatch)
}

9
src/actions/web3-actions.js
View File

@ -9,7 +9,7 @@ import {
SET_NETWORK_MESSAGE,
SET_BLOCK_TIMESTAMP,
SET_EXCHANGE_TYPE,
PUT_WEB3_IN_STORE
INITIALIZE_GLOBAL_WEB3
} from '../constants';
// this actions folder is actually full of action creators
@ -55,8 +55,9 @@ export const setNetworkMessage = (networkMessage) => ({
networkMessage
});
export const setBlockTimestamp = (globalWeb3) => {
export const setBlockTimestamp = () => {
return async (dispatch, getState) => {
const { globalWeb3 } = getState().web3Store
await globalWeb3.eth.getBlock('latest', (error, blockInfo) => {
console.log(blockInfo.timestamp, 'BLOCKTIMESTAMP');
dispatch({
@ -72,7 +73,7 @@ export const setExchangeType = (exchangeType) => ({
exchangeType
});
export const putWeb3InStore = (globalWeb3) => ({
type: PUT_WEB3_IN_STORE,
export const initializeGlobalWeb3 = (globalWeb3) => ({
type: INITIALIZE_GLOBAL_WEB3,
globalWeb3
})

34
src/components/About.js Normal file
View File

@ -0,0 +1,34 @@
import React, { Component } from 'react';
import AboutMessage from './AboutMessage';
import scrollToComponent from 'react-scroll-to-component';
export default class About extends Component {
constructor (props) {
super(props)
this.state = { toggled: false }
}
toggleAbout = () => {
this.setState({toggled: !this.state.toggled})
setTimeout(this.scrollToAbout, 300);
}
scrollToAbout = () => {
scrollToComponent(this.About, { offset: 0, align: 'top', duration: 500})
}
render () {
const { toggled } = this.state;
return(
<div>
<section className="About" ref={(section) => { this.About = section; }}>
<a onClick={() => {this.toggleAbout()}} className="link border pa2 f-a">
<p className="underline">About Uniswap.</p>
<p>↘</p>
</a>
</section>
<AboutMessage toggled={toggled} />
</div>
)
}
}

19
src/components/AboutMessage.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react'
function AboutMessage ({ toggled }) {
if (toggled === true) {
return (
<section className="expand grey-bg border pa2">
<p>Uniswap is a trustless, decentralized exchange for Ether and ERC20 tokens. It uses a market maker mechanism, where liquidity providers invest a reserve of ETH and a single ERC20 token within an Ethereum smart contract. An exchange rate is set between the tokens and ETH based on the relative availibility of each token. A small transaction fee is payed to the liquidity providers proportional to their investment.</p>
<p>There is a separate contract for each ETH-ERC20 pair. These contracts can "tunnel" between each other for direct ERC20-ERC20 trades. Only one exchange can exist per token, and anyone can contribute liquidity to any exchange. A factory/registry contract provides a public interface for creating new Uniswap exchanges, and looking up the exchange associated a given token address.</p>
<p>A full writeup will be available soon. Until then, here is some more info on Market Makers:</p>
<p>Please reach out if you would like to get involved or support the project.</p>
<p>Email: <a href="mailto:hayden@uniswap.io">hayden@uniswap.io</a></p>
</section>
)
} else {
return (<section className="expand grey-bg border pa2 hidden"></section>)
}
}
export default AboutMessage;

18
src/components/Links.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
function Links () {
return (
<section className="links">
<a href="" className="link border pa2 liq">
<p className="underline">Provide liquidity to collect fees</p>
<p>+</p>
</a>
<a href="" className="link border pa2 ex">
<p className="underline">Launch a new exchange</p>
<p>+</p>
</a>
</section>
)
}
export default Links;

205
src/components/Order.js Normal file
View File

@ -0,0 +1,205 @@
import React, { Component }from 'react';
import SelectToken from './SelectToken';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { subscribe } from 'redux-subscriber';
import { setInteractionState, setExchangeType } from '../actions/web3-actions';
import {
setExchangeInputValue,
setExchangeOutputValue,
setExchangeRate,
setExchangeFee,
setInputToken,
setOutputToken,
setInputBalance,
setOutputBalance,
setAllowanceApprovalState
} from '../actions/exchange-actions';
class Order extends Component {
constructor (props){
super(props)
}
// props and functions ready
onInputChange = async (event) => {
var inputValue = event.target.value;
await this.props.setExchangeInputValue(inputValue);
this.setExchangeOutput();
}
// props ready,
onSelectToken = async (selected, type) => {
this.props.setExchangeInputValue(0);
this.props.setExchangeOutputValue(0);
this.props.setExchangeRate(0);
this.props.setExchangeFee(0);
this.props.setInteractionState('connected');
// what the flip does this do
// this.setState({ firstRun: true })
if (type === 'input') {
await this.props.setInputToken(selected);
} else if (type === 'output'){
await this.props.setOutputToken(selected);
}
await this.getMarketType();
// these two functions are actually being passed from the parent component, because they're used in multiple places
// eventually pull these out into HOC
this.props.getAccountInfo();
this.props.getMarketInfo();
}
setExchangeOutput = () => {
var inputValue = this.props.exchange.inputValue;
if (this.props.web3Store.exchangeType === 'Invalid'){
this.props.setExchangeOutputValue(0);
this.props.setInteractionState('error1');
} else if(inputValue && inputValue !== 0 && inputValue !== '0'){
this.props.setInteractionState('input');
// another function to be pulled out into HOC
this.props.getExchangeRate(inputValue);
} else {
this.props.setExchangeOutputValue(0);
this.props.setInteractionState('connected');
}
}
// props ready
// TODO: change this to use the redux-subscribe pattern
getMarketType = () => {
var marketType = '';
if (this.props.exchange.inputToken.value === this.props.exchange.outputToken.value) {
marketType = 'Invalid';
this.props.setInteractionState('error1');
} else if (this.props.exchange.inputToken.value === 'ETH'){
marketType = 'ETH to Token';
} else if (this.props.exchange.outputToken.value === 'ETH'){
marketType = 'Token to ETH';
} else{
marketType = 'Token to Token';
}
this.props.setExchangeType(marketType);
console.log('type: ', marketType);
console.log('input: ', this.props.exchange.inputToken.value);
console.log('output: ', this.props.exchange.outputToken.value);
}
// we are here
// TODO: change this to use the redux-subscribe pattern
getAccountInfo = () => {
switch (this.props.web3Store.exchangeType) {
case 'ETH to Token':
this.getEthBalance('input');
this.getTokenBalance('output');
break;
case 'Token to ETH':
this.getEthBalance('output');
this.getTokenBalance('input');
this.getAllowance();
break;
case 'Token to Token':
this.getTokenBalance('input');
this.getTokenBalance('output');
this.getAllowance();
break;
default:
}
console.log("Getting account info");
}
// props ready
// TODO: TODO: TODO: TURN THIS INTO A REDUX-SUBSCRIBE LISTENER NOW!!!
getEthBalance = (type) => {
// this.props.web3Store.globalWeb3
if (type === 'input') {
this.props.web3Store.globalWeb3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
this.props.setInputBalance(balance);
// console.log('ETH Balance: ' + balance);
});
} else if (type === 'output') {
this.props.web3Store.globalWeb3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
this.props.setOutputBalance(balance);
// console.log('ETH Balance: ' + balance);
});
}
}
// props ready
// TODO: this might also be able to change to the redux-subscribe method
getTokenBalance = (type) => {
var token;
if (type === 'input') {
token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
this.props.setInputBalance(balance);
// console.log(this.props.exchange.inputToken.value + ' Balance: ' + balance);
});
} else if (type === 'output') {
token = this.symbolToTokenContract(this.props.exchange.outputToken.value);
token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
this.props.setOutputBalance(balance);
// console.log(this.props.exchange.outputToken.value + ' Balance: ' + balance);
});
}
}
// TODO: refactor to redux-subscribe
// props ready
getAllowance = () => {
var type = this.props.web3Store.exchangeType;
if(type === 'Token to ETH' || type === 'Token to Token') {
// another pair of functions to be exported to a HOC
var token = this.props.symbolToTokenContract(this.props.exchange.inputToken.value);
var exchangeAddress = this.props.symbolToExchangeAddress(this.props.exchange.inputToken.value);
token.methods.allowance(this.props.web3Store.currentMaskAddress, exchangeAddress).call().then((result, error) => {
console.log(this.props.exchange.inputToken.value + ' allowance: ' + result);
if(result === '0'){
this.props.setAllowanceApprovalState(false)
console.log(this.props.exchange.allowanceApproved)
}
})
}
}
render () {
return (
<section className="order">
<div className="value border pa2">
<input type="number" value={this.props.exchange.inputValue} placeholder="0" onChange={this.onInputChange} />
<SelectToken token={this.props.exchange.inputToken} onSelectToken={this.onSelectToken} type="input" />
<p className="dropdown">{'<'}</p>
</div>
<div className="arrow border pa2">
<p>→</p>
</div>
<div className="value border pa2">
<input type="number" readOnly={true} value={(this.props.exchange.outputValue/10**18).toFixed(5)} placeholder="0"/>
<SelectToken token={this.props.exchange.outputToken} onSelectToken={this.onSelectToken} type="output"/>
<p className="dropdown">{'<'}</p>
</div>
</section>
)
}
}
const mapStateToProps = state => ({
web3Store: state.web3Store,
exchange: state.exchange
})
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
setExchangeInputValue,
setExchangeOutputValue,
setExchangeRate,
setExchangeFee,
setInteractionState,
setInputToken,
setOutputToken,
setExchangeType,
setInputBalance,
setOutputBalance,
setAllowanceApprovalState
}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Order);

18
src/components/RateAndFee.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
function RateAndFee ({ exchangeRate, outputTokenValue, inputTokenValue, exchangeFee }) {
return(
<section className="rate border pa2">
<span className="rate-info">
<p>Rate</p>
<p>{(exchangeRate).toFixed(5)} {outputTokenValue + "/" + inputTokenValue}</p>
</span>
<span className="rate-info">
<p>Fee</p>
<p>{(exchangeFee/10**18).toFixed(5)} {inputTokenValue}</p>
</span>
</section>
)
}
export default RateAndFee;

16
src/components/Swap.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
function Swap ({ interaction, inputValue, inputTokenValue, outputValue, outputTokenValue, purchaseTokens }) {
if (interaction === 'input') {
return (
<a className="swap border pa2" role="button" onClick={() => {purchaseTokens()}}>
<b>{"I want to swap " + inputValue + " " + inputTokenValue + " for " + outputValue/10**18 + " " + outputTokenValue}</b>
</a>
)
} else {
return (<a className="swap grey-bg hidden border pa2"></a>)
}
}
export default Swap;

23
src/components/Title.js Normal file
View File

@ -0,0 +1,23 @@
// import React from 'react';
// import NetworkStatus from '../components/NetworkStatus';
// function Title (){
// return (
// <section className="title">
// <div className="logo border pa2">
// <span role="img" aria-label="Unicorn">🦄</span>
// </div>
// <NetworkStatus
// network={this.props.web3Store.networkMessage}
// connected={this.props.web3Store.connected}
// metamask={this.props.metamask}
// interaction={this.props.web3Store.interaction}
// address={this.props.web3Store.currentMaskAddress}
// locked={this.props.web3Store.metamaskLocked}
// balance={this.props.exchange.inputBalance}
// />
// </section>
// )
// }
// export default Title;

25
src/components/Transactions.js
View File

@ -1,15 +1,22 @@
import React from 'react';
function Transactions(props) {
return (
<div className="connection">
<ol>
{props.transactions.map((t) =>
<li key={t.toString()}><p><a target="_blank" rel="noopener noreferrer" href={'https://rinkeby.etherscan.io/search?q=' + t}>{t}</a></p></li>
)}
</ol>
</div>
)
if (props.transactions.length > 0 && props.interaction !== 'disconnected') {
return (
<section className="transaction border pa2">
<p className="underline">Past Transactions:</p>
<div className="connection">
<ol>
{props.transactions.map((t) =>
<li key={t.toString()}><p><a target="_blank" rel="noopener noreferrer" href={'https://rinkeby.etherscan.io/search?q=' + t}>{t}</a></p></li>
)}
</ol>
</div>
</section>
)
} else {
return (<section className="hidden border pa2"></section>)
}
}
export default Transactions;

2
src/constants.js
View File

@ -44,4 +44,4 @@ export const SET_EXCHANGE_RATE = 'SET_EXCHANGE_RATE';
export const SET_EXCHANGE_FEE = 'SET_EXCHANGE_FEE';
// test setInteractionState
export const PUT_WEB3_IN_STORE = 'PUT_WEB3_IN_STORE';
export const INITIALIZE_GLOBAL_WEB3 = 'INITIALIZE_GLOBAL_WEB3';

213
src/containers/OrderContainer.js Normal file
View File

@ -0,0 +1,213 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Order from '../components/Order';
import { setInteractionState, setExchangeType } from '../actions/web3-actions';
import {
setExchangeInputValue,
setExchangeOutputValue,
setExchangeRate,
setExchangeFee,
setInputToken,
setOutputToken,
setInputBalance,
setOutputBalance,
setAllowanceApprovalState
} from '../actions/exchange-actions';
function withOrderFunctionality (WrappedComponent) {
return class extends Component {
constructor (props){
super(props);
}
// props and functions ready
onInputChange = async (event) => {
var inputValue = event.target.value;
await this.props.setExchangeInputValue(inputValue);
this.setExchangeOutput();
}
// props ready,
onSelectToken = async (selected, type) => {
this.props.setExchangeInputValue(0);
this.props.setExchangeOutputValue(0);
this.props.setExchangeRate(0);
this.props.setExchangeFee(0);
this.props.setInteractionState('connected');
// what the flip does this do
//this.setState({ firstRun: true })
if (type === 'input') {
await this.props.setInputToken(selected);
} else if (type === 'output'){
await this.props.setOutputToken(selected);
}
await this.getMarketType();
this.getAccountInfo();
this.getMarketInfo();
}
setExchangeOutput = () => {
var inputValue = this.props.exchange.inputValue;
if (this.props.web3Store.exchangeType === 'Invalid'){
this.props.setExchangeOutputValue(0);
this.props.setInteractionState('error1');
} else if(inputValue && inputValue !== 0 && inputValue !== '0'){
this.props.setInteractionState('input');
this.getExchangeRate(inputValue);
} else {
this.props.setExchangeOutputValue(0);
this.props.setInteractionState('connected');
}
}
// props ready
// TODO: change this to use the redux-subscribe pattern
getMarketType = () => {
var marketType = '';
if (this.props.exchange.inputToken.value === this.props.exchange.outputToken.value) {
marketType = 'Invalid';
this.props.setInteractionState('error1');
} else if (this.props.exchange.inputToken.value === 'ETH'){
marketType = 'ETH to Token';
} else if (this.props.exchange.outputToken.value === 'ETH'){
marketType = 'Token to ETH';
} else{
marketType = 'Token to Token';
}
this.props.setExchangeType(marketType);
console.log('type: ', marketType);
console.log('input: ', this.props.exchange.inputToken.value);
console.log('output: ', this.props.exchange.outputToken.value);
}
// we are here
// TODO: change this to use the redux-subscribe pattern
getAccountInfo = () => {
switch (this.props.web3Store.exchangeType) {
case 'ETH to Token':
this.getEthBalance('input');
this.getTokenBalance('output');
break;
case 'Token to ETH':
this.getEthBalance('output');
this.getTokenBalance('input');
this.getAllowance();
break;
case 'Token to Token':
this.getTokenBalance('input');
this.getTokenBalance('output');
this.getAllowance();
break;
default:
}
console.log("Getting account info");
}
// props ready
// TODO: TODO: TODO: TURN THIS INTO A REDUX-SUBSCRIBE LISTENER NOW!!!
getEthBalance = (type) => {
// this.props.web3Store.globalWeb3
if (type === 'input') {
this.props.web3Store.globalWeb3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
this.props.setInputBalance(balance);
// console.log('ETH Balance: ' + balance);
});
} else if (type === 'output') {
this.props.web3Store.globalWeb3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, balance) => {
this.props.setOutputBalance(balance);
// console.log('ETH Balance: ' + balance);
});
}
}
// props ready
// TODO: this might also be able to change to the redux-subscribe method
getTokenBalance = (type) => {
var token;
if (type === 'input') {
token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
this.props.setInputBalance(balance);
// console.log(this.props.exchange.inputToken.value + ' Balance: ' + balance);
});
} else if (type === 'output') {
token = this.symbolToTokenContract(this.props.exchange.outputToken.value);
token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, balance) => {
this.props.setOutputBalance(balance);
// console.log(this.props.exchange.outputToken.value + ' Balance: ' + balance);
});
}
}
// TODO: refactor to redux-subscribe
// props ready
getAllowance = () => {
var type = this.props.web3Store.exchangeType;
if(type === 'Token to ETH' || type === 'Token to Token') {
var token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
var exchangeAddress = this.symbolToExchangeAddress(this.props.exchange.inputToken.value);
token.methods.allowance(this.props.web3Store.currentMaskAddress, exchangeAddress).call().then((result, error) => {
console.log(this.props.exchange.inputToken.value + ' allowance: ' + result);
if(result === '0'){
this.props.setAllowanceApprovalState(false)
console.log(this.props.exchange.allowanceApproved)
}
})
}
}
// ready, we'll think of improvements later
symbolToTokenContract = (symbol) => {
if(symbol === 'UNI') {
return this.props.tokenContracts.UNI;
} else if(symbol === 'SWAP') {
return this.props.tokenContracts.SWT;
}
}
symbolToExchangeAddress = (symbol) => {
if(symbol === 'UNI') {
return this.props.web3Store.exchangeAddresses.UNI;
} else if(symbol === 'SWAP') {
return this.props.web3Store.exchangeAddresses.SWT;
}
}
render() {
return (
<WrappedComponent
onInputChange={this.onInputChange}
onSelectToken={this.onSelectToken}
setExchangeOutput={this.setExchangeOutput}
getMarketType={this.getMarketType}
getAccountInfo={this.getAccountInfo}
getEthBalance={this.getEthBalance}
getTokenBalance={this.getTokenBalance}
getAllowance={this.getAllowance}
symbolToTokenContract={this.symbolToTokenContract}
symbolToExchangeAddress={this.symbolToExchangeAddress}
/>
)
}
}
}
const mapStateToProps = state => ({
web3Store: state.web3Store,
exchange: state.exchange
})
const mapDispatchToProps = (dispatch) => {
return {
setExchangeInputValue,
setExchangeOutputValue,
setExchangeRate,
setExchangeFee,
setInteractionState,
setInputToken,
setOutputToken,
setExchangeType,
setInputBalance,
setOutputBalance,
setAllowanceApprovalState
}
}
export default connect(mapStateToProps, mapDispatchToProps)(withOrderFunctionality);

0
src/containers/index.js
View File

4
src/reducers/web3-reducer.js
View File

@ -10,7 +10,7 @@ import {
SET_NETWORK_MESSAGE,
SET_BLOCK_TIMESTAMP,
SET_EXCHANGE_TYPE,
PUT_WEB3_IN_STORE
INITIALIZE_GLOBAL_WEB3
} from '../constants';
export default (state = {}, action) => {
@ -36,7 +36,7 @@ export default (state = {}, action) => {
return Object.assign({}, state, { blockTimestamp: timestamp });
case SET_EXCHANGE_TYPE:
return Object.assign({}, state, { exchangeType: exchangeType });
case PUT_WEB3_IN_STORE:
case INITIALIZE_GLOBAL_WEB3:
return Object.assign({}, state, { globalWeb3: globalWeb3 });
default: return state;
}

1
src/store/initial-state.js
View File

@ -13,6 +13,7 @@ export default {
// we're going to need to include a seperate nest for exchange actions
web3Store: {
connected: false,
globalWeb3: {},
currentMaskAddress: '',
metamaskLocked: true,
interaction: '',

6
src/store/store.dev.js
View File

@ -1,6 +1,7 @@
import { applyMiddleware, compose, createStore } from 'redux';
import reducer from '../reducers';
import thunk from 'redux-thunk'
import initSubscriber from 'redux-subscriber';
import initialState from './initial-state';
const middleware = [thunk];
@ -11,6 +12,9 @@ const store = createStore(
reducer,
initialState,
composeEnhancers(applyMiddleware(...middleware), ...enhancers)
)
);
// redux-subscribe solution attempt
// eslint-disable-next-line no-unused-vars
const subscribe = initSubscriber(store);
export default store;