Illustration by Ouch.pics

Add editable, IPFS-based user profiles to your dapp in less than 30 mins

Creating a more human experience for Web3 users

Rachel Black
Jan 29 · 4 min read

User profiles are so ubiquitous in the Web2.0 apps that we all use on a daily basis that we barely consider them, yet very few decentralized applications use them. At 3Box, we want to change this, and bring a more human user experience to dapps.

An Introduction to 3Box’s Profile Edit Plugin

This is why we created our latest drop-in UI component, (demo available here). With this component you can add . The more social we make dapps, the more users will want to use them; there is no excuse for leaving your users struggling at hex codes!

If you prefer to learn by video, checkout this tutorial 👇

3Box Profile Edit plugin video tutorial

1.Integrating with an Ethereum wallet

uses cryptographic authentication, meaning cryptographic keys are used to manage 3Box database authentication and identity. These 3Box keys are unique to each 3Box user, and are deterministically generated client-side when the wallet’s private key (we never directly touch them) signs a message. This means when working with 3Box, you need to connect your frontend to an Ethereum wallet. This allows 3Box to use the user’s Ethereum address and the wallet’s Ethereum provider. For more information see our architecture blog post.

3Box supports , but for this tutorial we will be building with MetaMask.

Set Up Your App

To get started, I used this built with Create React app. This sets up the frontend to integrate with 3Box by enabling the Ethereum provider injected into the frontend by MetaMask (end users will need this installed). This provides us access to the user’s MetaMask address, which is then saved to the react state. This happens in the following function:

async getAddressFromMetaMask() {
if (typeof window.ethereum == "undefined") {
this.setState({ needToAWeb3Browser: true });
} else {
const accounts = await window.ethereum.enable();
this.setState({ accounts });
}
}
async componentDidMount() {
await this.getAddressFromMetaMask();
}

This function is called straight away when the page is loaded in componentDidMount. This is the simplest pattern to implement, and we must wait until after the page has mounted to call the function, because before this occurs MetaMask will not have injected the provider into the page.

2. Authenticating with 3Box and opening a space

Install 3Box.js

Now that we have enabled the provider and have access to the user’s Ethereum address, we can start working with 3box.js. If you haven’t yet done so, make sure you npm i 3box and import the library to the top of the file as Box (variable names cannot start with a number in JS). Then we can return to the componentDidMount function, and after we call getAddressFromMetaMask we can add the follow lines:

async componentDidMount() {
await this.getAddressFromMetaMask();
const box = await Box.openBox(this.state.accounts[0], window.ethereum);
const space = await box.openSpace('edit-profile-plugin');
this.setState({ space, box });
}

Authenticate 3Box

The first thing we will need to do to interact with a 3Box account is to . To do this, we will call the openBox method, made available in the 3Box library. Don’t worry, if the user does not already have a 3Box account, one will be created for them. This is the stage in which the users cryptographic 3Box keys are generated from a signed message in their wallet. This is why we need to pass in the user’s Ethereum address and the provider.

Authenticate Your App’s Space

After using openBox to authenticate with 3Box, the next step is to . are namespaced areas for application-specific storage within a user’s 3Box. We can do this with openSpace method. This only takes one argument, the name of the space. This name will be used to namespace your space, so chose something unique and specific. For this tutorial, edit-profile-plugin is fine. After we have authenticated with both and our app’s , we can save both to react state for use later.

3. Adding the Profile Edit Plugin

Next we can npm i 3box-profile-edit-react and import it to the top of our file. In our render function, we can start using the component.

To use the component in its simplest form, we only need the code below.

{this.state.space && this.state.box && (
<EditProfile
box={this.state.box}
space={this.state.space}
currentUserAddr={this.state.accounts[0]}
/>
)}

Here we have added a conditional to ensure the component does not render before and the have been authenticated. We then pass in:

  • the user’s address
  • the authenticated space and 3Box (box)
The Profile Edit components UI
The Profile Edit components UI

Custom fields and redirect functions can be added to suit your use-case (checkout the docs). This component allows users to edit a distributed, user controlled, profile, directly from a front-end application.

Edit Profile is the latest in our series of designed to bring a more engaging UX to distributed applications. Check out our , , and plugins for even more ways to bring web2.0 user experience to web3.0 apps!

We would love to hear what you are building, join our discord channel!

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Rachel Black

Written by

JavaScript Developer

Coinmonks

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

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