update to web3@1.0
This commit is contained in:
Hayden Adams
parent
731b31682e
commit
edf709551b
@ -5,11 +5,11 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"ramda": "^0.25.0",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"react": "^16.1.1",
|
||||
"react-dom": "^16.1.1",
|
||||
"react-scripts": "1.0.14",
|
||||
"react-web3": "^0.4.3",
|
||||
"web3": "^1.0.0-beta.23"
|
||||
"web3": "^1.0.0-beta.26"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -6,7 +6,7 @@ library SafeMath {
|
||||
/// @dev Multiplies a times b
|
||||
function mul(uint256 a, uint256 b)
|
||||
internal
|
||||
constant
|
||||
pure
|
||||
returns (uint256)
|
||||
{
|
||||
uint256 c = a * b;
|
||||
@ -17,7 +17,7 @@ library SafeMath {
|
||||
/// @dev Divides a by b
|
||||
function div(uint256 a, uint256 b)
|
||||
internal
|
||||
constant
|
||||
pure
|
||||
returns (uint256)
|
||||
{
|
||||
// assert(b > 0); // Solidity automatically throws when dividing by 0
|
||||
@ -29,7 +29,7 @@ library SafeMath {
|
||||
/// @dev Subtracts a from b
|
||||
function sub(uint256 a, uint256 b)
|
||||
internal
|
||||
constant
|
||||
pure
|
||||
returns (uint256)
|
||||
{
|
||||
assert(b <= a);
|
||||
@ -39,7 +39,7 @@ library SafeMath {
|
||||
/// @dev Adds a to b
|
||||
function add(uint256 a, uint256 b)
|
||||
internal
|
||||
constant
|
||||
pure
|
||||
returns (uint256)
|
||||
{
|
||||
uint256 c = a + b;
|
||||
|
||||
98
src/App.css
98
src/App.css
@ -7,67 +7,6 @@
|
||||
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 {
|
||||
position:fixed;
|
||||
top:3vh;
|
||||
@ -265,38 +204,6 @@
|
||||
/*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 {
|
||||
color: rgb(122, 251, 255);
|
||||
}
|
||||
@ -309,8 +216,3 @@ a:hover {
|
||||
color: rgb(216, 169, 236);
|
||||
text-shadow: 1px 1px 5px #ff69f0;
|
||||
}
|
||||
|
||||
.instructions-link {
|
||||
padding-top: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
187
src/App.js
187
src/App.js
@ -1,15 +1,27 @@
|
||||
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 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 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 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 {
|
||||
@ -18,7 +30,7 @@ class App extends Component {
|
||||
this.state = {ethBalance: 0,
|
||||
tokenBalance: 0,
|
||||
tokenAllowance: null,
|
||||
currentMaskAddress: window.web3.eth.accounts[0],
|
||||
currentMaskAddress: addr,
|
||||
minimumTokensPurchased: null,
|
||||
minimumEthPurchased: null,
|
||||
invariant: null,
|
||||
@ -30,12 +42,9 @@ class App extends Component {
|
||||
ethCost: 0, //token price of eth
|
||||
tokenFee: 0,
|
||||
ethFee: 0,
|
||||
tokenBuyError: '',
|
||||
ethBuyError: '',
|
||||
networkMessage: ''
|
||||
}
|
||||
|
||||
this.buyTokens = this.buyTokens.bind(this);
|
||||
this.onBuyEthInputChange = this.onBuyEthInputChange.bind(this);
|
||||
this.onBuyTokensInputChange = this.onBuyTokensInputChange.bind(this);
|
||||
this.tokenBuyRate = this.tokenBuyRate.bind(this);
|
||||
@ -48,55 +57,58 @@ class App extends Component {
|
||||
this.getInvarient();
|
||||
this.getMarketEth();
|
||||
this.getMarketTokens();
|
||||
this.getEthBalance();
|
||||
this.getTokenBalance();
|
||||
this.getAllowance();
|
||||
}
|
||||
|
||||
|
||||
componentDidMount(){
|
||||
this.tokenBuyRate(1);
|
||||
this.ethBuyRate(0.5);
|
||||
this.getTokenBalance();
|
||||
this.getEthBalance();
|
||||
this.getAllowance();
|
||||
}
|
||||
|
||||
checkNetwork() {
|
||||
var self = this;
|
||||
|
||||
window.web3.version.getNetwork((err, netId) => {
|
||||
localweb3.eth.net.getNetworkType((err, netId) => {
|
||||
switch (netId) {
|
||||
case "1":
|
||||
console.log('This is mainnet')
|
||||
case "main":
|
||||
self.setState({networkMessage: 'MetaMask connected to Ethereum Mainet. Switch to Rinkeby and refresh!'});
|
||||
break
|
||||
case "2":
|
||||
console.log('This is the deprecated Morden test network.')
|
||||
case "morden":
|
||||
self.setState({networkMessage: 'MetaMask connected to Morden testnet. Switch to Rinkeby and refresh!'});
|
||||
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!'})
|
||||
break
|
||||
default:
|
||||
console.log('Connected to ' + netId);
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
approveAllowance(value) {
|
||||
tokenContract.approve(uniswapAddress, value, function(error, balance) {
|
||||
console.log(balance);
|
||||
});
|
||||
tokenContract.methods.approve(uniswapAddress, value).send(
|
||||
{from: this.state.currentMaskAddress},
|
||||
function(err, txHash) {})
|
||||
}
|
||||
|
||||
getMaskAddress() {
|
||||
var address = window.web3.eth.accounts[0];
|
||||
this.setState({currentMaskAddress: address})
|
||||
var self = this;
|
||||
|
||||
localweb3.eth.getAccounts().then(function(result, error){
|
||||
var address = result[0];
|
||||
self.setState({currentMaskAddress: address})
|
||||
});
|
||||
}
|
||||
|
||||
getEthBalance() {
|
||||
var self = this;
|
||||
|
||||
window.web3.eth.getBalance(this.state.currentMaskAddress, function(error, balance) {
|
||||
var ethValue = window.web3.fromWei(balance.toNumber());
|
||||
localweb3.eth.getBalance(this.state.currentMaskAddress, function(error, balance) {
|
||||
var ethValue = (balance/10**18);
|
||||
var roundedValue=Math.round(ethValue*10000)/10000;
|
||||
self.setState({ethBalance: roundedValue});
|
||||
});
|
||||
@ -105,79 +117,77 @@ class App extends Component {
|
||||
getTokenBalance() {
|
||||
var self = this;
|
||||
|
||||
tokenContract.balanceOf(this.state.currentMaskAddress, function(error, balance) {
|
||||
var tokenAmount = (balance.toNumber())/10**6;
|
||||
self.setState({tokenBalance: tokenAmount});
|
||||
// tokenContract.methods.balanceOf(this.state.currentMaskAddress).call().then(function(result, error){
|
||||
// var amount = result/10**6
|
||||
// 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() {
|
||||
var self = this;
|
||||
|
||||
tokenContract.allowance(this.state.currentMaskAddress, uniswapAddress, function(error, balance) {
|
||||
var tokensAllowed = (balance.toNumber())/10**6;
|
||||
self.setState({tokenAllowance: tokensAllowed});
|
||||
});
|
||||
tokenContract.methods.allowance(this.state.currentMaskAddress, uniswapAddress).call().then(function(result, error){
|
||||
var amount = result/10**6
|
||||
self.setState({tokenAllowance: amount});
|
||||
})
|
||||
}
|
||||
|
||||
getInvarient() {
|
||||
var self = this;
|
||||
|
||||
uniswapContract.invariant.call(function(err, value){
|
||||
var number = value.toNumber();
|
||||
//console.log("invariant: " + number/(10**24));
|
||||
self.setState({invariant: number});
|
||||
});
|
||||
uniswapContract.methods.invariant().call().then(function(result, error){
|
||||
self.setState({invariant: result});
|
||||
})
|
||||
}
|
||||
|
||||
getMarketEth() {
|
||||
var self = this
|
||||
|
||||
uniswapContract.totalEthQuantity.call(function(err, value){
|
||||
var number = value.toNumber();
|
||||
//console.log("marketEthQuantity: " + number/(10**18));
|
||||
self.setState({marketEth: number});
|
||||
});
|
||||
uniswapContract.methods.totalEthQuantity().call().then(function(result, error){
|
||||
self.setState({marketEth: result});
|
||||
})
|
||||
}
|
||||
|
||||
getMarketTokens() {
|
||||
var self = this
|
||||
|
||||
uniswapContract.totalTokenQuantity.call(function(err, value){
|
||||
var number = value.toNumber();
|
||||
//console.log("marketTokenQuantity: " + number/(10**6));
|
||||
self.setState({marketTokens: number});
|
||||
});
|
||||
uniswapContract.methods.totalTokenQuantity().call().then(function(result, error){
|
||||
self.setState({marketTokens: result});
|
||||
})
|
||||
}
|
||||
|
||||
buyTokens() {
|
||||
var self = this;
|
||||
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 maxTime = time + 300; //current block time + 5mins
|
||||
|
||||
uniswapContract.ethToTokens.sendTransaction(minTokens, maxTime,
|
||||
{from: window.web3.eth.coinbase, value:window.web3.toWei(self.state.tokenCost,'ether') },
|
||||
function(err, txHash) {}
|
||||
);
|
||||
uniswapContract.methods.ethToTokens(minTokens, maxTime).send(
|
||||
{from: self.state.currentMaskAddress, value: self.state.tokenCost*10**18},
|
||||
function(err, txHash) {})
|
||||
});
|
||||
}
|
||||
|
||||
sellTokens() {
|
||||
//purchase will go through if the amount of ETH is received is within 10%
|
||||
//this is will be changed by full release, and will be a selectable range
|
||||
var minEth = this.state.minimumEthPurchased*0.9;
|
||||
buyEth() {
|
||||
var self = this;
|
||||
var minEth = this.state.minimumEthPurchased;
|
||||
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 maxTime = time + 300; //current block time + 5mins
|
||||
|
||||
uniswapContract.tokenToEth.sendTransaction(tokensSold, minEth, maxTime, {
|
||||
from: window.web3.eth.coinbase}, function(err, txHash) {}
|
||||
);
|
||||
uniswapContract.methods.tokenToEth(tokensSold, minEth, maxTime).send(
|
||||
{from: self.state.currentMaskAddress},
|
||||
function(err, txHash) {})
|
||||
});
|
||||
}
|
||||
|
||||
@ -186,6 +196,7 @@ class App extends Component {
|
||||
if(buyTokensInput && buyTokensInput !== 0){
|
||||
this.setState({ minimumTokensPurchased: buyTokensInput });
|
||||
this.tokenBuyRate(buyTokensInput);
|
||||
this.getTokenBalance();
|
||||
}
|
||||
}
|
||||
|
||||
@ -214,8 +225,11 @@ class App extends Component {
|
||||
var fee = (newTotalEth - totalEth)/500;
|
||||
var ethRequired = newTotalEth - totalEth + fee;
|
||||
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,
|
||||
tokenCost: ethRequired,
|
||||
tokenCost: adjustedTokenCost,
|
||||
tokenFee: fee
|
||||
});
|
||||
}
|
||||
@ -237,38 +251,22 @@ class App extends Component {
|
||||
var newTotalTokens = invar/(totalEth-ethPurchased);
|
||||
var fee = (newTotalTokens - totalTokens)/500;
|
||||
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,
|
||||
ethCost: tokensRequired,
|
||||
ethCost: adjustedEthCost,
|
||||
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() {
|
||||
return (
|
||||
<div className="App">
|
||||
<div className="titled-container">
|
||||
<div className="title">
|
||||
<div className="front">UNISWAP</div>
|
||||
<div className="back">UNISWAP</div>
|
||||
</div>
|
||||
</div>
|
||||
<Title />
|
||||
<div className="noICO">UNI is an ERC20 test token. This is not an ICO.</div>
|
||||
<img src={unicorn} className="unicorn" alt="unicorn"/>
|
||||
<img src={ethLogo} className="ethLogo" alt = "ethLogo"/>
|
||||
@ -280,24 +278,7 @@ class App extends Component {
|
||||
|
||||
<br/>
|
||||
</div>
|
||||
<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/>
|
||||
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
|
||||
<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/>
|
||||
Email: hayden@uniswap.io
|
||||
<span className="instructions-link"><a href= "https://github.com/haydenadams/uniswap">GitHub: https://github.com/haydenadams/uniswap<br/></a></span>
|
||||
ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078<br/><br/>
|
||||
</div>
|
||||
</div>
|
||||
<Instructions />
|
||||
<div className="Approval">
|
||||
<button className="approveButton" onClick={() => {this.approveAllowance(20000*10**6) }}>Approve</button><br/><br/>
|
||||
{/*Tokens approved: {this.state.tokenAllowance} */}
|
||||
@ -322,7 +303,7 @@ class App extends Component {
|
||||
//value={this.state.value}
|
||||
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">
|
||||
Rate : {this.state.ethBuyRate.toFixed(4)} ETH/UNI<br/>
|
||||
Cost : {this.state.ethCost.toFixed(5)} UNI<br/>
|
||||
|
||||
36
src/components/menus/Instructions.css
Normal file
36
src/components/menus/Instructions.css
Normal file
@ -0,0 +1,36 @@
|
||||
.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;
|
||||
}
|
||||
31
src/components/menus/Instructions.js
Normal file
31
src/components/menus/Instructions.js
Normal file
@ -0,0 +1,31 @@
|
||||
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/>
|
||||
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
|
||||
<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/>
|
||||
Email: hayden@uniswap.io
|
||||
<span className="instructions-link"><a href= "https://github.com/haydenadams/uniswap">GitHub: https://github.com/haydenadams/uniswap<br/></a></span>
|
||||
ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078<br/><br/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Instructions;
|
||||
60
src/components/misc/Title.css
Normal file
60
src/components/misc/Title.css
Normal file
@ -0,0 +1,60 @@
|
||||
.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);
|
||||
}
|
||||
19
src/components/misc/Title.js
Normal file
19
src/components/misc/Title.js
Normal file
@ -0,0 +1,19 @@
|
||||
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;
|
||||
17
src/index.js
17
src/index.js
@ -1,14 +1,17 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Web3Provider } from 'react-web3';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
import { Web3Provider } from 'react-web3';
|
||||
|
||||
|
||||
|
||||
{/*
|
||||
ReactDOM.render(
|
||||
<Web3Provider>
|
||||
<App />
|
||||
</Web3Provider>, document.getElementById('root'));
|
||||
registerServiceWorker();
|
||||
<App />
|
||||
</Web3Provider>, document.getElementById('root')
|
||||
);
|
||||
*/}
|
||||
|
||||
ReactDOM.render(
|
||||
<App />, document.getElementById('root')
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user