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.
- Start by creating a new project with Solo Composer and selecting the React app version.
- Install the necessary dependencies.
- Open the React app package and add the following libraries:
cello-identityto interact with SocialConnect.
react-iconsfor enhancing the user experience with icons.
- Configure the
package.jsonfile by adding the necessary libraries. In this case, we need to include
blind-threshold-BLSfor working with the SocialConnect protocol in a Next.js project.
- Handle environment variables by creating a
.envfile 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.
- Create an API folder to store the smart contract APIs mentioned earlier.
- Create a utils folder and start by creating a
consentfile. Export the APIs and environment variables from this file.
- Create a
web-blinding-clientfile 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.
- Add a missing file referenced in the
identityMagnumfile. Create this file and place it in the public folder.
- Create an interface to define variables used for interacting with SocialConnect as an issuer.
- Implement a custom hook called
isMountedto prevent rendering issues. We will use this hook later in the project.
- Since we are using Next.js, wrap the app with the
LibraryProviderto provide the necessary context.
- Import all the necessary dependencies.
- Define the hooks required for the different steps of the SocialConnect process.
- Create a new
useEffectthat will be called only once to instantiate the objects defined in the
socialConnectinterface using the parameters from the interface.
- Define the steps for the user experience (UX), with each step being active based on the presence of specific conditions.
- 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.
- Create a session core component that handles the UX aspects. Paste the provided code into this component.
- Implement an additional
useEffectto retrieve the social identifier from the session.
- Prepare a transaction that will be called with the user’s address and the resolved address from the SocialConnect protocol.
- Define the main functions required for the SocialConnect process, including the register attestation function, address lookup function, and identifier revocation function.
- Divide the UX code into steps as defined earlier.
- Paste the provided code for the UX implementation. Each step is encapsulated with relevant code.
- Run the app and connect your wallet.
- Sign in with your Twitter account.
- Map your Twitter username to your user address.
- Switch to another user account and search for the user address associated with your Twitter username.
- Send some Celo value using the SocialConnect protocol.
- 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.