3Box Edit Profile Plugin

Drop-in component for React applications

3Box
3Box
Dec 4 · 5 min read

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.

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

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.

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.


How to Build with Edit Profile

  1. Install the component
  2. Configure app settings and component props
  3. Usage
  4. Display correct profiles in your app‌

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:

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.

Example Usage

P‌rop Types

For more information on the available props, including box, space, currentUserAddr, customFields, currentUser3BoxProfile, and redirectFn, see our documentation.

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:


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.

Questions? Reach out on Discord!

We’re always online and available to chat in Discord if you have any questions about using our plugins.

3Box

APIs for decentralized profiles, storage, and messaging. Learn more at 3box.io.

3Box

Written by

3Box

Distributed database infrastructure for Ethereum. We provide a simple, scalable Ethereum Profiles API.

3Box

3Box

APIs for decentralized profiles, storage, and messaging. Learn more at 3box.io.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade