🏗️Build your first dApp with plurality

Plurality is currently in beta. Please do not use it in production.

We will create our first dApp that uses Plurality using React framework with typescript.

Want to jump directly to code? Checkout final code on Git

1. Create a react project with Typescript

npx create-react-app plurality-dapp --template typescript

2. Open the folder plurality-dapp in your editor of choice

3. Install the plurality widget using the following command

npm i plurality-social-connect

4. Go to src/ folder and create a new file declaration.d.ts with the following single line (Note: this step would resolve once a new package update with types comes out):

declare module 'plurality-social-connect';

5. Now open App.tsx file and replace the contents with the following code block

import PluralitySocialConnect from 'plurality-social-connect';
import { useRef } from 'react';

const App = () => {
    const childRef: any = useRef(null);
    // Handle the data returned from the widget
    const handleDataReturned = (data) => {
        const receivedData = JSON.parse(JSON.stringify(data))
        console.log("dapp receives:", receivedData);
        childRef.current.closeSocialConnectPopup();
        // Handle the received data in the external webpage
        // ... (perform actions with the received data)
    };

    return (
        <div>
            <PluralitySocialConnect
                options={{ apps: 'facebook,twitter' }}
                onDataReturned={handleDataReturned}
                // all customization params are optional
                // customization={{ height: '200px', width: '500px', initialBackgroundColor: '#E8A123', initialTextColor: '#FFFFFF', flipBackgroundColor: '#12AE83', flipTextColor: '#FFFFFF'}}
                ref={childRef}
            />
        </div>
    );
};
export default App;

6. Now run the demo with the following command

npm install && npm start

You should see a big pink button. Clicking on it will open the widget with the required workflows. If the user completes the workflow, their data will be received in the handleDataReturned event function.