Add editable, IPFS-based user profiles to your dapp in less than 30 mins
Creating a more human experience for Web3 users
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, Profile Edit plugin (demo available here). With this component you can add user-controlled, editable profiles to a decentralized react app in roughly 10–30 mins. 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 👇
1.Integrating with an Ethereum wallet
3Box 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 all standard Ethereum wallets, but for this tutorial we will be building with MetaMask.
Set Up Your App
To get started, I used this boilerplate 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 authenticate the user. 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 authenticate a space. Spaces 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 3Box and our app’s space, 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 3Box and the space have been authenticated. We then pass in:
- the user’s address
- the authenticated space and 3Box (box)
Now have a working Profile Edit component! 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. Not a bad way to make your decentralized application more human in a short amount of time!
Edit Profile is the latest in our series of drop-in react plugins designed to bring a more engaging UX to distributed applications. Check out our Profile Hover, Chatbox, and Comments 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!
