dabit3/ceramic_identity_playground.js

## ceramic_identity_playground.js
import { useState } from 'react'
import Head from 'next/head'
import styles from '../styles/Home.module.css'

import { CeramicClient } from '@ceramicnetwork/http-client'
import { DID } from 'dids'
import { ThreeIdConnect } from '@3id/connect'
const SID = require('@self.id/web')
const { EthereumAuthProvider, SelfID, WebClient } = SID

import ThreeIdResolver from '@ceramicnetwork/3id-did-resolver'
import KeyDidResolver from 'key-did-resolver'
import { Core } from '@self.id/core'

const API_URL = 'https://gateway-clay.ceramic.network'

const ceramic = new CeramicClient(API_URL)

export default function Home() {
  const [userId, setUserId] = useState('')
  const [url, setUrl] = useState('')

  async function auth2() {
    const addresses = await window.ethereum.request({
      method: 'eth_requestAccounts',
    })
    const authProvider = new EthereumAuthProvider(window.ethereum, addresses[0])

    const client = new WebClient({
      ceramic: 'testnet-clay',
      connectNetwork: 'testnet-clay',
    })

    await client.authenticate(authProvider)

    const self = new SelfID({ client })
    const id = self.did._id
    console.log('id:', id)
    setUserId(id)

    const profile = await self.get('basicProfile', id)
    console.log('profile: ', profile)
  }

  async function setCeramicUrl() {
    const addresses = await window.ethereum.request({
      method: 'eth_requestAccounts',
    })
    const authProvider = new EthereumAuthProvider(window.ethereum, addresses[0])

    // The following configuration assumes your local node is connected to the Clay testnet
    const client = new WebClient({
      ceramic: 'testnet-clay',
      connectNetwork: 'testnet-clay',
    })

    await client.authenticate(authProvider)

    const self = new SelfID({ client })

    await self.set('basicProfile', { url })
    console.log('set successfully...')
  }

  async function read() {
    const core = new Core({ ceramic: 'testnet-clay' })
    try {
      const profile = await core.get('basicProfile', userId)
      console.log('profile: ', profile)
    } catch (err) {
      console.log('error: ', err)
    }
  }

  async function readWithoutDID() {
    const addresses = await window.ethereum.request({
      method: 'eth_requestAccounts',
    })
    const core = new Core({ ceramic: 'testnet-clay' })
    const address = addresses[0]
    const did = await core.getAccountDID(`${address}@eip155:1`)
    console.log('did:', did)
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <button onClick={auth2}>auth2</button>
        <button onClick={read}>read</button>
        <button onClick={readWithoutDID}>readWithoutDID</button>
        <button onClick={setCeramicUrl}>setCeramicUrl</button>

        <input onChange={e => setUrl(e.target.value)} />
      </main>
    </div>
  )
}

/*

  async function authenticate() {
    const [address] = await window.ethereum.request({ method: 'eth_requestAccounts' })
    const threeIdConnect = new ThreeIdConnect()
    const authProvider = new EthereumAuthProvider(ethereum, address)

    await threeIdConnect.connect(authProvider)

    const provider = await threeIdConnect.getDidProvider()

    const resolver = {
      ...KeyDidResolver.getResolver(),
      ...ThreeIdResolver.getResolver(ceramic),
    }
    const did = new DID({
      provider,
      resolver,
    })
    ceramic.did = did

    ceramic.did.setProvider(provider)
    await ceramic.did.authenticate()

    const core = new Core({ ceramic: 'testnet-clay' })

    const id = ceramic.context.did._id
    console.log('id: ', id)
    setUserId(id)
    const profile = await core.get('basicProfile', id)

    console.log('profile: ', profile)
  }

*/
	import { useState } from 'react'
	import Head from 'next/head'
	import styles from '../styles/Home.module.css'

	import { CeramicClient } from '@ceramicnetwork/http-client'
	import { DID } from 'dids'
	import { ThreeIdConnect } from '@3id/connect'
	const SID = require('@self.id/web')
	const { EthereumAuthProvider, SelfID, WebClient } = SID

	import ThreeIdResolver from '@ceramicnetwork/3id-did-resolver'
	import KeyDidResolver from 'key-did-resolver'
	import { Core } from '@self.id/core'

	const API_URL = 'https://gateway-clay.ceramic.network'

	const ceramic = new CeramicClient(API_URL)

	export default function Home() {
	const [userId, setUserId] = useState('')
	const [url, setUrl] = useState('')

	async function auth2() {
	const addresses = await window.ethereum.request({
	method: 'eth_requestAccounts',
	})
	const authProvider = new EthereumAuthProvider(window.ethereum, addresses[0])

	const client = new WebClient({
	ceramic: 'testnet-clay',
	connectNetwork: 'testnet-clay',
	})

	await client.authenticate(authProvider)

	const self = new SelfID({ client })
	const id = self.did._id
	console.log('id:', id)
	setUserId(id)

	const profile = await self.get('basicProfile', id)
	console.log('profile: ', profile)
	}

	async function setCeramicUrl() {
	const addresses = await window.ethereum.request({
	method: 'eth_requestAccounts',
	})
	const authProvider = new EthereumAuthProvider(window.ethereum, addresses[0])

	// The following configuration assumes your local node is connected to the Clay testnet
	const client = new WebClient({
	ceramic: 'testnet-clay',
	connectNetwork: 'testnet-clay',
	})

	await client.authenticate(authProvider)

	const self = new SelfID({ client })

	await self.set('basicProfile', { url })
	console.log('set successfully...')
	}

	async function read() {
	const core = new Core({ ceramic: 'testnet-clay' })
	try {
	const profile = await core.get('basicProfile', userId)
	console.log('profile: ', profile)
	} catch (err) {
	console.log('error: ', err)
	}
	}

	async function readWithoutDID() {
	const addresses = await window.ethereum.request({
	method: 'eth_requestAccounts',
	})
	const core = new Core({ ceramic: 'testnet-clay' })
	const address = addresses[0]
	const did = await core.getAccountDID(`${address}@eip155:1`)
	console.log('did:', did)
	}

	return (
	<div className={styles.container}>
	<Head>
	<title>Create Next App</title>
	<meta name="description" content="Generated by create next app" />
	<link rel="icon" href="/favicon.ico" />
	</Head>

	<main className={styles.main}>
	<h1 className={styles.title}>
	Welcome to <a href="https://nextjs.org">Next.js!</a>
	</h1>

	<button onClick={auth2}>auth2</button>
	<button onClick={read}>read</button>
	<button onClick={readWithoutDID}>readWithoutDID</button>
	<button onClick={setCeramicUrl}>setCeramicUrl</button>

	<input onChange={e => setUrl(e.target.value)} />
	</main>
	</div>
	)
	}

	/*

	async function authenticate() {
	const [address] = await window.ethereum.request({ method: 'eth_requestAccounts' })
	const threeIdConnect = new ThreeIdConnect()
	const authProvider = new EthereumAuthProvider(ethereum, address)

	await threeIdConnect.connect(authProvider)

	const provider = await threeIdConnect.getDidProvider()

	const resolver = {
	...KeyDidResolver.getResolver(),
	...ThreeIdResolver.getResolver(ceramic),
	}
	const did = new DID({
	provider,
	resolver,
	})
	ceramic.did = did

	ceramic.did.setProvider(provider)
	await ceramic.did.authenticate()

	const core = new Core({ ceramic: 'testnet-clay' })

	const id = ceramic.context.did._id
	console.log('id: ', id)
	setUserId(id)
	const profile = await core.get('basicProfile', id)

	console.log('profile: ', profile)
	}

	*/