[FEATURE] Support arrays (#13)

* draft * implement arrrays * lint

Author: adibas03

README.md

@@ -3,9 +3,36 @@
 
 A quick online tool to abi-encode constructor arguments used in solidity. The encoded data can be used to deploy the contract or verify the contract on Etherscan : https://ropsten.etherscan.io/verifyContract
 
+## Usage
+### Encode
+- Add the value types, each seperated by a comma
+- Add the values to match the number of types entered, each seperated by a comma `,` (No spaces), using square brakets `[]` to wrap arrays 
+```
+Types:
+address,uint256,address[],uint256[]
+
+Values:
+0x0000000000000000000000000000000000000000,5,[0xEC66d98e5a7DdBFEA66345ceA8626B5403AF1315,0xD6FAcd899F03C4aFce389ea51D73e8FD7D8A53E2,0x8c3720060f8cFDf8b8d4DA5698F4f51a48A0828a,0x9a9e6588AF6d1bC42572B0E3c3D2F827dabA64Ac,0x4A7a9f1Ac903A94f8Ed8E91BD0c7B5307d29EC18],[40,12,12,12,24]
+```
+
+### Decode
+- Add the value types, each seperated by a comma
+- Add the encoded data to be decoded 
+
+```
+Types:
+address,uint256,address[],uint256[]
+
+Encoded data:
+00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000005000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000000000000001400000000000000000000000000000000000000000000000000000000000000005000000000000000000000000ec66d98e5a7ddbfea66345cea8626b5403af1315000000000000000000000000d6facd899f03c4afce389ea51d73e8fd7d8a53e20000000000000000000000008c3720060f8cfdf8b8d4da5698f4f51a48a0828a0000000000000000000000009a9e6588af6d1bc42572b0e3c3d2f827daba64ac0000000000000000000000004a7a9f1ac903a94f8ed8e91bd0c7b5307d29ec1800000000000000000000000000000000000000000000000000000000000000050000000000000000000000000000000000000000000000000000000000000028000000000000000000000000000000000000000000000000000000000000000c000000000000000000000000000000000000000000000000000000000000000c000000000000000000000000000000000000000000000000000000000000000c0000000000000000000000000000000000000000000000000000000000000018
+```
+
 ## url
-[Live](https://adibas03.github.io/online-ethereum-abi-encoder-decoder/)
+[Live / Demo](https://adibas03.github.io/online-ethereum-abi-encoder-decoder/)
 
 ## Contribute
+https://github.com/adibas03/online-ethereum-abi-encoder-decoder/issues
+
+## Contribution
 Buy me a Coffe or a Beer 
 Ethereum: **0x965D1C9987BD2c34e151E63d60AFf8E9dB6b1561**

src/pages/decode.js

@@ -15,19 +15,11 @@ class Decoder extends Component{
  constructor(props) {
  super(props);
 
- //Hanle binds
- this.handleChange = this.handleChange.bind(this);
- this.handleClick = this.handleClick.bind(this);
- this.handleRequestClose = this.handleRequestClose.bind(this);
+ //Handle binds
  this.decodeData = this.decodeData.bind(this);
 
- this.testRegExp = this.testRegExp.bind(this);
- this.validateType = this.validateType.bind(this);
- this.typesSet = this.typesSet.bind(this);
  this.typeUpdated = this.typeUpdated.bind(this);
  this.valueUpdated = this.valueUpdated.bind(this);
- this.formFilled = this.formFilled.bind(this);
- this.errorExists = this.errorExists.bind(this);
 
  this.state = {
  types : "",
@@ -118,17 +110,27 @@ class Decoder extends Component{
  Log(types,value);
 
  let decoded = this.abiCoder.decode(types, value);
- decoded = decoded.map(function(d){
- return d.toString();
- });
+ 
+ decoded = this.parseDecoded(decoded);
  Log(decoded);
+
  this.setState({ decoded: decoded.join(",") });
  }
  catch(e){
  throw new Error(e);
  }
  }
 
+ parseDecoded (toParse) {
+ const that = this;
+ return toParse.map(function(d){
+ return (typeof d === "object" && d.length !== undefined) ?
+ JSON.stringify(that.parseDecoded(d)).replace(/"/g,"")
+ :
+ d.toString();
+ });
+ }
+
  formFilled () {
  return this.state.types && this.state.value;
  }
@@ -141,22 +143,14 @@ class Decoder extends Component{
  return false;
  }
 
- handleRequestClose () {
- this.setState({
- open: false,
- });
- }
-
- handleClick () {
- this.setState({
- open: true,
- });
- }
-
  handleChange (name, event) {
  this.setState({ [name]: event.target.value,submitted: false });
  }
 
+ selectTarget (clickEvent) {
+ clickEvent.target.select();
+ }
+
  render(){
  const { classes } = this.props;
 
@@ -214,10 +208,13 @@ class Decoder extends Component{
  shrink: true,
  }}
  value={this.state.decoded}
- disabled
  helperText="Decodecoded Abi arguments"
  fullWidth
  margin="normal"
+ variant="filled"
+ readOnly={true}
+ onClick={this.selectTarget}
+ onFocus={this.selectTarget}
  />
  </FormControl>
  </Card>}

src/pages/encode.js

@@ -1,11 +1,12 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
+import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import FormControl from "@material-ui/core/FormControl";
-import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
 
+
 import ethers from "ethers";
 import ValidTypes from "../config/types";
 import { suffixed } from "../config/types";
@@ -15,19 +16,11 @@ class Encoder extends Component{
  constructor(props) {
  super(props);
 
- //Hanle binds
- this.handleChange = this.handleChange.bind(this);
- this.handleClick = this.handleClick.bind(this);
- this.handleRequestClose = this.handleRequestClose.bind(this);
+ //Handle binds
  this.encodeData = this.encodeData.bind(this);
 
- this.testRegExp = this.testRegExp.bind(this);
- this.validateType = this.validateType.bind(this);
- this.typesSet = this.typesSet.bind(this);
  this.typeUpdated = this.typeUpdated.bind(this);
  this.valueUpdated = this.valueUpdated.bind(this);
- this.formFilled = this.formFilled.bind(this);
- this.errorExists = this.errorExists.bind(this);
 
  this.state = {
  types : "",
@@ -40,14 +33,18 @@ class Encoder extends Component{
  this.abiCoder = new ethers.utils.AbiCoder();
  }
 
-
- testRegExp (search, array) {
- let found = 0;
- array.forEach(function(a){
- if(new RegExp(a).test(search) && search.trim().match(new RegExp(a)).index === 0)
- found++;
+ parseForEncode (values) {
+ const matched = this.matchRegExpValues(values);
+ 
+ return matched.map((val) => {
+ if (this.testArrayRegExpValues(val)) {
+ val = this.stripArray(val);
+ }
+ if (this.testRegExpValues(val)) {
+ val = this.parseForEncode(val);
+ }
+ return val;
  });
- return found;
  }
 
  validateType (self) {
@@ -61,13 +58,16 @@ class Encoder extends Component{
  });
 
  vals.forEach(function(v,id){
- if(!(id === vals.length-1 && v === "" ))
+ if(id === vals.length-1 && v === "") {
+ return;
+ } else {
  if(that.testRegExp(v,array) < 1){
  clean = false;
  let error = {};error["types"] = true;
  let state = {error:Object.assign(that.state.error,error)};
  return that.setState(state);
  }
+ }
  });
  if(clean){
  let error = {};error["types"] = false;
@@ -79,8 +79,10 @@ class Encoder extends Component{
  validateValue (self) {
  if(!self && this.state.values.length === 0 && !this.state.submitted)
  return;
- let vals = this.state.values.split(","),error = {};
- if(vals.length !== this.state.types.split(",").length )
+
+ let error = {};
+ const matchedValues = this.matchRegExpValues(this.state.values) || [];
+ if(this.state.types.split(",").length !== matchedValues.length)
  error["values"] = true;
  else
  error["values"] = false;
@@ -89,6 +91,35 @@ class Encoder extends Component{
  return this.setState(state);
  }
 
+ stripArray(value) {
+ const regEx = new RegExp(/^\[|\]$/gi);
+ return value.replace(regEx,"");
+ }
+
+ matchRegExpValues (values) {
+ const regEx = new RegExp(/(\[[0-9a-zA-Z,]+\]|[0-9a-zA-Z]+)/gi);
+ return values.match(regEx);
+ }
+
+ testRegExp (search, array) {
+ let found = 0;
+ array.forEach(function(a){
+ if(new RegExp(a).test(search) && search.trim().match(new RegExp(a)).index === 0)
+ found++;
+ });
+ return found;
+ }
+
+ testRegExpValues (values) {
+ const regEx = new RegExp(/(,+)/gi);
+ return regEx.test(values);
+ }
+
+ testArrayRegExpValues (values) {
+ const regEx = new RegExp(/\[.*\]/gi);
+ return regEx.test(values);
+ }
+
  typesSet () {
  let types = this.state.types;
  if(!types || types.length<1)
@@ -126,13 +157,15 @@ class Encoder extends Component{
  return;
  try{
  let types = this.state.types.split(",");
- let values = this.state.values.split(",");
+ let values = this.parseForEncode(this.state.values);
 
  Log(types,values);
 
  if(types.length !== values.length)
  throw new Error("Types/values mismatch");
  let encoded = this.abiCoder.encode(types, values);
+ Log(encoded);
+
  this.setState({ encoded: encoded.substring(2) });
  }
  catch(e){
@@ -152,22 +185,14 @@ class Encoder extends Component{
  return false;
  }
 
- handleRequestClose () {
- this.setState({
- open: false,
- });
- }
-
- handleClick () {
- this.setState({
- open: true,
- });
- }
-
  handleChange (name, event) {
  this.setState({ [name]: event.target.value,submitted: false });
  }
 
+ selectTarget (clickEvent) {
+ clickEvent.target.select();
+ }
+
  render(){
  const { classes } = this.props;
 
@@ -201,7 +226,7 @@ class Encoder extends Component{
  error={this.state.error.values}
  onChange={this.valueUpdated}
  onKeyUp={this.valueUpdated}
- helperText="Add the values to match the number of types indicated above, each seperated by a comma (No spaces)"
+ helperText="Add the values to match the number of types indicated above, each seperated by a comma (No spaces), use [ ] to wrap array"
  fullWidth
  margin="normal"
  />
@@ -224,10 +249,13 @@ class Encoder extends Component{
  shrink: true,
  }}
  value={this.state.encoded}
- disabled
  helperText="Abi encoded arguments"
  fullWidth
  margin="normal"
+ variant="filled"
+ readOnly={true}
+ onClick={this.selectTarget}
+ onFocus={this.selectTarget}
  />
  </FormControl>
  </Card>}