Use sendTransaction from Snapshot.js (snapshot-labs#150)

* Add page skins

* Use sendTransaction from Snapshot.js

package.json

@@ -12,8 +12,10 @@
     "@ensdomains/content-hash": "^2.5.3",
     "@ethersproject/abi": "^5.0.1",
     "@ethersproject/address": "^5.0.1",
+    "@ethersproject/bytes": "^5.0.5",
     "@ethersproject/constants": "^5.0.1",
     "@ethersproject/contracts": "^5.0.1",
+    "@ethersproject/hash": "^5.0.6",
     "@ethersproject/providers": "^5.0.12",
     "@ethersproject/units": "^5.0.1",
     "@ethersproject/wallet": "^5.0.1",
@@ -27,7 +29,7 @@
     "@vue/cli-plugin-typescript": "^4.4.0",
     "@vue/cli-service": "^4.4.0",
     "@walletconnect/web3-provider": "^1.3.1",
-    "ajv": "^7.0.0-beta.1",
+    "ajv": "^7.0.0-beta.2",
     "bluebird": "^3.7.2",
     "body-parser": "^1.19.0",
     "bs58": "^4.0.1",
@@ -57,8 +59,7 @@
     "vue-textarea-autosize": "^1.1.1",
     "vuedraggable": "^2.24.1",
     "vuex": "^3.4.0",
-    "walletlink": "^2.0.2",
-    "web3-eth-abi": "^1.3.0"
+    "walletlink": "^2.0.2"
   },
   "devDependencies": {
     "@types/node": "^14.0.13",

src/components/Block/Results.vue

@@ -41,17 +41,10 @@
           _get(payload, 'metadata.plugins.aragon') &&
             _get(space, 'plugins.aragon')
         "
-        @click="submitOnChain"
+        @click="executePlugin('aragon')"
         :loading="loading"
         class="width-full mt-2 button--submit"
       >
-        <img
-          class="mr-1 circle v-align-middle"
-          src="https://raw.githubusercontent.com/balancer-labs/snapshot/develop/src/assets/aragon.svg"
-          width="26"
-          height="26"
-          style="margin-top: -4px;"
-        />
         Submit on-chain
       </UiButton>
       <UiButton v-else @click="downloadReport" class="width-full mt-2">
@@ -65,7 +58,6 @@
 import { mapActions } from 'vuex';
 import * as jsonexport from 'jsonexport/dist';
 import plugins from '@snapshot-labs/snapshot.js/src/plugins';
-import { sendTransaction } from '@/helpers/web3';
 import pkg from '@/../package.json';
 
 export default {
@@ -123,32 +115,23 @@ export default {
         console.error(e);
       }
     },
-    async submitOnChain() {
-      if (!this.space.plugins || !this.space.plugins.aragon) return;
+    async executePlugin(plugin) {
+      if (!this.space.plugins || !this.space.plugins[plugin]) return;
       this.loading = true;
-      const aragon = new plugins['aragon']();
-      const callsScript = aragon.execute(
-        this.space.plugins.aragon,
-        this.payload.metadata.plugins.aragon[`choice${this.winningChoice}`]
-      );
-      console.log(
-        `Submit on-chain
-Proposal #${this.id} on-chain
-Option: ${this.winningChoice}
-Callsscript: ${callsScript}`
-      );
+      const aragon = new plugins[plugin]();
       try {
-        const tx = await sendTransaction(this.$auth.web3, [
-          'DisputableDelay',
-          this.space.plugins.aragon.disputableDelayAddress,
-          'delayExecution',
-          [callsScript, this.id]
-        ]);
-        console.log(tx);
+        const result = await aragon.execute(
+          this.$auth.web3,
+          this.space.plugins[plugin],
+          this.payload.metadata.plugins[plugin],
+          this.id,
+          this.winningChoice
+        );
+        console.log('Result', result);
+        this.notify(['green', `The settlement is on-chain, congrats!`]);
       } catch (e) {
         console.error(e);
       }
-      this.notify(['green', `The settlement is on-chain, congrats!`]);
       this.loading = false;
     }
   }

src/components/Block/Skin.vue

@@ -0,0 +1,16 @@
+<template>
+  <div :class="skin.key" class="bg-black rounded-0 rounded-md-2">
+    <Block>
+      <UiButton class="button--submit mb-2">{{ skin.key }}</UiButton>
+      <div class="text-gray">
+        In {{ _numeral(skin.spaces.length) }} space(s)
+      </div>
+    </Block>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['skin']
+};
+</script>

src/components/Modal/Networks.vue

@@ -1,7 +1,7 @@
 <template>
   <UiModal :open="open" @close="$emit('close')">
     <h3 class="m-4 text-center">Networks</h3>
-    <div class="px-4">
+    <div class="mx-0 mx-md-4">
       <BlockNetwork
         v-for="network in networks"
         :key="network.key"

src/components/Modal/Plugins.vue

@@ -7,13 +7,7 @@
       class="m-4 mt-0 p-4 border rounded-2 text-white"
     >
       <div v-if="selected === false" class="text-center">
-        <img
-          class="circle"
-          :src="plugin.image"
-          style="background-color: #6a6de4;"
-          width="64"
-          height="64"
-        />
+        <img class="circle" :src="getLogoUrl(i)" width="64" height="64" />
         <h3 v-text="plugin.name" />
         <div class="mb-2">
           <a :href="plugin.website" target="_blank" class="text-white">
@@ -78,6 +72,11 @@ export default {
         return [plugin[0], instance];
       })
     );
+  },
+  methods: {
+    getLogoUrl(plugin) {
+      return `https://raw.githubusercontent.com/snapshot-labs/snapshot.js/master/src/plugins/${plugin}/logo.png`;
+    }
   }
 };
 </script>

src/components/Modal/Skins.vue

@@ -1,30 +1,22 @@
 <template>
   <UiModal :open="open" @close="$emit('close')">
     <h3 class="m-4 text-center">Skins</h3>
-    <div class="px-4">
-      <div
-        v-for="skin in skins"
-        :key="skin"
-        :class="skin"
-        class="bg-black text-center rounded-0 rounded-md-2"
-      >
-        <Block>
-          <UiButton class="button--submit">{{ skin }}</UiButton>
-        </Block>
-      </div>
+    <div class="mx-0 mx-md-4">
+      <BlockSkin v-for="skin in skins" :key="skin.key" :skin="skin" />
     </div>
   </UiModal>
 </template>
 
 <script>
 import skins from '@/helpers/skins';
+import { filterSkins } from '@/helpers/utils';
 
 export default {
   props: ['open'],
-  data() {
-    return {
-      skins
-    };
+  computed: {
+    skins() {
+      return filterSkins(skins, this.app.spaces, '');
+    }
   }
 };
 </script>

src/components/TextareaArray.vue

@@ -0,0 +1,31 @@
+<template>
+  <textarea-autosize @input="handleInput" v-model="input" />
+</template>
+
+<script>
+export default {
+  props: {
+    value: Array
+  },
+  data() {
+    return {
+      input: ''
+    };
+  },
+  created() {
+    if (this.value) this.input = this.value.join('\n');
+  },
+  methods: {
+    handleInput() {
+      const input = this.input
+        .replace(/\n/g, ' ')
+        .replace(/,/g, ' ')
+        .replace(/;/g, ' ')
+        .split(' ')
+        .map(item => item.trim())
+        .filter(item => !!item);
+      this.$emit('input', input);
+    }
+  }
+};
+</script>

src/helpers/utils.ts

@@ -76,6 +76,18 @@ export function filterNetworks(networks, spaces, q) {
     .sort((a, b) => b.spaces.length - a.spaces.length);
 }
 
+export function filterSkins(skins, spaces, q) {
+  return skins
+    .map(skin => ({
+      key: skin,
+      spaces: Object.entries(spaces)
+        .filter((space: any) => space[1].skin === skin)
+        .map(space => space[0])
+    }))
+    .filter(skin => skin.key.toLowerCase().includes(q.toLowerCase()))
+    .sort((a, b) => b.spaces.length - a.spaces.length);
+}
+
 export function formatSpace(key, space) {
   space = {
     key,

src/helpers/web3.ts

@@ -1,8 +1,5 @@
-import { Contract } from '@ethersproject/contracts';
-import { getAddress } from '@ethersproject/address';
 import resolveENSContentHash from '@/helpers/resolveENSContentHash';
 import { decodeContenthash } from '@/helpers/content';
-import abi from '@/helpers/abi';
 
 export async function resolveContent(provider, name) {
   const contentHash = await resolveENSContentHash(name, provider);
@@ -21,21 +18,3 @@ export async function getBlockNumber(provider) {
     return Promise.reject();
   }
 }
-
-export async function sendTransaction(
-  web3,
-  [contractType, contractAddress, action, params]
-) {
-  const signer = web3.getSigner();
-  const contract = new Contract(
-    getAddress(contractAddress),
-    abi[contractType],
-    web3
-  );
-  const contractWithSigner = contract.connect(signer);
-  const overrides = {};
-  // overrides.gasLimit = 12e6;
-  const tx = await contractWithSigner[action](...params, overrides);
-  await tx.wait();
-  return tx;
-}

src/router.ts

@@ -8,6 +8,7 @@ import Create from '@/views/Create.vue';
 import Settings from '@/views/Settings.vue';
 import Networks from '@/views/Networks.vue';
 import Strategies from '@/views/Strategies.vue';
+import Skins from '@/views/Skins.vue';
 import Delegate from '@/views/Delegate.vue';
 
 Vue.use(VueRouter);
@@ -17,6 +18,7 @@ const routes: Array<RouteConfig> = [
   { path: '/:key/settings/:from?', name: 'settings', component: Settings },
   { path: '/networks', name: 'networks', component: Networks },
   { path: '/strategies', name: 'strategies', component: Strategies },
+  { path: '/skins', name: 'skins', component: Skins },
   { path: '/delegate', name: 'delegate', component: Delegate },
   { path: '/:key/proposal/:id', name: 'proposal', component: Proposal },
   { path: '/:key/create', name: 'create', component: Create },

src/views/Delegate.vue

@@ -52,8 +52,7 @@ import { mapActions } from 'vuex';
 import { isAddress } from '@ethersproject/address';
 import { keccak256 } from '@ethersproject/keccak256';
 import { toUtf8Bytes } from '@ethersproject/strings';
-import { call } from '@snapshot-labs/snapshot.js/src/utils';
-import { sendTransaction } from '@/helpers/web3';
+import { call, sendTransaction } from '@snapshot-labs/snapshot.js/src/utils';
 import getProvider from '@/helpers/provider';
 import abi from '@/helpers/abi';
 
@@ -66,7 +65,7 @@ export default {
       loading: false,
       form: {
         // address: '0x0000000000000000000000000000000000baDDAd',
-        // id: 'test_1_project'
+        // id: 'test'
       }
     };
   },
@@ -98,13 +97,15 @@ export default {
     async handleSubmit() {
       this.loading = true;
       try {
-        const tx = await sendTransaction(this.$auth.web3, [
-          'DelegateRegistry',
+        const tx = await sendTransaction(
+          this.$auth.web3,
           contractAddress,
+          abi['DelegateRegistry'],
           'setDelegate',
           [keccak256(toUtf8Bytes(this.form.id)), this.form.address]
-        ]);
-        console.log(tx);
+        );
+        const receipt = await tx.wait();
+        console.log('Receipt', receipt);
         this.notify('You did it!');
       } catch (e) {
         console.log(e);