Skip to content

T
Token-Factory
Commit c8e64b97 authored by Simon de la Rouviere's avatar Simon de la Rouviere
Browse files
Options

Refactoringading

parent 6dbf1fce
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 110 deletions
README.md
View file @ c8e64b97
......@@ -4,6 +4,8 @@ A dapp that allows for token issuance & management. The purpose for this at this
Contracts & Tests are borrowed from Tokens repo. Using Truffle (with Webpack).
NOTE: Currently broken (due to Truffle bug) and busy refactoring (UNTESTED).
```npm install```
```truffle serve```
......
app/javascripts/factorypage.jsx
View file @ c8e64b97
......@@ -2,6 +2,11 @@ import React from "react";
import {TXComponent} from "reflux-tx";
import TxForm from "./txform.jsx";
/*
Page to create/issue a token.
Upon success/mined, forward to token wallet page.
*/
var FactoryPage = React.createClass({
getInitialState: function() {
return {
......
app/javascripts/frontpage.jsx
View file @ c8e64b97
import React from 'react';
import { Link } from 'react-router';
/*
Home/front page.
Warns if offline and recommends to install Metamask to use it.
*/
var FrontPage = React.createClass({
getInitialState: function() {
return {
......
app/javascripts/init.js
View file @ c8e64b97
//this is a hack currently.
//this is a hack currently for webpack building
//The normal ProvidePlugin doesn't seem to work here. Not sure why.
//If done through ProvidePlugin, it keeps producing a zillion warnings
//See babel-loader in Webpack: https://github.com/babel/babel-loader/issues/23
......
app/javascripts/inputform.jsx
View file @ c8e64b97
import React from "react";
/*
A generic component for an input field.
*/
var InputForm = React.createClass({
getInitialState: function() {
return {
......
app/javascripts/main.jsx
View file @ c8e64b97
......@@ -6,14 +6,10 @@ import ReactRouter from "react-router";
import { Router, Route, IndexRoute, Link } from 'react-router';
import { TXActions } from 'reflux-tx';
import {TXComponent} from "reflux-tx";
//import TXActions from "reflux-tx".TXActions;
//import TXComponent from "reflux-tx".TXComponent;
//import AccountBadge from "react-account-badge";
var web3 = require("./web3_bootstrap.js");
window.web3 = web3; //hacky way to force checked web3 to be used everywhere vs accidentally using injected web3.
//import Web3 from "web3";
//web3? Apparently it is "provided"?
//hacky way to force checked web3 to be used everywhere vs accidentally using injected web3.
var web3 = require("./web3_bootstrap.js"); //thus injected web3 is now web3 in this scope.
window.web3 = web3; //overwrite injected web3 with replaced one.
import NavBar from "./navbar.jsx";
import FactoryPage from "./factorypage.jsx";
......@@ -22,37 +18,18 @@ import TokenPage from "./tokenpage.jsx";
import TokenSearchPage from "./tokensearchpage.jsx";
require('bootstrap-webpack!./bootstrap.config.js');
var $ = require('jquery');
//console.log($);
//feels like webpack anti-pattern??
//window.Route = ReactRouter.Route;
//window.Router = ReactRouter.Router;
//window.IndexRoute = ReactRouter.IndexRoute;
//window.Link = ReactRouter.Link;
//window.TXActions = refluxTX.TXActions;
//window.TXComponent = refluxTX.TXComponent;
//console.log(TXActions);
//TXActions/Reflux-TX is a lib that keeps track of txes across page refreshes.
//bufferSize = how many txes to store at once.
TXActions.connect(web3, {confirmCount: 1, bufferSize: 5})
//window.web3_rab = new Web3();
//console.log(web3);
//web3 = new Web3();
//web3.setProvider(new web3.providers.HttpProvider('http://localhost:8545')); //default provider until overwritten.
//window.AccountBadge = accountBadge.AccountBadge;
//window.AccountStore = accountBadge.AccountStore;
//remove _k thing from URLS (removing queryKey)
import createHistory from 'history/lib/createHashHistory';
//window.histor = History.createHashHistory({
let history = createHistory({
queryKey: false
});
let App = React.createClass({
getInitialState: function() {
return {
......@@ -61,6 +38,7 @@ let App = React.createClass({
};
},
componentDidMount: function() {
//when mounting check if online/offline
var that = this;
if(window.offline == true) {
......@@ -69,8 +47,6 @@ let App = React.createClass({
this.setState({blockNumber: 'OFFLINE'});
}
//TODO: log current address in here instead with a timeout
},
render: function() {
return (
......@@ -89,22 +65,18 @@ let App = React.createClass({
});
window.onload = function() {
// check if RPC is online. Why though?
//web3.eth.getCoinbase(function(error, coinbase) {
//window.MainRouter = Router;
HumanStandardToken.load(Pudding);
ReactDOM.render((
//React.render((
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={FrontPage} />
<Route path="/tokensearch" component={TokenSearchPage} />
<Route path="/factory" component={FactoryPage} />
<Route path="/token/:contract_address" component={TokenPage} />
</Route>
</Router>
), document.getElementById('main'));
HumanStandardToken.load(Pudding);
ReactDOM.render((
//React.render((
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={FrontPage} />
<Route path="/tokensearch" component={TokenSearchPage} />
<Route path="/factory" component={FactoryPage} />
<Route path="/token/:contract_address" component={TokenPage} />
</Route>
</Router>
), document.getElementById('main'));
//});
};
app/javascripts/navbar.jsx
View file @ c8e64b97
import React from "react";
import { Link } from "react-router";
//import AccountBadge from "react-account-badge";
//<AccountBadge web3={web3_rab} />
/*
Basic navbar.
Shows dynamic block number for good UX
*/
//TODO: Re-add account badge if on mobile.
var NavBar = React.createClass({
render: function() {
return (
......
app/javascripts/tokenpage.jsx
View file @ c8e64b97
......@@ -2,6 +2,15 @@ import React from "react";
import {TXComponent} from "reflux-tx";
import TxForm from "./txform.jsx";
/*
Token wallet page. How you interact with a standard token.
When issuing a tx, the button will display that it is loading/waiting until finished.
Next to button/input field, the result will be displayed if finished.
Currently, since decimals, name & symbol are optionals, one needs to check if the specified code at the address have these, before proceeding.
*/
var TokenPage = React.createClass({
getInitialState: function() {
return {
......@@ -21,30 +30,49 @@ var TokenPage = React.createClass({
},
componentDidMount: function() {
this.setState({contract_address: this.props.params.contract_address});
//var web3_token = web3_rab.eth.contract(HumanStandardToken.abi).at(this.props.params.contract_address); //for reflux-tx
//it is going to want to try and use HumanStandardToken ABI, hoping that is this ERC20 version of the token.
var web3_token = web3.eth.contract(HumanStandardToken.abi).at(this.props.params.contract_address); //for reflux-tx
window.token_c = web3_token;
window.token_c = web3_token; //for debugging
this.setState({web3_token: web3_token});
var that = this;
var accounts = web3.eth.accounts;
var addr = accounts[0];
var accounts = web3.eth.accounts; //get Metamask/Mist address
var addr = accounts[0]; //first account in metamask is one that's active. Might have to swop/change for Mist in the future.
web3_token.totalSupply.call({from: addr}, function(err, totalSupply) {
//expect this. so throw that it is NOT an ERC token.
//TODO ^^
console.log(totalSupply);
that.setState({totalSupply: totalSupply.c[0]});
that.setState({totalSupply: totalSupply.toString()});
});
that.setState({current_user_address: addr});
web3_token.decimals.call({from: addr}, function(err, decimals) {
if(decimals) { that.setState({token_decimals: decimals}); }
});
web3_token.symbol.call({from: addr}, function(err, symbol) {
if(symbol) { that.setState({token_symbol: symbol}); }
//optionals. So don't throw.
//only omit them
/*web3_token.decimals.call({from: addr}, function(err, decimals) {
//ABI will force it to expect BigNumber.
//because it throws via fallback function if not present, it gets back 0.
if(err) { console.log(err); }
if(decimals) { console.log(decimals); that.setState({token_decimals: decimals}); }
});
console.log(web3_token);
try {
web3_token.symbol.call({from: addr}, function(err, symbol) {
//ABI expects string here,
if(err) { console.log("ERROR BRUV"); }
if(symbol) { console.log(symbol); that.setState({token_symbol: symbol}); }
});
} catch(err) {
console.log("symbol jarring");
}?
/*
web3_token.name.call({from: addr}, function(err, name) {
if(name) { that.setState({token_name: name}); }
});
if(err) { console.log(err); }
if(name) { console.log(name); that.setState({token_name: name}); }
});*/
},
successOnBalance: function(result, args) {
//call when balanceOf call succeeds.
......@@ -91,7 +119,7 @@ var TokenPage = React.createClass({
this.setState({allowance_result: allowance_result});
},
render: function() {
//return error if not actual token system.
//if name & symbol exists, use them.
var transfer_header = '';
if(this.state.token_name != '') { transfer_header = "Transfer " + this.state.token_name; } else { transfer_header = "Transfer Token"; }
......@@ -100,7 +128,10 @@ var TokenPage = React.createClass({
top_header = <span><h2>{this.state.token_name} ({this.state.token_symbol})</h2> <br /></span>;
}
//Current User Address & Balance: {this.state.current_user_address}. <br />
/*
TXComponent is from reflux-tx to monitor tx state. Wrapping components with it, means those components can monitor those tx states.
*/
return (
<div>
{top_header}
......@@ -187,7 +218,7 @@ var TokenPage = React.createClass({
{placeholder: "spender: eg 0x1ceb00da", key: "toAddress", ref: "toAddress" }]}
/>
</TXComponent> <br />
{this.state.allowance_result}
{this.state.allowance_result}
</div>
);
......
app/javascripts/tokensearchpage.jsx
View file @ c8e64b97
import React from "react";
/*
Simple forwarding tool to simply forward to a token page when putting in an address so the user don't have to fiddle with the URL.
*/
var TokenSearchPage = React.createClass({
getInitialState: function() {
return {
......
app/javascripts/txform.jsx
View file @ c8e64b97
......@@ -4,6 +4,10 @@ import { TXActions } from 'reflux-tx';
window.txa = TXActions; //debugging
/*
Component for forms to watch creation page & wallet page.
*/
var TxForm = React.createClass({
getInitialState: function() {
return {
......@@ -15,16 +19,12 @@ var TxForm = React.createClass({
componentDidUpdate: function() {
//first props are passed only after it mounted.
//has to re-uptake state after a page refresh.
/*web3.eth.getBlockNumber(function(result) {
console.log(result);
});*/
if(this.state.processing == true) {
console.log('processing');
for(var i = 0; i < this.props.received.length; i+=1) {
console.log('iterating received');
if(this.props.received[i].receipt.transactionHash == this.state.txHash) {
console.log(this.props.received[i].receipt);
//console.log(web_l.eth.blockNumber);
this.setState({processing: false});
console.log('processed');
......@@ -41,12 +41,9 @@ var TxForm = React.createClass({
console.log(this.props.pending);
this.setState({processing: true});
//this seems dangerous! Assumes only 1 tx at a time.
//revise
//todo: revise
this.setState({txHash: "0x" + this.props.pending[0].data.hash});
} /*else if (this.props.received.length > 0) {
this.setState({processing: true});
this.setState({txHash: this.props.received[0].receipt.transactionHash});
}*/
}
}
},
submitTransaction: function(tx_hash, tx_type) {
......@@ -64,29 +61,23 @@ var TxForm = React.createClass({
args.push(this.refs[this.props.inputs[i].ref].state.val);
}
//if in creation page
if(typeof this.props.web3_token == 'undefined') {
//token creation execution
console.log('creating');
var ST = web3.eth.contract(HumanStandardToken.abi);
var tx_hash = null;
var that = this;
//var creation_data = ST.new.getData(args[0], {data: HumanStandardToken.binary});
console.log(web3);
web3.eth.getAccounts(function(err, accounts){
var addr = accounts[0];
console.log(addr);
console.log(ST);
console.log(HumanStandardToken.abi);
console.log("0x"+HumanStandardToken.prototype.binary);
//TODO: change gas price
//TODO: change gas price to be dynamic. Included quicker into a block.
//args[0] = uint256 _initialAmount,
//args[1] = string _tokenName,
//args[2] = uint8 _decimalUnits,
//args[3] = string _tokenSymbol
var creation_data = ST.new.getData(args[0], args[1], args[2], args[3], {from: addr, data: "0x" + HumanStandardToken.prototype.binary, gasPrice: 50000000000, gas: 3100000});
console.log(creation_data);
console.log(args[0]);
ST.new(args[0], args[1], args[2], args[3], {from: addr, data: "0x" + HumanStandardToken.prototype.binary, gasPrice: 50000000000, gas: 1000000}, function(err, result) {
//var creation_data = ST.new.getData(args[0], args[1], args[2], args[3], {from: addr, data: "0x" + HumanStandardToken.prototype.binary, gasPrice: 50000000000, gas: 3100000});
ST.new(args[0], args[1], args[2], args[3], {from: addr, data: "0x" + HumanStandardToken.prototype.binary, gasPrice: 20000000000, gas: 1000000}, function(err, result) {
//NOTE: This callback fires twice. Once tx hash comes in. Then when mined.
if(err) {
console.log(err);
......@@ -116,7 +107,8 @@ var TxForm = React.createClass({
web3.eth.getAccounts(function(err, accounts){
var addr = accounts[0];
args.push({from: addr});
//the callback (must be after part)
//pushing callback into the args
args.push(function(err, result) {
if(!err) {
console.log(result);
......@@ -127,6 +119,7 @@ var TxForm = React.createClass({
}
}
});
console.log(args);
that.props.web3_token[that.props.abiFunction].sendTransaction.apply(that, args);
});
......
app/javascripts/web3_bootstrap.js
View file @ c8e64b97
//for Mist & Metamask support
var Web3 = require("web3");
var Pudding = require("ether-pudding");
var exported = null;
var exported_web3 = null;
window.offline = true; //default is there is no web3 available.
//TODO: add in flag to ALSO attach to a local node, besides through metamask.
if (typeof web3 !== 'undefined') {
// Use the Mist/wallet provider.
exported = new Web3(web3.currentProvider);
// Use the Mist/wallet provider as it is available
exported_web3 = new Web3(web3.currentProvider);
window.offline = false; //there is a web3 available.
//var other_web3 = new Web3(new Web3.providers.HttpProvider('https://rpc.metamask.io'));
//window.web_l = other_web3;
} else {
// Use the provider from the config.
// ENV and WEB3_PROVIDER_LOCATION are rewritten by webpack during build
if (ENV == "development") {
console.log("A web3 provider is NOT present. Telling user to get one.");
console.log("For now. Do NOT connected to a localhost.");
console.log("THUS. Offline flag is remains TRUE.");
console.log("A web3 provider is NOT present. Telling user to get one.");
console.log("For now. NOT connected to a localhost.");
console.log("THUS. Offline flag remains TRUE.");
//ONLY set web3 for its functions, not for its connection
exported = new Web3();
//exported = new Web3(new Web3.providers.HttpProvider('http://127.0.0.1:8545'));
window.web3 = exported;
//exported = new Web3(new Web3.providers.HttpProvider('https://rawtestrpc.metamask.io/'));
}
//ONLY set web3 for its functions, not for its connection
exported = new Web3();
}
Pudding.setWeb3(exported);
window.exported = exported;
Pudding.setWeb3(exported); //Pudding requires a web3 connection
window.exported = exported; //used for debugging purposes to get access to web3 ie exported.eth.<blah blah blah>
module.exports = exported;
truffle.json → truffle.js
View file @ c8e64b97
{
module.exports = {
"build": "webpack",
"deploy": [
"HumanStandardToken"
......
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