Skip to content

I
interface
Commit d00d4c0b authored by Hayden Adams's avatar Hayden Adams
Browse files
Options

add approve, allowance, and get market data periodically

parent 7da0ec7c
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 101 deletions
src/App.js
View file @ d00d4c0b
...@@ -50,8 +50,8 @@ class App extends Component { ...@@ -50,8 +50,8 @@ class App extends Component {
swapToken: swapTokenContract, swapToken: swapTokenContract,
factory: factoryContract, factory: factoryContract,
blockTimestamp: 0, blockTimestamp: 0,
ethBalance: 0, inputBalance: 0,
tokenBalance: 0, outputBalance: 0,
tokenAllowance: null, tokenAllowance: null,
invariant1: 0, invariant1: 0,
marketEth1: 0, marketEth1: 0,
...@@ -81,14 +81,41 @@ class App extends Component { ...@@ -81,14 +81,41 @@ class App extends Component {
} }
componentWillMount(){ componentWillMount(){
this.getMetaMaskAddress(); this.getUserAddress();
this.checkNetwork(); this.checkNetwork();
this.getBlock();
} }
componentDidMount(){ componentDidMount(){
this.getAccountInfo(); setInterval(this.getBlock, 10000);
this.getMarketInfo('output', 'UNI'); setInterval(this.getMarketInfo, 15000);
setInterval(this.getBlock, 3000); setInterval(this.getAccountInfo, 15000);
}
checkNetwork() {
localweb3.eth.net.getNetworkType((err, networkId) => {
console.log("Connected to " + networkId)
switch (networkId) {
case "main":
this.setState({networkMessage: 'Ethereum Mainet', connected: false, interaction: 'disconnected'});
break;
case "morden":
this.setState({networkMessage: 'Morden testnet', connected: false, interaction: 'disconnected'});
break;
case "ropsten":
this.setState({networkMessage: 'Ropsten testnet', connected: false, interaction: 'disconnected'});
break;
case "rinkeby":
this.setState({networkMessage: '', connected: true, interaction: 'connected'});
break;
case "kovan":
this.setState({networkMessage: 'Kovan testnet', connected: false, interaction: 'disconnected'});
break;
default:
this.setState({networkMessage: 'an unknown network', connected: false, interaction: 'disconnected'});
}
})
} }
getBlock = () => { getBlock = () => {
...@@ -97,20 +124,7 @@ class App extends Component { ...@@ -97,20 +124,7 @@ class App extends Component {
}); });
} }
getAccountInfo = () => { getUserAddress = () => {
this.getEthBalance();
this.getTokenBalance();
this.getExchangeAllowance();
}
getMarketInfo = (type, symbol) => {
var exchangeContract = this.symbolToExchangeContract(symbol);
this.getInvarient(type, exchangeContract);
this.getMarketEth(type, exchangeContract);
this.getMarketTokens(type, exchangeContract);
}
getMetaMaskAddress = () => {
localweb3.eth.getAccounts((error, result) => { localweb3.eth.getAccounts((error, result) => {
if(!error) if(!error)
this.setState({currentMaskAddress: result[0]}) this.setState({currentMaskAddress: result[0]})
...@@ -135,6 +149,14 @@ class App extends Component { ...@@ -135,6 +149,14 @@ class App extends Component {
} }
} }
symbolToExchangeAddress = (symbol) => {
if(symbol === 'UNI') {
return this.state.uniExchangeAddress;
} else if(symbol === 'SWAP') {
return this.state.swapExchangeAddress;
}
}
symbolToExchangeContract = (symbol) => { symbolToExchangeContract = (symbol) => {
if(symbol === 'UNI') { if(symbol === 'UNI') {
return this.state.uniExchange; return this.state.uniExchange;
...@@ -143,95 +165,150 @@ class App extends Component { ...@@ -143,95 +165,150 @@ class App extends Component {
} }
} }
getEthBalance = () => { getInfo = () => {
localweb3.eth.getBalance(this.state.currentMaskAddress, (error, balance) => { this.getMarketInfo();
this.setState({ethBalance: balance}); this.getAccountInfo();
});
} }
getTokenBalance = () => { getMarketInfo = () => {
this.state.uniToken.methods.balanceOf(this.state.currentMaskAddress).call((error, balance) => { switch (this.state.exchangeType) {
this.setState({tokenBalance: balance}); case 'ETH to Token':
}); this.getExchangeState('output');
break;
case 'Token to ETH':
this.getExchangeState('input');
break;
case 'Token to Token':
this.getExchangeState('input');
this.getExchangeState('output');
break;
default:
}
} }
getExchangeAllowance = () => { getAccountInfo = () => {
this.state.uniToken.methods.allowance(this.state.currentMaskAddress, this.state.uniExchangeAddress).call().then((result, error) => { switch (this.state.exchangeType) {
this.setState({tokenAllowance: result}); 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:
}
} }
approveAllowance = () => { getExchangeState = (type) => {
var exchange;
if (type === 'input') {
exchange = this.symbolToExchangeContract(this.state.inputToken.value);
} exchange.methods.invariant().call().then((result, error) => {
this.setState({invariant1: result});
// console.log('Input Invariant: ' + result);
});
tokenToExchangeFactoryLookup = (tokenAddress) => { exchange.methods.ethInMarket().call().then((result, error) => {
this.state.factory.methods.tokenToExchangeLookup(tokenAddress).call((error, exchangeAddress) => { this.setState({marketEth1: result});
console.log(exchangeAddress) // console.log('Input Market ETH: ' + result);
}); });
}
checkNetwork() { exchange.methods.tokensInMarket().call().then((result, error) => {
localweb3.eth.net.getNetworkType((err, networkId) => { this.setState({marketTokens1: result});
console.log("Connected to " + networkId) // console.log('Input Market Tokens: ' + result);
switch (networkId) { });
case "main":
this.setState({networkMessage: 'Ethereum Mainet', connected: false, interaction: 'disconnected'}); } else if (type === 'output') {
break; exchange = this.symbolToExchangeContract(this.state.outputToken.value);
case "morden": exchange.methods.invariant().call().then((result, error) => {
this.setState({networkMessage: 'Morden testnet', connected: false, interaction: 'disconnected'}); this.setState({invariant2: result});
break; // console.log('Output Invariant: ' + result);
case "ropsten": });
this.setState({networkMessage: 'Ropsten testnet', connected: false, interaction: 'disconnected'});
break; exchange.methods.ethInMarket().call().then((result, error) => {
case "rinkeby": this.setState({marketEth2: result});
this.setState({networkMessage: '', connected: true, interaction: 'connected'}); // console.log('Output Market ETH: ' + result);
break; });
case "kovan":
this.setState({networkMessage: 'Kovan testnet', connected: false, interaction: 'disconnected'}); exchange.methods.tokensInMarket().call().then((result, error) => {
break; this.setState({marketTokens2: result})
default: // console.log('Output Market Tokens: ' + result);
this.setState({networkMessage: 'an unknown network', connected: false, interaction: 'disconnected'}); });
} }
})
} }
getInvarient = (type, exchange) => { getEthBalance = (type) => {
if (type === 'input') { if (type === 'input') {
exchange.methods.invariant().call().then((result, error) => {this.setState({invariant1: result}); localweb3.eth.getBalance(this.state.currentMaskAddress, (error, balance) => {
// console.log("invariant1: " + result); this.setState({inputBalance: balance});
}) // console.log('ETH Balance: ' + balance);
});
} else if (type === 'output') { } else if (type === 'output') {
exchange.methods.invariant().call().then((result, error) => {this.setState({invariant2: result}); localweb3.eth.getBalance(this.state.currentMaskAddress, (error, balance) => {
// console.log("invariant2: " + result); this.setState({outputBalance: balance});
}) // console.log('ETH Balance: ' + balance);
});
} }
} }
getMarketEth = (type, exchange) => { getTokenBalance = (type) => {
var token;
if (type === 'input') { if (type === 'input') {
exchange.methods.ethInMarket().call().then((result, error) => {this.setState({marketEth1: result}); token = this.symbolToTokenContract(this.state.inputToken.value);
// console.log("marketEth1: " + result); token.methods.balanceOf(this.state.currentMaskAddress).call((error, balance) => {
}) this.setState({inputBalance: balance});
// console.log(this.state.inputToken.value + ' Balance: ' + balance);
});
} else if (type === 'output') { } else if (type === 'output') {
exchange.methods.ethInMarket().call().then((result, error) => {this.setState({marketEth2: result}); token = this.symbolToTokenContract(this.state.outputToken.value);
// console.log("marketEth2: " + result); token.methods.balanceOf(this.state.currentMaskAddress).call((error, balance) => {
}) this.setState({outputBalance: balance});
// console.log(this.state.outputToken.value + ' Balance: ' + balance);
});
} }
} }
getMarketTokens = (type, exchange) => { getAllowance = () => {
if (type === 'input') { var type = this.state.exchangeType;
exchange.methods.tokensInMarket().call().then((result, error) => {this.setState({marketTokens1: result}); if(type === 'Token to ETH' || type === 'Token to Token') {
// console.log("marketTokens1: " + result); var token = this.symbolToTokenContract(this.state.inputToken.value);
var exchangeAddress = this.symbolToExchangeAddress(this.state.inputToken.value);
token.methods.allowance(this.state.currentMaskAddress, exchangeAddress).call().then((result, error) => {
console.log(this.state.inputToken.value + ' allowance: ' + result);
}) })
} else if (type === 'output') {
exchange.methods.tokensInMarket().call().then((result, error) => {this.setState({marketTokens2: result});
// console.log("marketTokens2: " + result);
})
} }
} }
approveAllowance = () => {
var type = this.state.exchangeType;
if(type === 'Token to ETH' || type === 'Token to Token') {
var token = this.symbolToTokenContract(this.state.inputToken.value);
var exchangeAddress = this.symbolToExchangeAddress(this.state.inputToken.value);
var amount = localweb3.utils.toWei('100000');
token.methods.approve(exchangeAddress, amount).send({from: this.state.currentMaskAddress})
.on('transactionHash', console.log('Transaction Hash created'))
.on('receipt', (receipt) => {console.log(receipt)}) //Transaction Submitted to blockchain
.on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)}) //Transaction Mined
.on('error', console.error);
}
}
tokenToExchangeFactoryLookup = (tokenAddress) => {
this.state.factory.methods.tokenToExchangeLookup(tokenAddress).call((error, exchangeAddress) => {
console.log(exchangeAddress)
});
}
onSelectToken = (selected, type) => { onSelectToken = (selected, type) => {
this.setState({input: 0, output:0, rate:0, fee: 0, interaction: 'connected'}) this.setState({input: 0, output:0, rate:0, fee: 0, interaction: 'connected'})
var marketType = ''; var marketType = '';
...@@ -239,17 +316,12 @@ class App extends Component { ...@@ -239,17 +316,12 @@ class App extends Component {
this.setState({inputToken: selected}); this.setState({inputToken: selected});
if (selected.value === this.state.outputToken.value) { if (selected.value === this.state.outputToken.value) {
marketType = 'Invalid'; marketType = 'Invalid';
this.setState({interaction: 'error1'});
} else if (selected.value === 'ETH'){ } else if (selected.value === 'ETH'){
marketType = 'ETH to Token'; marketType = 'ETH to Token';
this.getMarketInfo('output', this.state.outputToken.value);
} else if (this.state.outputToken.value === 'ETH'){ } else if (this.state.outputToken.value === 'ETH'){
marketType = 'Token to ETH'; marketType = 'Token to ETH';
this.getMarketInfo('input', selected.value);
} else{ } else{
marketType = 'Token to Token'; marketType = 'Token to Token';
this.getMarketInfo('input', selected.value);
this.getMarketInfo('output', this.state.outputToken.value);
} }
} else if (type === 'output'){ } else if (type === 'output'){
this.setState({outputToken: selected}); this.setState({outputToken: selected});
...@@ -258,19 +330,14 @@ class App extends Component { ...@@ -258,19 +330,14 @@ class App extends Component {
this.setState({interaction: 'error1'}); this.setState({interaction: 'error1'});
} else if (selected.value === 'ETH'){ } else if (selected.value === 'ETH'){
marketType = 'Token to ETH'; marketType = 'Token to ETH';
this.getMarketInfo('input', this.state.outputToken.value);
} else if (this.state.inputToken.value === 'ETH'){ } else if (this.state.inputToken.value === 'ETH'){
marketType = 'ETH to Token'; marketType = 'ETH to Token';
this.getMarketInfo('output', selected.value);
} else{ } else{
marketType = 'Token to Token'; marketType = 'Token to Token';
this.getMarketInfo('input', this.state.inputToken.value);
this.getMarketInfo('output', selected.value);
} }
} }
console.log(type + ': ' + selected.value); console.log(type + ': ' + selected.value);
console.log('Exchange Type: ' + marketType); this.setState({exchangeType: marketType}, this.getInfo);
this.setState({exchangeType: marketType});
} }
onInputChange = (event) => { onInputChange = (event) => {
...@@ -292,7 +359,7 @@ class App extends Component { ...@@ -292,7 +359,7 @@ class App extends Component {
console.log('Getting Rate: ETH to ' + this.state.outputToken.value); console.log('Getting Rate: ETH to ' + this.state.outputToken.value);
this.ethToTokenRate(input); this.ethToTokenRate(input);
} else if (this.state.exchangeType === 'Token to ETH') { } else if (this.state.exchangeType === 'Token to ETH') {
console.log('Getting Rate: ETH to ' + this.state.outputToken.value); console.log('Getting Rate: ' + this.state.inputToken.value + ' to ETH');
this.tokenToEthRate(input); this.tokenToEthRate(input);
} else if (this.state.exchangeType === 'Token to Token') { } else if (this.state.exchangeType === 'Token to Token') {
console.log('Getting Rate: ' + this.state.inputToken.value + ' to ' + this.state.outputToken.value); console.log('Getting Rate: ' + this.state.inputToken.value + ' to ' + this.state.outputToken.value);
...@@ -376,11 +443,12 @@ class App extends Component { ...@@ -376,11 +443,12 @@ class App extends Component {
ethToTokenPurchase = () => { ethToTokenPurchase = () => {
var exchange = this.symbolToExchangeContract(this.state.outputToken.value); var exchange = this.symbolToExchangeContract(this.state.outputToken.value);
var minTokens = this.state.output/10**18; var minTokens = (this.state.output/10**18).toString();
var minTokensInt = localweb3.utils.toWei(minTokens); var minTokensInt = localweb3.utils.toWei(minTokens);
var ethSold = this.state.input; var ethSold = this.state.input;
var weiSold = localweb3.utils.toWei(ethSold); var weiSold = localweb3.utils.toWei(ethSold);
var timeout = this.state.blockTimestamp + 300; //current block time + 5mins var timeout = this.state.blockTimestamp + 300; //current block time + 5mins
console.log(minTokensInt, weiSold, timeout);
exchange.methods.ethToTokenSwap(minTokensInt, timeout).send({from: this.state.currentMaskAddress, value: weiSold}) exchange.methods.ethToTokenSwap(minTokensInt, timeout).send({from: this.state.currentMaskAddress, value: weiSold})
.on('transactionHash', console.log('Transaction Hash created')) .on('transactionHash', console.log('Transaction Hash created'))
...@@ -391,7 +459,7 @@ class App extends Component { ...@@ -391,7 +459,7 @@ class App extends Component {
tokenToEthPurchase = () => { tokenToEthPurchase = () => {
var exchange = this.symbolToExchangeContract(this.state.inputToken.value); var exchange = this.symbolToExchangeContract(this.state.inputToken.value);
var minEth = this.state.output/10**18; var minEth = (this.state.output/10**18).toString();
var minEthInt = localweb3.utils.toWei(minEth); var minEthInt = localweb3.utils.toWei(minEth);
var tokensSold = this.state.input; var tokensSold = this.state.input;
var tokensSoldInt = localweb3.utils.toWei(tokensSold); var tokensSoldInt = localweb3.utils.toWei(tokensSold);
...@@ -407,7 +475,7 @@ class App extends Component { ...@@ -407,7 +475,7 @@ class App extends Component {
tokenToTokenPurchase = () => { tokenToTokenPurchase = () => {
var exchange = this.symbolToExchangeContract(this.state.inputToken.value); var exchange = this.symbolToExchangeContract(this.state.inputToken.value);
var tokenOutAddress = this.symbolToTokenAddress(this.state.outputToken.value); var tokenOutAddress = this.symbolToTokenAddress(this.state.outputToken.value);
var minTokens = this.state.output/10**18; var minTokens = (this.state.output/10**18).toString();
var minTokensInt = localweb3.utils.toWei(minTokens); var minTokensInt = localweb3.utils.toWei(minTokens);
var tokensSold = this.state.input; var tokensSold = this.state.input;
var tokensSoldInt = localweb3.utils.toWei(tokensSold); var tokensSoldInt = localweb3.utils.toWei(tokensSold);
...@@ -439,7 +507,7 @@ class App extends Component { ...@@ -439,7 +507,7 @@ class App extends Component {
<p className="dropdown">{'<'}</p> <p className="dropdown">{'<'}</p>
</div> </div>
<div className="arrow border pa2"> <div className="arrow border pa2">
<p>→</p> <p onClick={() => {this.approveAllowance()}}>→</p>
</div> </div>
<div className="value border pa2"> <div className="value border pa2">
<input type="number" value={this.state.output/10**18} placeholder="0"/> <input type="number" value={this.state.output/10**18} placeholder="0"/>
...@@ -459,9 +527,10 @@ class App extends Component { ...@@ -459,9 +527,10 @@ class App extends Component {
</section> </section>
{this.state.interaction === 'input' ? {this.state.interaction === 'input' ?
<section className="swap border pa2"> <section className="swap border pa2">
<a href="#" role="button" onClick={() => {this.purchaseTokens() }}> <a href="#" role="button" onClick={() => {this.purchaseTokens()}}>
{"I want to swap " + this.state.input + " " + this.state.inputToken.value + " for " + this.state.output/10**18 + " " + this.state.outputToken.value} {"I want to swap " + this.state.input + " " + this.state.inputToken.value + " for " + this.state.output/10**18 + " " + this.state.outputToken.value}
</a> </a>
<button> Approve </button>
</section> </section>
: <section className="swap hidden border pa2"></section>} : <section className="swap hidden border pa2"></section>}
<section className="links"> <section className="links">
......
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