Web: Feature: Save Gitcoin Avatar to 3Box Profile

[michaelsena]

User Story

As a user of Gitcoin who loves my Gitcoin Avatar, I would love to save my gitcoin avatar to my 3box profile so that I can use it in other dapps. It makes me look cool and digital.

Why Is this Needed

Summary: this is needed so I can use my gitcoin avatar throughout the web3 ecosystem via 3Box.

The Gitcoin Avatar builder allows users to create a fun avatar for their Gitcoin user account.

3Box is building a distributed social profiles network for Ethereum. 3Box provides users with a profiles dapp and developers with distributed database infrastructure. 3Box dapp allows users to create a profile, log into dapps, store their information and more, while 3Box.js enables your dapp to interact (set/get) with 3Box profiles.

Description

Type: Feature

Current Behavior

Right now Gitcoin saves my avatar on their server, I also want to save a copy in my 3Box.

Expected Behavior

I would be over the moon to see this happen:
Add a button (or something) to the Gitcoin Avatar Builder page that allows the user to save their avatar file to 3Box. Might work something like this:

1. Gitcoin app front-end would need to integrate 3Box.js
2. User clicks "Save to 3Box" on the Avatar Builder page. Only users who have previously connected an ethereum account to their Gitcoin account will see that button.
3. Gitcoin app presents the user with a 3Box consent message via the user's web3 browser signing interface (MetaMask, Status, or whatever), which authorizes the Gitcoin app to write and read from the user's 3Box. This is best supported by a modal that provides the user with a bit more information on why Gitcoin is asking them to do this. (But this is completely optional and def not required.)
4. User approves the message.
5. Gitcoin saves an entry to the user's public profile using box.public.set(gitcoin.avatar: 'IPFSHash').

Definition of Done

Gitcoin avatar saves to 3Box profile. User can go to 3Box.io and see the file in their feed, and other developers can look up the public entry using getProfile(address) which is available via 3Box.js. The task would be finalized once a PR is submitted to the gitcoinco/web repo containing all of the code required to implement the solution described above.

Additional Information

Would love to collab with the Gitcoin team on finding a solution here! hmu

[michaelsena]

@owocki would love to fund this issue and get it going on the Gitcoin explorer, what would we need to do from here? Wanted to bump the thread around ETH Singapore, as maybe 3Box could do some online hackathon promo for it.

[owocki]

related: https://github.com/gitcoinco/skunkworks/issues/82

@michaelsena this looks good to me. i'm out of ETH right now and waiting for finance to send more. otherwise i'd be down to post today.. how much do you think is warranted? like 1.5 ETH?

@PixelantDesign @vs77bb any feedback on it?

[ceresstation]

Hey @michaelsena happy to do this, I'm creating an issue for 1 ETH to start right now!

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__This issue now has a funding of 1.0 ETH (91.9 USD @ $91.9/ETH) attached to it.__

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  
  
  
  • Want to chip in? Add your own contribution here.
  
  
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  
  
  • $41,846.17 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[kuhnchris]

I guess we need to watch out abit about users actually opt-in for this, as we do not want to force the connection between box3 and gitcoin, correct?

[PixelantDesign]

Hey @michaelsena thanks for the suggestion! @kuhnchris great point, we'll don't want to force any relationships upon users.

But this is definitely interesting to explore. One thing we will need as part of the req is placement where users can find out what 3box is. Even if they've connected with Ethereum before, they might not understand 3box, so we'll need a link to what it is and some content to support it. I imagine we can pull this from something that you already have @michaelsena.

Are there any tech implications we need to consider @mbeacom?

Lastly, since this will be totally new for us, we'll need to test the full on boarding experience with users!

[gitcoinbot]

@jorropo Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@jorropo Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@jorropo Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[michaelsena]

Hey all, sorry catching up on this thread. @ceresstation thanks for funding and managing here! @PixelantDesign we can definitely present users with a small hover message, or if you think users would need something more, maybe we could provide a link to the 3box.io landing page which provides an overview of 3Box (and is also where they can create a profile if they'd like).

And thanks @owocki for bumping and supporting this. Can't wait until I can save my avatar to 3Box. And we don't have any plans to put an avatar builder inside 3Box yet, but hoping users want to use their Gitcoin one!

[kuhnchris]

@ceresstation you heard anything from Jorropo ? If no, I'd like to take over. :-)

Thanks,
Chris

[ceresstation]

Hey @kuhnchris I haven't been able to get a hold of them unfortunately, I'd say go ahead on this one :)

[michaelsena]

Thanks for taking this on @kuhnchris 💯

[kuhnchris]

Sure, tho I wonder if we really have to put it into the Avatar Builder, or if we should throw it into the same spot where we can also connect to github?

That would at least keep all these things at one place, what you think @michaelsena ?

[kuhnchris]

OK, i started playing around, sadly the lib seems to be broken? @michaelsena

[zachferland]

@kuhnchris wasn't able to recreate same issue on first go, with my own profile at least. If you don't mind could you try the example in https://github.com/3box/3box-js. Basically clone the repo, npm install, and then then run 'npm run example:start'. Then there is a open box and get profile example there to try, we can narrow down if code, lib issue or server/network issue.

[kuhnchris]

As mentioned in the discord chat: the resolve is that the depending webcrypto lib is not working in "unsafe environments", that being not localhost and not https. Fixed by wrapping dev env into a https proxy.

[gitcoinbot]

@jorropo Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@jorropo Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[michaelsena]

Hey @kuhnchris just a friendly ping here to check in on the status of this and to see if you need anything from us! Hope all is well!

[kuhnchris]

Hi there @michaelsena . As we discussed on the 3box chat already - basically the functionality is implemented, we are checking from our side if the user avatars are stored on IPFS, I think we are still missing some functionality to actually use the avatar on your side.

If you guys are ready for another test or a complete roll-out let me know! Right now it would probably only confuse the people if they the possibility to add the avatar to 3box but cannot do anything with it.

Just my 2 WEI, let me know if you have any questions. :-)

[michaelsena]

Makes sense @kuhnchris, thanks for the info. Would you want to work on a small Gitcoin issue on 3box-dapp that would implement a button on the image list item to make image profile photo? I can make a quick mock up if you'd be interested.

[kuhnchris]

Sure, open up an issue over at your repository and link me, then we can take a look.

[michaelsena]

Okay @kuhnchris so thinking more about this, I may have a simple solution here.

This is the UI mockup you provided:

Instead of "Upload avatar to 3Box", we could make that button say, "Save as 3Box Avatar". When the user clicks this, we could make two writes to the DB.

1. gitcoin.avatar: IPFS path
2. image: IPFS path

This will save the avatar twice to the user's 3Box profile, however, if the user changes their default 3Box profile image to something else at a later time, they will still have their Gitcoin avatar saved in 3Box for future use. We will be adding to 3box.io the ability for users to set photos in their feed as their profile photo, however we'll roll that out soon. This solution should take care of your concerns and the Gitcoin avatar will act as the users default profile image when they click this!

cc @oed

[kuhnchris]

Sure, then I'll implement the 2nd write as a test in my test instance.

[michaelsena]

Amazing @kuhnchris :+1:

[kuhnchris]

The only thing we should watch out for is, that if we want to remove the hardcoded profile: overwrite we need either to implement a flag on our side or you guys will have to live with the fact that pressing that button will override the avatar hard. (until a PR is merged in)
Background: I was asked to only interact with our dApp space "gitcoin.*", hence my question that we do not violate any of your rules.
I'll msg back as soon as the rinkeby test is successful.

Thanks,
Chris

[kuhnchris]

Ho ho ho @michaelsena .
Sadly, this does not work.

I did upload a avatar via the dapp/the web interface. There I noticed that actually the "image" tag is being used and it's an array with a certain type:

...
github: "@kuhnchris"
image: Array(1)
0:
@type: "ImageObject"
contentUrl: {/: "QmXxk7P8mC3YxAHevr17pW1FgTk8La5XLEKDvgEVmk2PKg"}
__proto__: Object
length: 1
__proto__: Array(0)
job: "Developer"
...

Do you want me to emulate the same logic as the 3box dapp? Also, I see that we discussed if we want to use /ipfs/+full path, which I did with our implementation gitcoin.avatar: "/ipfs/QmW2WQi7j6c7UgJTarActp7tDNikE4B2qXtFCfLPdsgaTQ/cat.jpg", but apparently you guys do not use that, only directly / + hash.

Please advice.
Thanks!

[oed]

@kuhnchris Right yeah, the format for 'image' is a bit strange. We should change that in the future. For now you can save it by doing something like this:

const imgObj = [{
  "@type": "ImageObject",
  contentUrl: {
    "/": "QmW2WQi7j6c7UgJTarActp7tDNikE4B2qXtFCfLPdsgaTQ/cat.jpg"
  }
}]

box.public.set('image', imgObj)

Hope that helps!

[kuhnchris]

Hey there, thanks for the quick tip.
Since you said it's OK, i'll try to emulate that URL-structure and will see what happens, reporting back shortly... :-)

[kuhnchris]

for some reason it makes a node called /gitcoin/ and it doesn't show up on 3box...

quick update: after 5 min it showed up! nice. weird warning tho.
it does redirect to /ipfs/undefined tho on 3box, so that may be something on your side...

https://ipfs.infura.io/ipfs/QmW2WQi7j6c7UgJTarActp7tDNikE4B2qXtFCfLPdsgaTQ/cat.jpg
v.s.
https://ipfs.infura.io/ipfs/undefined

[oed]

@kuhnchris That's odd that you get /gitcoin/! What is the code you are using to set that property?

It results in undefined because it tries to do (await box.public.get('image'))[0].contentUrl["/"] however it looks like the way you saved it you'd need to do (await box.public.get('image'))[0].contentUrl["/gitcoin/"] in order to get the correct content hash.

[kuhnchris]

Here's the code:

I actually try to force "/", but it seems that "something" either remembers the gitcoin.avatar => /gitcoin/ space before, or because I call it from xxx.eu/gitcoin/account/settings/... , but then it should have the other url parts aswell, so, not entirely sure where this is coming from.

Thanks,
Chris

[oed]

Well that's strange. I don't really see how the contents of the json object could be modified like that. What happens if you log the imgObj right after it's created?

[kuhnchris]

Ahhh dammit that was my fault.
I had to use a rewrite for the IPFS issue that only works via HTTPS, that one f'ed me right up.

It basically rewrote "/" to "/gitcoin" everywhere, also in the script... my bad, sorry.
I changed it now manually, let's see what happens if the cache expires on 3box... ;-)

[oed]

Great @kuhnchris! Happens to the best of us 😄

[gitcoinbot]

@jorropo Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@jorropo Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[kuhnchris]

@michaelsena mind kicking jorropo from that? I still need to figure out if we can upload our avatars to IPFS (cc @mbeacom), aside from that we should be ready so far. 👍

[ceresstation]

Hey @kuhnchris just removed @jorropo, you should be good to apply :)

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Workers have applied to start work__.

These users each claimed they can complete the work by 2 years, 1 month ago.
Please review their action plans below:

1) abdel-az has applied to start work _(Funders only: approve worker | reject worker)_.

I am i developer in Blockchain and I am interested to do this task

Learn more on the Gitcoin Issue Details page.

[kuhnchris]

Yes sir, working on it, still missing the IPFS link to finally implement this.
also cc @ceresstation and @PixelantDesign and @owocki (and @thelostone-mc for code review)

[michaelsena]

Thanks @kuhnchris. Anything you need from me here?

[kuhnchris]

I guess currently not, I will have to figure out if I upgrade the avatar system on gitcoin to the new system and implement IPFS or find someone who can tell me if we already store IPFS hashes somewhere from the core team, I'll notify you as soon as I got more informations, OK? :-)

[michaelsena]

Sounds great, thanks @kuhnchris!

Also ccing @oed here too in case he has anything to weigh in on relating to IPFS

[oed]

@kuhnchris You can have a look at how we upload the image to ipfs here: https://github.com/3box/3box-dapp/blob/d1bf7142e8e144ce5c53ae59ce39376a025858dc/src/views/EditProfile.jsx#L276

[kuhnchris]

ah - maybe it's a bit of miscommunication from my side here: I am basically aware of IPFS and know how to interact with it - we just do not seem to store our avatars on IPFS right now, so I basically need to implement a spot in our system to upload (new) avatars to IPFS (and migrate existing ones).
Hence my back-and-forth. ;-)
The basic system is implemented, we just need to figure out the rest of the avatar system. @mbeacom already implemented a new avatar system, so I do not think it's feasable to invest in improving the old system, so I am currently trying to get @mbeacom 's new avatar version ready for launch and then I'll attach the IPFS upload to that, so we can finish up this task and integrate 3box :-)

[oed]

Thanks for the clarification!

[gitcoinbot]

@kuhnchris Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[kuhnchris]

Status update: I currently got asked to shift focus on 2 other PRs to finish first before finishing up the avatar rework. So it may take another week, sorry.

[gitcoinbot]

@kuhnchris Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@kuhnchris Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[kuhnchris]

Yes this issue is being worked on but right now stashed until I finish up the avatar rework. Status in @kuhnchris/web/dynamic_avatar branch.

[gitcoinbot]

@kuhnchris Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@kuhnchris Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@kuhnchris due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• [x] reminder (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[michaelsena]

Hey @kuhnchris just following up here to check in on the latest. Lmk 👍

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@kuhnchris due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• [x] reminder (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[kuhnchris]

Hey there @michaelsena ! Thanks for checking in, we are currently land-under with the preparations for ETHDenver. As soon as I got that one out I will let you know! ;-)

• Chris

[gitcoinbot]

@kuhnchris Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@kuhnchris Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@kuhnchris due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• [x] reminder (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@kuhnchris due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• [x] reminder (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[kuhnchris]

Hey there, current status is that I should be able to work on AvatarV2 this week, so I'll keep you posted about the status. How is the implementation from your side?

[rmshea]

@michaelsena have you had a chance to take a look at Chris's work?

[gitcoinbot]

@kuhnchris Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@kuhnchris Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[kuhnchris]

Update: We finished pretty much all of our tasks now I was assigned to, just some rework to do, then I can get the avatar stuff working. The new guy who redid the avatar stuff did a pretty good job on cleaning up so it should only be a short while left.

[gitcoinbot]

@kuhnchris Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[owocki]

yo @kuhnchris there is some upcoming 3box <> gitcoin integration announcements coming up (mostly related to kudos), and we were hoping we could announce the 3box integration then too! is the PR ready for review? if not, can we get it to a reviewable state? if the answer is no, thats fine... we can kick this back to the community :) appreciate your hard work on this, as always 🙏

cc @michaelsena

[kuhnchris]

well, for a "quick" getting-ready solution we can change the existing logic to include the now-generated avatars to ipfs aswell.
That's basically the only road-blocker for this thing.
If I get a OK for this I will implement that IPFS upload (and a matching management command to migrate the exiting). No idea what kind of impact that'd have on our ipfs node, we'd need to check it out.

[owocki]

that route makes sense to me. would we replace the current storage to IPFS, or just duplicate it such that its stored in both locations?

[kuhnchris]

which path you prefer? to keep the current system working i'd store it on both, and if we got some time later on we can switch over from S3/server to IPFS.

[owocki]

i agree

[kuhnchris]

ok then i'll prepare a PR to add the storage to IPFS. keeping you posted.