IntroducingSimple App with Ceramic Data Model and Unstoppable Domains

Simple App with Ceramic Data Model and Unstoppable Domains

Ceramic allows users to have complete ownership over their data by providing decentralized technologies for authentication and data storage.

In this tutorial we set up an application to interact with JS HTTP Client through a public Ceramic node. In addition we create a deterministic Ceramic Tile and resolve an unstoppable domain which we store in the decentralized profile of the user.

The app is hosted on Vercel at https://ceramic-unstoppable.vercel.app/.

The GitHub repository is at https://github.com/Pfed-prog/Ceramic_Unstoppable.

Requirements

Node.js v14 and npm v6

For more detailed information look at Ceramic Developers Portal

Libraries

  • @3id/connect
  • @ceramicnetwork/http-client
  • @ceramicnetwork/stream-tile
  • @ceramicnetwork/3id-did-resolver
  • dids
  • @unstoppabledomains/resolution
  • @ethersproject/providers
  • @uauth/web3-react
  • @web3-react/abstract-connector
  • @web3-react/core
  • @web3-react/injected-connector
  • @web3-react/walletconnect-connector

Application dependencies and set up

First we create an app by using React framework and cd into the directory:

1
2
npx create-react-app new-app
cd new-app

Then we install the dependencies for ceramic and unstoppbale domains:

npm install @ceramicnetwork/http-client @ceramicnetwork/3id-did-resolver dids @3id/connect @ceramicnetwork/stream-tile @unstoppabledomains/resolution

and install dependencies necessary to connect the pieces:

npm install @ethersproject/providers @uauth/web3-react @web3-react/abstract-connector @web3-react/core @web3-react/injected-connector @web3-react/walletconnect-connector

After the dependencies are installed we move into the src folder via cd src and create a new file where after a successful login we can access ceramic DID Datastore and update the data. This file we name as DataModels.js . We also create an additional css file for Datamodels.js that we name as App.module.css.

Additionally, we create connectors.js file that we access in App.js to connect to Ethereum Providers.

Coding the application

In connectors.js we create three wallet connectors: useWeb3React Injected connector to Ethereum Mainnet with MetaMask, Walletconnect and UAuthConnector for Unstoppable Domains.

In App.js we import following libraries, files and define a constant to initialize ceramic client:

Meanwhile the function App is where we define states, hooks and functions:

On the initial state the app display three buttons, which relate to a distinct wallet connector. Once the user pushes the button the state active becomes true, connecting to the wallet. After the wallet is connected the ceramic client initializes and connects to the decentralizes identity. Finally, following the successful ceramic client connection the user enters to the profile skills page.

In DataModels.js we define the determenistic Ceramic tiles where the users edits and stores skills data.

Ceramic Unstoppable Domains skills page