Commit edf70955 authored by Hayden Adams's avatar Hayden Adams

update to web3@1.0

parent 731b3168
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"ramda": "^0.25.0", "ramda": "^0.25.0",
"react": "^16.0.0", "react": "^16.1.1",
"react-dom": "^16.0.0", "react-dom": "^16.1.1",
"react-scripts": "1.0.14", "react-scripts": "1.0.14",
"react-web3": "^0.4.3", "react-web3": "^0.4.3",
"web3": "^1.0.0-beta.23" "web3": "^1.0.0-beta.26"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
......
...@@ -6,7 +6,7 @@ library SafeMath { ...@@ -6,7 +6,7 @@ library SafeMath {
/// @dev Multiplies a times b /// @dev Multiplies a times b
function mul(uint256 a, uint256 b) function mul(uint256 a, uint256 b)
internal internal
constant pure
returns (uint256) returns (uint256)
{ {
uint256 c = a * b; uint256 c = a * b;
...@@ -17,7 +17,7 @@ library SafeMath { ...@@ -17,7 +17,7 @@ library SafeMath {
/// @dev Divides a by b /// @dev Divides a by b
function div(uint256 a, uint256 b) function div(uint256 a, uint256 b)
internal internal
constant pure
returns (uint256) returns (uint256)
{ {
// assert(b > 0); // Solidity automatically throws when dividing by 0 // assert(b > 0); // Solidity automatically throws when dividing by 0
...@@ -29,7 +29,7 @@ library SafeMath { ...@@ -29,7 +29,7 @@ library SafeMath {
/// @dev Subtracts a from b /// @dev Subtracts a from b
function sub(uint256 a, uint256 b) function sub(uint256 a, uint256 b)
internal internal
constant pure
returns (uint256) returns (uint256)
{ {
assert(b <= a); assert(b <= a);
...@@ -39,7 +39,7 @@ library SafeMath { ...@@ -39,7 +39,7 @@ library SafeMath {
/// @dev Adds a to b /// @dev Adds a to b
function add(uint256 a, uint256 b) function add(uint256 a, uint256 b)
internal internal
constant pure
returns (uint256) returns (uint256)
{ {
uint256 c = a + b; uint256 c = a + b;
......
...@@ -7,67 +7,6 @@ ...@@ -7,67 +7,6 @@
font-family: Optima, sans-serif; font-family: Optima, sans-serif;
} }
.title {
position: fixed;
font-size: 10vh;
margin-top: 1vh;
margin-left: 2vh;
float: left;
text-shadow: 3px 3px 10px #f29ae1;
color: rgb(220, 173, 247);
font-weight: bold;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgb(180, 81, 179);
}.title:hover{
color: rgb(122, 251, 255);
text-shadow: 3px 3px 10px #2daae0;
font-weight: bold;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: rgb(22, 177, 210);
}
/* entire container, keeps perspective */
.titled-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.titled-container:hover .title, .titled-container.hover .title {
transform: rotateX(180deg);
}
.titled-container, .front, .back {
width: 1vh;
height: 0.1vh;
}
/* flip speed goes here */
.title {
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateX(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateX(180deg);
}
.noICO { .noICO {
position:fixed; position:fixed;
top:3vh; top:3vh;
...@@ -265,38 +204,6 @@ ...@@ -265,38 +204,6 @@
/*border-color: rgb(122, 251, 255);*/ /*border-color: rgb(122, 251, 255);*/
} }
.instructions {
position: fixed;
background-color: rgba(0,0,0,0.4);
bottom: 1vh;
border-radius: 15px;
border: 1px solid rgb(180, 81, 179);
color: rgb(122, 251, 255);
text-shadow: 2px 2px 10px #2daae0;
margin-left: 35vw;
margin-right: 1vw;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
} .instructions:hover{
color: rgb(216, 169, 236);
text-shadow: 1px 1px 5px #ff69f0;
}
.instructions-title {
text-align: left;
padding-left: 40px;
padding-top: 10px;
font-size: 22px;
}
.instructions-text {
font-size: 15px;
padding-top: 10px;
text-align: left;
padding-left: 25px;
padding-right: 15px;
}
a:visited { a:visited {
color: rgb(122, 251, 255); color: rgb(122, 251, 255);
} }
...@@ -309,8 +216,3 @@ a:hover { ...@@ -309,8 +216,3 @@ a:hover {
color: rgb(216, 169, 236); color: rgb(216, 169, 236);
text-shadow: 1px 1px 5px #ff69f0; text-shadow: 1px 1px 5px #ff69f0;
} }
.instructions-link {
padding-top: 14px;
text-align: left;
}
import React, { Component } from 'react'; import React, { Component } from 'react';
import Web3 from 'web3';
import './App.css';
import Title from './components/misc/Title';
import Instructions from './components/menus/Instructions';
import unicorn from './images/unicornNoBackground.png'; import unicorn from './images/unicornNoBackground.png';
import ethLogo from './images/ethLogo.png'; import ethLogo from './images/ethLogo.png';
import './App.css';
const localweb3 = new Web3(window.web3.currentProvider);
//console.log(localweb3);
console.log(localweb3);
var uniswapABI = [{"constant":false,"inputs":[{"name":"tokenAmount","type":"uint256"}],"name":"ownerTokenWithdraw","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"tokenAmount","type":"uint256"}],"name":"ownerTokenDeposit","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"ethAmount","type":"uint256"}],"name":"ownerEthWithdraw","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"sellQuantity","type":"uint256"},{"name":"minimumEth","type":"uint256"},{"name":"timeout","type":"uint256"}],"name":"tokenToEth","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalTokenQuantity","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"minimumTokens","type":"uint256"},{"name":"timeout","type":"uint256"}],"name":"ethToTokens","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":false,"inputs":[{"name":"initialTokenQuantity","type":"uint256"}],"name":"initiateUniswap","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"totalEthQuantity","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"tokenAddress","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"invariant","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"ownerEthDeposit","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":false,"inputs":[{"name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[{"name":"_tokenAddress","type":"address"}],"payable":true,"stateMutability":"payable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"buyer","type":"address"},{"indexed":false,"name":"tokensPurchased","type":"uint256"},{"indexed":false,"name":"ethSpent","type":"uint256"}],"name":"TokenPurchase","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"buyer","type":"address"},{"indexed":false,"name":"ethPurchased","type":"uint256"},{"indexed":false,"name":"tokensSpent","type":"uint256"}],"name":"EthPurchase","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"previousOwner","type":"address"},{"indexed":true,"name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"}] var uniswapABI = [{"constant":false,"inputs":[{"name":"tokenAmount","type":"uint256"}],"name":"ownerTokenWithdraw","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"tokenAmount","type":"uint256"}],"name":"ownerTokenDeposit","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"ethAmount","type":"uint256"}],"name":"ownerEthWithdraw","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"sellQuantity","type":"uint256"},{"name":"minimumEth","type":"uint256"},{"name":"timeout","type":"uint256"}],"name":"tokenToEth","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalTokenQuantity","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"minimumTokens","type":"uint256"},{"name":"timeout","type":"uint256"}],"name":"ethToTokens","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":false,"inputs":[{"name":"initialTokenQuantity","type":"uint256"}],"name":"initiateUniswap","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"totalEthQuantity","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"tokenAddress","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"invariant","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"ownerEthDeposit","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":false,"inputs":[{"name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[{"name":"_tokenAddress","type":"address"}],"payable":true,"stateMutability":"payable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"buyer","type":"address"},{"indexed":false,"name":"tokensPurchased","type":"uint256"},{"indexed":false,"name":"ethSpent","type":"uint256"}],"name":"TokenPurchase","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"buyer","type":"address"},{"indexed":false,"name":"ethPurchased","type":"uint256"},{"indexed":false,"name":"tokensSpent","type":"uint256"}],"name":"EthPurchase","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"previousOwner","type":"address"},{"indexed":true,"name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"}]
var uniswapAddress = '0x60e5f3cd0381c501971b6fbbddaa49cfd58a4fa1'; var uniswapAddress = '0x60e5f3cd0381c501971b6fbbddaa49cfd58a4fa1';
var uniswapContract = window.web3.eth.contract(uniswapABI).at(uniswapAddress); var uniswapContract = new localweb3.eth.Contract(uniswapABI, uniswapAddress);
var tokenABI = [{"constant":true,"inputs":[],"name":"mintingFinished","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_amount","type":"uint256"}],"name":"mint","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_subtractedValue","type":"uint256"}],"name":"decreaseApproval","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"}],"name":"balanceOf","outputs":[{"name":"balance","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"finishMinting","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transfer","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_addedValue","type":"uint256"}],"name":"increaseApproval","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_spender","type":"address"}],"name":"allowance","outputs":[{"name":"remaining","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"amount","type":"uint256"}],"name":"Mint","type":"event"},{"anonymous":false,"inputs":[],"name":"MintFinished","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"previousOwner","type":"address"},{"indexed":true,"name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"}] var tokenABI = [{"constant":true,"inputs":[],"name":"mintingFinished","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_amount","type":"uint256"}],"name":"mint","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_subtractedValue","type":"uint256"}],"name":"decreaseApproval","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"}],"name":"balanceOf","outputs":[{"name":"balance","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"finishMinting","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transfer","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_addedValue","type":"uint256"}],"name":"increaseApproval","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_spender","type":"address"}],"name":"allowance","outputs":[{"name":"remaining","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"amount","type":"uint256"}],"name":"Mint","type":"event"},{"anonymous":false,"inputs":[],"name":"MintFinished","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"previousOwner","type":"address"},{"indexed":true,"name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"}]
var tokenAddress = '0xca9901076d02f89794262869aad1340bd45d8489'; var tokenAddress = '0xca9901076d02f89794262869aad1340bd45d8489';
var tokenContract = window.web3.eth.contract(tokenABI).at(tokenAddress); var tokenContract = new localweb3.eth.Contract(tokenABI, tokenAddress);
var addr = "0x6D9ba242E3D6aE3f909c1cCFF20ed4fcF3482EFe";
localweb3.eth.getAccounts().then(function(result, error){
addr = result[0];
});
class App extends Component { class App extends Component {
...@@ -18,7 +30,7 @@ class App extends Component { ...@@ -18,7 +30,7 @@ class App extends Component {
this.state = {ethBalance: 0, this.state = {ethBalance: 0,
tokenBalance: 0, tokenBalance: 0,
tokenAllowance: null, tokenAllowance: null,
currentMaskAddress: window.web3.eth.accounts[0], currentMaskAddress: addr,
minimumTokensPurchased: null, minimumTokensPurchased: null,
minimumEthPurchased: null, minimumEthPurchased: null,
invariant: null, invariant: null,
...@@ -30,12 +42,9 @@ class App extends Component { ...@@ -30,12 +42,9 @@ class App extends Component {
ethCost: 0, //token price of eth ethCost: 0, //token price of eth
tokenFee: 0, tokenFee: 0,
ethFee: 0, ethFee: 0,
tokenBuyError: '',
ethBuyError: '',
networkMessage: '' networkMessage: ''
} }
this.buyTokens = this.buyTokens.bind(this);
this.onBuyEthInputChange = this.onBuyEthInputChange.bind(this); this.onBuyEthInputChange = this.onBuyEthInputChange.bind(this);
this.onBuyTokensInputChange = this.onBuyTokensInputChange.bind(this); this.onBuyTokensInputChange = this.onBuyTokensInputChange.bind(this);
this.tokenBuyRate = this.tokenBuyRate.bind(this); this.tokenBuyRate = this.tokenBuyRate.bind(this);
...@@ -48,55 +57,58 @@ class App extends Component { ...@@ -48,55 +57,58 @@ class App extends Component {
this.getInvarient(); this.getInvarient();
this.getMarketEth(); this.getMarketEth();
this.getMarketTokens(); this.getMarketTokens();
this.getEthBalance();
this.getTokenBalance();
this.getAllowance();
} }
componentDidMount(){ componentDidMount(){
this.tokenBuyRate(1); this.getTokenBalance();
this.ethBuyRate(0.5); this.getEthBalance();
this.getAllowance();
} }
checkNetwork() { checkNetwork() {
var self = this; var self = this;
window.web3.version.getNetwork((err, netId) => { localweb3.eth.net.getNetworkType((err, netId) => {
switch (netId) { switch (netId) {
case "1": case "main":
console.log('This is mainnet')
self.setState({networkMessage: 'MetaMask connected to Ethereum Mainet. Switch to Rinkeby and refresh!'}); self.setState({networkMessage: 'MetaMask connected to Ethereum Mainet. Switch to Rinkeby and refresh!'});
break break
case "2": case "morden":
console.log('This is the deprecated Morden test network.')
self.setState({networkMessage: 'MetaMask connected to Morden testnet. Switch to Rinkeby and refresh!'}); self.setState({networkMessage: 'MetaMask connected to Morden testnet. Switch to Rinkeby and refresh!'});
break break
case "3": case "kovan":
self.setState({networkMessage: 'MetaMask connected to Kovan testnet. Switch to Rinkeby and refresh!'});
break
case "ropsten":
self.setState({networkMessage: 'MetaMask connected to Ropstein testnet. Switch to Rinkeby and refresh!'}) self.setState({networkMessage: 'MetaMask connected to Ropstein testnet. Switch to Rinkeby and refresh!'})
break break
default: default:
console.log('Connected to ' + netId);
} }
}) })
} }
approveAllowance(value) { approveAllowance(value) {
tokenContract.approve(uniswapAddress, value, function(error, balance) { tokenContract.methods.approve(uniswapAddress, value).send(
console.log(balance); {from: this.state.currentMaskAddress},
}); function(err, txHash) {})
} }
getMaskAddress() { getMaskAddress() {
var address = window.web3.eth.accounts[0]; var self = this;
this.setState({currentMaskAddress: address})
localweb3.eth.getAccounts().then(function(result, error){
var address = result[0];
self.setState({currentMaskAddress: address})
});
} }
getEthBalance() { getEthBalance() {
var self = this; var self = this;
window.web3.eth.getBalance(this.state.currentMaskAddress, function(error, balance) { localweb3.eth.getBalance(this.state.currentMaskAddress, function(error, balance) {
var ethValue = window.web3.fromWei(balance.toNumber()); var ethValue = (balance/10**18);
var roundedValue=Math.round(ethValue*10000)/10000; var roundedValue=Math.round(ethValue*10000)/10000;
self.setState({ethBalance: roundedValue}); self.setState({ethBalance: roundedValue});
}); });
...@@ -105,79 +117,77 @@ class App extends Component { ...@@ -105,79 +117,77 @@ class App extends Component {
getTokenBalance() { getTokenBalance() {
var self = this; var self = this;
tokenContract.balanceOf(this.state.currentMaskAddress, function(error, balance) { // tokenContract.methods.balanceOf(this.state.currentMaskAddress).call().then(function(result, error){
var tokenAmount = (balance.toNumber())/10**6; // var amount = result/10**6
self.setState({tokenBalance: tokenAmount}); // console.log(result);
// self.setState({tokenBalance: amount});
// })
tokenContract.methods.balanceOf(this.state.currentMaskAddress).call(function(error, balance) {
var amount = (balance/10**6);
self.setState({tokenBalance: amount});
}); });
} }
getAllowance() { getAllowance() {
var self = this; var self = this;
tokenContract.allowance(this.state.currentMaskAddress, uniswapAddress, function(error, balance) { tokenContract.methods.allowance(this.state.currentMaskAddress, uniswapAddress).call().then(function(result, error){
var tokensAllowed = (balance.toNumber())/10**6; var amount = result/10**6
self.setState({tokenAllowance: tokensAllowed}); self.setState({tokenAllowance: amount});
}); })
} }
getInvarient() { getInvarient() {
var self = this; var self = this;
uniswapContract.invariant.call(function(err, value){ uniswapContract.methods.invariant().call().then(function(result, error){
var number = value.toNumber(); self.setState({invariant: result});
//console.log("invariant: " + number/(10**24)); })
self.setState({invariant: number});
});
} }
getMarketEth() { getMarketEth() {
var self = this var self = this
uniswapContract.totalEthQuantity.call(function(err, value){ uniswapContract.methods.totalEthQuantity().call().then(function(result, error){
var number = value.toNumber(); self.setState({marketEth: result});
//console.log("marketEthQuantity: " + number/(10**18)); })
self.setState({marketEth: number});
});
} }
getMarketTokens() { getMarketTokens() {
var self = this var self = this
uniswapContract.totalTokenQuantity.call(function(err, value){ uniswapContract.methods.totalTokenQuantity().call().then(function(result, error){
var number = value.toNumber(); self.setState({marketTokens: result});
//console.log("marketTokenQuantity: " + number/(10**6)); })
self.setState({marketTokens: number});
});
} }
buyTokens() { buyTokens() {
var self = this; var self = this;
var minTokens = this.state.minimumTokensPurchased var minTokens = this.state.minimumTokensPurchased
window.web3.eth.getBlock('latest', function(error, blockInfo) { localweb3.eth.getBlock('latest', function(error, blockInfo) {
var time = blockInfo.timestamp; var time = blockInfo.timestamp;
var maxTime = time + 300; //current block time + 5mins var maxTime = time + 300; //current block time + 5mins
uniswapContract.ethToTokens.sendTransaction(minTokens, maxTime, uniswapContract.methods.ethToTokens(minTokens, maxTime).send(
{from: window.web3.eth.coinbase, value:window.web3.toWei(self.state.tokenCost,'ether') }, {from: self.state.currentMaskAddress, value: self.state.tokenCost*10**18},
function(err, txHash) {} function(err, txHash) {})
);
}); });
} }
sellTokens() { buyEth() {
//purchase will go through if the amount of ETH is received is within 10% var self = this;
//this is will be changed by full release, and will be a selectable range var minEth = this.state.minimumEthPurchased;
var minEth = this.state.minimumEthPurchased*0.9;
var tokensSold = this.state.ethCost*10**6; var tokensSold = this.state.ethCost*10**6;
window.web3.eth.getBlock('latest', function(error, blockInfo) { localweb3.eth.getBlock('latest', function(error, blockInfo) {
var time = blockInfo.timestamp; var time = blockInfo.timestamp;
var maxTime = time + 300; //current block time + 5mins var maxTime = time + 300; //current block time + 5mins
uniswapContract.tokenToEth.sendTransaction(tokensSold, minEth, maxTime, { uniswapContract.methods.tokenToEth(tokensSold, minEth, maxTime).send(
from: window.web3.eth.coinbase}, function(err, txHash) {} {from: self.state.currentMaskAddress},
); function(err, txHash) {})
}); });
} }
...@@ -186,6 +196,7 @@ class App extends Component { ...@@ -186,6 +196,7 @@ class App extends Component {
if(buyTokensInput && buyTokensInput !== 0){ if(buyTokensInput && buyTokensInput !== 0){
this.setState({ minimumTokensPurchased: buyTokensInput }); this.setState({ minimumTokensPurchased: buyTokensInput });
this.tokenBuyRate(buyTokensInput); this.tokenBuyRate(buyTokensInput);
this.getTokenBalance();
} }
} }
...@@ -214,8 +225,11 @@ class App extends Component { ...@@ -214,8 +225,11 @@ class App extends Component {
var fee = (newTotalEth - totalEth)/500; var fee = (newTotalEth - totalEth)/500;
var ethRequired = newTotalEth - totalEth + fee; var ethRequired = newTotalEth - totalEth + fee;
var rate = tokensPurchased/ethRequired; var rate = tokensPurchased/ethRequired;
//add 1% to cost displayed, some people will get more tokens than purchased
//less TX's will fail the minTokens smart contract check
var adjustedTokenCost = ethRequired*1.01;
this.setState({tokenBuyRate: rate, this.setState({tokenBuyRate: rate,
tokenCost: ethRequired, tokenCost: adjustedTokenCost,
tokenFee: fee tokenFee: fee
}); });
} }
...@@ -237,38 +251,22 @@ class App extends Component { ...@@ -237,38 +251,22 @@ class App extends Component {
var newTotalTokens = invar/(totalEth-ethPurchased); var newTotalTokens = invar/(totalEth-ethPurchased);
var fee = (newTotalTokens - totalTokens)/500; var fee = (newTotalTokens - totalTokens)/500;
var tokensRequired = newTotalTokens - totalTokens + fee; var tokensRequired = newTotalTokens - totalTokens + fee;
var rate = ethPurchased/tokensRequired; var rate = ethPurchased/(tokensRequired);
//add 1% to cost displayed, some people will get more eth than purchased
//less TX's will fail the minEth smart contract check
var adjustedEthCost = tokensRequired*1.01;
this.setState({ethBuyRate: rate, this.setState({ethBuyRate: rate,
ethCost: tokensRequired, ethCost: adjustedEthCost,
ethFee: fee ethFee: fee
}); });
} }
} }
/* listenForClicks(tokenContract) {
var button = document.querySelector('button.transferFunds')
button.addEventListener('click', function() {
tokenContract.approve({address: uniswapAddress}, { from: addr })
.then(function (txHash) {
console.log('Transaction sent')
console.dir(txHash)
waitForTxToBeMined(txHash)
})
.catch(console.error)
})
}*/
render() { render() {
return ( return (
<div className="App"> <div className="App">
<div className="titled-container"> <Title />
<div className="title">
<div className="front">UNISWAP</div>
<div className="back">UNISWAP</div>
</div>
</div>
<div className="noICO">UNI is an ERC20 test token. This is not an ICO.</div> <div className="noICO">UNI is an ERC20 test token. This is not an ICO.</div>
<img src={unicorn} className="unicorn" alt="unicorn"/> <img src={unicorn} className="unicorn" alt="unicorn"/>
<img src={ethLogo} className="ethLogo" alt = "ethLogo"/> <img src={ethLogo} className="ethLogo" alt = "ethLogo"/>
...@@ -280,24 +278,7 @@ class App extends Component { ...@@ -280,24 +278,7 @@ class App extends Component {
&nbsp;&nbsp; &nbsp;&nbsp;
<br/> <br/>
</div> </div>
<div className="instructions"> <Instructions />
<div className="instructions-title">Instructions and Stuff</div>
<div className="instructions-text">
1) Add UNI test token address to MetaMask (first time only)<br/>
&nbsp;&nbsp;&nbsp;&nbsp;Token Address: <i>{tokenAddress}</i><br/><br/>
2) Check that MetaMask is connected to the Rinkeby Testnet<br/><br/>
3) You can now buy UNI test tokens with ETH! Visit the&nbsp;
<span className="instructions-link"><a href= "https://faucet.rinkeby.io/">Rinkeby faucet</a></span> to aquire testnet ETH <br/><br/>
4) To buy ETH with UNI you must approve the Uniswap smart contract to transfer UNI tokens on your behalf. Click the "Approve" button now! (first time only)<br/><br/>
5) Rate is variable based on token availiblity, enter number of tokens to see rate and cost.<br/><br/>
6) This is a proof-of-concept for a decentralized Market Maker exchange. Stay tuned for token-to-token pairs, the ability to become a Market Creator and collect fees,
and a Mainet launch! :) <br/> <br/>
7) This demo was hastily programmed by a single developer <i>(Hi, my name is Hayden!)</i>. Please reach out to me with any questions, comments, complaints, or bug reports.<br/><br/>
&nbsp;&nbsp;Email: hayden@uniswap.io &nbsp;&nbsp;
<span className="instructions-link"><a href= "https://github.com/haydenadams/uniswap">GitHub: https://github.com/haydenadams/uniswap<br/></a></span>
&nbsp;&nbsp;ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078<br/><br/>
</div>
</div>
<div className="Approval"> <div className="Approval">
<button className="approveButton" onClick={() => {this.approveAllowance(20000*10**6) }}>Approve</button><br/><br/> <button className="approveButton" onClick={() => {this.approveAllowance(20000*10**6) }}>Approve</button><br/><br/>
{/*Tokens approved: {this.state.tokenAllowance}&nbsp;&nbsp;&nbsp;*/} {/*Tokens approved: {this.state.tokenAllowance}&nbsp;&nbsp;&nbsp;*/}
...@@ -322,7 +303,7 @@ class App extends Component { ...@@ -322,7 +303,7 @@ class App extends Component {
//value={this.state.value} //value={this.state.value}
onChange={this.onBuyEthInputChange} onChange={this.onBuyEthInputChange}
/> />
<input className="exchange-buyEthInputButton" type="exchange-button" defaultValue="Buy ETH" readOnly="readOnly" onClick={() => {this.sellTokens() }}/> <input className="exchange-buyEthInputButton" type="exchange-button" defaultValue="Buy ETH" readOnly="readOnly" onClick={() => {this.buyEth() }}/>
<p className="pinkText"> <p className="pinkText">
&nbsp;&nbsp;Rate :&nbsp;&nbsp;&nbsp;{this.state.ethBuyRate.toFixed(4)} ETH/UNI<br/> &nbsp;&nbsp;Rate :&nbsp;&nbsp;&nbsp;{this.state.ethBuyRate.toFixed(4)} ETH/UNI<br/>
&nbsp;&nbsp;Cost :&nbsp;&nbsp;&nbsp;{this.state.ethCost.toFixed(5)} UNI<br/> &nbsp;&nbsp;Cost :&nbsp;&nbsp;&nbsp;{this.state.ethCost.toFixed(5)} UNI<br/>
......
.instructions {
position: fixed;
background-color: rgba(0,0,0,0.4);
bottom: 1vh;
border-radius: 15px;
border: 1px solid rgb(180, 81, 179);
color: rgb(122, 251, 255);
text-shadow: 2px 2px 10px #2daae0;
margin-left: 35vw;
margin-right: 1vw;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
} .instructions:hover{
color: rgb(216, 169, 236);
text-shadow: 1px 1px 5px #ff69f0;
}
.instructions-title {
text-align: left;
padding-left: 40px;
padding-top: 10px;
font-size: 22px;
}
.instructions-text {
font-size: 15px;
padding-top: 10px;
text-align: left;
padding-left: 25px;
padding-right: 15px;
}
.instructions-link {
padding-top: 14px;
text-align: left;
}
import React, { Component } from 'react';
import './Instructions.css';
class Instructions extends Component{
render() {
return (
<div className="instructions">
<div className="instructions-title">Instructions and Stuff</div>
<div className="instructions-text">
1) Add UNI test token address to MetaMask (first time only)<br/>
&nbsp;&nbsp;&nbsp;&nbsp;Token Address: <i>0xca9901076d02f89794262869aad1340bd45d8489</i><br/><br/>
2) Check that MetaMask is connected to the Rinkeby Testnet<br/><br/>
3) You can now buy UNI test tokens with ETH! Visit the&nbsp;
<span className="instructions-link"><a href= "https://faucet.rinkeby.io/">Rinkeby faucet</a></span> to aquire testnet ETH <br/><br/>
4) To buy ETH with UNI you must approve the Uniswap smart contract to transfer UNI tokens on your behalf. Click the "Approve" button now! (first time only)<br/><br/>
5) Rate is variable based on token availiblity, enter number of tokens to see rate and cost.<br/><br/>
6) This is a proof-of-concept for a decentralized Market Maker exchange. Stay tuned for token-to-token pairs, the ability to become a Market Creator and collect fees,
and a Mainet launch! :) <br/> <br/>
7) This demo was hastily programmed by a single developer <i>(Hi, my name is Hayden!)</i>. Please reach out to me with any questions, comments, complaints, or bug reports.<br/><br/>
&nbsp;&nbsp;Email: hayden@uniswap.io &nbsp;&nbsp;
<span className="instructions-link"><a href= "https://github.com/haydenadams/uniswap">GitHub: https://github.com/haydenadams/uniswap<br/></a></span>
&nbsp;&nbsp;ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078<br/><br/>
</div>
</div>
);
}
}
export default Instructions;
.title {
position: fixed;
font-size: 10vh;
margin-top: 1vh;
margin-left: 2vh;
float: left;
text-shadow: 3px 3px 10px #f29ae1;
color: rgb(220, 173, 247);
font-weight: bold;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgb(180, 81, 179);
}.title:hover{
color: rgb(122, 251, 255);
text-shadow: 3px 3px 10px #2daae0;
font-weight: bold;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: rgb(22, 177, 210);
}
/* entire container, keeps perspective */
.titled-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.titled-container:hover .title, .titled-container.hover .title {
transform: rotateX(180deg);
}
.titled-container, .front, .back {
width: 1vh;
height: 0.1vh;
}
/* flip speed goes here */
.title {
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateX(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateX(180deg);
}
import React, { Component } from 'react';
import './Title.css';
class Title extends Component{
render() {
return (
<div className="titled-container">
<div className="title">
<div className="front">UNISWAP</div>
<div className="back">UNISWAP</div>
</div>
</div>
);
}
}
export default Title;
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Web3Provider } from 'react-web3';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Web3Provider } from 'react-web3';
{/*
ReactDOM.render( ReactDOM.render(
<Web3Provider> <Web3Provider>
<App /> <App />
</Web3Provider>, document.getElementById('root')); </Web3Provider>, document.getElementById('root')
registerServiceWorker(); );
*/}
ReactDOM.render(
<App />, document.getElementById('root')
);
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