Skip to content

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

display user balances, minor changes

parent 93ab10c9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 355 additions and 221 deletions
package-lock.json
View file @ 72b96877
This diff is collapsed.
package.json
View file @ 72b96877
......@@ -17,7 +17,7 @@
"redux": "^3.7.2",
"redux-subscriber": "^1.1.0",
"redux-thunk": "^2.2.0",
"web3": "1.0.0-beta.22"
"web3": "1.0.0-beta.33"
},
"scripts": {
"start": "react-scripts start",
......
src/App.js
View file @ 72b96877
import React, { Component } from 'react';
// web3
// web3
import Web3 from 'web3';
import { exchangeABI } from './helpers/exchangeABI.js'
import { tokenABI } from './helpers/tokenABI.js'
......@@ -50,9 +50,9 @@ class App extends Component {
}
}
// TODO: get rid of redundant localweb3 === 'undefined' checks in componentWill/DidMount
// STATUS: kind of done
// STATUS: kind of done
componentWillMount() {
console.log('props', this.props);
//console.log('props', this.props);
if(localweb3 === 'undefined') {
this.props.setWeb3ConnectionStatus(false);
} else {
......@@ -62,7 +62,7 @@ class App extends Component {
uniAdded: cookie.load('uniAdded') || false,
transactions: cookie.load('transactions') || [],
})
// we're working with asynchronous redux
// we're working with asynchronous redux
this.props.initializeGlobalWeb3(localweb3)
this.getInfoFirstTime();
}
......@@ -73,7 +73,7 @@ class App extends Component {
// eslint-disable-next-line no-unused-vars
const web3Subscriber = subscribe('web3Store.connected', state => {
if(state.web3Store.connected === true && !state.web3Store.metamaskLocked) {
console.log('successfully connected to metamask', state.web3Store.currentMaskAddress);
//console.log('successfully connected to metamask', state.web3Store.currentMaskAddress);
this.marketInterval = setInterval(this.getMarketInfo, 15000);
this.accountInterval = setInterval(this.getAccountInfo, 15000);
this.userInterval = setInterval(this.getUserAddress, 500);
......@@ -82,14 +82,14 @@ class App extends Component {
console.log('this.props.currentMaskAddress', this.props.currentMaskAddress)
this.otherUserInterval = setInterval(this.getUserAddress, 500);
}
})
})
}
componentWillReceiveProps(nextProps) {
//console.log('nextProps', nextProps)
}
// TODO: getInfoFirstTime and getUserAddress are WET af
// lets do something about it
// TODO: getInfoFirstTime and getUserAddress are WET af
// lets do something about it
getInfoFirstTime = () => {
localweb3.eth.getAccounts(async (error, result) => {
if(result.length > 0){
......@@ -106,7 +106,7 @@ class App extends Component {
}
})
}
// fun fact, localweb3.eth.getAccounts will return something even without anything inside
// fun fact, localweb3.eth.getAccounts will return something even without anything inside
getUserAddress = () => {
localweb3.eth.getAccounts((error, result) => {
if (result.length > 0) {
......@@ -126,31 +126,30 @@ class App extends Component {
})
}
// could possibly use refactoring
// could possibly use refactoring
getContracts = () => {
const factoryAddress = this.props.web3Store.factoryAddress;
const factoryContract = new localweb3.eth.Contract(factoryABI, factoryAddress);
this.props.factoryContractReady(factoryContract);
this.props.web3Store.exchangeAddresses.addresses.map(async exchangeAddress => {
// receive the exchange address, create the exchange contract
let exchangeContract = await new localweb3.eth.Contract(exchangeABI, exchangeAddress[1]);
// send the exchange contract to redux store
await this.props.exchangeContractReady(exchangeAddress[0], exchangeContract);
})
this.props.web3Store.tokenAddresses.addresses.map(async tokenAddress => {
// receive the token address, create the token contract
let tokenContract = await new localweb3.eth.Contract(tokenABI, tokenAddress[1]);
// send the token contract to redux store
// send the token contract to redux store
await this.props.tokenContractReady(tokenAddress[0], tokenContract);
})
// happens only once
const factoryAddress = this.props.web3Store.factoryAddress;
const factoryContract = new localweb3.eth.Contract(factoryABI, factoryAddress);
this.props.factoryContractReady(factoryContract);
// this.getAccountInfo();
// this.getMarketInfo();
}
symbolToTokenAddress = (symbol) => {
let tokenAddresses = this.props.web3Store.tokenAddresses.addresses;
for (let i = 0; i < tokenAddresses.length; i++) {
......@@ -193,9 +192,9 @@ class App extends Component {
default:
}
}
// this quadruplet of functions will end up being shared amongst multiple components
// this quadruplet of functions will end up being shared amongst multiple components
// will need to bring this out into a higher order component (we'll put that to the side for now)
// TODO: multiple components currently need this function, we will pass it to them via props
// TODO: multiple components currently need this function, we will pass it to them via props
getAccountInfo = () => {
switch (this.props.web3Store.exchangeType) {
case 'ETH to Token':
......@@ -212,11 +211,20 @@ class App extends Component {
this.getTokenBalance('output');
this.getAllowance();
break;
case 'ETH to ETH':
this.getEthBalance('input');
this.getEthBalance('output');
break;
case 'Token to itself':
this.getTokenBalance('input');
this.getTokenBalance('output');
this.getAllowance();
break;
default:
}
console.log("Getting account info");
// console.log("Getting account info");
}
getExchangeState = (type) => {
var exchange;
if (type === 'input') {
......@@ -291,7 +299,7 @@ class App extends Component {
if(type === 'Token to ETH' || type === 'Token to Token') {
var token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
var exchangeAddress = this.symbolToExchangeAddress(this.props.exchange.inputToken.value);
token.methods.allowance(this.props.web3Store.currentMaskAddress, exchangeAddress).call().then((result, error) => {
console.log(this.props.exchange.inputToken.value + ' allowance: ' + result);
if(result === '0'){
......@@ -321,11 +329,26 @@ class App extends Component {
}
tokenToExchangeFactoryLookup = (tokenAddress) => {
this.props.web3Store.factoryContract.methods.tokenToExchangeLookup(tokenAddress).call((error, exchangeAddress) => {
console.log(exchangeAddress)
console.log('looking up exchange for token: ', tokenAddress)
this.props.web3Store.factoryContract.methods.tokenToExchangeLookup(tokenAddress).call().then((result, error) => {
if(error) {
console.log(error);
} else {
console.log('exchange address: ', result);
}
});
}
launchExchange = (tokenAddress) => {
this.props.web3Store.factoryContract.methods.launchExchange(tokenAddress).send({from: this.props.web3Store.currentMaskAddress})
.on('transactionHash', console.log('Transaction Hash created'))
.on('receipt', (receipt) => {
console.log(receipt)
}) //Transaction Submitted to blockchain
.on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)}) //Transaction Mined
.on('error', console.error);
}
onCloseHelper = () => {
if(this.props.exchange.outputToken.value === 'UNI'){
this.setState({ uniAdded: true }) // cookie stuff
......@@ -349,7 +372,7 @@ class App extends Component {
scrollToComponent(this.About, { offset: 0, align: 'top', duration: 500})
}
render() {
return (
<div className={this.props.web3Store.connected && !this.props.web3Store.metamaskLocked && this.props.web3Store.interaction !== 'disconnected' ? "App" : "App dim"}>
......@@ -364,8 +387,8 @@ class App extends Component {
onCloseHelper={this.onCloseHelper}
toggleAbout={this.toggleAbout}
/>
<Exchange
getAccountInfo={this.getAccountInfo}
<Exchange
getAccountInfo={this.getAccountInfo}
getMarketInfo={this.getMarketInfo}
symbolToTokenContract={this.symbolToTokenContract}
symbolToExchangeAddress={this.symbolToExchangeAddress}
......@@ -376,10 +399,10 @@ class App extends Component {
inputTokenValue={this.props.exchange.inputToken.value}
exchangeFee={this.props.exchange.fee}
/>
<Purchase
symbolToExchangeContract={this.symbolToExchangeContract}
<Purchase
symbolToExchangeContract={this.symbolToExchangeContract}
symbolToTokenAddress={this.symbolToTokenAddress}
/>
/>
<About toggleAbout={this.toggleAbout} location={this}/>
<Links />
<Transactions transactions={this.state.transactions} interaction={this.props.web3Store.interaction} />
......
src/components/Exchange.js
View file @ 72b96877
......@@ -39,7 +39,7 @@ class Exchange extends Component {
var inputValue = this.props.exchange.inputValue;
console.log(inputValue, 'from setExchangeOutput')
console.log('outputToken', this.props.exchange.outputToken);
if (this.props.web3Store.exchangeType === 'Invalid'){
if (this.props.web3Store.exchangeType === 'ETH to ETH' || this.props.web3Store.exchangeType === 'Token to itself'){
this.props.setExchangeOutputValue(0);
this.props.setInteractionState('error1');
} else if(inputValue && inputValue !== 0 && inputValue !== '0'){
......@@ -55,9 +55,11 @@ class Exchange extends Component {
// TODO: change this to use the redux-subscribe pattern
getMarketType = () => {
var marketType = '';
if (this.props.exchange.inputToken.value === this.props.exchange.outputToken.value) {
marketType = 'Invalid';
if (this.props.exchange.inputToken.value === 'ETH' && this.props.exchange.outputToken.value === 'ETH') {
marketType = 'ETH to ETH';
this.props.setInteractionState('error1');
} else if (this.props.exchange.inputToken.value === this.props.exchange.outputToken.value){
marketType = 'Token to itself';
} else if (this.props.exchange.inputToken.value === 'ETH'){
marketType = 'ETH to Token';
} else if (this.props.exchange.outputToken.value === 'ETH'){
......
src/components/NetworkStatus.js
View file @ 72b96877
......@@ -9,7 +9,7 @@ class NetworkStatus extends Component {
// eslint-disable-next-line no-unused-vars
const interactionStateSubscriber = subscribe('web3Store.currentMaskAddress', state => {
if (state.web3Store.currentMaskAddress !== undefined) {
console.log('METAMASK UNLOCKED FROM NETWORK STATUS')
// console.log('METAMASK UNLOCKED FROM NETWORK STATUS')
this.checkNetwork();
} else { console.log('METAMASK LOCKED FROM NETWORK STATUS') }
})
......@@ -24,13 +24,15 @@ class NetworkStatus extends Component {
this.props.setWeb3ConnectionStatus(connectionStatus);
this.props.setInteractionState(interactionState);
})
}
}
render () {
if (this.props.web3Store.connected && this.props.web3Store.interaction !== 'disconnected'){
return (
<div className="connection border pa2 green">
<a target="_blank" rel="noopener noreferrer" href={'https://rinkeby.etherscan.io/search?q=' + this.props.web3Store.currentMaskAddress}>{this.props.web3Store.currentMaskAddress}</a>
<p>{this.props.exchange.inputToken.value + ": " + (this.props.exchange.inputBalance/10**18).toFixed(2)}</p>
<p>{this.props.exchange.outputToken.value + ": " + (this.props.exchange.outputBalance/10**18).toFixed(2)}</p>
<p>●</p>
</div>
)
......@@ -73,4 +75,4 @@ const mapDispatchToProps = (dispatch) => {
}, dispatch)
}
export default connect (mapStateToProps, mapDispatchToProps)(NetworkStatus);
\ No newline at end of file
export default connect (mapStateToProps, mapDispatchToProps)(NetworkStatus);
src/components/Purchase.js
View file @ 72b96877
......@@ -18,8 +18,8 @@ class Purchase extends Component {
ethToTokenPurchase = () => {
var exchange = this.props.symbolToExchangeContract(this.props.exchange.outputToken.value);
var minTokens = (this.props.exchange.outputValue/10**18).toString();
var minTokensInt = this.props.web3Store.web3.utils.toWei(minTokens);
var minTokens = this.props.exchange.outputValue.toString();
var minTokensInt = parseInt(minTokens, 10).toString();
var ethSold = this.props.exchange.inputValue;
var weiSold = this.props.web3Store.web3.utils.toWei(ethSold);
var timeout = this.props.web3Store.blockTimestamp + 300; //current block time + 5mins
......@@ -42,19 +42,20 @@ class Purchase extends Component {
console.log(receipt)
}) //Transaction Submitted to blockchain
.on('confirmation', (confirmationNumber, receipt) => {
console.log("Block Confirmations: " + confirmationNumber)
if(confirmationNumber === 1) {
this.getAccountInfo();
}
console.log("Block Confirmations: " + confirmationNumber);
// if(confirmationNumber === 1) {
// this.getAccountInfo();
// }
}) //Transaction Mined
.on('error', console.error);
}
tokenToEthPurchase = () => {
var exchange = this.props.symbolToExchangeContract(this.props.exchange.inputToken.value);
var minEth = (this.props.exchange.outputValue/10**18).toString();
var minEthInt = this.props.web3Store.web3.utils.toWei(minEth);
var minEth = this.props.exchange.outputValue.toString();
var minEthInt = parseInt(minEth, 10).toString();
var tokensSold = this.props.exchange.inputValue;
// toWei needs to be replaced with *decimals
var tokensSoldInt = this.props.web3Store.web3.utils.toWei(tokensSold);
var timeout = this.props.web3Store.blockTimestamp + 300; //current block time + 5mins
......@@ -77,15 +78,15 @@ class Purchase extends Component {
tokenToTokenPurchase = () => {
var exchange = this.props.symbolToExchangeContract(this.props.exchange.inputToken.value);
var tokenOutAddress = this.props.symbolToTokenAddress(this.props.exchange.outputToken.value);
var minTokens = (this.props.exchange.outputValue/10**18).toString();
var minTokensInt = this.props.web3Store.web3.utils.toWei(minTokens);
var minTokens = this.props.exchange.outputValue.toString();
var minTokensInt = parseInt(minTokens, 10).toString();
var tokensSold = this.props.exchange.inputValue;
var tokensSoldInt = this.props.web3Store.web3.utils.toWei(tokensSold);
var timeout = this.props.web3Store.blockTimestamp + 300; //current block time + 5mins
console.log('tokenOutAddress', tokenOutAddress);
console.log('minTokensInt', minTokensInt);
console.log('tokensSoldInt', tokensSoldInt);
console.log('timeout', timeout);
// console.log('tokenOutAddress', tokenOutAddress);
// console.log('minTokensInt', minTokensInt);
// console.log('tokensSoldInt', tokensSoldInt);
// console.log('timeout', timeout);
exchange.methods.tokenToTokenSwap(tokenOutAddress, tokensSoldInt, minTokensInt, timeout).send({from: this.props.web3Store.currentMaskAddress})
.on('transactionHash', (result) => {
......
src/helpers/factoryABI.js
View file @ 72b96877
module.exports.factoryABI =
[{"constant":true,"inputs":[],"name":"getExchangeCount","outputs":[{"name":"exchangeCount","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_token","type":"address"}],"name":"launchExchange","outputs":[{"name":"exchange","type":"address"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"tokenList","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_token","type":"address"}],"name":"tokenToExchangeLookup","outputs":[{"name":"exchange","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_exchange","type":"address"}],"name":"exchangeToTokenLookup","outputs":[{"name":"token","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"exchange","type":"address"},{"indexed":true,"name":"token","type":"address"}],"name":"ExchangeLaunch","type":"event"}]
module.exports.factoryABI =
[
{
"constant": true,
"inputs": [],
"name": "getExchangeCount",
"outputs": [
{
"name": "exchangeCount",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
},
{
"constant": false,
"inputs": [
{
"name": "_token",
"type": "address"
}
],
"name": "launchExchange",
"outputs": [
{
"name": "exchange",
"type": "address"
}
],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": true,
"inputs": [
{
"name": "",
"type": "uint256"
}
],
"name": "tokenList",
"outputs": [
{
"name": "",
"type": "address"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
},
{
"constant": true,
"inputs": [
{
"name": "_token",
"type": "address"
}
],
"name": "tokenToExchangeLookup",
"outputs": [
{
"name": "exchange",
"type": "address"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
},
{
"constant": true,
"inputs": [
{
"name": "_exchange",
"type": "address"
}
],
"name": "exchangeToTokenLookup",
"outputs": [
{
"name": "token",
"type": "address"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"name": "exchange",
"type": "address"
},
{
"indexed": true,
"name": "token",
"type": "address"
}
],
"name": "ExchangeLaunch",
"type": "event"
}
]
src/store/initial-state.js
View file @ 72b96877
......@@ -7,7 +7,7 @@ export default {
metamaskLocked: true,
interaction: '',
networkMessage: '',
factoryAddress: '0xD6D22d102A4237F3D35361BC022a78789E6174Aa',
factoryAddress: '0x1dCcdeD9c35C0dd22dfC644BC17011Eb8e61ad91',
factoryContract: '',
blockTimestamp: '',
exchangeType: 'ETH to Token',
......
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