stage-1

.env

@@ -1,3 +1,4 @@
-VUE_APP_HUB_URL=https://testnet.snapshot.page
+# VUE_APP_HUB_URL=https://snapshot-hub.herokuapp.com/
+VUE_APP_HUB_URL=""
 VUE_APP_IPFS_GATEWAY=gateway.ipfs.io
 VUE_APP_DEFAULT_NETWORK=1

package.json

@@ -4,7 +4,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "start": "vue-cli-service serve"
   },
   "dependencies": {
     "@ensdomains/content-hash": "^2.5.3",
@@ -39,6 +40,7 @@
     "eslint": "^6.7.2",
     "ethereumjs-util": "^7.0.7",
     "fortmatic": "^2.0.6",
+    "iotex-antenna": "^0.30.4",
     "jsonexport": "^3.0.1",
     "lodash": "^4.17.15",
     "numeral": "^2.0.4",
@@ -48,6 +50,7 @@
     "remarkable": "^2.0.1",
     "sanitize-html": "^1.27.1",
     "serve-static": "^1.14.1",
+    "sleep-promise": "^9.1.0",
     "stylus": "^0.54.8",
     "stylus-loader": "^3.0.2",
     "typescript": "~3.9.3",
@@ -61,6 +64,7 @@
     "vue3-jazzicon": "^0.1.1",
     "vuedraggable": "^4.0.1",
     "vuex": "^4.0.0-alpha.1",
+    "vuex-persistedstate": "^4.0.0-beta.3",
     "walletlink": "^2.0.2"
   },
   "devDependencies": {

src/App.vue

@@ -20,6 +20,9 @@ export default {
     'app.modalOpen': function(val) {
       const el = document.body;
       el.classList[val ? 'add' : 'remove']('overflow-hidden');
+    },
+    'web3.account': async function() {
+      this.checkAuth();
     }
   },
   computed: {
@@ -36,7 +39,7 @@ export default {
     this.init();
   },
   methods: {
-    ...mapActions(['init'])
+    ...mapActions(['init', 'checkAuth'])
   }
 };
 </script>

src/auth.ts

@@ -5,6 +5,10 @@ import walletconnect from '@snapshot-labs/lock/connectors/walletconnect';
 import walletlink from '@snapshot-labs/lock/connectors/walletlink';
 import torus from '@snapshot-labs/lock/connectors/torus';
 import connectors from '@/helpers/connectors.json';
+import Antenna from 'iotex-antenna';
+import { Account } from 'iotex-antenna/lib/account/account';
+
+const IOTEX_NET = 'http://api.testnet.iotex.one:80';
 
 const options: any = { connectors: [] };
 const lockConnectors = {
@@ -24,4 +28,17 @@ Object.entries(connectors).forEach((connector: any) => {
   });
 });
 
+export async function createIotexAccount(): Promise<Account> {
+  const antenna = new Antenna(IOTEX_NET);
+  const account = antenna.iotx.accounts.create();
+  return account;
+}
+
+export async function importIotexAccount(address: string): Promise<Account> {
+  const anntenna = new Antenna(IOTEX_NET);
+  const account = anntenna.iotx.accounts.addressToAccount(address);
+  // const account = anntenna.iotx.accounts.privateKeyToAccount(privateKey);
+  return account;
+}
+
 export default options;

src/components/Modal/Account.vue

@@ -2,92 +2,64 @@
   <UiModal :open="open" @close="$emit('close')">
     <template v-slot:header>
       <h3 v-if="!web3.account || step === 'connect'">Connect wallet</h3>
-      <h3 v-else>Account</h3>
-    </template>
-    <div v-if="!web3.account || step === 'connect'">
-      <div class="m-4 mb-5">
+      <div v-else>
+        <h3>Account</h3>
+        <p>{{ web3.account }}</p>
         <a
-          v-for="(connector, id, i) in connectors"
-          :key="i"
-          @click="$emit('login', connector.id)"
+          :href="`https://testnet.iotexscan.io/address/${web3.account}`"
           target="_blank"
           class="mb-2 d-block"
         >
-          <UiButton
-            v-if="id !== 'injected'"
-            class="button-outline width-full v-align-middle"
-          >
-            <img
-              :src="`${path}/${connector.id}.png`"
-              height="28"
-              width="28"
-              class="mr-1 v-align-middle"
-            />
-            {{ connector.name }}
-          </UiButton>
-          <UiButton
-            v-else-if="injected"
-            class="button-outline width-full v-align-middle"
-          >
-            <img
-              :src="`${path}/${injected.id}.png`"
-              height="28"
-              width="28"
-              class="mr-1 v-align-middle"
-            />
-            {{ injected.name }}
+          <UiButton class="button-outline width-full v-align-middle">
+            view on iotex
           </UiButton>
         </a>
       </div>
-    </div>
-    <div v-else>
-      <div v-if="$auth.isAuthenticated.value" class="m-4">
-        <a
-          :href="_explorer(web3.network.key, web3.account)"
-          target="_blank"
-          class="mb-2 d-block"
-        >
-          <UiButton class="button-outline width-full">
-            <Avatar
-              :profile="web3.profile"
-              :address="web3.account"
-              size="16"
-              class="mr-2 ml-n1"
-            />
-            <span v-if="web3.profile.name" v-text="web3.profile.name" />
-            <span v-else-if="web3.profile.ens" v-text="web3.profile.ens" />
-            <span v-else v-text="_shorten(web3.account)" />
-            <Icon name="external-link" class="ml-1" />
-          </UiButton>
-        </a>
-        <a
-          v-if="web3.profile?.name || web3.profile?.image"
-          :href="`https://3box.io/${web3.account}/edit`"
-          target="_blank"
-          class="mb-2 d-block"
-        >
-          <UiButton class="button-outline width-full">
-            Edit profile on 3Box
-            <Icon name="external-link" class="ml-1" />
-          </UiButton>
-        </a>
-        <a
-          v-else
-          href="https://3box.io/hub"
-          target="_blank"
-          class="mb-2 d-block"
+    </template>
+    <div v-if="!web3.account && step !== 'import'">
+      <a
+        href="https://beancount.io/wallet"
+        target="_blank"
+        class="mb-2 d-block"
+      >
+        <UiButton
+          class="button-outline width-full v-align-middle"
+          @click="createAccount"
         >
-          <UiButton class="button-outline width-full">
-            Create profile on 3Box
-            <Icon name="external-link" class="ml-1" />
-          </UiButton>
-        </a>
+          create iotex account
+        </UiButton>
+      </a>
+      <UiButton
+        class="button-outline width-full v-align-middle"
+        @click="loginWithIopay"
+      >
+        login with IoPay
+      </UiButton>
+      <UiButton
+        class="button-outline width-full v-align-middle"
+        @click="toImportForm"
+      >
+        import iotex
+      </UiButton>
+    </div>
+    <div v-if="step === 'import'">
+      <form>
+        <input
+          v-model="privateKey"
+          class="form-control input-block"
+          type="text"
+          placeholder="address"
+        />
         <UiButton
-          @click="step = 'connect'"
-          class="button-outline width-full mb-2"
+          class="button-outline width-full v-align-middle"
+          @click="importAccount"
         >
-          Connect wallet
+          Import
         </UiButton>
+      </form>
+    </div>
+    <div v-else>
+      <div v-if="$auth.isAuthenticated.value" class="m-4">
         <UiButton
           @click="handleLogout"
           class="button-outline width-full text-red mb-2"
@@ -101,35 +73,36 @@
 
 <script>
 import { mapActions } from 'vuex';
-import { getInjected } from '@snapshot-labs/lock/src/utils';
-import connectors from '@/helpers/connectors.json';
 
 export default {
   props: ['open'],
   emits: ['login', 'close'],
   data() {
     return {
-      connectors,
       step: null,
-      path:
-        'https://raw.githubusercontent.com/snapshot-labs/lock/master/connectors/assets'
+      privateKey: ''
     };
   },
   watch: {
     open() {
       this.step = null;
     }
   },
-  computed: {
-    injected() {
-      return getInjected();
-    }
-  },
   methods: {
-    ...mapActions(['logout']),
+    ...mapActions(['logout', 'loginWithIotex', 'loginWithIopay']),
     async handleLogout() {
       await this.logout();
       this.$emit('close');
+    },
+    toImportForm() {
+      this.step = 'import';
+    },
+    async importAccount() {
+      if (this.privateKey) {
+        await this.loginWithIotex(this.privateKey);
+      }
+      console.log(this.web3);
+      this.$emit('close');
     }
   }
 };

src/components/Topnav.vue

@@ -34,18 +34,12 @@
             </router-link>
           </div>
           <div :key="web3.account">
-            <template v-if="$auth.isAuthenticated.value">
+            <template v-if="web3.account">
               <UiButton
                 @click="modalOpen = true"
                 class="button-outline"
                 :loading="app.authLoading"
               >
-                <Avatar
-                  :profile="web3.profile"
-                  :address="web3.account"
-                  size="16"
-                  class="mr-n1 mr-sm-2 mr-md-2 mr-lg-2 mr-xl-2 ml-n1"
-                />
                 <span
                   v-if="web3.profile?.name || web3.profile?.ens"
                   v-text="web3.profile.name || web3.profile.ens"
@@ -55,7 +49,7 @@
               </UiButton>
             </template>
             <UiButton
-              v-if="!$auth.isAuthenticated.value"
+              v-if="!web3.account"
               @click="modalOpen = true"
               :loading="loading || app.authLoading"
             >

src/helpers/mock.ts

@@ -0,0 +1,21 @@
+export const getScores = async (
+    key: string,
+    strategies: any[],
+    network: string,
+    provider: string,
+    addresses: any[]
+) => [100, 100];
+
+export const signMessage = async (
+    web3: string,
+    message: any,
+    account: string
+) => 'sign_message_placeholder';
+
+export const getBlockNumber = (provider: string) => {
+    return 10;
+};
+
+export const getProvider = (network: string) => {
+    return 'test.iotex';
+};

src/store/index.ts

@@ -1,11 +1,16 @@
 import { createStore } from 'vuex';
 import modules from '@/store/modules';
+import createPersistedState from 'vuex-persistedstate'
+
+
+const web3State = createPersistedState({
+  paths: ['web3']
+});
 
-// TODO: fix this typing error
-// @ts-ignore
 const store = createStore({
   modules,
-  strict: process.env.NODE_ENV !== 'production'
+  strict: process.env.NODE_ENV !== 'production',
+  plugins: [web3State]
 });
 
 export default store;

src/store/modules/app.ts

@@ -1,11 +1,12 @@
 import { getProfiles } from '@/helpers/profile';
 import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
-import { ipfsGet, getScores } from '@snapshot-labs/snapshot.js/src/utils';
-import {
-  getBlockNumber,
-  signMessage
-} from '@snapshot-labs/snapshot.js/src/utils/web3';
-import getProvider from '@snapshot-labs/snapshot.js/src/utils/provider';
+import { ipfsGet } from '@snapshot-labs/snapshot.js/src/utils';
+import { getScores } from '@/helpers/mock';
+// import { getBlockNumber } from '@snapshot-labs/snapshot.js/src/utils/web3';
+import { getBlockNumber } from '@/helpers/mock';
+import { signMessage } from '@/helpers/mock';
+
+import { getProvider } from '@/helpers/mock';
 import gateways from '@snapshot-labs/snapshot.js/src/gateways.json';
 import client from '@/helpers/client';
 import { formatProposal, formatProposals, formatSpace } from '@/helpers/utils';
@@ -73,6 +74,7 @@ const actions = {
     auth.getConnector().then(connector => {
       if (connector) dispatch('login', connector);
     });
+    dispatch('checkAuth');
     commit('SET', { loading: false, init: true });
   },
   loading: ({ commit }, payload) => {
@@ -128,7 +130,7 @@ const actions = {
     commit('GET_PROPOSALS_REQUEST');
     try {
       let proposals: any = await client.request(`${space.key}/proposals`);
-      if (proposals && !space.filters?.onlyMembers) {
+      if (Object.keys(proposals).length > 0 && !space.filters?.onlyMembers) {
         const scores: any = await getScores(
           space.key,
           space.strategies,