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
Show 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 {
localweb3 = null
}
const exchangeAddress = '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C';
const uniContract = new localweb3.eth.Contract(exchangeABI, exchangeAddress);
const uniExchangeAddress = '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C';
const uniExchangeContract = new localweb3.eth.Contract(exchangeABI, uniExchangeAddress);
const tokenAddress = '0x350E5DD084ecF271e8d3531D4324443952F47756';
const tokenContract = new localweb3.eth.Contract(tokenABI, tokenAddress);
const swapExchangeAddress = '0x4632a7Cd732c625dcc48d75E289c209422e1D2B7';
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 = {
exchangeAddress: '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C',
tokenAddress: '0x350E5DD084ecF271e8d3531D4324443952F47756',
uniExchangeAddress: '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C',
swapExchangeAddress: '0x4632a7Cd732c625dcc48d75E289c209422e1D2B7',
uniTokenAddress: '0x350E5DD084ecF271e8d3531D4324443952F47756',
currentMaskAddress: '0x0000000000000000000000000000000000000000',
uniswapContract: uniContract,
tokenContract: tokenContract,
uniExchange: uniExchangeContract,
uniToken: uniTokenContract,
swapExchange: swapExchangeContract,
swapToken: swapTokenContract,
ethBalance: 0,
tokenBalance: 0,
tokenAllowance: null,
invariant: 0,
marketEth: 0,
marketTokens: 0,
invariant1: 0,
marketEth1: 0,
marketTokens1: 0,
invariant2: 0,
marketEth2: 0,
marketTokens2: 0,
rate: 0,
fee: 0,
cost: 0,
......@@ -46,28 +58,31 @@ class App extends Component {
locked: false,
connected: false,
interaction: 'disconnected',
exchangeType: 'Eth to Token',
input: 0,
output: 0,
inputToken: { value: 'ETH', label: 'ETH', clearableValue: false },
outputToken: { value: 'OMG', label: 'OMG', clearableValue: false }
inputToken: { value: 'ETH',
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(){
this.getMetaMaskAddress();
this.checkNetwork();
this.getMarketInfo();
}
componentDidMount(){
this.getAccountInfo();
this.getMarketInfo('output', 'UNI');
}
getAccountInfo(){
getAccountInfo = () => {
setTimeout(() => {
this.getEthBalance();
this.getTokenBalance();
......@@ -75,134 +90,210 @@ class App extends Component {
}, 1000);
}
getMarketInfo(){
this.getInvarient();
this.getMarketEth();
this.getMarketTokens();
}
getRate(){
this.ethToTokenRate(1);
getMarketInfo = (type, symbol) => {
this.getInvarient(type, symbol);
this.getMarketEth(type, symbol);
this.getMarketTokens(type, symbol);
}
getMetaMaskAddress() {
var self = this;
localweb3.eth.getAccounts(function(error, result){
getMetaMaskAddress = () => {
localweb3.eth.getAccounts((error, result) => {
if(!error)
self.setState({currentMaskAddress: result[0]})
this.setState({currentMaskAddress: result[0]})
else
self.setState({locked: true})
this.setState({locked: true})
})
}
getEthBalance() {
var self = this;
localweb3.eth.getBalance(this.state.currentMaskAddress, function(error, balance) {
self.setState({ethBalance: balance});
getEthBalance = () => {
localweb3.eth.getBalance(this.state.currentMaskAddress, (error, balance) => {
this.setState({ethBalance: balance});
});
}
getTokenBalance() {
var self = this;
this.state.tokenContract.methods.balanceOf(this.state.currentMaskAddress).call(function(error, balance) {
getTokenBalance = () => {
this.state.uniToken.methods.balanceOf(this.state.currentMaskAddress).call((error, balance) => {
var amount = balance;
self.setState({tokenBalance: amount});
this.setState({tokenBalance: amount});
});
}
getAllowance() {
// var self = this;
// this.state.tokenContract.methods.allowance(this.state.currentMaskAddress, this.exchangeAddress).call().then(function(result, error){
getAllowance = () => {
// this.state.uniToken.methods.allowance(this.state.currentMaskAddress, this.uniExchangeAddress).call().then(function(result, error){
// var amount = result
// self.setState({tokenAllowance: amount});
// this.setState({tokenAllowance: amount});
// })
}
checkNetwork() {
var self = this;
localweb3.eth.net.getNetworkType((err, networkId) => {
console.log("Connected to " + networkId)
switch (networkId) {
case "main":
self.setState({networkMessage: 'Ethereum Mainet', connected: false, interaction: 'disconnected'});
this.setState({networkMessage: 'Ethereum Mainet', connected: false, interaction: 'disconnected'});
break;
case "morden":
self.setState({networkMessage: 'Morden testnet', connected: false, interaction: 'disconnected'});
this.setState({networkMessage: 'Morden testnet', connected: false, interaction: 'disconnected'});
break;
case "ropsten":
self.setState({networkMessage: 'Ropsten testnet', connected: false, interaction: 'disconnected'});
this.setState({networkMessage: 'Ropsten testnet', connected: false, interaction: 'disconnected'});
break;
case "rinkeby":
self.setState({networkMessage: '', connected: true, interaction: 'connected'});
this.setState({networkMessage: '', connected: true, interaction: 'connected'});
break;
case "kovan":
self.setState({networkMessage: 'Kovan testnet', connected: false, interaction: 'disconnected'});
this.setState({networkMessage: 'Kovan testnet', connected: false, interaction: 'disconnected'});
break;
default:
self.setState({networkMessage: 'an Unknown network', connected: false, interaction: 'disconnected'});
this.setState({networkMessage: 'an Unknown network', connected: false, interaction: 'disconnected'});
}
})
}
getInvarient() {
var self = this;
this.state.uniswapContract.methods.invariant().call().then(function(result, error){
self.setState({invariant: result});
// console.log("invariant: " + result);
getInvarient = (type, symbol) => {
var exchange;
if(symbol === 'UNI') {
exchange = this.state.uniExchange;
} 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 = (type, symbol) => {
var exchange;
if(symbol === 'UNI') {
exchange = this.state.uniExchange;
} else if(symbol === 'SWAP') {
exchange = this.state.swapExchange;
}
getMarketEth() {
var self = this
this.state.uniswapContract.methods.ethInMarket().call().then(function(result, error){
self.setState({marketEth: result});
// console.log("marketEth: " + result);
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() {
var self = this
this.state.uniswapContract.methods.tokensInMarket().call().then(function(result, error){
self.setState({marketTokens: result});
// console.log("marketTokens: " + result);
getMarketTokens = (type, symbol) => {
var exchange;
if(symbol === 'UNI') {
exchange = this.state.uniExchange;
} 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) => {
console.log(selected)
console.log(type)
if (type === 'input'){
// console.log(selected)
// console.log(type)
var marketType = '';
if (type === 'input') {
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'){
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) => {
this.getMarketInfo();
var inputValue = event.target.value;
if(inputValue && inputValue !== 0){
this.ethToTokenRate(inputValue);
this.setState({input: inputValue, interaction: 'input'});
this.getExchangeRate(inputValue);
} else {
this.setState({input: inputValue, output: 0, interaction: 'connected'});
}
}
ethToTokenRate(ethInput) {
var ethInMarket = +this.state.marketEth;
var tokensInMarket = +this.state.marketTokens;
var invar = +this.state.invariant;
getExchangeRate = (input) => {
if (this.state.exchangeType === 'ETH to Token') {
this.ethToTokenRate(input);
} 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 exchangeFee = ethIn/500;
var ethSold = ethIn - exchangeFee;
var newEthInMarket = ethInMarket + ethSold;
var newTokensInMarket = invar/newEthInMarket;
var tokensOut = tokensInMarket - newTokensInMarket;
var adjustedTokensOut = tokensOut * 0.99
var adjustedTokensOut = tokensOut * 0.99;
var buyRate = adjustedTokensOut/ethIn;
this.setState({rate: buyRate,
fee: exchangeFee,
......@@ -210,57 +301,129 @@ class App extends Component {
});
}
ethToTokenPurchase() {
var self = this;
tokenToEthRate = (tokenInput) => {
var ethInMarket = +this.state.marketEth1;
var tokensInMarket = +this.state.marketTokens1;
var invar = +this.state.invariant1;
var tokensIn = tokenInput*10**18;
var exchangeFee = tokensIn/500;
var tokensSold = tokensIn - exchangeFee;
var newTokensInMarket = tokensInMarket + tokensSold;
var newEthInMarket = invar/newTokensInMarket;
var ethOut = ethInMarket - newEthInMarket;
var adjustedEthOut = ethOut * 0.99;
var buyRate = adjustedEthOut/tokensIn;
this.setState({rate: buyRate,
fee: exchangeFee,
output: adjustedEthOut
});
}
tokenToTokenRate = (tokenInput) => {
// Token to ETH on Exchange 1
var ethInMarket1 = +this.state.marketEth1;
var tokensInMarket1 = +this.state.marketTokens1;
var invar1 = +this.state.invariant1;
var tokensIn = tokenInput*10**18;
var exchangeFee1 = tokensIn/500;
var tokensSold = tokensIn - exchangeFee1;
var newTokensInMarket1 = tokensInMarket1 + tokensSold;
var newEthInMarket1 = invar1/newTokensInMarket1;
var ethToExchange2 = ethInMarket1 - newEthInMarket1;
// ETH to Token on Exchange 2
var ethInMarket2 = +this.state.marketEth2;
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', function(error, blockInfo) {
localweb3.eth.getBlock('latest', (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},
exchange.methods.ethToTokenSwap(minTokensInt, timeout).send(
{from: this.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 exchangeFee = tokensIn/500;
var tokensSold = tokensIn - exchangeFee;
var newTokensInMarket = tokensInMarket + tokensSold;
var newEthInMarket = invar/newTokensInMarket;
var ethOut = ethInMarket - newEthInMarket;
var adjustedEthOut = ethOut * 0.99;
var buyRate = adjustedEthOut/tokensIn;
this.setState({rate: buyRate,
fee: exchangeFee,
output: adjustedEthOut
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) {})
});
}
// tokenToTokenRate(tokenInput) {
// var ethInMarket = +this.state.marketEth;
// var tokensInMarket = +this.state.marketTokens;
// var invar = +this.state.invariant;
// var ethIn = tokenInput*10**18;
// var exchangeFee = ethIn/500;
// var ethSold = ethIn - exchangeFee;
// var newEthInMarket = ethInMarket + ethSold;
// var newTokensInMarket = invar/newEthInMarket;
// var tokensOut = tokensInMarket - newTokensInMarket;
// var buyRate = tokensOut/ethIn;
// this.setState({rate: buyRate,
// fee: exchangeFee,
// output: tokensOut
// });
// }
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() {
//console.log(localweb3)
......@@ -301,18 +464,18 @@ class App extends Component {
</section>
{this.state.interaction === 'input' ?
<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}
</a>
</section>
: <section className="swap hidden border pa2"></section>}
<section className="links">
<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>
</a>
<a href="" className="link border pa2">
<p className="underline">Add a new token</p>
<p className="underline">Launch a new exchange</p>
<p>+</p>
</a>
</section>
......
src/components/HelperMessages.js
View file @ 97131bd8
......@@ -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 = "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;
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:
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 {
onChange={this.handleChange}
className="select"
options={[
{ value: 'OMG', label: 'OMG', clearableValue: false },
{ value: 'ETH', label: 'ETH', clearableValue: false },
{ value: 'BNT', label: 'BNT', clearableValue: false },
{ value: 'FOM', label: 'FOAM', clearableValue: false },
{ value: 'UNI', label: 'UNI', 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