Run library function with type storage records from the UI (part 2)

client/src/blockchain.js

@@ -1,5 +1,6 @@
 import {ethers} from 'ethers';
 import {waitAsync} from './utils';
+import {buildTypeAbi} from './dtype_utils';
 
 const defaults = {
     '[]': [],
@@ -37,17 +38,49 @@ export const getContract = async function(address, abi, wallet) {
     return contract;
 };
 
+export const getDataItem = async function(contract, hash, index) {
+    let typeData = await contract.getByHash(hash);
+    typeData.index = index;
+    typeData.typeHash = hash;
+    return typeData;
+};
+
+export const getDataItems = async function(contract, callback) {
+    let hash;
+    let typeData;
+    const count = await contract.count();
+
+    for (let i = 0; i < count; i++) {
+        hash = await contract.typeIndex(i);
+        typeData = await getDataItem(contract, hash, i);
+        callback(typeData);
+    }
+};
+
+export const getDataItemsByTypeHash = async function(dtypeContract, wallet, typeStruct, callback) {
+    const dtypeAbi = await buildStructAbi(dtypeContract, typeStruct.typeHash);
+    const abi = buildTypeAbi(dtypeAbi);
+    const typeContract = await getContract(
+        typeStruct.contractAddress,
+        abi,
+        wallet,
+    );
+
+    getDataItems(typeContract, callback);
+};
+
 export const buildStructAbi = async function(dtypeContract, typeHash, parentLabel) {
     const dtype = await dtypeContract.getByHash(typeHash);
     const {length} = dtype.data.name.length;
     let abi = {};
 
+    abi.name = parentLabel;
+
     if (dtype.data.types.length === 0) {
-        abi.name = parentLabel;
         abi.type = dtype.data.name;
         return abi;
     }
-    abi.name = dtype.data.name;
+
     abi.type = dtype.data.name.substring(length - 2) === '[]' ? 'tuple[]' : 'tuple';
     abi.components = [];
     for (let i = 0; i < dtype.data.types.length; i++) {

client/src/components/FunctionRun.vue

@@ -1,13 +1,31 @@
 <template>
     <div>
-        Run Function
-        <!-- <dTypeSearch
-            label='types'
-            itemKey='name'
-            itemValue='name'
-            :items='functionData'
-            v-on:change="onSelectedType"
-        /> -->
+        <template v-for="(label, i) in functionType.labels">
+            <v-layout wrap>
+                <v-flex xs4>
+                    <v-text-field v-model='dataArguments[label]' :label='label'></v-text-field>
+                </v-flex>
+                <v-flex xs4>
+                    <v-select
+                        v-model="selectedValues[label]"
+                        :items="selectedItems[label]"
+                        label="Outline style"
+                        outline
+                    ></v-select>
+                </v-flex>
+                <v-flex xs4>
+                    <dTypeSearch
+                        label='types'
+                        :itemKey='selectedValues[label]'
+                        itemValue='typeHash'
+                        :items='functionData[label]'
+                        searchLengthP="1"
+                        :returnObjectP="true"
+                        @change="setDataItem(label, $event)"
+                    />
+                </v-flex>
+            </v-layout>
+        </template>
         <v-btn
             flat icon small
             @click="run"
@@ -19,22 +37,71 @@
 
 <script>
 import dTypeSearch from '../components/dTypeSearch';
+import {buildDefaultItem, getDataItemsByTypeHash} from '../blockchain';
 
 export default {
-    props: ['functionType', 'functionData'],
+    props: ['functionType'],
     components: {dTypeSearch},
+    data() {
+        let dataArguments = {};
+        let selectedItems = {};
+        let selectedValues = {};
+        let functionData = {};
+        this.functionType.labels.forEach((label) => {
+            dataArguments[label] = ''; buildDefaultItem(this.functionType);
+            selectedItems[label] = [];
+            selectedValues[label] = '';
+            functionData[label] = [];
+        });
+        return {
+            dataArguments,
+            selectedItems,
+            selectedValues,
+            functionData,
+        };
+    },
     created() {
         console.log('functionType', this.functionType);
+        this.setData();
     },
     methods: {
+        async setData() {
+            for (let i = 0; i < this.functionType.labels.length; i++) {
+                let label = this.functionType.labels[i];
+
+                let subType = await this.$store.dispatch(
+                    'getTypeStructByName',
+                    {
+                        lang: this.functionType.lang,
+                        name: this.functionType.types[i],
+                    }
+                );
+                console.log('subType', subType);
+                this.selectedItems[label] = subType.labels;
+                this.selectedValues[label] = subType.labels[0];
+
+                getDataItemsByTypeHash(
+                    this.$store.state.contract,
+                    this.$store.state.wallet,
+                    subType,
+                    (dataItem) => {
+                        console.log('dataItem', dataItem, this.selectedValues[label]);
+                        this.functionData[label].push(dataItem);
+                    },
+                );
+            };
+        },
         async run() {
-            const signature = await this.$store.state.contract.getSignature(this.functionType.typeHash);
-            console.log('signature', signature);
+            const dataHashes = this.functionType.labels.map((label) => this.dataArguments[label]);
 
-            // const tx = await this.$store.state.contract.run(signature, dataHashes);
-            // console.log('tx', tx);
-            // const receipt = tx.wait(2);
-            // console.log('receipt', receipt);
+            const tx = await this.$store.state.contract.run(this.functionType.typeHash, dataHashes);
+            console.log('tx', tx);
+            const receipt = tx.wait(2);
+            console.log('receipt', receipt);
+        },
+        setDataItem(label, event) {
+            if (!event || !event[0]) return;
+            this.dataArguments[label] = event[0].typeHash;
         },
     },
 }

client/src/components/dTypeBrowse.vue

@@ -234,6 +234,11 @@ export default {
                     if (typeof this.editedItem[header.value] === 'string') {
                         this.editedItem[header.value] = this.editedItem[header.value].split(',');
                     }
+                } else {
+                    let dtype = this.$store.state.dtypes.find(dtype => dtype.name === header.type);
+                    if (dtype.types.length) {
+                        this.editedItem[header.value] = JSON.parse(this.editedItem[header.value]);
+                    }
                 }
             });
             if (this.editedIndex > -1) {

client/src/components/dTypeSearch.vue

@@ -9,7 +9,8 @@
                 chips
                 :label="label"
                 :item-text="itemKey"
-                :item-value="itemKey"
+                :item-value="itemValue"
+                :return-object="returnObject"
                 placeholder="uint256"
                 append-icon="search"
                 no-data-text=""
@@ -31,8 +32,11 @@
                     </template>
                     <template v-else>
                         <v-list-tile-content>
-                            <v-list-tile-title v-html="data.item.name"></v-list-tile-title>
-                            <v-list-tile-sub-title v-html="data.item.group"></v-list-tile-sub-title>
+                            <v-list-tile-title v-if="returnObject"
+                                v-html="JSON.stringify(data.item)"
+                            ></v-list-tile-title>
+                            <v-list-tile-sub-title v-else v-html="data.item.name"></v-list-tile-sub-title>
+                            <!-- <v-list-tile-sub-title v-html="data.item.group"></v-list-tile-sub-title> -->
                         </v-list-tile-content>
                     </template>
                 </template>
@@ -44,24 +48,32 @@
 <script>
 export default {
     name: 'dTypeView',
-    props: ['label', 'items', 'itemKey', 'itemKey'],
+    props: ['label', 'items', 'itemKey', 'itemValue', 'searchLengthP', 'returnObjectP'],
     data() {
+        const searchLength = this.searchLengthP || 2;
         return {
             selected: [],
-            currentItems: [],
+            currentItems: searchLength > 1 ? [] : this.items,
             search: null,
+            searchLength,
+            returnObject: this.returnObjectP || false,
         };
     },
     watch: {
         search (val) {
-            if (!val || val.length < 2) {
+            if ((!val || val.length < this.searchLength) && this.searchLength > 1) {
                 this.currentItems = [];
             } else {
                 this.currentItems = this.items.filter(item => {
                     return item.name.indexOf(val) === 0;
                 });
             }
         },
+        items() {
+            if (this.searchLength <= 1) {
+                this.currentItems = this.items;
+            };
+        },
     },
     methods: {
         remove(item) {

client/src/components/dTypeView.vue

@@ -78,7 +78,6 @@
                                         <FunctionRun
                                             v-if="runFunctionDialog"
                                             :functionType="props.item"
-                                            :functionData="storageItems"
                                         />
                                     </v-card-text>
                                 </v-card>
@@ -98,7 +97,7 @@ import FunctionRun from './FunctionRun';
 
 export default {
     name: 'dTypeView',
-    props: ['dtype', 'parentHeaders', 'dtypes', 'storageItems'],
+    props: ['dtype', 'parentHeaders', 'dtypes'],
     components: {dTypeBrowseField, FunctionRun},
     data() {
         return {runFunctionDialog: false};
@@ -124,10 +123,5 @@ export default {
             });
         },
     },
-    methods: {
-        runSource() {
-            console.log('runSource');
-        },
-    },
 }
 </script>

client/src/views/dTypeLandingPage.vue

@@ -3,7 +3,6 @@
         <dTypeView :dtype="typeStruct"
             :parentHeaders="dtypeHeaders"
             :dtypes="dtypes"
-            :storageItems="items"
         />
         <dTypeBrowse
             :headers="headers"
@@ -23,7 +22,13 @@ import dTypeBrowse from '../components/dTypeBrowse';
 import dTypeView from '../components/dTypeView';
 import {EMPTY_ADDRESS} from '../constants_utils';
 import {buildTypeAbi} from '../dtype_utils';
-import {getContract, buildStructAbi, buildDefaultItem} from '../blockchain';
+import {
+    getContract,
+    buildStructAbi,
+    buildDefaultItem,
+    getDataItem,
+    getDataItems,
+} from '../blockchain';
 
 export default {
     props: ['hash', 'lang', 'name'],
@@ -73,6 +78,11 @@ export default {
         },
         async setContract() {
             this.dtypeHeaders = this.getHeaders(this.dtype);
+            this.dtypeHeaders.push({
+                text: 'outputs\nstring[]',
+                value: 'outputs',
+                type: 'string[]',
+            });
 
             if (this.hash === this.dtype.typeHash || this.name === this.dtype.name) {
                 console.log('isRoot');
@@ -103,7 +113,9 @@ export default {
                         this.$store.state.wallet,
                     );
 
-                    this.setDataItems();
+                    getDataItems(this.typeContract, (dataItem) => {
+                        this.items.push(dataItem);
+                    });
                     this.watchAll();
                 }
             }
@@ -115,15 +127,15 @@ export default {
                 const typeIndex = this.items.findIndex(dtype => dtype.typeHash === typeHash);
 
                 if (typeIndex !== -1) return;
-                let typeData = await this.setDataItem(typeHash, index);
+                let typeData = await getDataItem(this.typeContract, typeHash, index);
                 this.items.push(typeData);
             });
             this.typeContract.on('LogUpdate', async (typeHash, index) => {
                 console.log('LogUpdate  Data', typeHash, index, index.toNumber());
                 const typeIndex = this.items.findIndex(dtype => dtype.typeHash === typeHash);
 
                 if (typeIndex === -1) return;
-                let typeData = await this.setDataItem(typeHash, index);
+                let typeData = await getDataItem(this.typeContract, typeHash, index);
                 if (typeData && this.items[index]) {
                     Object.assign(this.items[index], typeData);
                 }
@@ -187,22 +199,6 @@ export default {
                 };
             });
         },
-        async setDataItem(hash, i) {
-            let typeData = await this.typeContract.getByHash(hash);
-            typeData.index = i;
-            typeData.typeHash = hash;
-            return typeData;
-        },
-        async setDataItems() {
-            let hash, typeData;
-            let count = await this.typeContract.count();
-
-            for (let i = 0; i < count; i++) {
-                hash = await this.typeContract.typeIndex(i);
-                let typeData = await this.setDataItem(hash, i);
-                this.items.push(typeData);
-            }
-        }
     },
 }
 </script>

client/src/vuex.js

@@ -62,12 +62,17 @@ const dTypeStore = new Vuex.Store({
                 commit('setContract', contract);
             });
         },
+        async getTypeStructByName({dispatch, state}, {lang, name}) {
+            const hash = await state.contract.getTypeHash(lang, name);
+            return dispatch('getTypeStruct', hash);
+        },
         async getTypeStruct({state}, hash) {
             let struct = await state.contract.getByHash(hash);
-            struct.types = await state.contract.getTypes(hash);
+            // struct.data.types = await state.contract.getTypes(hash);
+            struct.data.outputs = await state.contract.getOutputs(hash);
             struct.data.typeHash = hash;
             struct.data.index = struct.index.toNumber();
-            // console.log('getTypeStruct', struct);
+            // console.log('getTypeStruct', struct.data.name, struct.data);
             return struct.data;
         },
         async setTypes({dispatch, commit, state}) {