Integrate 3Box Profiles into the Giveth Application
giveth
JavaScript, React
# Add 3Box Profiles to Giveth
## Bounty Overview
The Giveth dapp is open source and deployed in beta on the Rinkeby network. Profiles already exist in the app, but the experience is not ideal. It costs 0.01 Rinkeby ETH to get started. Instead we would like to leverage the 3Box decentralized user data network for hosting the profiles. This bounty is all about making profiles on Giveth better, faster, and free! 🚀
Before Giveth transitions to mainnet, we'd like users to be able to store their profiles on 3Box for free. 3Box profiles will be the main profile and user data infrastructure for Giveth mainnet!
Check out the Giveth dapp here: [https://beta.giveth.io/](https://beta.giveth.io/)
### **Bounty Objectives**
- Make a PR that replaces existing profile infrastructure throughout the Giveth dapp using the 3Box.js API, outlined in detail below
- Match the look and feel of the Giveth dapp and profile page
- Replace any existing profile transactions, gas fees, etc...
- Allow users to set up and configure a profile on their profile page
- Fetch profiles for users and display them throughout the dapp, where appropriate
- Integrate profile data visually and seamlessly into the rest of the Giveth Dapp
**UI/UX-pectations**
A 100% completed bounty would have
- profiles tightly integrated into the look and feel for **Giveth** so the experience is seamless; e.g. use the same UI components
- setting up a user profile and adding basic data for **Giveth is simple and intuitive**
- Integration into the flow of the dapp; e.g. don't have too many / long user stories; keep it simple and clean
## Introduction to 3Box Profiles
3Box Profiles are a quick and easy way to make your application more social, useable, and interactive by replacing hex addresses with human-readable names, profile images, descriptions, and other social metadata. The 3Box Profiles API allows your application to query and save profile data for your users from natively inside your app.
*If you want to see 3Box in action, you can check out the [3Box Hub application](https://3box.io), which uses the 3Box.js API to allow users to create a social profile and manage their personal cloud storage for web3. This is where users can manage their profile data from across all apps.*
# Bounty Details
**Giveth** would like to add 3Box profiles, replacing their existing profile infrastructure while retaining the same look and feel.
## Display Profiles in App
This section describes the logic that should be implemented on the various giveth app pages.
1. **Display default user profiles**: When the giveth app displays a user in the UI, the users' default profile settings to determine which information to display. To figure this out see *code example A*.
1. If `givethProfile.defaultProfile` has the value `'giveth'`, display the `givethProfile` information (name, image, URL).
2. If `givethProfile.defaultProfile` has the value `'3box'`, call `Box.getProfile()` and display the returned profile information (name, image, URL) in the user’s profile fields.
3. If no value is returned, check if the user has previously created an old Giveth profile. To do this check the Giveth Profiles DB and if profile data exists, display it. If nothing exists, the user has never configured their Giveth profile so you shouldn't display profile data for them.
## Profile Set Up
This section describes the logic that should be implemented on Giveth's Profile page, located at [https://beta.giveth.io/profile](https://beta.giveth.io/profile).
1. **Detect default profile settings**: When a user opens the profile page, there needs to be a check whether to use the giveth profile or the 3box profile. To figure this out see *code example A*.
1. If `givethProfile.defaultProfile` has the value `'giveth'`, display the `givethProfile` information (name, image, URL) in the user’s profile fields.
2. If `givethProfile.defaultProfile` has the value `'3box'`, call `Box.getProfile()` and display the returned profile information (name, image, URL) in the user’s profile fields.
3. If no value is returned, the user has never saved profile settings from the Giveth profiles page. Continue to Step 3 below to configure a user's default profile settings.
2. **Open the Giveth Space:** The user will be presented with two messages to approve. Once the user approves the messages, data will be synced from the 3Box network. To figure this out see *code example B*. During the syncing of data from 3Box, we could show a small loading modal or toast on the page. Once the giveth space is open, you can fetch the email data and display it in the profile.
3. **Configure default profile settings and set profile**: When a user has never interacted with their 3Box profile in the Giveth app, they will have no `defaultProfile` key/value saved in their `giveth` space, so Step 1 above will return no value.
1. **Migrate old Giveth profile, if it exists:** Now we need to check if the user has previously created a profile on Giveth's old profiles infrastructure and if so migrate it to the new 3Box infra. To do this, confirm there is no value in the `giveth` space under the `defaultProfile` key (done in the previous step), then check the current Giveth profile DB for user profile data associated with their Ethereum address.
If yes, automatically populate the profile form fields with the users existing Giveth profile info (name, image, URL, email), and save the data to their giveth space. See *code example C.*
If no old giveth profile exists, continue to the next step.
2. **Check if existing 3Box profile is present:** Call `Box.getProfile()` to check if a user has previously saved profile information (name, image, URL, email) to their general 3Box profile.
1. **No 3Box profile exists, allow user to save new Giveth profile:** If no values are returned, display an empty profile page and allow the user to enter profile information (name, image, URL, email) into the form. When they click the `Save` button, save the data to the user's `giveth` space. See *code example C.*
2. **3Box profile exists, offer user option to use it or create Giveth specific profile:** If the user has a pre-existing 3Box profile, display their basic 3Box profile information (name, image) in a modal and ask if they would like to use their existing 3Box profile for Giveth. **[Yes/No]**
If yes, automatically display 3Box profile data in the Giveth profile page and save fields with KVs from the general 3Box store (name, image, URL, email), then `Save` the default profile setting to the user's giveth space. See *code example D.*
If no, display empty profile form fields and allow users to enter their information. When they click `Save`, save the data to the user's `giveth` space. See *code example C.*
## Code examples
### A. Check default profile
This code snipet checks for the `defaultProfile` setting. It can be either `'3box'`, `'giveth'` or `undefined`.
const givethProfile = await Box.getSpace(, 'giveth')
console.log(givethProfile.defaultProfile)
### B. Open the giveth space
This code snipet shows you how to open the giveth space for reading private data and writing public and private data.
const box = await Box.openBox()
const boxSyncPromise = new Promise((resolve, reject) => box.onSyncDone(resolve))
let givethSpace
const spaceSyncPromise = new Promise((resolve, reject) => {
givethSpace = await box.openSpace('giveth', { onSyncDone: resolve })
})
await boxSyncPromise
await spaceSyncPromise
### C. Writing a giveth profile to the giveth space
This code snipet describes the data that should be saved to the giveth space if the user decides to not use their pre-existing 3Box profile inside the giveth app.
// Set the public data
givethSpace.public.set('defaultProfile', 'giveth')
givethSpace.public.set('name', 'yourname')
const imageObject = [{
"@type":"ImageObject",
"contentUrl": "https://ipfs.infura.io/ipfs/",
"cid": {"/":""}
}]
givethSpace.public.set('image', imageObject)
givethSpace.public.set('url', 'https://yoursite.com')
// Set the private data
givethSpace.private.set('email', 'youremail@gmail.com')
### D. Set default profile to use 3box profile
This code snipet describes the data that should be saved to the giveth space if the user decides to use their pre-existing 3Box profile inside the giveth app.
// Set the public data
givethSpace.public.set('defaultProfile', '3box')
---
Good luck and happy bountying,
💙**3Box & Giveth** 💚
