Skip to content

I
interface
Commit 3000f70e authored by Uciel's avatar Uciel
Browse files
Options

redux refactor complete

parent 67f32348
Hide whitespace changes
Inline Side-by-side
Showing with 369 additions and 155 deletions
src/App.js
View file @ 3000f70e
...@@ -40,6 +40,24 @@ import { ...@@ -40,6 +40,24 @@ import {
swtTokenContractReady swtTokenContractReady
} from './actions/tokenContract-actions'; } from './actions/tokenContract-actions';
import {
setInputBalance,
setOutputBalance,
setInputToken,
setOutputToken,
setInvariant1,
setInvariant2,
setMarketEth1,
setMarketEth2,
setMarketTokens1,
setMarketTokens2,
setAllowanceApprovalState,
setExchangeInputValue,
setExchangeOutputValue,
setExchangeRate,
setExchangeFee
} from './actions/exchange-actions';
// enter d3 // enter d3
import Candlesticks from './components/Candlesticks' import Candlesticks from './components/Candlesticks'
...@@ -55,39 +73,11 @@ class App extends Component { ...@@ -55,39 +73,11 @@ class App extends Component {
} }
this.state = { this.state = {
blockTimestamp: 0, uniAdded: false, // cookie stuff,
inputBalance: 0, swapAdded: false, // cookie stuff
outputBalance: 0, firstRun: true, // cookie stuff
tokenAllowance: null, transactions: [], // cookie stuff
invariant1: 0,
marketEth1: 0,
marketTokens1: 0,
invariant2: 0,
marketEth2: 0,
marketTokens2: 0,
rate: 0,
fee: 0,
cost: 0,
networkMessage: '',
approved: true,
uniAdded: false, // cookie stuff, we'll keep this here for now
swapAdded: false, // cookie stuff, we'll keep this here for now
firstRun: true, // cookie stuff, we'll keep this here for now
about: false, about: false,
interaction: 'disconnected',
exchangeType: 'ETH to Token',
input: 0,
output: 0,
transactionStatus: 'waiting',
transactions: [], // cookie stuff, we'll keep this here for now
inputToken: { value: 'ETH',
label: 'ETH',
clearableValue: false
},
outputToken: { value: 'UNI',
label: 'UNI',
clearableValue: false
}
} }
} }
...@@ -157,28 +147,21 @@ class App extends Component { ...@@ -157,28 +147,21 @@ class App extends Component {
this.props.setCurrentMaskAddress(result[0]); this.props.setCurrentMaskAddress(result[0]);
this.props.metamaskUnlocked(); this.props.metamaskUnlocked();
this.props.web3ConnectionSuccessful(); this.props.web3ConnectionSuccessful();
// this.setState({ currentMaskAddress: result[0], locked: false, connected: true });
} }
else { else {
this.props.metamaskLocked(); this.props.metamaskLocked();
this.props.web3ConnectionUnsuccessful(); this.props.web3ConnectionUnsuccessful();
this.props.setInteractionState('locked'); this.props.setInteractionState('locked');
// this.setState({ locked: true, connected: false, interaction: 'locked' });
} }
}) })
} }
getContracts() { getContracts() {
// exchange and token addressess are now being held in default state
// we can instantiate the contracts on getContracts
// contracts are being created aysnchronously
// once they're ready, add them to the state
const uniExchangeAddress = this.props.web3.exchangeAddresses.UNI; const uniExchangeAddress = this.props.web3.exchangeAddresses.UNI;
const uniExchangeContract = new localweb3.eth.Contract(exchangeABI, uniExchangeAddress); const uniExchangeContract = new localweb3.eth.Contract(exchangeABI, uniExchangeAddress);
this.props.uniExchangeContractReady(uniExchangeContract); this.props.uniExchangeContractReady(uniExchangeContract);
const swapExchangeAddress = this.props.web3.exchangeAddresses.SWT; const swapExchangeAddress = this.props.web3.exchangeAddresses.SWT;
const swapExchangeContract = new localweb3.eth.Contract(exchangeABI, swapExchangeAddress); const swapExchangeContract = new localweb3.eth.Contract(exchangeABI, swapExchangeAddress);
this.props.swtExchangeContractReady(swapExchangeContract); this.props.swtExchangeContractReady(swapExchangeContract);
...@@ -203,37 +186,31 @@ class App extends Component { ...@@ -203,37 +186,31 @@ class App extends Component {
console.log("Connected to " + networkId) console.log("Connected to " + networkId)
switch (networkId) { switch (networkId) {
case "main": case "main":
// this.setState({networkMessage: 'Ethereum Mainet', connected: false, interaction: 'disconnected'});
this.props.setNetworkMessage('Ethereum Mainet'); this.props.setNetworkMessage('Ethereum Mainet');
this.props.web3ConnectionUnsuccessful(); this.props.web3ConnectionUnsuccessful();
this.props.setInteractionState('disconnected'); this.props.setInteractionState('disconnected');
break; break;
case "morden": case "morden":
// this.setState({networkMessage: 'Morden testnet', connected: false, interaction: 'disconnected'});
this.props.setNetworkMessage('Morden testnet'); this.props.setNetworkMessage('Morden testnet');
this.props.web3ConnectionUnsuccessful(); this.props.web3ConnectionUnsuccessful();
this.props.setInteractionState('disconnected'); this.props.setInteractionState('disconnected');
break; break;
case "ropsten": case "ropsten":
// this.setState({networkMessage: 'Ropsten testnet', connected: false, interaction: 'disconnected'});
this.props.setNetworkMessage('Ropsten testnet'); this.props.setNetworkMessage('Ropsten testnet');
this.props.web3ConnectionUnsuccessful(); this.props.web3ConnectionUnsuccessful();
this.props.setInteractionState('disconnected'); this.props.setInteractionState('disconnected');
break; break;
case "rinkeby": case "rinkeby":
// this.setState({networkMessage: 'Rinkeby testnet', connected: true, interaction: 'connected'});
this.props.setNetworkMessage('Rinkeby testnet'); this.props.setNetworkMessage('Rinkeby testnet');
this.props.web3ConnectionSuccessful(); this.props.web3ConnectionSuccessful();
this.props.setInteractionState('connected'); this.props.setInteractionState('connected');
break; break;
case "kovan": case "kovan":
// this.setState({networkMessage: 'Kovan testnet', connected: false, interaction: 'disconnected'});
this.props.setNetworkMessage('Kovan testnet'); this.props.setNetworkMessage('Kovan testnet');
this.props.web3ConnectionUnsuccessful(); this.props.web3ConnectionUnsuccessful();
this.props.setInteractionState('disconnected'); this.props.setInteractionState('disconnected');
break; break;
default: default:
// this.setState({networkMessage: 'an unknown network', connected: false, interaction: 'disconnected'});
this.props.setNetworkMessage('an unknown network'); this.props.setNetworkMessage('an unknown network');
this.props.web3ConnectionUnsuccessful(); this.props.web3ConnectionUnsuccessful();
this.props.setInteractionState('disconnected'); this.props.setInteractionState('disconnected');
...@@ -283,7 +260,7 @@ class App extends Component { ...@@ -283,7 +260,7 @@ class App extends Component {
this.getMarketInfo(); this.getMarketInfo();
this.getAccountInfo(); this.getAccountInfo();
} }
getMarketInfo = () => { getMarketInfo = () => {
switch (this.props.web3.exchangeType) { switch (this.props.web3.exchangeType) {
case 'ETH to Token': case 'ETH to Token':
...@@ -323,51 +300,50 @@ class App extends Component { ...@@ -323,51 +300,50 @@ class App extends Component {
getExchangeState = (type) => { getExchangeState = (type) => {
var exchange; var exchange;
if (type === 'input') { if (type === 'input') {
exchange = this.symbolToExchangeContract(this.state.inputToken.value); exchange = this.symbolToExchangeContract(this.props.exchange.inputToken.value);
exchange.methods.invariant().call().then((result, error) => { exchange.methods.invariant().call().then((result, error) => {
this.setState({invariant1: result}); this.props.setInvariant1(result);
// console.log('Input Invariant: ' + result); // console.log('Input Invariant: ' + result);
}); });
exchange.methods.ethInMarket().call().then((result, error) => { exchange.methods.ethInMarket().call().then((result, error) => {
this.setState({marketEth1: result}); this.props.setMarketEth1(result);
// console.log('Input Market ETH: ' + result); // console.log('Input Market ETH: ' + result);
}); });
exchange.methods.tokensInMarket().call().then((result, error) => { exchange.methods.tokensInMarket().call().then((result, error) => {
this.setState({marketTokens1: result}); this.props.setMarketTokens1(result);
// console.log('Input Market Tokens: ' + result); // console.log('Input Market Tokens: ' + result);
}); });
} else if (type === 'output') { } else if (type === 'output') {
exchange = this.symbolToExchangeContract(this.state.outputToken.value); exchange = this.symbolToExchangeContract(this.props.exchange.outputToken.value);
exchange.methods.invariant().call().then((result, error) => { exchange.methods.invariant().call().then((result, error) => {
this.setState({invariant2: result}); this.props.setInvariant2(result);
// console.log('Output Invariant: ' + result); // console.log('Output Invariant: ' + result);
}); });
exchange.methods.ethInMarket().call().then((result, error) => { exchange.methods.ethInMarket().call().then((result, error) => {
this.setState({marketEth2: result}); this.props.setMarketEth2(result);
// console.log('Output Market ETH: ' + result); // console.log('Output Market ETH: ' + result);
}); });
exchange.methods.tokensInMarket().call().then((result, error) => { exchange.methods.tokensInMarket().call().then((result, error) => {
this.setState({marketTokens2: result}) this.props.setMarketTokens2(result);
// console.log('Output Market Tokens: ' + result); // console.log('Output Market Tokens: ' + result);
}); });
} }
} }
getEthBalance = (type) => { getEthBalance = (type) => {
if (type === 'input') { if (type === 'input') {
localweb3.eth.getBalance(this.props.web3.currentMaskAddress, (error, balance) => { localweb3.eth.getBalance(this.props.web3.currentMaskAddress, (error, balance) => {
this.setState({inputBalance: balance}); this.props.setInputBalance(balance);
// console.log('ETH Balance: ' + balance); // console.log('ETH Balance: ' + balance);
}); });
} else if (type === 'output') { } else if (type === 'output') {
localweb3.eth.getBalance(this.props.web3.currentMaskAddress, (error, balance) => { localweb3.eth.getBalance(this.props.web3.currentMaskAddress, (error, balance) => {
this.setState({outputBalance: balance}); this.props.setOutputBalance(balance);
// console.log('ETH Balance: ' + balance); // console.log('ETH Balance: ' + balance);
}); });
} }
...@@ -376,16 +352,16 @@ class App extends Component { ...@@ -376,16 +352,16 @@ class App extends Component {
getTokenBalance = (type) => { getTokenBalance = (type) => {
var token; var token;
if (type === 'input') { if (type === 'input') {
token = this.symbolToTokenContract(this.state.inputToken.value); token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
token.methods.balanceOf(this.props.web3.currentMaskAddress).call((error, balance) => { token.methods.balanceOf(this.props.web3.currentMaskAddress).call((error, balance) => {
this.setState({inputBalance: balance}); this.props.setInputBalance(balance);
// console.log(this.state.inputToken.value + ' Balance: ' + balance); // console.log(this.props.exchange.inputToken.value + ' Balance: ' + balance);
}); });
} else if (type === 'output') { } else if (type === 'output') {
token = this.symbolToTokenContract(this.state.outputToken.value); token = this.symbolToTokenContract(this.props.exchange.outputToken.value);
token.methods.balanceOf(this.props.web3.currentMaskAddress).call((error, balance) => { token.methods.balanceOf(this.props.web3.currentMaskAddress).call((error, balance) => {
this.setState({outputBalance: balance}); this.props.setOutputBalance(balance);
// console.log(this.state.outputToken.value + ' Balance: ' + balance); // console.log(this.props.exchange.outputToken.value + ' Balance: ' + balance);
}); });
} }
} }
...@@ -393,14 +369,14 @@ class App extends Component { ...@@ -393,14 +369,14 @@ class App extends Component {
getAllowance = () => { getAllowance = () => {
var type = this.props.web3.exchangeType; var type = this.props.web3.exchangeType;
if(type === 'Token to ETH' || type === 'Token to Token') { if(type === 'Token to ETH' || type === 'Token to Token') {
var token = this.symbolToTokenContract(this.state.inputToken.value); var token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
var exchangeAddress = this.symbolToExchangeAddress(this.state.inputToken.value); var exchangeAddress = this.symbolToExchangeAddress(this.props.exchange.inputToken.value);
token.methods.allowance(this.props.web3.currentMaskAddress, exchangeAddress).call().then((result, error) => { token.methods.allowance(this.props.web3.currentMaskAddress, exchangeAddress).call().then((result, error) => {
console.log(this.state.inputToken.value + ' allowance: ' + result); console.log(this.props.exchange.inputToken.value + ' allowance: ' + result);
if(result === '0'){ if(result === '0'){
this.setState({approved: false}) this.props.setAllowanceApprovalState(false)
console.log(this.state.approved) console.log(this.props.exchange.allowanceApproved)
} }
}) })
} }
...@@ -409,15 +385,15 @@ class App extends Component { ...@@ -409,15 +385,15 @@ class App extends Component {
approveAllowance = () => { approveAllowance = () => {
var type = this.props.web3.exchangeType; var type = this.props.web3.exchangeType;
if(type === 'Token to ETH' || type === 'Token to Token') { if(type === 'Token to ETH' || type === 'Token to Token') {
var token = this.symbolToTokenContract(this.state.inputToken.value); var token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
var exchangeAddress = this.symbolToExchangeAddress(this.state.inputToken.value); var exchangeAddress = this.symbolToExchangeAddress(this.props.exchange.inputToken.value);
var amount = localweb3.utils.toWei('100000'); var amount = localweb3.utils.toWei('100000');
token.methods.approve(exchangeAddress, amount).send({from: this.props.web3.currentMaskAddress}) token.methods.approve(exchangeAddress, amount).send({from: this.props.web3.currentMaskAddress})
.on('transactionHash', console.log('Transaction Hash created')) .on('transactionHash', console.log('Transaction Hash created'))
.on('receipt', (receipt) => { .on('receipt', (receipt) => {
console.log(receipt) console.log(receipt)
this.setState({approved: true}) this.props.setAllowanceApprovalState(true);
}) //Transaction Submitted to blockchain }) //Transaction Submitted to blockchain
.on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)}) //Transaction Mined .on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)}) //Transaction Mined
.on('error', console.error); .on('error', console.error);
...@@ -431,28 +407,34 @@ class App extends Component { ...@@ -431,28 +407,34 @@ class App extends Component {
} }
onSelectToken = (selected, type) => { onSelectToken = (selected, type) => {
this.setState({input: 0, output:0, rate:0, fee: 0, interaction: 'connected', firstRun: true}) this.props.setExchangeInputValue(0);
this.props.setExchangeOutputValue(0);
this.props.setExchangeRate(0);
this.props.setExchangeFee(0);
this.props.setInteractionState('connected');
this.setState({ firstRun: true })
var marketType = ''; var marketType = '';
if (type === 'input') { if (type === 'input') {
this.setState({inputToken: selected}); this.props.setInputToken(selected);
if (selected.value === this.state.outputToken.value) { if (selected.value === this.props.exchange.outputToken.value) {
marketType = 'Invalid'; marketType = 'Invalid';
this.setState({interaction: 'error1'}); this.props.setInteractionState('error1');
} else if (selected.value === 'ETH'){ } else if (selected.value === 'ETH'){
marketType = 'ETH to Token'; marketType = 'ETH to Token';
} else if (this.state.outputToken.value === 'ETH'){ } else if (this.props.exchange.outputToken.value === 'ETH'){
marketType = 'Token to ETH'; marketType = 'Token to ETH';
} else{ } else{
marketType = 'Token to Token'; marketType = 'Token to Token';
} }
} else if (type === 'output'){ } else if (type === 'output'){
this.setState({outputToken: selected}); this.props.setOutputToken(selected);
if (selected.value === this.state.inputToken.value) { if (selected.value === this.props.exchange.inputToken.value) {
marketType = 'Invalid'; marketType = 'Invalid';
this.setState({interaction: 'error1'}); this.props.setInteractionState('error1');
} else if (selected.value === 'ETH'){ } else if (selected.value === 'ETH'){
marketType = 'Token to ETH'; marketType = 'Token to ETH';
} else if (this.state.inputToken.value === 'ETH'){ } else if (this.props.exchange.inputToken.value === 'ETH'){
marketType = 'ETH to Token'; marketType = 'ETH to Token';
} else { } else {
marketType = 'Token to Token'; marketType = 'Token to Token';
...@@ -460,7 +442,7 @@ class App extends Component { ...@@ -460,7 +442,7 @@ class App extends Component {
} }
console.log(type + ': ' + selected.value); console.log(type + ': ' + selected.value);
this.props.setExchangeType(marketType); this.props.setExchangeType(marketType);
this.setState({exchangeType: marketType}, this.getInfo); this.getInfo();
} }
onInputChange = (event) => { onInputChange = (event) => {
...@@ -468,25 +450,30 @@ class App extends Component { ...@@ -468,25 +450,30 @@ class App extends Component {
var marketType = this.props.web3.exchangeType; var marketType = this.props.web3.exchangeType;
if (marketType === 'Invalid'){ if (marketType === 'Invalid'){
this.setState({input: inputValue, output: 0, interaction: 'error1'}); this.props.setExchangeInputValue(inputValue);
this.props.setExchangeOutputValue(0);
this.props.setInteractionState('error1');
} else if(inputValue && inputValue !== 0 && inputValue !== '0'){ } else if(inputValue && inputValue !== 0 && inputValue !== '0'){
this.setState({input: inputValue, interaction: 'input'}); this.props.setExchangeInputValue(inputValue);
console.log('input something') this.props.setInteractionState('input');
console.log('input something');
this.getExchangeRate(inputValue); this.getExchangeRate(inputValue);
} else { } else {
this.setState({input: inputValue, output: 0, interaction: 'connected'}); this.props.setExchangeInputValue(inputValue);
this.props.setExchangeOutputValue(0);
this.props.setInteractionState('connected');
} }
} }
getExchangeRate = (input) => { getExchangeRate = (input) => {
if (this.props.web3.exchangeType === 'ETH to Token') { if (this.props.web3.exchangeType === 'ETH to Token') {
console.log('Getting Rate: ETH to ' + this.state.outputToken.value); console.log('Getting Rate: ETH to ' + this.props.exchange.outputToken.value);
this.ethToTokenRate(input); this.ethToTokenRate(input);
} else if (this.props.web3.exchangeType === 'Token to ETH') { } else if (this.props.web3.exchangeType === 'Token to ETH') {
console.log('Getting Rate: ' + this.state.inputToken.value + ' to ETH'); console.log('Getting Rate: ' + this.props.exchange.inputToken.value + ' to ETH');
this.tokenToEthRate(input); this.tokenToEthRate(input);
} else if (this.props.web3.exchangeType === 'Token to Token') { } else if (this.props.web3.exchangeType === 'Token to Token') {
console.log('Getting Rate: ' + this.state.inputToken.value + ' to ' + this.state.outputToken.value); console.log('Getting Rate: ' + this.props.exchange.inputToken.value + ' to ' + this.props.exchange.outputToken.value);
this.tokenToTokenRate(input); this.tokenToTokenRate(input);
} }
} }
...@@ -502,9 +489,9 @@ class App extends Component { ...@@ -502,9 +489,9 @@ class App extends Component {
} }
ethToTokenRate = (ethInput) => { ethToTokenRate = (ethInput) => {
var ethInMarket = +this.state.marketEth2; var ethInMarket = +this.props.exchange.marketEth2;
var tokensInMarket = +this.state.marketTokens2; var tokensInMarket = +this.props.exchange.marketTokens2;
var invar = +this.state.invariant2; var invar = +this.props.exchange.invariant2;
var ethIn = ethInput*10**18; var ethIn = ethInput*10**18;
var exchangeFee = ethIn/500; var exchangeFee = ethIn/500;
var ethSold = ethIn - exchangeFee; var ethSold = ethIn - exchangeFee;
...@@ -513,16 +500,15 @@ class App extends Component { ...@@ -513,16 +500,15 @@ class App extends Component {
var tokensOut = tokensInMarket - newTokensInMarket; var tokensOut = tokensInMarket - newTokensInMarket;
var adjustedTokensOut = tokensOut * 0.98; var adjustedTokensOut = tokensOut * 0.98;
var buyRate = adjustedTokensOut/ethIn; var buyRate = adjustedTokensOut/ethIn;
this.setState({rate: buyRate, this.props.setExchangeRate(buyRate);
fee: exchangeFee, this.props.setExchangeFee(exchangeFee);
output: adjustedTokensOut this.props.setExchangeOutputValue(adjustedTokensOut);
});
} }
tokenToEthRate = (tokenInput) => { tokenToEthRate = (tokenInput) => {
var ethInMarket = +this.state.marketEth1; var ethInMarket = +this.props.exchange.marketEth1;
var tokensInMarket = +this.state.marketTokens1; var tokensInMarket = +this.props.exchange.marketTokens1;
var invar = +this.state.invariant1; var invar = +this.props.exchange.invariant1;
var tokensIn = tokenInput*10**18; var tokensIn = tokenInput*10**18;
var exchangeFee = tokensIn/500; var exchangeFee = tokensIn/500;
var tokensSold = tokensIn - exchangeFee; var tokensSold = tokensIn - exchangeFee;
...@@ -531,17 +517,16 @@ class App extends Component { ...@@ -531,17 +517,16 @@ class App extends Component {
var ethOut = ethInMarket - newEthInMarket; var ethOut = ethInMarket - newEthInMarket;
var adjustedEthOut = ethOut * 0.98; var adjustedEthOut = ethOut * 0.98;
var buyRate = adjustedEthOut/tokensIn; var buyRate = adjustedEthOut/tokensIn;
this.setState({rate: buyRate, this.props.setExchangeRate(buyRate);
fee: exchangeFee, this.props.setExchangeFee(exchangeFee);
output: adjustedEthOut this.props.setExchangeOutputValue(adjustedEthOut);
});
} }
tokenToTokenRate = (tokenInput) => { tokenToTokenRate = (tokenInput) => {
// Token to ETH on Exchange 1 // Token to ETH on Exchange 1
var ethInMarket1 = +this.state.marketEth1; var ethInMarket1 = +this.props.exchange.marketEth1;
var tokensInMarket1 = +this.state.marketTokens1; var tokensInMarket1 = +this.props.exchange.marketTokens1;
var invar1 = +this.state.invariant1; var invar1 = +this.props.exchange.invariant1;
var tokensIn = tokenInput*10**18; var tokensIn = tokenInput*10**18;
var exchangeFee1 = tokensIn/500; var exchangeFee1 = tokensIn/500;
var tokensSold = tokensIn - exchangeFee1; var tokensSold = tokensIn - exchangeFee1;
...@@ -549,9 +534,9 @@ class App extends Component { ...@@ -549,9 +534,9 @@ class App extends Component {
var newEthInMarket1 = invar1/newTokensInMarket1; var newEthInMarket1 = invar1/newTokensInMarket1;
var ethToExchange2 = ethInMarket1 - newEthInMarket1; var ethToExchange2 = ethInMarket1 - newEthInMarket1;
// ETH to Token on Exchange 2 // ETH to Token on Exchange 2
var ethInMarket2 = +this.state.marketEth2; var ethInMarket2 = +this.props.exchange.marketEth2;
var tokensInMarket2 = +this.state.marketTokens2; var tokensInMarket2 = +this.props.exchange.marketTokens2;
var invar2 = +this.state.invariant2; var invar2 = +this.props.exchange.invariant2;
var exchangeFee2 = ethToExchange2/500; var exchangeFee2 = ethToExchange2/500;
var ethSold = ethToExchange2 - exchangeFee2; var ethSold = ethToExchange2 - exchangeFee2;
var newEthInMarket2 = ethInMarket2 + ethSold; var newEthInMarket2 = ethInMarket2 + ethSold;
...@@ -559,17 +544,16 @@ class App extends Component { ...@@ -559,17 +544,16 @@ class App extends Component {
var tokensOut = tokensInMarket2 - newTokensInMarket2; var tokensOut = tokensInMarket2 - newTokensInMarket2;
var adjustedTokensOut = tokensOut * 0.98; var adjustedTokensOut = tokensOut * 0.98;
var buyRate = adjustedTokensOut/tokensIn; var buyRate = adjustedTokensOut/tokensIn;
this.setState({rate: buyRate, this.props.setExchangeRate(buyRate);
fee: exchangeFee1, this.props.setExchangeFee(exchangeFee1);
output: adjustedTokensOut this.props.setExchangeOutputValue(adjustedTokensOut);
});
} }
// YOU ARE HERE NOW
ethToTokenPurchase = () => { ethToTokenPurchase = () => {
var exchange = this.symbolToExchangeContract(this.state.outputToken.value); var exchange = this.symbolToExchangeContract(this.props.exchange.outputToken.value);
var minTokens = (this.state.output/10**18).toString(); var minTokens = (this.props.exchange.outputValue/10**18).toString();
var minTokensInt = localweb3.utils.toWei(minTokens); var minTokensInt = localweb3.utils.toWei(minTokens);
var ethSold = this.state.input; var ethSold = this.props.exchange.inputValue;
var weiSold = localweb3.utils.toWei(ethSold); var weiSold = localweb3.utils.toWei(ethSold);
var timeout = this.props.web3.blockTimestamp + 300; //current block time + 5mins var timeout = this.props.web3.blockTimestamp + 300; //current block time + 5mins
console.log(minTokensInt, weiSold, timeout); console.log(minTokensInt, weiSold, timeout);
...@@ -578,8 +562,13 @@ class App extends Component { ...@@ -578,8 +562,13 @@ class App extends Component {
.on('transactionHash', (result) => { .on('transactionHash', (result) => {
console.log('Transaction Hash created') console.log('Transaction Hash created')
let transactions = this.state.transactions let transactions = this.state.transactions
transactions.push(result) transactions.push(result);
this.setState({transactions: transactions, input: '', output: '', interaction: 'submitted'}) // transactions is cookie stuff, we'll keep that in state
this.setState({ transactions: transactions })
// any particular reason why there are initialized as 0, but get turned to empty strings after the transaction is over?
this.props.setExchangeInputValue('');
this.props.setExchangeOutputValue('');
this.props.setInteractionState('submitted');
cookie.save('transactions', transactions, { path: '/' }) cookie.save('transactions', transactions, { path: '/' })
}) })
.on('receipt', (receipt) => { .on('receipt', (receipt) => {
...@@ -590,12 +579,13 @@ class App extends Component { ...@@ -590,12 +579,13 @@ class App extends Component {
}) //Transaction Mined }) //Transaction Mined
.on('error', console.error); .on('error', console.error);
} }
// tokenToEth and EthToToken purchase functions are very similar structurally
// maybe we can make this more DRY in refactor
tokenToEthPurchase = () => { tokenToEthPurchase = () => {
var exchange = this.symbolToExchangeContract(this.state.inputToken.value); var exchange = this.symbolToExchangeContract(this.props.exchange.inputToken.value);
var minEth = (this.state.output/10**18).toString(); var minEth = (this.props.exchange.outputValue/10**18).toString();
var minEthInt = localweb3.utils.toWei(minEth); var minEthInt = localweb3.utils.toWei(minEth);
var tokensSold = this.state.input; var tokensSold = this.props.exchange.inputValue;
var tokensSoldInt = localweb3.utils.toWei(tokensSold); var tokensSoldInt = localweb3.utils.toWei(tokensSold);
var timeout = this.props.web3.blockTimestamp + 300; //current block time + 5mins var timeout = this.props.web3.blockTimestamp + 300; //current block time + 5mins
...@@ -604,7 +594,10 @@ class App extends Component { ...@@ -604,7 +594,10 @@ class App extends Component {
console.log('Transaction Hash created') console.log('Transaction Hash created')
let transactions = this.state.transactions let transactions = this.state.transactions
transactions.push(result) transactions.push(result)
this.setState({transactions: transactions, input: '', output: '', interaction: 'submitted'}) this.setState({ transactions: transactions });
this.props.setExchangeInputValue('');
this.props.setExchangeOutputValue('');
this.props.setInteractionState('submitted');
cookie.save('transactions', transactions, { path: '/' }) cookie.save('transactions', transactions, { path: '/' })
}) })
.on('receipt', (receipt) => {console.log(receipt)}) //Transaction Submitted to blockchain .on('receipt', (receipt) => {console.log(receipt)}) //Transaction Submitted to blockchain
...@@ -613,11 +606,11 @@ class App extends Component { ...@@ -613,11 +606,11 @@ class App extends Component {
} }
tokenToTokenPurchase = () => { tokenToTokenPurchase = () => {
var exchange = this.symbolToExchangeContract(this.state.inputToken.value); var exchange = this.symbolToExchangeContract(this.props.exchange.inputToken.value);
var tokenOutAddress = this.symbolToTokenAddress(this.state.outputToken.value); var tokenOutAddress = this.symbolToTokenAddress(this.props.exchange.outputToken.value);
var minTokens = (this.state.output/10**18).toString(); var minTokens = (this.props.exchange.outputValue/10**18).toString();
var minTokensInt = localweb3.utils.toWei(minTokens); var minTokensInt = localweb3.utils.toWei(minTokens);
var tokensSold = this.state.input; var tokensSold = this.props.exchange.inputValue;
var tokensSoldInt = localweb3.utils.toWei(tokensSold); var tokensSoldInt = localweb3.utils.toWei(tokensSold);
var timeout = this.props.web3.blockTimestamp + 300; //current block time + 5mins var timeout = this.props.web3.blockTimestamp + 300; //current block time + 5mins
...@@ -626,7 +619,10 @@ class App extends Component { ...@@ -626,7 +619,10 @@ class App extends Component {
console.log('Transaction Hash created') console.log('Transaction Hash created')
let transactions = this.state.transactions let transactions = this.state.transactions
transactions.push(result) transactions.push(result)
this.setState({transactions: transactions, input: '', output: '', interaction: 'submitted'}) this.setState({ transactions: transactions });
this.props.setExchangeInputValue('');
this.props.setExchangeOutputValue('');
this.props.setInteractionState('submitted');
cookie.save('transactions', transactions, { path: '/' }) cookie.save('transactions', transactions, { path: '/' })
}) })
.on('receipt', (receipt) => {console.log(receipt)}) //Transaction Submitted to blockchain .on('receipt', (receipt) => {console.log(receipt)}) //Transaction Submitted to blockchain
...@@ -635,25 +631,26 @@ class App extends Component { ...@@ -635,25 +631,26 @@ class App extends Component {
} }
onCloseHelper = () => { onCloseHelper = () => {
if(this.state.outputToken.value === 'UNI'){ if(this.props.exchange.outputToken.value === 'UNI'){
this.setState({uniAdded: true}) this.setState({ uniAdded: true }) // cookie stuff
cookie.save('uniAdded', true, { path: '/' }) cookie.save('uniAdded', true, { path: '/' })
} else if(this.state.outputToken.value === 'SWAP'){ } else if(this.props.exchange.outputToken.value === 'SWAP'){
this.setState({swapAdded: true}) this.setState({ swapAdded: true }) // more cookie stuff
cookie.save('swapAdded', true, { path: '/' }) cookie.save('swapAdded', true, { path: '/' })
} else { } else {
this.setState({firstRun: !this.state.firstRun}) this.setState({ firstRun: !this.state.firstRun }) // also cookie stuff
cookie.save('firstRun', !this.state.firstRun, { path: '/' }) cookie.save('firstRun', !this.state.firstRun, { path: '/' })
} }
} }
toggleAbout = () => { toggleAbout = () => {
this.setState({about: !this.state.about}) this.setState({about: !this.state.about})
setTimeout(this.scrollToAbout, 300) setTimeout(this.scrollToAbout, 300);
} }
scrollToAbout = () => { scrollToAbout = () => {
scrollToComponent(this.About, { offset: 0, align: 'top', duration: 500}) scrollToComponent(this.About, { offset: 0, align: 'top', duration: 500})
} }
render() { render() {
...@@ -671,7 +668,7 @@ class App extends Component { ...@@ -671,7 +668,7 @@ class App extends Component {
interaction={this.props.web3.interaction} interaction={this.props.web3.interaction}
address={this.props.web3.currentMaskAddress} address={this.props.web3.currentMaskAddress}
locked={this.props.web3.metamaskLocked} locked={this.props.web3.metamaskLocked}
balance={this.state.inputBalance}/> balance={this.props.exchange.inputBalance}/>
</section> </section>
<ConnectionHelper <ConnectionHelper
network={this.props.web3.networkMessage} network={this.props.web3.networkMessage}
...@@ -679,7 +676,7 @@ class App extends Component { ...@@ -679,7 +676,7 @@ class App extends Component {
metamask={this.props.metamask} metamask={this.props.metamask}
address={this.props.web3.currentMaskAddress} address={this.props.web3.currentMaskAddress}
locked={this.props.web3.metamaskLocked} locked={this.props.web3.metamaskLocked}
approved={this.state.approved} approved={this.props.exchange.allowanceApproved}
tokenAdded={this.state.tokenAdded} tokenAdded={this.state.tokenAdded}
approveAllowance={this.approveAllowance} approveAllowance={this.approveAllowance}
interaction={this.props.web3.interaction} interaction={this.props.web3.interaction}
...@@ -688,11 +685,11 @@ class App extends Component { ...@@ -688,11 +685,11 @@ class App extends Component {
uniAdded={this.state.uniAdded} uniAdded={this.state.uniAdded}
swapAdded={this.state.swapAdded} swapAdded={this.state.swapAdded}
onCloseHelper={this.onCloseHelper} onCloseHelper={this.onCloseHelper}
input={this.state.input} input={this.props.exchange.inputValue}
balance={this.state.inputBalance} balance={this.props.exchange.inputBalance}
toggleAbout={this.toggleAbout} toggleAbout={this.toggleAbout}
inputToken={this.state.inputToken} inputToken={this.props.exchange.inputToken}
outputToken={this.state.outputToken} outputToken={this.props.exchange.outputToken}
about={this.state.about} about={this.state.about}
/> />
<section className="candlestick"> <section className="candlestick">
...@@ -700,34 +697,34 @@ class App extends Component { ...@@ -700,34 +697,34 @@ class App extends Component {
</section> </section>
<section className="order"> <section className="order">
<div className="value border pa2"> <div className="value border pa2">
<input type="number" value={this.state.input} placeholder="0" onChange={this.onInputChange} /> <input type="number" value={this.props.exchange.inputValue} placeholder="0" onChange={this.onInputChange} />
<SelectToken token={this.state.inputToken} onSelectToken={this.onSelectToken} type="input" /> <SelectToken token={this.props.exchange.inputToken} onSelectToken={this.onSelectToken} type="input" />
<p className="dropdown">{'<'}</p> <p className="dropdown">{'<'}</p>
</div> </div>
<div className="arrow border pa2"> <div className="arrow border pa2">
<p>→</p> <p>→</p>
</div> </div>
<div className="value border pa2"> <div className="value border pa2">
<input type="number" readOnly={true} value={(this.state.output/10**18).toFixed(5)} placeholder="0"/> <input type="number" readOnly={true} value={(this.props.exchange.outputValue/10**18).toFixed(5)} placeholder="0"/>
<SelectToken token={this.state.outputToken} onSelectToken={this.onSelectToken} type="output"/> <SelectToken token={this.props.exchange.outputToken} onSelectToken={this.onSelectToken} type="output"/>
<p className="dropdown">{'<'}</p> <p className="dropdown">{'<'}</p>
</div> </div>
</section> </section>
<section className="rate border pa2"> <section className="rate border pa2">
<span className="rate-info"> <span className="rate-info">
<p>Rate</p> <p>Rate</p>
<p>{(this.state.rate).toFixed(5)} {this.state.outputToken.value + "/" + this.state.inputToken.value}</p> <p>{(this.props.exchange.rate).toFixed(5)} {this.props.exchange.outputToken.value + "/" + this.props.exchange.inputToken.value}</p>
</span> </span>
<span className="rate-info"> <span className="rate-info">
<p>Fee</p> <p>Fee</p>
<p>{(this.state.fee/10**18).toFixed(5)} {this.state.inputToken.value}</p> <p>{(this.props.exchange.fee/10**18).toFixed(5)} {this.props.exchange.inputToken.value}</p>
</span> </span>
</section> </section>
{this.props.web3.interaction === 'input' ? {this.props.web3.interaction === 'input' ?
<a className="swap border pa2" role="button" onClick={() => {this.purchaseTokens()}}> <a className="swap border pa2" role="button" onClick={() => {this.purchaseTokens()}}>
<b>{"I want to swap " + this.state.input + " " + this.state.inputToken.value + " for " + this.state.output/10**18 + " " + this.state.outputToken.value}</b> <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>
{/* <button> Approve </button> */} {/* <button> Approve </button> */}
</a> </a>
: <a className="swap grey-bg hidden border pa2"></a>} : <a className="swap grey-bg hidden border pa2"></a>}
...@@ -775,7 +772,8 @@ class App extends Component { ...@@ -775,7 +772,8 @@ class App extends Component {
const mapStateToProps = state => ({ const mapStateToProps = state => ({
web3: state.web3, web3: state.web3,
exchangeContracts: state.exchangeContracts, exchangeContracts: state.exchangeContracts,
tokenContracts: state.tokenContracts tokenContracts: state.tokenContracts,
exchange: state.exchange
}); });
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
...@@ -793,7 +791,22 @@ const mapDispatchToProps = (dispatch) => { ...@@ -793,7 +791,22 @@ const mapDispatchToProps = (dispatch) => {
swtTokenContractReady, swtTokenContractReady,
setNetworkMessage, setNetworkMessage,
setBlockTimestamp, setBlockTimestamp,
setExchangeType setExchangeType,
setInputBalance,
setOutputBalance,
setInputToken,
setOutputToken,
setInvariant1,
setInvariant2,
setMarketEth1,
setMarketEth2,
setMarketTokens1,
setMarketTokens2,
setAllowanceApprovalState,
setExchangeInputValue,
setExchangeOutputValue,
setExchangeRate,
setExchangeFee
}, dispatch) }, dispatch)
} }
......
src/actions/exchange-actions.js 0 → 100644
View file @ 3000f70e
import {
SET_INPUT_BALANCE,
SET_OUTPUT_BALANCE,
SET_INPUT_TOKEN,
SET_OUTPUT_TOKEN,
SET_INVARIANT_1,
SET_INVARIANT_2,
SET_MARKET_ETH_1,
SET_MARKET_ETH_2,
SET_MARKET_TOKENS_1,
SET_MARKET_TOKENS_2,
SET_ALLOWANCE_APPROVAL_STATE,
SET_EXCHANGE_INPUT_VALUE,
SET_EXCHANGE_OUTPUT_VALUE,
SET_EXCHANGE_RATE,
SET_EXCHANGE_FEE
} from '../constants';
export const setInputBalance = (inputBalance) => ({
type: SET_INPUT_BALANCE,
inputBalance
});
export const setOutputBalance = (outputBalance) => ({
type: SET_OUTPUT_BALANCE,
outputBalance
})
export const setInputToken = (inputToken) => ({
type: SET_INPUT_TOKEN,
inputToken
});
export const setOutputToken = (outputToken) => ({
type: SET_OUTPUT_TOKEN,
outputToken
});
export const setInvariant1 = (invariant1) => ({
type: SET_INVARIANT_1,
invariant1
});
export const setInvariant2 = (invariant2) => ({
type: SET_INVARIANT_2,
invariant2
});
export const setMarketEth1 = (marketEth1) => ({
type: SET_MARKET_ETH_1,
marketEth1
});
export const setMarketEth2 = (marketEth2) => ({
type: SET_MARKET_ETH_2,
marketEth2
});
export const setMarketTokens1 = (marketTokens1) => ({
type: SET_MARKET_TOKENS_1,
marketTokens1
});
export const setMarketTokens2 = (marketTokens2) => ({
type: SET_MARKET_TOKENS_2,
marketTokens2
});
export const setAllowanceApprovalState = (allowanceApproved) => ({
type: SET_ALLOWANCE_APPROVAL_STATE,
allowanceApproved
});
export const setExchangeInputValue = (inputValue) => ({
type: SET_EXCHANGE_INPUT_VALUE,
inputValue
});
export const setExchangeOutputValue = (outputValue) => ({
type: SET_EXCHANGE_OUTPUT_VALUE,
outputValue
});
export const setExchangeRate = (rate) => ({
type: SET_EXCHANGE_RATE,
rate
})
export const setExchangeFee = (fee) => ({
type: SET_EXCHANGE_FEE,
fee
})
\ No newline at end of file
src/actions/web3-actions.js
View file @ 3000f70e
...@@ -62,4 +62,4 @@ export const setBlockTimestamp = (timestamp) => ({ ...@@ -62,4 +62,4 @@ export const setBlockTimestamp = (timestamp) => ({
export const setExchangeType = (exchangeType) => ({ export const setExchangeType = (exchangeType) => ({
type: SET_EXCHANGE_TYPE, type: SET_EXCHANGE_TYPE,
exchangeType exchangeType
}); });
\ No newline at end of file
src/constants.js
View file @ 3000f70e
...@@ -25,3 +25,20 @@ export const SWT_EXCHANGE_CONTRACT_READY = 'SWT_EXCHANGE_CONTRACT_READY'; ...@@ -25,3 +25,20 @@ export const SWT_EXCHANGE_CONTRACT_READY = 'SWT_EXCHANGE_CONTRACT_READY';
// token CONTRACT actions in actions, action creator, reducer // token CONTRACT actions in actions, action creator, reducer
export const UNI_TOKEN_CONTRACT_READY = 'UNI_TOKEN_CONTRACT_READY'; export const UNI_TOKEN_CONTRACT_READY = 'UNI_TOKEN_CONTRACT_READY';
export const SWT_TOKEN_CONTRACT_READY = 'SWT_TOKEN_CONTRACT_READY'; export const SWT_TOKEN_CONTRACT_READY = 'SWT_TOKEN_CONTRACT_READY';
// actions for the exchange, all in one place
export const SET_INPUT_BALANCE = 'SET_INPUT_BALANCE';
export const SET_OUTPUT_BALANCE = 'SET_OUTPUT_BALANCE';
export const SET_INPUT_TOKEN = 'SET_INPUT_TOKEN';
export const SET_OUTPUT_TOKEN = 'SET_OUTPUT_TOKEN';
export const SET_INVARIANT_1 = 'SET_INVARIANT_1';
export const SET_INVARIANT_2 = 'SET_INVARIANT_2';
export const SET_MARKET_ETH_1 = 'SET_MARKET_ETH_1';
export const SET_MARKET_ETH_2 = 'SET_MARKET_ETH_2';
export const SET_MARKET_TOKENS_1 = 'SET_MARKET_TOKENS_1';
export const SET_MARKET_TOKENS_2 = 'SET_MARKET_TOKENS_2';
export const SET_ALLOWANCE_APPROVAL_STATE = 'SET_ALLOWANCE_APPROVAL_STATE';
export const SET_EXCHANGE_INPUT_VALUE = 'SET_EXCHANGE_INPUT_VALUE';
export const SET_EXCHANGE_OUTPUT_VALUE = 'SET_EXCHANGE_OUTPUT_VALUE';
export const SET_EXCHANGE_RATE = 'SET_EXCHANGE_RATE';
export const SET_EXCHANGE_FEE = 'SET_EXCHANGE_FEE';
\ No newline at end of file
src/reducers/exchange-reducer.js 0 → 100644
View file @ 3000f70e
import {
SET_INPUT_BALANCE,
SET_OUTPUT_BALANCE,
SET_INPUT_TOKEN,
SET_OUTPUT_TOKEN,
SET_INVARIANT_1,
SET_INVARIANT_2,
SET_MARKET_ETH_1,
SET_MARKET_ETH_2,
SET_MARKET_TOKENS_1,
SET_MARKET_TOKENS_2,
SET_ALLOWANCE_APPROVAL_STATE,
SET_EXCHANGE_INPUT_VALUE,
SET_EXCHANGE_OUTPUT_VALUE,
SET_EXCHANGE_RATE,
SET_EXCHANGE_FEE
} from '../constants';
export default (state = {}, action) => {
const {
inputBalance,
outputBalance,
inputToken,
outputToken,
invariant1,
invariant2,
marketEth1,
marketEth2,
marketTokens1,
marketTokens2,
allowanceApproved,
inputValue,
outputValue,
rate,
fee
} = action;
switch(action.type) {
case SET_INPUT_BALANCE:
return Object.assign({}, state, { inputBalance: inputBalance });
case SET_OUTPUT_BALANCE:
return Object.assign({}, state, { outputBalance: outputBalance });
case SET_INPUT_TOKEN:
return Object.assign({}, state, { inputToken: inputToken });
case SET_OUTPUT_TOKEN:
return Object.assign({}, state, { outputToken: outputToken });
case SET_INVARIANT_1:
return Object.assign({}, state, { invariant1: invariant1 });
case SET_INVARIANT_2:
return Object.assign({}, state, { invariant2: invariant2 });
case SET_MARKET_ETH_1:
return Object.assign({}, state, { marketEth1: marketEth1 });
case SET_MARKET_ETH_2:
return Object.assign({}, state, { marketEth2: marketEth2 });
case SET_MARKET_TOKENS_1:
return Object.assign({}, state, { marketTokens1: marketTokens1 });
case SET_MARKET_TOKENS_2:
return Object.assign({}, state, { marketTokens2: marketTokens2 });
case SET_ALLOWANCE_APPROVAL_STATE:
return Object.assign({}, state, { allowanceApproved: allowanceApproved });
case SET_EXCHANGE_INPUT_VALUE:
return Object.assign({}, state, { inputValue: inputValue });
case SET_EXCHANGE_OUTPUT_VALUE:
return Object.assign({}, state, { outputValue: outputValue });
case SET_EXCHANGE_RATE:
return Object.assign({}, state, { rate: rate });
case SET_EXCHANGE_FEE:
return Object.assign({}, state, { fee: fee });
default: return state;
}
}
\ No newline at end of file
src/reducers/index.js
View file @ 3000f70e
...@@ -2,9 +2,11 @@ import { combineReducers } from 'redux'; ...@@ -2,9 +2,11 @@ import { combineReducers } from 'redux';
import web3 from './web3-reducer'; import web3 from './web3-reducer';
import exchangeContracts from './exchangeContract-reducer'; import exchangeContracts from './exchangeContract-reducer';
import tokenContracts from './tokenContract-reducer'; import tokenContracts from './tokenContract-reducer';
import exchange from './exchange-reducer';
export default combineReducers({ export default combineReducers({
web3, web3,
exchangeContracts, exchangeContracts,
tokenContracts tokenContracts,
exchange
}); });
\ No newline at end of file
src/store/initial-state.js
View file @ 3000f70e
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
export default { export default {
// lets check if metamask is installed // lets check if metamask is installed
// also, lets assume that we're disconnected initially // also, lets assume that we're disconnected initially
// we're going to need to include a seperate nest for exchange actions
web3: { web3: {
connected: false, connected: false,
currentMaskAddress: '', currentMaskAddress: '',
...@@ -36,5 +37,22 @@ export default { ...@@ -36,5 +37,22 @@ export default {
tokenContracts: { tokenContracts: {
UNI: '', UNI: '',
SWT: '' SWT: ''
},
exchange: {
inputBalance: 0,
outputBalance: 0,
inputToken: { value: 'ETH', label: 'ETH', clearableValue: false },
outputToken: { value: 'UNI', label: 'UNI', clearableValue: false },
invariant1: 0,
invariant2: 0,
marketEth1: 0,
marketEth2: 0,
marketTokens1: 0,
marketTokens2: 0,
allowanceApproved: true,
inputValue: 0,
outputValue: 0,
rate: 0,
fee: 0,
} }
} }
\ No newline at end of file
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