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.

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', text: 'Customizable Text' };


// 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.

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,
    fontSize?: string,
    fontFamily?: 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.

  3. Text is the text of the button that when clicked opens the Smart Profile Wallet. Some examples could be "Login" or "Profile" or anything else that makes sense according to your dApp.

If you keep any of the above options as empty, then it will just pick up default settings. For testing purposes, this is okay.

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 = {  
                    clientId: 'c4089665-9aa0-4e00-91fb-7485477166dc', 
                    theme: 'dark',
                    text: 'Login' 
                };

<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.

Last updated

Was this helpful?