Refactor web3 and app store and remove vuex (snapshot-labs#537)

package.json

@@ -51,7 +51,6 @@
     "vue-router": "^4.0.9",
     "vue3-jazzicon": "^0.1.1",
     "vuedraggable": "^4.0.2",
-    "vuex": "^4.0.2",
     "walletlink": "^2.1.7"
   },
   "devDependencies": {

src/App.vue

@@ -1,26 +1,32 @@
 <script setup>
-import { computed, onMounted, watch } from 'vue';
-import { useStore } from 'vuex';
+import { computed, onMounted, provide, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useModal } from '@/composables/useModal';
 import { useI18n } from '@/composables/useI18n';
 import { useDomain } from '@/composables/useDomain';
+import { useApp } from '@/composables/useApp';
+import { useWeb3 } from '@/composables/useWeb3';
+import { useNotifications } from '@/composables/useNotifications';
 
 const { domain } = useDomain();
 const { loadLocale } = useI18n();
-const store = useStore();
 const route = useRoute();
-
 const { modalOpen } = useModal();
+const { init, spaces, app } = useApp();
+const { web3 } = useWeb3();
+const { notify } = useNotifications();
+
+provide('web3', web3);
+provide('notify', notify);
 
 const space = computed(() => {
   const key = domain || route.params.key;
-  return store.state.app.spaces[key] ? store.state.app.spaces[key] : {};
+  return spaces.value[key] ? spaces.value[key] : {};
 });
 
 onMounted(async () => {
   await loadLocale();
-  store.dispatch('init');
+  init();
 });
 
 watch(modalOpen, val => {

src/components/Block/CastVote.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, defineProps, defineEmits } from 'vue';
+import { useWeb3 } from '@/composables/useWeb3';
 
 const props = defineProps({
   proposal: {
@@ -11,6 +12,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'clickVote']);
 
+const { web3 } = useWeb3();
+
 const selectedChoices = computed(() => {
   if (Array.isArray(props.modelValue)) return props.modelValue.length;
   if (typeof props.modelValue === 'object' && props.modelValue !== null)
@@ -48,7 +51,7 @@ function emitChoice(c) {
       />
     </div>
     <UiButton
-      :disabled="app.authLoading || selectedChoices < 1"
+      :disabled="web3.authLoading || selectedChoices < 1"
       @click="$emit('clickVote')"
       class="d-block width-full button--submit"
     >

src/components/Block/Space.vue

@@ -1,16 +1,17 @@
 <script setup>
 import { computed, defineProps } from 'vue';
-import { useStore } from 'vuex';
+
 import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
+import { useWeb3 } from '@/composables/useWeb3';
 
 const props = defineProps({
   space: Object
 });
 
-const store = useStore();
 const auth = getInstance();
+const { web3 } = useWeb3();
 
-const web3Account = computed(() => store.state.web3.account);
+const web3Account = computed(() => web3.value.account);
 
 const isAdmin = computed(() => {
   const admins = props.space.admins.map(address => address.toLowerCase());

src/components/Block/Votes.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { ref, computed, watch, toRefs, defineProps } from 'vue';
-import { useStore } from 'vuex';
 import { getChoiceString } from '@/helpers/utils';
 import { useProfiles } from '@/composables/useProfiles';
+import { useWeb3 } from '@/composables/useWeb3';
 
 const props = defineProps({
   space: Object,
@@ -12,17 +12,16 @@ const props = defineProps({
   strategies: Object
 });
 
-const store = useStore();
-
 const format = getChoiceString;
 
 const { votes } = toRefs(props);
+const { web3 } = useWeb3();
 
 const showAllVotes = ref(false);
 const authorIpfsHash = ref('');
 const modalReceiptOpen = ref(false);
 
-const web3Account = computed(() => store.state.web3.account);
+const web3Account = computed(() => web3.value.account);
 
 const visibleVotes = computed(() =>
   showAllVotes.value ? sortVotesUserFirst() : sortVotesUserFirst().slice(0, 10)

src/components/Modal/About.vue

@@ -3,11 +3,14 @@ import { defineEmits, defineProps } from 'vue';
 import pkg from '@/../package.json';
 import languages from '@/locales/languages.json';
 import gateways from '@snapshot-labs/snapshot.js/src/gateways.json';
+import { useWeb3 } from '@/composables/useWeb3';
 
 defineProps(['open']);
 
 const emit = defineEmits(['close', 'openLang']);
 
+const { web3 } = useWeb3();
+
 const gateway = import.meta.env.VITE_IPFS_GATEWAY || gateways[0];
 const commitSha = import.meta.env.VITE_COMMIT_SHA;
 const hubUrl = import.meta.env.VITE_HUB_URL;

src/components/Modal/Account.vue

@@ -1,22 +1,22 @@
 <script setup>
 import { toRefs, ref, watch, computed, defineProps, defineEmits } from 'vue';
-import { useStore } from 'vuex';
 import { getInjected } from '@snapshot-labs/lock/src/utils';
 import connectors from '@/helpers/connectors.json';
+import { useWeb3 } from '@/composables/useWeb3';
 
 const props = defineProps(['open']);
 
 const emit = defineEmits(['login', 'close']);
 
-const store = useStore();
 const { open } = toRefs(props);
+const { web3, logout } = useWeb3();
 
 const step = ref(null);
 
 const injected = computed(() => getInjected());
 
 async function handleLogout() {
-  await store.dispatch('logout');
+  await logout();
   emit('close');
 }
 

src/components/Modal/Confirm.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, defineProps, defineEmits } from 'vue';
-import { useStore } from 'vuex';
 import { getChoiceString } from '@/helpers/utils';
+import { useClient } from '@/composables/useClient';
 
 const props = defineProps({
   open: Boolean,
@@ -16,7 +16,7 @@ const props = defineProps({
 
 const emit = defineEmits(['reload', 'close']);
 
-const store = useStore();
+const { send } = useClient();
 
 const loading = ref(false);
 const symbols = computed(() =>
@@ -27,14 +27,11 @@ const format = getChoiceString;
 
 async function handleSubmit() {
   loading.value = true;
-  await store.dispatch('send', {
-    space: props.space.key,
-    type: 'vote',
-    payload: {
-      proposal: props.proposal.id,
-      choice: props.selectedChoices,
-      metadata: {}
-    }
+  console.log(props.space.key);
+  await send(props.space.key, 'vote', {
+    proposal: props.proposal.id,
+    choice: props.selectedChoices,
+    metadata: {}
   });
   emit('reload');
   emit('close');

src/components/Plugin/Aragon/CustomBlock.vue

@@ -1,9 +1,9 @@
 <script>
-import { mapActions } from 'vuex';
 import plugins from '@snapshot-labs/snapshot.js/src/plugins';
 
 export default {
   props: ['id', 'space', 'proposal', 'results', 'loaded'],
+  inject: ['web3', 'notify'],
   data() {
     return {
       loading: false
@@ -30,13 +30,12 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['notify']),
     async execute(plugin) {
       this.loading = true;
       const action = new plugins[plugin]();
       try {
         const tx = await action.action(
-          this.web3.network.key,
+          this.web3.value.network.key,
           this.$auth.web3,
           this.space.plugins[plugin],
           this.proposal.plugins[plugin],

src/components/Plugin/POAP/CustomBlock.vue

@@ -1,6 +1,5 @@
 <script>
 import Plugin from '@snapshot-labs/snapshot.js/src/plugins/poap';
-import { mapActions } from 'vuex';
 
 const STATES = {
   NO_POAP: {
@@ -42,6 +41,7 @@ const CLAIMED = 'CLAIMED';
 
 export default {
   props: ['space', 'proposal', 'results', 'loaded', 'strategies', 'votes'],
+  inject: ['web3', 'notify'],
   data() {
     return {
       loading: false,
@@ -54,7 +54,7 @@ export default {
   },
   computed: {
     web3Account() {
-      return this.$store.state.web3.account;
+      return this.web3.value.account;
     },
     header() {
       return STATES[this.currentState].header;
@@ -105,7 +105,6 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['notify']),
     async action() {
       switch (this.currentState) {
         case CLAIMED:

src/components/Topnav.vue

@@ -1,14 +1,17 @@
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue';
-import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import { useModal } from '@/composables/useModal';
 import { useDomain } from '@/composables/useDomain';
+import { useApp } from '@/composables/useApp';
+import { useWeb3 } from '@/composables/useWeb3';
 
 const { modalAccountOpen } = useModal();
 const { env, domain } = useDomain();
 const route = useRoute();
-const store = useStore();
+
+const { spaces } = useApp();
+const { login, web3 } = useWeb3();
 
 const loading = ref(false);
 const modalAboutOpen = ref(false);
@@ -17,26 +20,26 @@ const modalWalletNotice = ref(false);
 
 const space = computed(() => {
   const key = domain || route.params.key;
-  return store.state.app.spaces[key] ? store.state.app.spaces[key] : false;
+  return spaces.value[key] ? spaces.value[key] : false;
 });
 
-const walletConnectType = computed(() => store.state.web3.walletConnectType);
-
 function setTitle() {
   document.title = space.value.name ? space.value.name : 'Snapshot';
 }
 
 async function handleLogin(connector) {
   modalAccountOpen.value = false;
   loading.value = true;
-  await store.dispatch('login', connector);
+  await login(connector);
   loading.value = false;
 }
 
 watch(space, () => {
   setTitle();
 });
 
+const walletConnectType = computed(() => web3.value.walletConnectType);
+
 watch(walletConnectType, val => {
   if (val === 'Gnosis Safe Multisig') modalWalletNotice.value = true;
 });
@@ -70,7 +73,7 @@ onMounted(() => setTitle());
               <UiButton
                 @click="modalAccountOpen = true"
                 class="button-outline"
-                :loading="app.authLoading"
+                :loading="web3.authLoading"
               >
                 <UiAvatar
                   :imgsrc="
@@ -91,7 +94,7 @@ onMounted(() => setTitle());
             <UiButton
               v-if="!$auth.isAuthenticated.value"
               @click="modalAccountOpen = true"
-              :loading="loading || app.authLoading"
+              :loading="loading || web3.authLoading"
             >
               <span class="hide-sm" v-text="$t('connectWallet')" />
               <Icon

src/composables/useApp.ts

@@ -0,0 +1,57 @@
+import { ref, computed, reactive } from 'vue';
+import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
+import client from '@/helpers/client';
+import { formatSpace } from '@/helpers/utils';
+import { useWeb3 } from '@/composables/useWeb3';
+
+const state = reactive({
+  init: false,
+  loading: false
+});
+
+const spaces = ref({});
+const strategies = ref({});
+
+const { login } = useWeb3();
+
+export function useApp() {
+  async function init() {
+    const auth = getInstance();
+    state.loading = true;
+    await Promise.all([getSpaces(), getStrategies()]);
+    auth.getConnector().then(connector => {
+      if (connector) login(connector);
+    });
+    state.init = true;
+    state.loading = false;
+  }
+
+  async function getSpaces() {
+    let spacesObj: any = await client.getSpaces();
+    spacesObj = Object.fromEntries(
+      Object.entries(spacesObj).map(space => [
+        space[0],
+        formatSpace(space[0], space[1])
+      ])
+    );
+
+    spaces.value = spacesObj;
+    return spacesObj;
+  }
+
+  async function getStrategies() {
+    const strategiesObj: any = await fetch(
+      'https://score.snapshot.org/api/strategies'
+    ).then(res => res.json());
+    strategies.value = strategiesObj;
+    return strategiesObj;
+  }
+
+  return {
+    init,
+    getSpaces,
+    app: computed(() => state),
+    spaces: computed(() => spaces.value),
+    strategies: computed(() => strategies.value)
+  };
+}