NEAR <> Ceramic Clay Testnet Integration Example Apps

[mattlockyer]

Description

Create a sample app integrating with NEAR Wallet and Ceramic (optional have your own contract interactions) and have it be deployable on testnet by any developer who needs to use it as a boilerplate to start their app. This should include adding support for NEAR to authenticate and link to Ceramic identities (see guides) and have the app deployable on testnet by any developer who needs to use it as a boilerplate to start their app.

Context

Ceramic is a decentralized, censorship-resistant network for managing Web3 data without servers or databases. IDX is a cross-network identity protocol built on Ceramic that enables the sharing of identities, data, and user experiences across networks.

Notes / Tips

The main leap will be the linking of the two technologies rather than the sample app itself (following the guides posted in resources).

NEAR has many keys per AccountId, you can sign and recover the accountId from a signature that came from any access key, but you must check the access keys of the account using near-api-js.

Ceramic will need to establish some link between a user's NEAR AccountId and the ceramic network. If you make this link with an access key vs. accountId, then each time the user logs in/out of your app with NEAR Wallet they will have a different Ceramic link.

A server side example of signature verification can be found here: https://github.com/near-apps/nearbp/blob/8f0a32dc774c68553ff26d1cbdf0592dd7281700/server/middleware/near.js#L23-L59

Client side signing here: https://github.com/near-apps/nearbp/blob/8f0a32dc774c68553ff26d1cbdf0592dd7281700/src/utils/near-utils.js#L28-L36

Resources

https://blog.ceramic.network/add-authentication-with-new-blockchains-in-3id-connect/ https://developers.ceramic.network/reference/typescript/pages/Guides/add-new-blockchain.html https://github.com/ceramicnetwork/CIP/blob/master/CIPs/CIP-7/CIP-7.md https://github.com/ChainAgnostic/CAIPs/blob/master/CAIPs/caip-10.md https://github.com/ceramicnetwork/js-ceramic/blob/develop/packages/blockchain-utils-linking/src/auth-provider.ts

Acceptance Criteria

• [ ] Comment on this issue first to propose your example app
• [ ] Should be OSS/License usable by other devs as starter / boilerplate for apps and hacks
• [ ] Should show full end to end usage of NEAR Wallet, get access key, sign tx, verify NEAR AccountId and interact with AuthProvider
• [ ] Register with Ceramic network
• [ ] Use data storage on Ceramic "Clay testnet"
• [ ] Demonstrate file storage and retrieval in app
• [ ] Demonstrate usage of at least 2 data structures

Bounty

Approx $ 500 DAI for best projects implementing both technologies!

[TrevorJTClarke]

App Idea:

• Vue + NEAR + Ceramic
• NEAR Login
• Enter a message (could be an encouraging message, like giveprops.app)
• Sign & send to chain the hash of the message, send full data to Ceramic
• View message(s)

Dev details:

• Create new github repo, add "template" feature for easy use later
• Setup build scripts & development for easier onboarding into development
• README with notes on getting setup, where noteworthy files/code lives

[mattlockyer]

@TrevorJTClarke nice idea! Would be cool to get an alert if I sign in with my wallet and there is a message that was tagged with my accountId :smile:

[TrevorJTClarke]

@TrevorJTClarke nice idea! Would be cool to get an alert if I sign in with my wallet and there is a message that was tagged with my accountId 😄

@mattlockyer seems reasonable -- guess that would just be a filter to messages assigned to your account. let's call that a stretch goal ;)

[ALuhning]

Alrighty - think I've got this figured out.

App Idea: User Profiles

• React, Ceramic, IDX, AssemblyScript all on NEAR, of course.
• NEAR Wallet Flow for sign in/sign out
• On login, does some initialization: generates DID and associates it to NEAR account using 32 bytes of the 64 byte signature from a signed message to create the seed and then storing the DID in a did registry on NEAR, creates and stores profile and profileList schema CIDs in schema registry on NEAR, creates appropriate definitions and stores them in a definition registry on NEAR.
• User can add and update basic profile data (updates the ceramic doc) (name, avatar, short bio)
• Be a way to view all profiles and individual profiles
• A basic React UI using Material-ui components

And, I intend to write it up/do a code walkthrough/provide Github repo of the code.

As of now: -the link between NEAR account and ceramic DID is established/working -in process of building out the schemas/docs and setting up the UI -have put together a ceramic class file that can easily be dropped into another project allowing the near account/did connection via signing/signature

That's my plan - well into it.

[TrevorJTClarke]

Added PR js-ceramic here

Main app repo: https://github.com/TrevorJTClarke/near-ceramic-vue

[ALuhning]

Added a draft CAIP-2 for NEAR - PR here

[dzuqe]

App Idea: A template for creative dapps that require a registry for 3D based content

• React, Ceramic and Near rust contract
• Babylonjs for rendering the models on canvas
• the template aims to be minimal and for creative coders who are interested in fluid syntax and a humorous lexer.

The template integrates the following tech:

• Arweave to store 3D models and texture files
• Ceramic to create documents that describe the nature of the 3D model with a customizable schema
• Near contract mesh registry to facilitate a 3D model network

Usage flow:

• Login to near wallet
• Login to Arweave for file uploads
• Choose your 3D model files and store them with related metadata (eg author) in a ceramic document
• Send the ceramic doc id to the near contract where a UI of the 3D model network can be built

I'm currently setting up authentication with the NearAuthProvider made by Trevor so as to create a doc on ceramic with the model metadata

Link: https://github.com/rinzlxr/mesh

[tahpot]

If you make this link with an access key vs. accountId, then each time the user logs in/out of your app with NEAR Wallet they will have a different Ceramic link.

@mattlockyer Do you have any thoughts on how to handle this problem due to NEAR having multiple different access keys?

On a related note, I have previously used Ethereum signatures to deterministically generate entropy for an encryption key to store data off-chain. Again, due to multiple access keys I can't see a way to do this with NEAR, but would appreciate if you have any thoughts?

[ALuhning]

Well, finally finished off my take on NEAR/Ceramic integration. Currently setup to run on Testnet - but think this one I'll actually move to MainNet.

High Level Overview:

Using Near-Names as a foundation, extended/revised it to allow someone with a NEAR account to create NEAR personas under that account. Each new account created is registered on a NEAR contract (dids.vitalpointai.testnet) and a Ceramic seed is generated at account creation time which is encrypted and stored in a Ceramic doc for that account. It is also saved to a user's localstorage with end result being a 3ID identifer (DID) that is unique to that NEAR account and that is also recoverable by the NEAR account's seed phrase if need be.

The frontend lets a user login with their NEAR account and create personas (NEAR accounts) that are then accessible from that interface. Each account can have profile information added to it (currently just avatar, name, short bio) - but easily extended.

Because the Personas, schemas, definitions are all Ceramic components, any app can then use Ceramic and the DID registry to lookup a NEAR account name and draw in any information pertaining to it. It's a simple matter of instantiating a Ceramic client and then calling a get function for that user's did.

It makes it easy for people to create and manage all the information they want to provide in a persona in one place and then let apps use that information if they so choose. Updating anything in the Persona will propagate to wherever it is being displayed.

Github Repo: NEAR Personas Demo Video: NEAR Personas Video Demo NEAR Personas (TestNet) App: Near Personas Vital Point AI Tutorial: Building NEAR Personas to Integrate in Your Apps: Decentralized Identity with NEAR Protocol and Ceramic IDX

And that should be everything I promised for the bounty.