fix: update vanilla sign-up example (#129)

This just updates the vanilla sign up/in example to use the new stuff
from #119.

I've got the file upload example nearly done as well, but need to wrap
things up for the day, so I'll finish it tomorrow.

@alanshaw this PR is targeting the branch from #119, so feel free to
pull it in there if you want. Otherwise I'll retarget this one after
that one merges.

Co-authored-by: Alan Shaw <alan.shaw@protocol.ai>

examples/vanilla/sign-up-in/src/main.js

@@ -1,15 +1,16 @@
 import './assets/tachyons.min.css'
 
 import {
-  createIdentity,
-  registerIdentity,
-  sendVerificationEmail,
-  waitIdentityVerification,
-  removeIdentity,
-  storeIdentity,
-  loadDefaultIdentity
+  createAgent,
+  getCurrentSpace,
 } from '@w3ui/keyring-core'
 
+// FIXME: remove this once we no longer need to target staging
+import {
+  accessServicePrincipal,
+  accessServiceConnection
+} from './staging-service.js'
+
 const SELECTORS = {
   authForm: '#sign-up-in-form',
   cancelRegistrationButton: '#cancel-registration',
@@ -26,7 +27,7 @@ export const EVENTS = {
 export class RegisterForm extends window.HTMLElement {
   constructor () {
     super()
-    this.identity = null
+    this.agent = null
     this.email = null
     this.form$ = document.querySelector(SELECTORS.authForm)
     this.confirmationTemplate$ = document.querySelector(SELECTORS.confirmationTemplate)
@@ -37,18 +38,28 @@ export class RegisterForm extends window.HTMLElement {
     this.formatTemplateContent = this.formatTemplateContent.bind(this)
   }
 
+  async getAgent() {
+    if (this.agent == null) {
+      this.agent = await createAgent({ 
+        servicePrincipal: accessServicePrincipal, 
+        connection: accessServiceConnection
+      })
+    }
+    return this.agent
+  }
+
   async connectedCallback () {
     this.form$.addEventListener('submit', this.submitHandler)
 
-    const identity = await loadDefaultIdentity()
-
-    if (identity) {
-      this.identity = identity
-      this.email = identity.email
+    const agent = await this.getAgent()
+    console.log(`Agent DID: ${agent.did()}`)
+
+    const space = getCurrentSpace(agent)
+    if (space?.registered()) {
       this.toggleConfirmation()
-      console.log(`DID: ${identity.signingPrincipal.did()}`)
+      console.log(`Space DID: ${space.did()}`)
     } else {
-      console.log('No identity registered')
+      console.log('No registered spaces')
     }
   }
 
@@ -62,6 +73,7 @@ export class RegisterForm extends window.HTMLElement {
     this.replaceChildren(this.formatTemplateContent(templateContent))
     this.signOutButton$ = document.querySelector(SELECTORS.signOutButton)
     this.signOutButton$.addEventListener('click', this.signOutHandler)
+
   }
 
   toggleVerification () {
@@ -82,9 +94,8 @@ export class RegisterForm extends window.HTMLElement {
 
   async signOutHandler (e) {
     e.preventDefault()
-    if (this.identity) {
-      await removeIdentity(this.identity)
-    }
+    this.agent = null
+
     window.location.reload()
   }
 
@@ -94,26 +105,26 @@ export class RegisterForm extends window.HTMLElement {
     // log in a user by their email
     const email = fd.get('email')
     this.email = email
-    let identity
-    let proof
 
     if (email) {
-      const unverifiedIdentity = await createIdentity({ email })
-      console.log(`DID: ${unverifiedIdentity.signingPrincipal.did()}`)
-      await sendVerificationEmail(unverifiedIdentity)
+      const agent = await this.getAgent()
+      const { did } = await agent.createSpace()
+      await agent.setCurrentSpace(did)
+      console.log(`Created new Space with DID: ${did}`)
+
       const controller = new AbortController()
 
       try {
+        // Fire registration start event
+        const startEvent = window.CustomEvent(EVENTS.registrationStart, { bubbles: true })
+        this.dispatchEvent(startEvent)
+
         this.toggleVerification(true);
-        ({ identity, proof } = await waitIdentityVerification(
-          unverifiedIdentity,
-          {
-            signal: controller.signal
-          }
-        ))
-        await registerIdentity(identity, proof)
-        await storeIdentity(identity)
-        this.identity = identity
+        await agent.registerSpace(email, { signal: controller.signal })
+
+        // Fire sign in success event
+        const successEvent = new window.CustomEvent(EVENTS.registrationSuccess, { bubbles: true })
+        this.dispatchEvent(successEvent)
       } catch (err) {
         console.error('Registration failed:', err)
         this.email = null

examples/vanilla/sign-up-in/src/staging-service.js

@@ -0,0 +1,29 @@
+import { connect } from '@ucanto/client'
+import { CAR, CBOR, HTTP } from '@ucanto/transport'
+import * as DID from '@ipld/dag-ucan/did'
+
+export const accessServiceURL = new URL('https://w3access-staging.protocol-labs.workers.dev')
+export const accessServicePrincipal = DID.parse('did:key:z6MkwTYX2JHHd8bmaEuDdS1LJjrpFspirjDcQ4DvAiDP49Gm')
+
+export const accessServiceConnection = connect({
+  id: accessServicePrincipal,
+  encoder: CAR,
+  decoder: CBOR,
+  channel: HTTP.open({
+    url: accessServiceURL,
+    method: 'POST'
+  })
+})
+
+export const uploadServiceURL = new URL('https://staging.up.web3.storage')
+export const uploadServicePrincipal = DID.parse('did:key:z6MkhcbEpJpEvNVDd3n5RurquVdqs5dPU16JDU5VZTDtFgnn')
+
+export const uploadServiceConnection = connect({
+  id: uploadServicePrincipal,
+  encoder: CAR,
+  decoder: CBOR,
+  channel: HTTP.open({
+    url: uploadServiceURL,
+    method: 'POST'
+  })
+})