fix: update vue examples

examples/vue/file-upload/src/App.vue

@@ -1,16 +1,16 @@
 <script>
-import { AuthProvider } from '@w3ui/vue-keyring'
+import { KeyringProvider } from '@w3ui/vue-keyring'
 import { UploaderProvider } from '@w3ui/vue-uploader'
 import Authenticator from './components/Authenticator.vue'
 import ContentPage from './ContentPage.vue'
 
 export default {
-  components: { AuthProvider, UploaderProvider, Authenticator, ContentPage }
+  components: { KeyringProvider, UploaderProvider, Authenticator, ContentPage }
 }
 </script>
 
 <template>
-  <AuthProvider>
+  <KeyringProvider>
     <UploaderProvider>
       <div className="vh-100 flex flex-column justify-center items-center sans-serif light-silver">
         <header>
@@ -23,5 +23,5 @@ export default {
         </div>
       </div>
     </UploaderProvider>
-  </AuthProvider>
+  </KeyringProvider>
 </template>

examples/vue/file-upload/src/ContentPage.vue

@@ -4,7 +4,7 @@ import { UploaderProviderInjectionKey } from '@w3ui/vue-uploader'
 export default {
   inject: {
     uploadFile: { from: UploaderProviderInjectionKey.uploadFile },
-    uploadedCarChunks: { from: UploaderProviderInjectionKey.uploadedCarChunks }
+    storedDAGShards: { from: UploaderProviderInjectionKey.storedDAGShards }
   },
   data () {
     return {
@@ -42,7 +42,7 @@ export default {
     <div className="flex-auto">
       <p className="truncate">Uploading DAG for {{file.name}}</p>
       <p className="f6 code truncate">{{dataCid}}</p>
-      <p v-for="chunk of uploadedCarChunks" className="f7 truncate">
+      <p v-for="chunk of storedDAGShards" className="f7 truncate">
         {{chunk.cid.toString()}} ({{chunk.size}} bytes)
       </p>
     </div>
@@ -57,8 +57,8 @@ export default {
     <h1 className="near-white">Done!</h1>
     <p className="f6 code truncate">{{dataCid}}</p>
     <p><a :href="'https://w3s.link/ipfs/' + dataCid" className="blue">View {{file.name}} on IPFS Gateway.</a></p>
-    <p className="near-white">Chunks ({{uploadedCarChunks.length}}):</p>
-    <p v-for="chunk of uploadedCarChunks" className="f7 truncate">
+    <p className="near-white">Chunks ({{storedDAGShards.length}}):</p>
+    <p v-for="chunk of storedDAGShards" className="f7 truncate">
       {{chunk.cid.toString()}} ({{chunk.size}} bytes)
     </p>
   </div>
@@ -71,4 +71,3 @@ export default {
     <button type="submit" className="ph3 pv2">Upload</button>
   </form>
 </template>
-

examples/vue/file-upload/src/components/Authenticator.vue

@@ -1,32 +1,31 @@
 <script>
 import { defineComponent } from 'vue'
-import { AuthProviderInjectionKey, AuthStatus } from '@w3ui/vue-keyring'
+import { KeyringProviderInjectionKey } from '@w3ui/vue-keyring'
 
 /**
  * Authenticator displays it's slot when an identity exists.
  */
 export default defineComponent({
   inject: {
-    identity: { from: AuthProviderInjectionKey.identity },
-    status: { from: AuthProviderInjectionKey.status },
-    registerAndStoreIdentity: { from: AuthProviderInjectionKey.registerAndStoreIdentity },
-    cancelRegisterAndStoreIdentity: { from: AuthProviderInjectionKey.cancelRegisterAndStoreIdentity },
+    agent: { from: KeyringProviderInjectionKey.agent },
+    space: { from: KeyringProviderInjectionKey.space },
+    createSpace: { from: KeyringProviderInjectionKey.createSpace },
+    registerSpace: { from: KeyringProviderInjectionKey.registerSpace },
+    cancelRegisterSpace: { from: KeyringProviderInjectionKey.cancelRegisterSpace },
   },
   data () {
     return {
       email: '',
       submitted: false
     }
   },
-  computed: {
-    AuthStatus: () => AuthStatus
-  },
   methods: {
     async handleRegisterSubmit (e) {
       e.preventDefault()
       this.submitted = true
       try {
-        await this.registerAndStoreIdentity(this.email)
+        await this.createSpace()
+        await this.registerSpace(this.email)
       } catch (err) {
         throw new Error('failed to register', { cause: err })
       } finally {
@@ -35,26 +34,26 @@ export default defineComponent({
     },
     handleCancelRegisterSubmit (e) {
       e.preventDefault()
-      this.cancelRegisterAndStoreIdentity()
+      this.cancelRegisterSpace()
     }
   }
 })
 </script>
 
 <template>
-  <div v-if="status === AuthStatus.SignedIn">
+  <div v-if="space?.registered()">
     <slot></slot>
   </div>
 
-  <div v-if="status === AuthStatus.EmailVerification">
+  <div v-if="submitted" className="w-90 w-50-ns mw6">
     <h1 className="near-white">Verify your email address!</h1>
-    <p>Click the link in the email we sent to {{identity.email}} to sign in.</p>
+    <p>Click the link in the email we sent to {{agent?.email}} to sign in.</p>
     <form @submit="handleCancelRegisterSubmit">
       <button type="submit" className="ph3 pv2">Cancel</button>
     </form>
   </div>
 
-  <form v-if="status === AuthStatus.SignedOut" @submit="handleRegisterSubmit">
+  <form v-if="!space?.registered() && !submitted" @submit="handleRegisterSubmit" className="w-90 w-50-ns mw6">
     <div className="mb3">
       <label htmlFor="email" className="db mb2">Email address:</label>
       <input id="email" className="db pa2 w-100" type="email" v-model="email" required />

examples/vue/sign-up-in/src/App.vue

@@ -1,14 +1,14 @@
 <script>
-import { AuthProvider } from '@w3ui/vue-keyring'
+import { KeyringProvider } from '@w3ui/vue-keyring'
 import ContentPage from './ContentPage.vue'
 
 export default {
-  components: { AuthProvider, ContentPage }
+  components: { KeyringProvider, ContentPage }
 }
 </script>
 
 <template>
-  <AuthProvider>
+  <KeyringProvider>
     <div className="vh-100 flex flex-column justify-center items-center sans-serif light-silver">
       <header>
         <img src="./assets/logo.png" width="250" alt="logo" />
@@ -17,5 +17,5 @@ export default {
         <ContentPage />
       </div>
     </div>
-  </AuthProvider>
+  </KeyringProvider>
 </template>

examples/vue/sign-up-in/src/ContentPage.vue

@@ -1,13 +1,14 @@
 <script>
-import { AuthProviderInjectionKey, AuthStatus } from '@w3ui/vue-keyring'
+import { KeyringProviderInjectionKey } from '@w3ui/vue-keyring'
 
 export default {
   inject: {
-    identity: { from: AuthProviderInjectionKey.identity },
-    status: { from: AuthProviderInjectionKey.status },
-    registerAndStoreIdentity: { from: AuthProviderInjectionKey.registerAndStoreIdentity },
-    cancelRegisterAndStoreIdentity: { from: AuthProviderInjectionKey.cancelRegisterAndStoreIdentity },
-    unloadIdentity: { from: AuthProviderInjectionKey.unloadIdentity }
+    agent: { from: KeyringProviderInjectionKey.agent },
+    space: { from: KeyringProviderInjectionKey.space },
+    createSpace: { from: KeyringProviderInjectionKey.createSpace },
+    registerSpace: { from: KeyringProviderInjectionKey.registerSpace },
+    cancelRegisterSpace: { from: KeyringProviderInjectionKey.cancelRegisterSpace },
+    unloadAgent: { from: KeyringProviderInjectionKey.unloadAgent }
   },
   data () {
     return {
@@ -16,14 +17,14 @@ export default {
     }
   },
   computed: {
-    AuthStatus: () => AuthStatus
   },
   methods: {
     async handleRegisterSubmit (e) {
       e.preventDefault()
       this.submitted = true
       try {
-        await this.registerAndStoreIdentity(this.email)
+        await this.createSpace()
+        await this.registerSpace(this.email)
       } catch (err) {
         throw new Error('failed to register', { cause: err })
       } finally {
@@ -32,39 +33,38 @@ export default {
     },
     handleCancelRegisterSubmit (e) {
       e.preventDefault()
-      this.cancelRegisterAndStoreIdentity()
+      this.cancelRegisterSpace()
     },
     handleSignOutSubmit (e) {
       e.preventDefault()
-      this.unloadIdentity()
+      this.unloadAgent()
     }
   }
 }
 </script>
 
 <template>
-  <div v-if="status === AuthStatus.SignedIn">
-    <h1 className="near-white">Welcome {{identity.email}}!</h1>
+  <div v-if="space?.registered()">
+    <h1 className="near-white">Welcome {{agent.email}}!</h1>
     <p>You are logged in!!</p>
     <form @submit="handleSignOutSubmit">
       <button type="submit" className="ph3 pv2">Sign Out</button>
     </form>
   </div>
 
-  <div v-if="status === AuthStatus.EmailVerification">
+  <div v-if="submitted">
     <h1 className="near-white">Verify your email address!</h1>
-    <p>Click the link in the email we sent to {{identity.email}} to sign in.</p>
+    <p>Click the link in the email we sent to {{agent.email}} to sign in.</p>
     <form @submit="handleCancelRegisterSubmit">
       <button type="submit" className="ph3 pv2">Cancel</button>
     </form>
   </div>
 
-  <form v-if="status === AuthStatus.SignedOut" @submit="handleRegisterSubmit">
+  <form v-if="!space?.registered() && !submitted" @submit="handleRegisterSubmit">
     <div className="mb3">
       <label htmlFor="email" className="db mb2">Email address:</label>
       <input id="email" className="db pa2 w-100" type="email" v-model="email" required />
     </div>
     <button type="submit" className="ph3 pv2" :disabled="submitted">Register</button>
   </form>
 </template>
-

examples/vue/uploads-list/src/App.vue

@@ -1,16 +1,16 @@
 <script>
-import { AuthProvider } from '@w3ui/vue-keyring'
+import { KeyringProvider } from '@w3ui/vue-keyring'
 import { UploadsListProvider } from '@w3ui/vue-uploads-list'
 import Authenticator from './components/Authenticator.vue'
 import ContentPage from './ContentPage.vue'
 
 export default {
-  components: { AuthProvider, UploadsListProvider, Authenticator, ContentPage }
+  components: { KeyringProvider, UploadsListProvider, Authenticator, ContentPage }
 }
 </script>
 
 <template>
-  <AuthProvider>
+  <KeyringProvider>
     <UploadsListProvider>
       <div className="vh-100 flex flex-column justify-center items-center sans-serif light-silver">
         <header>
@@ -21,5 +21,5 @@ export default {
         </Authenticator>
       </div>
     </UploadsListProvider>
-  </AuthProvider>
+  </KeyringProvider>
 </template>

examples/vue/uploads-list/src/components/Authenticator.vue

@@ -1,32 +1,31 @@
 <script>
 import { defineComponent } from 'vue'
-import { AuthProviderInjectionKey, AuthStatus } from '@w3ui/vue-keyring'
+import { KeyringProviderInjectionKey } from '@w3ui/vue-keyring'
 
 /**
  * Authenticator displays it's slot when an identity exists.
  */
 export default defineComponent({
   inject: {
-    identity: { from: AuthProviderInjectionKey.identity },
-    status: { from: AuthProviderInjectionKey.status },
-    registerAndStoreIdentity: { from: AuthProviderInjectionKey.registerAndStoreIdentity },
-    cancelRegisterAndStoreIdentity: { from: AuthProviderInjectionKey.cancelRegisterAndStoreIdentity },
+    agent: { from: KeyringProviderInjectionKey.agent },
+    space: { from: KeyringProviderInjectionKey.space },
+    createSpace: { from: KeyringProviderInjectionKey.createSpace },
+    registerSpace: { from: KeyringProviderInjectionKey.registerSpace },
+    cancelRegisterSpace: { from: KeyringProviderInjectionKey.cancelRegisterSpace },
   },
   data () {
     return {
       email: '',
       submitted: false
     }
   },
-  computed: {
-    AuthStatus: () => AuthStatus
-  },
   methods: {
     async handleRegisterSubmit (e) {
       e.preventDefault()
       this.submitted = true
       try {
-        await this.registerAndStoreIdentity(this.email)
+        await this.createSpace()
+        await this.registerSpace(this.email)
       } catch (err) {
         throw new Error('failed to register', { cause: err })
       } finally {
@@ -35,26 +34,26 @@ export default defineComponent({
     },
     handleCancelRegisterSubmit (e) {
       e.preventDefault()
-      this.cancelRegisterAndStoreIdentity()
+      this.cancelRegisterSpace()
     }
   }
 })
 </script>
 
 <template>
-  <div v-if="status === AuthStatus.SignedIn">
+  <div v-if="space?.registered()">
     <slot></slot>
   </div>
 
-  <div v-if="status === AuthStatus.EmailVerification" className="w-90 w-50-ns mw6">
+  <div v-if="submitted" className="w-90 w-50-ns mw6">
     <h1 className="near-white">Verify your email address!</h1>
-    <p>Click the link in the email we sent to {{identity.email}} to sign in.</p>
+    <p>Click the link in the email we sent to {{agent?.email}} to sign in.</p>
     <form @submit="handleCancelRegisterSubmit">
       <button type="submit" className="ph3 pv2">Cancel</button>
     </form>
   </div>
 
-  <form v-if="status === AuthStatus.SignedOut" @submit="handleRegisterSubmit" className="w-90 w-50-ns mw6">
+  <form v-if="!space?.registered() && !submitted" @submit="handleRegisterSubmit" className="w-90 w-50-ns mw6">
     <div className="mb3">
       <label htmlFor="email" className="db mb2">Email address:</label>
       <input id="email" className="db pa2 w-100" type="email" v-model="email" required />

packages/vue-keyring/src/providers/Keyring.ts

@@ -1,7 +1,8 @@
-import { defineComponent, provide, computed, InjectionKey, Ref, shallowReactive } from 'vue'
-import { createAgent, getCurrentSpace, getSpaces, KeyringContextState, KeyringContextActions, ServiceConfig } from '@w3ui/keyring-core'
+import { defineComponent, provide, computed, InjectionKey, Ref, shallowReactive, PropType } from 'vue'
+import { createAgent, getCurrentSpace, getSpaces, KeyringContextState, KeyringContextActions } from '@w3ui/keyring-core'
 import type { Agent } from '@web3-storage/access'
-import type { Capability, DID, Proof } from '@ucanto/interface'
+import type { Service } from '@web3-storage/access/types'
+import type { Capability, DID, Proof, ConnectionView, Principal  } from '@ucanto/interface'
 import type { RSASigner } from '@ucanto/principal/rsa'
 
 export { KeyringContextState, KeyringContextActions }
@@ -23,13 +24,16 @@ export const KeyringProviderInjectionKey = {
   getProofs: Symbol('w3ui keyring getProofs') as InjectionKey<KeyringContextActions['getProofs']>
 }
 
-export interface KeyringProviderProps extends ServiceConfig {}
-
 /**
  * Provider for authentication with the service.
  */
-export const KeyringProvider = defineComponent<KeyringProviderProps>({
-  setup ({ servicePrincipal, connection }) {
+export const KeyringProvider = defineComponent({
+  props: {
+    servicePrincipal: { type: Object as PropType<Principal> },
+    connection: { type: Object as PropType<ConnectionView<Service>> }
+  },
+
+  setup({ servicePrincipal, connection }) {
     const state = shallowReactive<KeyringContextState>({
       agent: undefined,
       space: undefined,