3Box Edit Profile Plugin
As part of our mission to help developers build better applications, 3Box is creating a rich plugin ecosystem that simplifies the web3 development experience.
Edit user profiles from inside your app
3Box is proud to announce Edit Profile, the newest addition to our growing ecosystem of 3Box-enabled plugins.
Edit Profile is a simple drop-in React component that provides web developers with UI and logic for allowing users to edit their profiles from directly inside your Ethereum application.
In addition to giving users the option to use their existing 3Box profile or to create an app-specific profile for use with your app, Edit Profile also allows developers to easily add customizable input fields that are relevant and contextual to your app. These are available as text
, textarea
, and select
(dropdown) style inputs.
Why did we build this? We heard that a lot of developers in our community were sending users to 3Box Hub to create profiles — which is totally fine by us, but we thought it would be a cleaner experience to keep your users engaged inside your app.
Get Started with Edit Profile
Why use Edit Profile?
Deliver a familiar, social user experience.
Edit Profile helps you add user profile information and social context throughout your app, which in turn delivers a better, more human UI for your users.
Keep users engaged inside your app.
Instead of sending users to 3Box Hub to create and edit profiles, now you can keep users directly within your application, which increases retention and improves the user experience.
Use 3Box or create app-specific profiles.
By giving users the choice between using their 3Box profile, or creating an app-specific profile, you give the user more control over their identity, increase the potential for contextual customization, and protect their privacy.
Build better apps, faster.
All 3Box plugins are built with the goal of helping you get to market faster with apps that users love.
How it Works
Architecture
Profile Edit is built using 3Box SDK, Profiles and Spaces APIs, and infrastructure.
The Profile Edit plugin implements simple set
and get
methods using both the Profiles API and the Spaces API for standard fields (name
, image
, coverPhoto
, emoji
, description
) depending on which profile the user chooses as their default — 3Box
or App
. The component uses the Spaces API for custom fields added by the developer.
After a user has set which default profile they’d like to use, by setting a boolean to the key isAppProfileDefault
in the space's public store, the dapp should appropriately fetch and display that profile elsewhere throughout the app. See Step 4 in Getting Started, found below, for more information on how to properly fetch and display profiles.
Authentication
Prior to first render of the Profile Edit component, the app should have already authenticated the user’s 3Box and their app’s space using the code below, and then have passed both the box
and space
objects as props to the component.
const box = await Box.openBox(userAddress, ethereumProvider)const space = await box.openSpace(spaceName)
How to Build with Edit Profile
Getting Started
- Install the component
- Configure app settings and component props
- Usage
- Display correct profiles in your app
1. Install the component
npm i -S 3box-profile-edit-react
2. Configure app settings and component props
First, choose a name for your application’s 3Box space.
Although you are free to choose whichever name you’d like for your app’s space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for Profile Edit.
Then, configure the custom fields you’d like to add to the component.
The Profile Edit component comes standard with basic profile data, including: name
, image
, coverPhoto
, emoji
, and description
fields.
Out of the box, the component defaults to using the 3Box profile for the basic profile information above, since the isAppProfileDefault
boolean is still undefined. If the user chooses to instead create an app-specific profile, then the isAppProfileDefault
boolean is updated and their newly entered profile information is saved to your space. However, it should be noted that custom fields passed to customFields
will always be saved to your app's space.
The customFields
prop must receive an array of any number of objects in the following structures:
{ // for a field with a text input inputType: 'text', key: 'backupAddress', // the key used to save the value field: 'Backup Address' // how to display the key in the UI }, { // for a field with a textarea input inputType: 'textarea', key: 'spiritCryptoKitty', field: 'Spirit CryptoKitty' }, { // for a field with a dropdown input inputType: 'dropdown', key: 'preferredCoin', field: 'Preferred Coin', options: [{ // dropdown input requires an array of objects value: 'eth', // value passed after selection display: 'Ethereum' // what user will see in dropdown }, { value: 'btc', display: 'Bitcoin' }, { value: 'ltc', display: 'Litecoin' }]}
3. Usage
The Profile Edit component can be used in any way you’d like, though we recommend that you use it on a dedicated edit profile page or in a popup modal (not included).
Authentication
As mentioned above, you must first authenticate both the user’s 3Box and your app’s space before this component can be used, since both the box
and space
instance must be passed to the component before it mounts. We recommend doing this on login.
const box = await Box.openBox(userAddress, ethereumProvider)const space = await box.openSpace(spaceName)
Example Usage
import EditProfile from '3box-profile-edit-react';const MyComponent = ({ customFields, box, space, myAddress, myProfile, redirectFn }) => ( <EditProfile // required box={box} space={space} currentUserAddr={myAddress} // optional customFields={customFields} currentUser3BoxProfile={myProfile} redirectFn={redirectFn} />);
Prop Types
For more information on the available props, including box
, space
, currentUserAddr
, customFields
, currentUser3BoxProfile
, and redirectFn
, see our documentation.
4. Display correct profiles in your app
Once a user selects a default profile (3Box or app), the decision should be reflected throughout your app.
When fetching profiles to display, you should check the isAppProfileDefault
flag and then call get
on the respective profile for fields name
, image
, coverPhoto
, emoji
, and description
. Custom fields added to the component are all saved to the application profile in the space
used by your dapp and you should get
from there.
Checking and getting from the appropriate default profile should look something like this:
const isAppProfileDefault = await space.public.get('isAppProfileDefault');let profile;if (isAppProfileDefault) { profile = await Box.getProfile(currentUserAddr);} else { profile = await space.public.all();}this.setState({ name: profile.name, image: profile.image, coverPhoto: profile.coverPhoto, emoji: profile.emoji, description: profile.description,})
Explore our other plugins
We’re working towards creating an ecosystem of 3Box and third-party plugins that make using 3Box APIs (identity, profiles, storage, messaging) as simple and easy as possible.
- Explore the Profile Hover plugin
- Explore the Comments plugin
- Explore the Chatbox plugin
Questions? Reach out on Discord!
We’re always online and available to chat in Discord if you have any questions about using our plugins.