From 9f4f50199c1b3df1315c0595139fc5aa62f0ec72 Mon Sep 17 00:00:00 2001
From: HenryNguyen5 <ngu.henry@hotmail.com>
Date: Tue, 19 Jun 2018 13:14:36 -0400
Subject: [PATCH] Support undefined input names (#1964)

---
 .../components/InteractExplorer/index.tsx     | 23 ++++++++++++-------
 common/libs/contracts/ABIFunction.ts          | 11 +++++----
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/index.tsx b/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/index.tsx
index 8c9a4d14..084ba5ed 100644
--- a/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/index.tsx
+++ b/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/index.tsx
@@ -124,13 +124,20 @@ class InteractExplorerClass extends Component<Props, State> {
         {selectedFunction && (
           <div key={selectedFunction.name} className="InteractExplorer-func">
             {/* TODO: Use reusable components with validation */}
-            {selectedFunction.contract.inputs.map(input => {
+            {selectedFunction.contract.inputs.map((input, index) => {
               const { type, name } = input;
-              const inputState = this.state.inputs[name];
+              // if name is not supplied to arg, use the index instead
+              // since that's what the contract ABI function factory subsitutes for the name
+              // if it is undefined
+              const parsedName = name === '' ? index : name;
+
+              const inputState = this.state.inputs[parsedName];
               return (
-                <div key={name} className="input-group-wrapper InteractExplorer-func-in">
+                <div key={parsedName} className="input-group-wrapper InteractExplorer-func-in">
                   <label className="input-group">
-                    <div className="input-group-header">{name + ' ' + type}</div>
+                    <div className="input-group-header">
+                      {(parsedName === index ? `Input#${parsedName}` : parsedName) + ' ' + type}
+                    </div>
                     {type === 'bool' ? (
                       <Dropdown
                         options={[{ value: false, label: 'false' }, { value: true, label: 'true' }]}
@@ -144,15 +151,15 @@ class InteractExplorerClass extends Component<Props, State> {
                         }
                         clearable={false}
                         onChange={({ value }: { value: boolean }) => {
-                          this.handleBooleanDropdownChange({ value, name });
+                          this.handleBooleanDropdownChange({ value, name: parsedName });
                         }}
                       />
                     ) : (
                       <Input
                         className="InteractExplorer-func-in-input"
-                        isValid={!!(inputs[name] && inputs[name].rawData)}
-                        name={name}
-                        value={(inputs[name] && inputs[name].rawData) || ''}
+                        isValid={!!(inputs[parsedName] && inputs[parsedName].rawData)}
+                        name={parsedName}
+                        value={(inputs[parsedName] && inputs[parsedName].rawData) || ''}
                         onChange={this.handleInputChange}
                       />
                     )}
diff --git a/common/libs/contracts/ABIFunction.ts b/common/libs/contracts/ABIFunction.ts
index 5e958786..eabb2504 100644
--- a/common/libs/contracts/ABIFunction.ts
+++ b/common/libs/contracts/ABIFunction.ts
@@ -77,12 +77,12 @@ export default class AbiFunction {
   };
 
   private init(outputMappings: FunctionOutputMappings = []) {
-    this.funcParams = this.makeFuncParams();
     //TODO: do this in O(n)
     this.inputTypes = this.inputs.map(({ type }) => type);
     this.outputTypes = this.outputs.map(({ type }) => type);
-    this.inputNames = this.inputs.map(({ name }) => name);
+    this.inputNames = this.inputs.map(({ name }, i) => name || `${i}`);
     this.outputNames = this.outputs.map(({ name }, i) => outputMappings[i] || name || `${i}`);
+    this.funcParams = this.makeFuncParams();
 
     this.methodSelector = abi.methodID(this.name, this.inputTypes).toString('hex');
   }
@@ -105,8 +105,11 @@ export default class AbiFunction {
   };
 
   private makeFuncParams = () =>
-    this.inputs.reduce((accumulator, currInput) => {
-      const { name, type } = currInput;
+    this.inputs.reduce((accumulator, _, idx) => {
+      // use our properties over this.inputs since the names can be modified
+      // if the input names are undefined
+      const name = this.inputNames[idx];
+      const type = this.inputTypes[idx];
       const inputHandler = (inputToParse: any) =>
         //TODO: introduce typechecking and typecasting mapping for inputs
         ({ name, type, value: this.parsePreEncodedValue(type, inputToParse) });