3Box Edit Profile Plugin

Drop-in component for React applications

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

• Try the Demo 🎉
• Read the Docs 📚

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

1. Install the component
2. Configure app settings and component props
3. Usage
4. 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}
     />
);

P‌rop 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.