Wallet Integration

This guide shows you how to integrate the smart profiles wallet into your application.

Plurality provides an embedded profiles widget that can be integrated into your application to be used as the wallet login solution that supports creation of profiles as well.

The wallet is created through a network of MPC-TSS in the background and the profile is created on decentralized storage, encrypted with the secrets created through the wallet.

The widget allows users to have an easy login while ensuring that they maintain full custody over their wallet and data. Adding the widget is very simple. Let’s take a look at the steps below:

Prerequisites

• Node.js and npm installed

• React v18

• Typescript

Need to quickly get started? Clone our boilerplate to have a basic application with embedded widget and all the wallet functions already in there.

Create or Clone a React Application

Create a react or vite application.

The recent react 19 has some breaking changes. If you face these, try downgrading the version of react and react-dom to ^18.0.0 in the package.json

Install Required NPM Packages

Install the following packages

npm install @plurality-network/smart-profile-wallet 

Add the Widget to the required page

On the page where you want to create the login/onboarding process, add the following code. You can also simply put it in App.tsx

// import the packages at the top of the page
import { PluralitySocialConnect } from '@plurality-network/smart-profile-wallet'


// in the ts part of the page add the following
const options = { clientId: '', theme: 'light' };


// in the tsx/jsx part of the page add the following tag
<PluralitySocialConnect
    options={options}
    onDataReturned={handleDataReturned}
/>

The PluralitySocialConnect tag adds a "Connect Profile" button on your page. When the user clicks on the button it opens the embedded widget which walks the user through the onboarding flow.

Most app developers prefer to create a header component and put the PluralitySocialConnect tag in there. This makes the button consistent across all pages in the website. Once the login process is complete, the button automatically changes to a circular profile icon with the user's avatar.

Change Appearance of the Connect Profile Button

If you want to change the appearance of the "Connect Profile" button, you can pass in some UI customization parameters to match the appearance of your platform. Like the following:

<PluralitySocialConnect
    options={options}
    customization={{
        backgroundColor: 'cyan',
        color: 'black'
    }} 
/>

The customization is optional and if you don't want it you can skip it. The following customization options are available though:

Button UI Customization Options

customization?: {
    minWidth?: string
    height?: string
    borderRadius?: string
    backgroundColor?: string
    color?: string
    hoverBackgroundColor?: string
    hoverTextColor?: string
    marginTop?: string
};

You can also customize the entire flow of widget by passing your specific clientId that's made specially for your application. For this, you need to use the fields in options when adding the PluralitySocialConnect tag. There are two fields available in options:

1. ClientId is the specific id created for your application based on the customizations you have provided. If you keep it empty it will just give you the default widget.

2. Theme has two options: dark and light. The dark option is partially implemented for now and will be completely implemented soon.

If you keep clientId as empty, then it will just pick up default settings. For testing purposes, this is okay.

For default settings, the widget will use Sepolia Testnet so you can test out the functions in a developer mode.

For customizing the widget according to your needs and making your application production ready, you must get your own clientId from us.

So, an example could be like this:

const options = { apps: "example", clientId: 'c4089665-9aa0-4e00-91fb-7485477166dc', theme: 'dark' };

<PluralitySocialConnect
    options={options}
    customization={{
        backgroundColor: 'cyan',
        color: "black"
   }} 
/>

Create your ClientId to customize the widget according to your application

The embedded widget is highly customizable and supports not only dynamic options, but also branding specific to your application. To customize the widget, you need to do the following steps:

1. Fill out this form which will ask for your preferences.

2. Wait 1-2 business days, our team will do the entire setup for you in the backend and send you an email with your clientId. Please note that this step will get automated over the course of next few months when we launch our developer dashboard.

3. Once you get your clientId, add it into the options of the PluralitySocialConnect tag.

So, what can you customize?

You can customize the widget to:

• Show your own application's logo (white labelling)

• Decide which platforms you need to get connected to the profile e.g. TikTok, X, instagram etc.

• Add your own description and custom messaging to help users better onboard to your application

Supported Platforms

You can connect the following platforms in your user's profile:

• Facebook

• Instagram

• X

• TikTok

• Roblox

• Fortnite

• Snapchat

Supported Chains

The Smart Profiles Wallet supports all EVM compatible chains for now. Support for non-evm chains will be added in the future.

Need support for a certain blockchain? Contact us on our discord