Spark: SocialConnect Mini-Series (3/3) — Coding Session

[celaahl]

In this tutorial, we will walk through the coding session of the Celo Spark SocialConnect Mini-Series. We will build an app that utilizes the SocialConnect protocol and incorporates three key features. Let’s dive into the code and implement these features.

Setting up the Project

1. Start by creating a new project with Solo Composer and selecting the React app version.
2. Install the necessary dependencies.
3. Open the React app package and add the following libraries:

• cello-identity to interact with SocialConnect.
• react-icons for enhancing the user experience with icons.

Configuring the Project

1. Configure the package.json file by adding the necessary libraries. In this case, we need to include blind-threshold-BLS for working with the SocialConnect protocol in a Next.js project.
2. Handle environment variables by creating a .env file with two sections: one for Twitter credentials and the other for SocialConnect variables.

• Note: This project is not production-ready and requires adjustments to handle sensitive information properly.

Implementing the API and Utilities

1. Create an API folder to store the smart contract APIs mentioned earlier.
2. Create a utils folder and start by creating a consent file. Export the APIs and environment variables from this file.
3. Create a web-blinding-client file in the same utils folder. Implement the necessary functions for interacting with the SocialConnect protocol from a web app. Refer to the SocialConnect GitHub repository for further details.
4. Add a missing file referenced in the identityMagnum file. Create this file and place it in the public folder.
5. Create an interface to define variables used for interacting with SocialConnect as an issuer.
6. Implement a custom hook called isMounted to prevent rendering issues. We will use this hook later in the project.
7. Since we are using Next.js, wrap the app with the LibraryProvider to provide the necessary context.

Building the Home Page

1. Import all the necessary dependencies.
2. Define the hooks required for the different steps of the SocialConnect process.
3. Create a new useEffect that will be called only once to instantiate the objects defined in the socialConnect interface using the parameters from the interface.
4. Define the steps for the user experience (UX), with each step being active based on the presence of specific conditions.
5. Implement the necessary functions, such as the identifier login function, which takes the session and renders the required components. Configure the server-side Next.js callback accordingly.
6. Create a session core component that handles the UX aspects. Paste the provided code into this component.
7. Implement an additional useEffect to retrieve the social identifier from the session.
8. Prepare a transaction that will be called with the user’s address and the resolved address from the SocialConnect protocol.
9. Define the main functions required for the SocialConnect process, including the register attestation function, address lookup function, and identifier revocation function.

User Experience (UX)

1. Divide the UX code into steps as defined earlier.
2. Paste the provided code for the UX implementation. Each step is encapsulated with relevant code.

Testing the App

1. Run the app and connect your wallet.
2. Sign in with your Twitter account.
3. Map your Twitter username to your user address.
4. Switch to another user account and search for the user address associated with your Twitter username.
5. Send some Celo value using the SocialConnect protocol.
6. Switch back to your user account and deregister your Twitter username.

Congratulations! You have successfully implemented an app that utilizes the SocialConnect protocol with three key features. Feel free to explore the code and make adjustments as needed.

[emmanuelikwuoma7]

Gone through 1 and 2. Glad to complete it. Very insightful