Skip to content

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

working token to token purchases

parent dcbc65e9
Hide whitespace changes
Inline Side-by-side
Showing with 291 additions and 125 deletions
src/App.js
View file @ 97131bd8
...@@ -21,24 +21,36 @@ class App extends Component { ...@@ -21,24 +21,36 @@ class App extends Component {
localweb3 = null localweb3 = null
} }
const exchangeAddress = '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C'; const uniExchangeAddress = '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C';
const uniContract = new localweb3.eth.Contract(exchangeABI, exchangeAddress); const uniExchangeContract = new localweb3.eth.Contract(exchangeABI, uniExchangeAddress);
const tokenAddress = '0x350E5DD084ecF271e8d3531D4324443952F47756'; const swapExchangeAddress = '0x4632a7Cd732c625dcc48d75E289c209422e1D2B7';
const tokenContract = new localweb3.eth.Contract(tokenABI, tokenAddress); const swapExchangeContract = new localweb3.eth.Contract(exchangeABI, swapExchangeAddress);
const uniTokenAddress = '0x350E5DD084ecF271e8d3531D4324443952F47756';
const uniTokenContract = new localweb3.eth.Contract(tokenABI, uniTokenAddress);
const swapTokenAddress = '0x350E5DD084ecF271e8d3531D4324443952F47756';
const swapTokenContract = new localweb3.eth.Contract(tokenABI, swapTokenAddress);
this.state = { this.state = {
exchangeAddress: '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C', uniExchangeAddress: '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C',
tokenAddress: '0x350E5DD084ecF271e8d3531D4324443952F47756', swapExchangeAddress: '0x4632a7Cd732c625dcc48d75E289c209422e1D2B7',
uniTokenAddress: '0x350E5DD084ecF271e8d3531D4324443952F47756',
currentMaskAddress: '0x0000000000000000000000000000000000000000', currentMaskAddress: '0x0000000000000000000000000000000000000000',
uniswapContract: uniContract, uniExchange: uniExchangeContract,
tokenContract: tokenContract, uniToken: uniTokenContract,
swapExchange: swapExchangeContract,
swapToken: swapTokenContract,
ethBalance: 0, ethBalance: 0,
tokenBalance: 0, tokenBalance: 0,
tokenAllowance: null, tokenAllowance: null,
invariant: 0, invariant1: 0,
marketEth: 0, marketEth1: 0,
marketTokens: 0, marketTokens1: 0,
invariant2: 0,
marketEth2: 0,
marketTokens2: 0,
rate: 0, rate: 0,
fee: 0, fee: 0,
cost: 0, cost: 0,
...@@ -46,28 +58,31 @@ class App extends Component { ...@@ -46,28 +58,31 @@ class App extends Component {
locked: false, locked: false,
connected: false, connected: false,
interaction: 'disconnected', interaction: 'disconnected',
exchangeType: 'Eth to Token',
input: 0, input: 0,
output: 0, output: 0,
inputToken: { value: 'ETH', label: 'ETH', clearableValue: false }, inputToken: { value: 'ETH',
outputToken: { value: 'OMG', label: 'OMG', clearableValue: false } label: 'ETH',
clearableValue: false
},
outputToken: { value: 'UNI',
label: 'UNI',
clearableValue: false
}
} }
this.onInputChange = this.onInputChange.bind(this);
this.ethToTokenRate = this.ethToTokenRate.bind(this);
this.getMarketInfo = this.getMarketInfo.bind(this);
} }
componentWillMount(){ componentWillMount(){
this.getMetaMaskAddress(); this.getMetaMaskAddress();
this.checkNetwork(); this.checkNetwork();
this.getMarketInfo();
} }
componentDidMount(){ componentDidMount(){
this.getAccountInfo(); this.getAccountInfo();
this.getMarketInfo('output', 'UNI');
} }
getAccountInfo(){ getAccountInfo = () => {
setTimeout(() => { setTimeout(() => {
this.getEthBalance(); this.getEthBalance();
this.getTokenBalance(); this.getTokenBalance();
...@@ -75,134 +90,210 @@ class App extends Component { ...@@ -75,134 +90,210 @@ class App extends Component {
}, 1000); }, 1000);
} }
getMarketInfo(){ getMarketInfo = (type, symbol) => {
this.getInvarient(); this.getInvarient(type, symbol);
this.getMarketEth(); this.getMarketEth(type, symbol);
this.getMarketTokens(); this.getMarketTokens(type, symbol);
}
getRate(){
this.ethToTokenRate(1);
} }
getMetaMaskAddress() { getMetaMaskAddress = () => {
var self = this; localweb3.eth.getAccounts((error, result) => {
localweb3.eth.getAccounts(function(error, result){
if(!error) if(!error)
self.setState({currentMaskAddress: result[0]}) this.setState({currentMaskAddress: result[0]})
else else
self.setState({locked: true}) this.setState({locked: true})
}) })
} }
getEthBalance() { getEthBalance = () => {
var self = this; localweb3.eth.getBalance(this.state.currentMaskAddress, (error, balance) => {
localweb3.eth.getBalance(this.state.currentMaskAddress, function(error, balance) { this.setState({ethBalance: balance});
self.setState({ethBalance: balance});
}); });
} }
getTokenBalance() { getTokenBalance = () => {
var self = this; this.state.uniToken.methods.balanceOf(this.state.currentMaskAddress).call((error, balance) => {
this.state.tokenContract.methods.balanceOf(this.state.currentMaskAddress).call(function(error, balance) {
var amount = balance; var amount = balance;
self.setState({tokenBalance: amount}); this.setState({tokenBalance: amount});
}); });
} }
getAllowance() { getAllowance = () => {
// var self = this; // this.state.uniToken.methods.allowance(this.state.currentMaskAddress, this.uniExchangeAddress).call().then(function(result, error){
// this.state.tokenContract.methods.allowance(this.state.currentMaskAddress, this.exchangeAddress).call().then(function(result, error){
// var amount = result // var amount = result
// self.setState({tokenAllowance: amount}); // this.setState({tokenAllowance: amount});
// }) // })
} }
checkNetwork() { checkNetwork() {
var self = this;
localweb3.eth.net.getNetworkType((err, networkId) => { localweb3.eth.net.getNetworkType((err, networkId) => {
console.log("Connected to " + networkId) console.log("Connected to " + networkId)
switch (networkId) { switch (networkId) {
case "main": case "main":
self.setState({networkMessage: 'Ethereum Mainet', connected: false, interaction: 'disconnected'}); this.setState({networkMessage: 'Ethereum Mainet', connected: false, interaction: 'disconnected'});
break; break;
case "morden": case "morden":
self.setState({networkMessage: 'Morden testnet', connected: false, interaction: 'disconnected'}); this.setState({networkMessage: 'Morden testnet', connected: false, interaction: 'disconnected'});
break; break;
case "ropsten": case "ropsten":
self.setState({networkMessage: 'Ropsten testnet', connected: false, interaction: 'disconnected'}); this.setState({networkMessage: 'Ropsten testnet', connected: false, interaction: 'disconnected'});
break; break;
case "rinkeby": case "rinkeby":
self.setState({networkMessage: '', connected: true, interaction: 'connected'}); this.setState({networkMessage: '', connected: true, interaction: 'connected'});
break; break;
case "kovan": case "kovan":
self.setState({networkMessage: 'Kovan testnet', connected: false, interaction: 'disconnected'}); this.setState({networkMessage: 'Kovan testnet', connected: false, interaction: 'disconnected'});
break; break;
default: default:
self.setState({networkMessage: 'an Unknown network', connected: false, interaction: 'disconnected'}); this.setState({networkMessage: 'an Unknown network', connected: false, interaction: 'disconnected'});
} }
}) })
} }
getInvarient() { getInvarient = (type, symbol) => {
var self = this; var exchange;
this.state.uniswapContract.methods.invariant().call().then(function(result, error){ if(symbol === 'UNI') {
self.setState({invariant: result}); exchange = this.state.uniExchange;
// console.log("invariant: " + result); } else if(symbol === 'SWAP') {
}) exchange = this.state.swapExchange;
}
if (type === 'input') {
exchange.methods.invariant().call().then((result, error) => {
this.setState({invariant1: result});
// console.log("invariant1: " + result);
})
} else if (type === 'output') {
exchange.methods.invariant().call().then((result, error) => {
this.setState({invariant2: result});
// console.log("invariant2: " + result);
})
}
} }
getMarketEth() { getMarketEth = (type, symbol) => {
var self = this var exchange;
this.state.uniswapContract.methods.ethInMarket().call().then(function(result, error){ if(symbol === 'UNI') {
self.setState({marketEth: result}); exchange = this.state.uniExchange;
// console.log("marketEth: " + result); } else if(symbol === 'SWAP') {
}) exchange = this.state.swapExchange;
}
if (type === 'input') {
exchange.methods.ethInMarket().call().then((result, error) => {
this.setState({marketEth1: result});
// console.log("marketEth1: " + result);
})
} else if (type === 'output') {
exchange.methods.ethInMarket().call().then((result, error) => {
this.setState({marketEth2: result});
// console.log("marketEth2: " + result);
})
}
} }
getMarketTokens() { getMarketTokens = (type, symbol) => {
var self = this var exchange;
this.state.uniswapContract.methods.tokensInMarket().call().then(function(result, error){ if(symbol === 'UNI') {
self.setState({marketTokens: result}); exchange = this.state.uniExchange;
// console.log("marketTokens: " + result); } else if(symbol === 'SWAP') {
}) exchange = this.state.swapExchange;
}
if (type === 'input') {
exchange.methods.tokensInMarket().call().then((result, error) => {
this.setState({marketTokens1: result});
// console.log("marketTokens1: " + result);
})
} else if (type === 'output') {
exchange.methods.tokensInMarket().call().then((result, error) => {
this.setState({marketTokens2: result});
// console.log("marketTokens2: " + result);
})
}
} }
onSelectToken = (selected, type) => { onSelectToken = (selected, type) => {
console.log(selected) // console.log(selected)
console.log(type) // console.log(type)
if (type === 'input'){ var marketType = '';
if (type === 'input') {
this.setState({inputToken: selected}); this.setState({inputToken: selected});
// do something here to update invariants and values if (selected.value === this.state.outputToken.value) {
marketType = 'Invalid';
} else if (selected.value === 'ETH'){
marketType = 'ETH to Token';
this.getMarketInfo('output', this.state.outputToken.value);
} else if (this.state.outputToken.value === 'ETH'){
marketType = 'Token to ETH';
this.getMarketInfo('input', selected.value);
} else{
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});
// do something here to update invariants and values if (selected.value === this.state.inputToken.value) {
marketType = 'Invalid';
} else if (selected.value === 'ETH'){
marketType = 'Token to ETH';
this.getMarketInfo('input', this.state.outputToken.value);
} else if (this.state.inputToken.value === 'ETH'){
marketType = 'ETH to Token';
this.getMarketInfo('output', selected.value);
} else{
marketType = 'Token to Token';
this.getMarketInfo('input', this.state.inputToken.value);
this.getMarketInfo('output', selected.value);
}
} }
console.log("Exchange Type: " + marketType)
this.setState({exchangeType: marketType});
} }
onInputChange = (event) => { onInputChange = (event) => {
this.getMarketInfo();
var inputValue = event.target.value; var inputValue = event.target.value;
if(inputValue && inputValue !== 0){ if(inputValue && inputValue !== 0){
this.ethToTokenRate(inputValue);
this.setState({input: inputValue, interaction: 'input'}); this.setState({input: inputValue, interaction: 'input'});
this.getExchangeRate(inputValue);
} else { } else {
this.setState({input: inputValue, output: 0, interaction: 'connected'}); this.setState({input: inputValue, output: 0, interaction: 'connected'});
} }
} }
ethToTokenRate(ethInput) { getExchangeRate = (input) => {
var ethInMarket = +this.state.marketEth; if (this.state.exchangeType === 'ETH to Token') {
var tokensInMarket = +this.state.marketTokens; this.ethToTokenRate(input);
var invar = +this.state.invariant; } else if (this.state.exchangeType === 'Token to ETH') {
this.tokenToEthRate(input);
} else if (this.state.exchangeType === 'Token to Token') {
this.tokenToTokenRate(input);
}
}
purchaseTokens = () => {
console.log(this.state.exchangeType);
if (this.state.exchangeType === 'ETH to Token') {
this.ethToTokenPurchase();
} else if (this.state.exchangeType === 'Token to ETH') {
this.tokenToEthPurchase();
} else if (this.state.exchangeType === 'Token to Token') {
this.tokenToTokenPurchase();
}
}
ethToTokenRate = (ethInput) => {
var ethInMarket = +this.state.marketEth2;
var tokensInMarket = +this.state.marketTokens2;
var invar = +this.state.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;
var newEthInMarket = ethInMarket + ethSold; var newEthInMarket = ethInMarket + ethSold;
var newTokensInMarket = invar/newEthInMarket; var newTokensInMarket = invar/newEthInMarket;
var tokensOut = tokensInMarket - newTokensInMarket; var tokensOut = tokensInMarket - newTokensInMarket;
var adjustedTokensOut = tokensOut * 0.99 var adjustedTokensOut = tokensOut * 0.99;
var buyRate = adjustedTokensOut/ethIn; var buyRate = adjustedTokensOut/ethIn;
this.setState({rate: buyRate, this.setState({rate: buyRate,
fee: exchangeFee, fee: exchangeFee,
...@@ -210,27 +301,10 @@ class App extends Component { ...@@ -210,27 +301,10 @@ class App extends Component {
}); });
} }
ethToTokenPurchase() { tokenToEthRate = (tokenInput) => {
var self = this; var ethInMarket = +this.state.marketEth1;
var minTokens = this.state.output/10**18; var tokensInMarket = +this.state.marketTokens1;
var minTokensInt = localweb3.utils.toWei(minTokens); var invar = +this.state.invariant1;
var ethSold = this.state.input;
var weiSold = localweb3.utils.toWei(ethSold);
localweb3.eth.getBlock('latest', function(error, blockInfo) {
var time = blockInfo.timestamp;
var timeout = time + 300; //current block time + 5mins
self.state.uniswapContract.methods.ethToTokenSwap(minTokensInt, timeout).send(
{from: self.state.currentMaskAddress, value: weiSold},
function(err, txHash) {})
});
}
tokenToEthRate(tokenInput) {
var ethInMarket = +this.state.marketEth;
var tokensInMarket = +this.state.marketTokens;
var invar = +this.state.invariant;
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;
...@@ -245,22 +319,111 @@ class App extends Component { ...@@ -245,22 +319,111 @@ class App extends Component {
}); });
} }
// tokenToTokenRate(tokenInput) { tokenToTokenRate = (tokenInput) => {
// var ethInMarket = +this.state.marketEth; // Token to ETH on Exchange 1
// var tokensInMarket = +this.state.marketTokens; var ethInMarket1 = +this.state.marketEth1;
// var invar = +this.state.invariant; var tokensInMarket1 = +this.state.marketTokens1;
// var ethIn = tokenInput*10**18; var invar1 = +this.state.invariant1;
// var exchangeFee = ethIn/500; var tokensIn = tokenInput*10**18;
// var ethSold = ethIn - exchangeFee; var exchangeFee1 = tokensIn/500;
// var newEthInMarket = ethInMarket + ethSold; var tokensSold = tokensIn - exchangeFee1;
// var newTokensInMarket = invar/newEthInMarket; var newTokensInMarket1 = tokensInMarket1 + tokensSold;
// var tokensOut = tokensInMarket - newTokensInMarket; var newEthInMarket1 = invar1/newTokensInMarket1;
// var buyRate = tokensOut/ethIn; var ethToExchange2 = ethInMarket1 - newEthInMarket1;
// this.setState({rate: buyRate, // ETH to Token on Exchange 2
// fee: exchangeFee, var ethInMarket2 = +this.state.marketEth2;
// output: tokensOut var tokensInMarket2 = +this.state.marketTokens2;
// }); var invar2 = +this.state.invariant2;
// } var exchangeFee2 = ethToExchange2/500;
var ethSold = ethToExchange2 - exchangeFee2;
var newEthInMarket2 = ethInMarket2 + ethSold;
var newTokensInMarket2 = invar2/newEthInMarket2;
var tokensOut = tokensInMarket2 - newTokensInMarket2;
var adjustedTokensOut = tokensOut * 0.99;
var buyRate = adjustedTokensOut/tokensIn;
this.setState({rate: buyRate,
fee: exchangeFee1,
output: adjustedTokensOut
});
}
ethToTokenPurchase = () => {
var exchange;
if(this.state.outputToken.value === 'UNI') {
exchange = this.state.uniExchange;
console.log('ETH to UNI purchase');
} else if(this.state.outputToken.value === 'SWAP') {
exchange = this.state.swapExchange;
console.log('ETH to SWAP purchase');
}
var minTokens = this.state.output/10**18;
var minTokensInt = localweb3.utils.toWei(minTokens);
var ethSold = this.state.input;
var weiSold = localweb3.utils.toWei(ethSold);
localweb3.eth.getBlock('latest', (error, blockInfo) => {
var time = blockInfo.timestamp;
var timeout = time + 300; //current block time + 5mins
exchange.methods.ethToTokenSwap(minTokensInt, timeout).send(
{from: this.state.currentMaskAddress, value: weiSold},
function(err, txHash) {})
});
}
tokenToEthPurchase = () => {
var exchange;
if(this.state.inputToken.value === 'UNI') {
exchange = this.state.uniExchange;
console.log('ETH to UNI purchase');
} else if(this.state.inputToken.value === 'SWAP') {
exchange = this.state.swapExchange;
console.log('ETH to SWAP purchase');
}
var minEth = this.state.output/10**18;
var minEthInt = localweb3.utils.toWei(minEth);
var tokensSold = this.state.input;
var tokensSoldInt = localweb3.utils.toWei(tokensSold);
localweb3.eth.getBlock('latest', (error, blockInfo) => {
var time = blockInfo.timestamp;
var timeout = time + 300; //current block time + 5mins
exchange.methods.tokenToEthSwap(tokensSoldInt, minEthInt, timeout).send(
{from: this.state.currentMaskAddress},
function(err, txHash) {})
});
}
tokenToTokenPurchase = () => {
var exchange;
var tokenOutAddress;
if(this.state.inputToken.value === 'UNI') {
exchange = this.state.uniExchange;
tokenOutAddress = this.state.swapTokenAddress;
console.log('UNI to SWAP purchase');
} else if(this.state.inputToken.value === 'SWAP') {
exchange = this.state.swapExchange;
tokenOutAddress = this.state.uniTokenAddress;
console.log('SWAP to UNI purchase');
}
var minTokens = this.state.output/10**18;
var minTokensInt = localweb3.utils.toWei(minTokens);
var tokensSold = this.state.input;
var tokensSoldInt = localweb3.utils.toWei(tokensSold);
localweb3.eth.getBlock('latest', (error, blockInfo) => {
var time = blockInfo.timestamp;
var timeout = time + 300; //current block time + 5mins
exchange.methods.tokenToTokenSwap(tokenOutAddress, tokensSoldInt, minTokensInt, timeout).send(
{from: this.state.currentMaskAddress},
function(err, txHash) {})
});
}
render() { render() {
//console.log(localweb3) //console.log(localweb3)
...@@ -301,18 +464,18 @@ class App extends Component { ...@@ -301,18 +464,18 @@ 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.ethToTokenPurchase() }}> <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>
</section> </section>
: <section className="swap hidden border pa2"></section>} : <section className="swap hidden border pa2"></section>}
<section className="links"> <section className="links">
<a href="" className="link border pa2"> <a href="" className="link border pa2">
<p className="underline">Provide Liquidity to collect fees</p> <p className="underline">Provide liquidity to collect fees</p>
<p>+</p> <p>+</p>
</a> </a>
<a href="" className="link border pa2"> <a href="" className="link border pa2">
<p className="underline">Add a new token</p> <p className="underline">Launch a new exchange</p>
<p>+</p> <p>+</p>
</a> </a>
</section> </section>
......
src/components/HelperMessages.js
View file @ 97131bd8
...@@ -10,6 +10,10 @@ function HelperMessages(props) { ...@@ -10,6 +10,10 @@ function HelperMessages(props) {
message = "You're swapping " + props.inputToken.value + " for " + props.outputToken.value + ". Want to know more about how the prices are determined?" message = "You're swapping " + props.inputToken.value + " for " + props.outputToken.value + ". Want to know more about how the prices are determined?"
// message = "Oops, looks like this address doesn't have a enough " + props.inputToken.value + " to make this trade. Add more funds to make this swap." // message = "Oops, looks like this address doesn't have a enough " + props.inputToken.value + " to make this trade. Add more funds to make this swap."
break; break;
case 'error1':
message = "You can't swap a token for itself!"
// message = "Oops, looks like this address doesn't have a enough " + props.inputToken.value + " to make this trade. Add more funds to make this swap."
break;
default: default:
message = "Hi there! This site helps you swap ERC20 tokens. Looks like you aren't connected. Need help?" message = "Hi there! This site helps you swap ERC20 tokens. Looks like you aren't connected. Need help?"
} }
......
src/components/SelectToken.js
View file @ 97131bd8
...@@ -25,10 +25,9 @@ class SelectToken extends Component { ...@@ -25,10 +25,9 @@ class SelectToken extends Component {
onChange={this.handleChange} onChange={this.handleChange}
className="select" className="select"
options={[ options={[
{ value: 'OMG', label: 'OMG', clearableValue: false },
{ value: 'ETH', label: 'ETH', clearableValue: false }, { value: 'ETH', label: 'ETH', clearableValue: false },
{ value: 'BNT', label: 'BNT', clearableValue: false }, { value: 'UNI', label: 'UNI', clearableValue: false },
{ value: 'FOM', label: 'FOAM', clearableValue: false }, { value: 'SWAP', label: 'SWAP', clearableValue: false },
]} ]}
/> />
) )
......
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