Add 3Box profile integration to the Snapshot app

[ChaituVR]

Changes proposed in this pull request:

• Add 3Box profile integration to the Snapshot app

1. Add profile in the top nav

2. Add profile and button in account modal

If the User already have an account in 3Box, providing a link to edit

if the User is not having an account in 3Box, providing a like to 3Box,

3. Add names and avatars of the voters

URLs to test:
http://localhost:8080/#/balancer/proposal/QmQaxYxNp2Vq9PqW7Xc1Acnup7wC2Yrhg3UiYi9DYBFrPZ
More Votes: http://localhost:8080/#/yearn/proposal/QmUAUtyK7FiEAKF3FCeniWsvSiVxT2J6DESVcBKZYnPrCi

4. Add name and avatar of the proposal author

Inside Proposal: (http://localhost:8080/#/balancer/proposal/QmQaxYxNp2Vq9PqW7Xc1Acnup7wC2Yrhg3UiYi9DYBFrPZ)

5. Add profile in user modal

[bonustrack]

Thank you for your contribution @ChaituVR. I've added some suggestions.

[ChaituVR]

Thanks for the review @bonustrack Added those suggested changes,

also added VUE_APP_IPFS_NODE=ipfs.io to .env to make it work, let me know if it is not required
and also let me know if any other changes required for this feature

[bonustrack]

The size of the app bundle has been increased by x4 with the adding of 3box have a look here:
Without 3Box: https://snapshot.page/report.html
With 3Box: https://bafybeidq45eittd3vfbbydxd3fcwfwe47xvx3p5xbe7gimyztve44totx4.on.fleek.co/report.html
Is there a way to import only what we need from the dependency? I believe what we need is just to query the 3Box API endpoint, we don't need all the advanced functions.

[ChaituVR]

Awesome suggestions :) Thanks for those.. fixed them and now the bundle size is

also remove that getprofile call everywhere it is now using 3box's graphql only

[bonustrack]

Ok last changes,

• Can you create a file helpers/3box.ts with a method getProfiles and use this method on app.ts and web3.ts, that will reduce duplicate code and make the function more accessible, you don't need to have 2 sub request on for voterProfiles and authorProfile, you could just request profiles of an array of addresses that include both author and voters addresses.
• Can you resolve conflicts and and run the "lint" script?

[bonustrack]

Sorry i found 2 more issues:

1: When i connect my wallet here https://bafybeidqtbuxmtfemil2qzio3wf5zlonbcerbv2f2t73s3646yuhue7kim.on.fleek.co then refresh the page, the wallet should be reconnected again and there should be a loading indicator in top nav like this:

But currently there is no loading indicator.

2: The size of the dependency 3box is too heavy even using only 3box/lib/api. It would be better if we just send a request to 3box API directly using the method subgraphRequest, this method is used in others place in Snapshot.js it's a standard way to query GraphQL APIs, and it's super light.

[ChaituVR]

@bonustrack

Fixed that loading issue, that menu button is missing app.authLoading

<UiButton
      v-if="!$auth.isAuthenticated"
      @click="modalOpen = true"
      :loading="loading || app.authLoading"
>

and removed 3box's library didn't know graphql method exists for this :)

[bonustrack]

Thanks! That's much better now, i've just noticed there is an error when i load the page with a call to profile.name failing:

[bonustrack]

Great work @ChaituVR! The PR is good to be merged