Add 3Box profile integration to the Snapshot app

src/components/Avatar.vue

@@ -1,13 +1,27 @@
 <template>
-  <jazzicon
-    :address="address"
-    :diameter="parseInt(size) || 22"
-    class="d-inline-block v-align-middle line-height-0"
-  />
+  <span>
+    <img
+      v-if="profile && profile.image"
+      :src="_ipfsUrl(profile.image)"
+      :style="{
+        width: `${parseInt(size) || 22}px`,
+        height: `${parseInt(size) || 22}px`,
+        verticalAlign: 'middle'
+      }"
+      @error="error = true"
+      class="circle border line-height-0"
+    />
+    <jazzicon
+      v-else
+      :address="address"
+      :diameter="parseInt(size) || 22"
+      class="d-inline-block v-align-middle line-height-0"
+    />
+  </span>
 </template>
 
 <script>
 export default {
-  props: ['address', 'size']
+  props: ['address', 'size', 'profile']
 };
 </script>

src/components/Block/Votes.vue

@@ -11,7 +11,12 @@
       :style="i === 0 && 'border: 0 !important;'"
       class="px-4 py-3 border-top d-flex"
     >
-      <User :address="address" :space="space" class="column" />
+      <User
+        :profile="vote.profile"
+        :address="address"
+        :space="space"
+        class="column"
+      />
       <div
         v-text="
           _shorten(

src/components/Modal/Account.vue

@@ -48,12 +48,40 @@
           class="mb-2 d-block"
         >
           <UiButton class="button-outline width-full">
-            <Avatar :address="web3.account" size="16" class="mr-2 ml-n1" />
-            <span v-if="web3.name" v-text="web3.name" />
+            <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.name" v-text="web3.name" />
             <span v-else v-text="_shorten(web3.account)" />
             <Icon name="external-link" class="ml-1" />
           </UiButton>
         </a>
+        <a
+          v-if="web3.profile.name"
+          :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"
+        >
+          <UiButton class="button-outline width-full">
+            Create profile on 3Box
+            <Icon name="external-link" class="ml-1" />
+          </UiButton>
+        </a>
         <UiButton
           @click="step = 'connect'"
           class="button-outline width-full mb-2"

src/components/Modal/User.vue

@@ -1,8 +1,9 @@
 <template>
   <UiModal :open="open" @close="$emit('close')">
     <div class="m-4 mb-0 text-center">
-      <Avatar :address="address" size="64" class="mb-4" />
-      <h3 v-text="_shorten(address)" />
+      <Avatar :profile="profile" :address="address" size="64" class="mb-4" />
+      <h3 v-if="profile && profile.name" class="mt-3" v-text="profile.name" />
+      <h3 v-else v-text="_shorten(address)" class="mt-3" />
     </div>
     <div class="m-4">
       <a
@@ -15,12 +16,23 @@
           <Icon name="external-link" class="ml-1" />
         </UiButton>
       </a>
+      <a
+        v-if="profile && profile.name"
+        :href="`https://3box.io/${address}`"
+        target="_blank"
+        class="mb-2 d-block"
+      >
+        <UiButton class="button-outline width-full">
+          View profile on 3Box
+          <Icon name="external-link" class="ml-1" />
+        </UiButton>
+      </a>
     </div>
   </UiModal>
 </template>
 
 <script>
 export default {
-  props: ['open', 'address', 'space']
+  props: ['open', 'address', 'space', 'profile']
 };
 </script>

src/components/Topnav.vue

@@ -41,18 +41,28 @@
                 :loading="app.authLoading"
               >
                 <Avatar
+                  :profile="web3.profile"
                   :address="web3.account"
                   size="16"
                   class="mr-0 mr-sm-2 mr-md-2 mr-lg-2 mr-xl-2 ml-n1"
                 />
-                <span v-if="web3.name" v-text="web3.name" class="hide-sm" />
+                <span
+                  v-if="web3.profile && web3.profile.name"
+                  v-text="web3.profile.name"
+                  class="hide-sm"
+                />
+                <span
+                  v-else-if="web3.name"
+                  v-text="web3.name"
+                  class="hide-sm"
+                />
                 <span v-else v-text="_shorten(web3.account)" class="hide-sm" />
               </UiButton>
             </template>
             <UiButton
               v-if="!$auth.isAuthenticated"
               @click="modalOpen = true"
-              :loading="loading"
+              :loading="loading || app.authLoading"
             >
               <span class="hide-sm" v-text="'Connect wallet'" />
               <Icon

src/components/User.vue

@@ -1,12 +1,13 @@
 <template>
   <span>
     <a @click="modalOpen = true" class="no-wrap">
-      <Avatar :address="address" size="16" class="mr-1" />
+      <Avatar :profile="profile" :address="address" size="16" class="mr-1" />
       {{ name }}
       <Badges :address="address" :space="space" />
     </a>
     <portal to="modal">
       <ModalUser
+        :profile="profile"
         :open="modalOpen"
         @close="modalOpen = false"
         :space="space"
@@ -18,14 +19,17 @@
 
 <script>
 export default {
-  props: ['address', 'space'],
+  props: ['address', 'space', 'profile'],
   data() {
     return {
       modalOpen: false
     };
   },
   computed: {
     name() {
+      if (this.profile && this.profile.name) {
+        return this.profile.name;
+      }
       return this.web3.account &&
         this.address.toLowerCase() === this.web3.account.toLowerCase()
         ? 'You'

src/helpers/3box.ts

@@ -0,0 +1,14 @@
+import { subgraphRequest } from '@snapshot-labs/snapshot.js/src/utils';
+
+export async function getProfiles(addresses) {
+  return subgraphRequest('https://api.3box.io/graph', {
+    profiles: {
+      __args: {
+        ids: addresses
+      },
+      name: true,
+      eth_address: true,
+      image: true
+    }
+  });
+}

src/mixins.ts

@@ -47,7 +47,7 @@ export default {
       return shorten(str);
     },
     _ipfsUrl(ipfsHash: string): string {
-      return `https://${process.env.VUE_APP_IPFS_NODE}/ipfs/${ipfsHash}`;
+      return `https://${process.env.VUE_APP_IPFS_GATEWAY}/ipfs/${ipfsHash}`;
     },
     _explorer(network, str: string, type = 'address'): string {
       return `${networks[network].explorer}/${type}/${str}`;

src/store/modules/app.ts

@@ -1,3 +1,4 @@
+import { getProfiles } from '@/helpers/3box';
 import Vue from 'vue';
 import { getInstance } from '@snapshot-labs/lock/plugins/vue';
 import { ipfsGet, getScores } from '@snapshot-labs/snapshot.js/src/utils';
@@ -154,12 +155,39 @@ const actions = {
     try {
       const blockNumber = await getBlockNumber(getProvider(space.network));
       const result: any = {};
-      const [proposal, votes] = await Promise.all([
+      const [proposal, votes]: [any, any] = await Promise.all([
         ipfsGet(gateway, id),
         client.request(`${space.key}/proposal/${id}`)
       ]);
+
+      const voterAddresses = (Object as any).keys(votes);
+      let profilesData: any = [];
+      let authorProfile = null;
+      try {
+        profilesData = await getProfiles([proposal.address, ...voterAddresses]);
+      } catch (e) {
+        console.error(e);
+      }
+
+      profilesData.profiles.forEach(profile => {
+        if (
+          !authorProfile &&
+          profile.eth_address &&
+          proposal.address.toLowerCase() === profile.eth_address.toLowerCase()
+        ) {
+          authorProfile = profile;
+        }
+        const voteWithMatchingAddress = Object.keys(votes).find(
+          key => key.toLowerCase() === profile.eth_address.toLowerCase()
+        );
+        if (voteWithMatchingAddress) {
+          votes[voteWithMatchingAddress].profile = profile;
+        }
+      });
+
       result.proposal = formatProposal(proposal);
       result.proposal.ipfsHash = id;
+      result.proposal.profile = authorProfile ? authorProfile : {};
       result.votes = votes;
       const { snapshot } = result.proposal.msg.payload;
       const blockTag = snapshot > blockNumber ? 'latest' : parseInt(snapshot);

src/store/modules/web3.ts

@@ -5,6 +5,7 @@ import getProvider from '@snapshot-labs/snapshot.js/src/utils/provider';
 import networks from '@snapshot-labs/snapshot.js/src/networks.json';
 import store from '@/store';
 import { formatUnits } from '@ethersproject/units';
+import { getProfiles } from '@/helpers/3box';
 
 let wsProvider;
 let auth;
@@ -57,7 +58,7 @@ const actions = {
   },
   logout: async ({ commit }) => {
     Vue.prototype.$auth.logout();
-    commit('WEB3_SET', { account: null, name: null });
+    commit('WEB3_SET', { account: null, name: null, profile: null });
   },
   loadProvider: async ({ commit, dispatch }) => {
     try {
@@ -81,14 +82,22 @@ const actions = {
       commit('HANDLE_CHAIN_CHANGED', network.chainId);
       const account = accounts.length > 0 ? accounts[0] : null;
       let name = '';
+      let profiles: any = [];
       try {
-        name = await getProvider('1').lookupAddress(account);
+        [name, { profiles }] = await Promise.all([
+          getProvider('1').lookupAddress(account),
+          getProfiles([account])
+        ]);
       } catch (e) {
         console.error(e);
       }
-      commit('WEB3_SET', { account, name });
+      commit('WEB3_SET', {
+        account,
+        name,
+        profile: profiles && profiles.length > 0 ? profiles[0] : {}
+      });
     } catch (e) {
-      commit('WEB3_SET', { account: null, name: null });
+      commit('WEB3_SET', { account: null, name: null, profile: null });
       return Promise.reject(e);
     }
   }

src/views/Proposal.vue

@@ -96,6 +96,7 @@
             <b>Author</b>
             <User
               :address="proposal.address"
+              :profile="proposal.profile"
               :space="space"
               class="float-right"
             />