feat: update docs for new account API (#14)

we did a major version release but didn't update the docs yet - do that!
storacha · Mar 30, 2023 · c06b061 · c06b061
1 parent da328bb
commit c06b061
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 64 deletions.
diff --git a/components/ComponentIntro.js b/components/ComponentIntro.js
@@ -14,7 +14,7 @@ export const ComponentIntro = ({ title, desc, id }) => {
                     <p className="text-lg xl:text-xl text-gray-400 mb-8 xl:max-w-4xl mx-auto !leading-relaxed xl:mb-2">{desc}</p>
                 </div>
             </div>
-            <p className="text-gray-400 my-16 text-left md:text-center"><strong className="text-white font-semibold">Supported frameworks:</strong> React, Solid, Vue, React Native, Svelte</p>
+            <p className="text-gray-400 my-16 text-left md:text-center"><strong className="text-white font-semibold">Supported frameworks:</strong> React, Solid, Vue</p>
         </>
     )
 }
diff --git a/components/PageHead.js b/components/PageHead.js
@@ -2,7 +2,7 @@ import Head from 'next/head'
 export const PageHead = () => {
     <Head>
         <title>w3ui — Headless, type-safe, UI components for Web3.Storage IPFS upload APIs</title>
-        <meta name="description" content="Headless, type-safe, UI components for React, React Native, vanilla JS, Vue, Solid, Svelte, and more." />
+        <meta name="description" content="Headless, type-safe, UI components for React, vanilla JS, Vue, Solid, and more." />
         <link rel="icon" href="/favicon.ico" />
     </Head>
 }
diff --git a/pages/index.js b/pages/index.js
@@ -14,7 +14,7 @@ export default function Home() {
     <div>
       <Head>
         <title>w3ui — Headless, type-safe, UI components for Web3.Storage IPFS upload APIs</title>
-        <meta name="description" content="Headless, type-safe, UI components for React, React Native, vanilla JS, Vue, Solid, Svelte, and more." />
+        <meta name="description" content="Headless, type-safe, UI components for React, vanilla JS, Vue, Solid, and more." />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
@@ -28,7 +28,7 @@ export default function Home() {
 
             <p className="text-lg xl:text-xl text-gray-400 mb-8 xl:max-w-4xl mx-auto !leading-relaxed xl:mb-2">Build production ready apps or awesome demos for hackathons that use the web3.storage service for storing content addressed IPLD data on IPFS and Filecoin. Pick a supported framework or go vanilla and spin up a Web 3.0 application using headless components that let YOU choose the theme and interactions.</p>
 
-            <p className="text-gray-400 mt-16 mb-6"><strong className="text-white font-semibold">Supported frameworks:</strong> React, Solid, Vue, React Native, Svelte</p>
+            <p className="text-gray-400 mt-16 mb-6"><strong className="text-white font-semibold">Supported frameworks:</strong> React, Solid, Vue</p>
 
             <section className="w-full max-w-7xl mx-auto flex mb-36">
               <div className="grid w-full justify-center sm:grid-cols-3 gap-2 lg:gap-8 gap-y-16">

diff --git a/pages/keyring.js b/pages/keyring.js
@@ -30,21 +30,21 @@ export default function KeyringPage() {
       id: 'react',
       title: 'React',
       language: 'jsx',
-      link: 'https://codesandbox.io/s/w3ui-example-react-sign-up-in-8m0kv8',
+      link: 'https://codesandbox.io/s/w3ui-example-react-sign-up-in-mk3mql',
       code: reactSample,
     },
     {
       id: 'solid',
       title: 'Solid',
       language: 'jsx',
-      link: 'https://codesandbox.io/s/w3ui-example-solid-sign-up-in-wpl9r4',
+      link: 'https://codesandbox.io/s/w3ui-example-solid-sign-up-in-wiu98l',
       code: solidSample,
     },
     {
       id: 'vue',
       title: 'Vue',
       language: 'htmlbars',
-      link: 'https://codesandbox.io/s/w3ui-example-vue-sign-up-in-34t6e7',
+      link: 'https://codesandbox.io/s/w3ui-example-vue-sign-up-in-k2g9e3',
       code: vueSample,
     }
   ]

diff --git a/pages/uploader.js b/pages/uploader.js
@@ -30,21 +30,21 @@ export default function UploaderPage() {
       id: 'react',
       title: 'React',
       language: 'jsx',
-      link: 'https://codesandbox.io/s/w3ui-example-react-file-upload-lthn55',
+      link: 'https://codesandbox.io/s/w3ui-example-react-file-upload-xhwue8',
       code: reactSample,
     },
     {
       id: 'solid',
       title: 'Solid',
       language: 'jsx',
-      link: 'https://codesandbox.io/s/w3ui-example-solid-file-upload-hu9t5j',
+      link: 'https://codesandbox.io/s/w3ui-example-solid-file-upload-zzr0yc',
       code: solidSample,
     },
     {
       id: 'vue',
       title: 'Vue',
       language: 'htmlbars',
-      link: 'https://codesandbox.io/s/w3ui-example-vue-file-upload-rup9xj',
+      link: 'https://codesandbox.io/s/w3ui-example-vue-file-upload-lx572o',
       code: vueSample, 
     }
   ]

diff --git a/pages/uploads-table.js b/pages/uploads-table.js
@@ -30,21 +30,21 @@ export default function UploadsTablePage() {
       id: 'react',
       title: 'React',
       language: 'jsx',
-      link: 'https://codesandbox.io/s/w3ui-example-react-uploads-list-hcg60h',
+      link: 'https://codesandbox.io/s/w3ui-example-react-uploads-list-twg62y',
       code: reactSample,
     },
     {
       id: 'solid',
       title: 'Solid',
       language: 'jsx',
-      link: 'https://codesandbox.io/s/w3ui-example-solid-uploads-list-qd0yh9',
+      link: 'https://codesandbox.io/s/w3ui-example-solid-uploads-list-8lhz7d',
       code: solidSample,
     },
     {
       id: 'vue',
       title: 'Vue',
       language: 'htmlbars',
-      link: 'https://codesandbox.io/s/w3ui-example-vue-uploads-list-ksr05v',
+      link: 'https://codesandbox.io/s/w3ui-example-vue-uploads-list-ubd02r',
       code: vueSample, 
     }
   ]

diff --git a/sample-code/react/keyring.jsx b/sample-code/react/keyring.jsx
@@ -2,17 +2,17 @@ import React, { useEffect, useState } from 'react'
 import { useKeyring } from '@w3ui/react-keyring'
 
 export default function Component () {
-  const [{ space }, { loadAgent, unloadAgent, createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
+  const [{ account }, { loadAgent, unloadAgent, authorize, cancelAuthorize }] = useKeyring()
   const [email, setEmail] = useState('')
   const [submitted, setSubmitted] = useState(false)
 
   useEffect(() => { loadAgent() }, []) // load the agent - once.
 
-  if (space?.registered()) {
+  if (account) {
     return (
       <div>
         <h1>Welcome!</h1>
-        <p>You are logged in!!</p>
+        <p>You are logged in as {account}!</p>
         <form onSubmit={e => { e.preventDefault(); unloadAgent() }}>
           <button type='submit'>Sign Out</button>
         </form>
@@ -25,33 +25,32 @@ export default function Component () {
       <div>
         <h1>Verify your email address!</h1>
         <p>Click the link in the email we sent to {email} to sign in.</p>
-        <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
+        <form onSubmit={e => { e.preventDefault(); cancelAuthorize() }}>
           <button type='submit'>Cancel</button>
         </form>
       </div>
     )
   }
 
-  const handleRegisterSubmit = async e => {
+  const handleAuthorizeSubmit = async e => {
     e.preventDefault()
     setSubmitted(true)
     try {
-      await createSpace()
-      await registerSpace(email)
+      await authorize(email)
     } catch (err) {
-      throw new Error('failed to register', { cause: err })
+      throw new Error('failed to authorize', { cause: err })
     } finally {
       setSubmitted(false)
     }
   }
 
   return (
-    <form onSubmit={handleRegisterSubmit}>
+    <form onSubmit={handleAuthorizeSubmit}>
       <div>
         <label htmlFor='email'>Email address:</label>
         <input id='email' type='email' value={email} onChange={e => setEmail(e.target.value)} required />
       </div>
-      <button type='submit' disabled={submitted}>Register</button>
+      <button type='submit' disabled={submitted}>Authorize</button>
     </form>
   )
 }

diff --git a/sample-code/solid/keyring.js b/sample-code/solid/keyring.js
@@ -1,30 +1,29 @@
 import { createSignal, Switch, Match } from 'solid-js'
 import { useKeyring } from '@w3ui/solid-keyring'
 
-export default function Component() {
-  const [keyring, { createSpace, registerSpace, cancelRegisterSpace, loadAgent, unloadAgent }] = useKeyring()
+export default function ContentPage () {
+  const [keyring, { authorize, cancelAuthorize, loadAgent, unloadAgent }] = useKeyring()
   const [email, setEmail] = createSignal('')
   const [submitted, setSubmitted] = createSignal(false)
 
   loadAgent() // try load agent - once.
 
-  const handleRegisterSubmit = async e => {
+  const handleAuthorizeSubmit = async e => {
     e.preventDefault()
     setSubmitted(true)
     try {
-      await createSpace()
-      await registerSpace(email())
+      await authorize(email())
     } catch (err) {
-      throw new Error('failed to register', { cause: err })
+      throw new Error('failed to authorize', { cause: err })
     } finally {
       setSubmitted(false)
     }
   }
   return (
     <Switch>
-      <Match when={keyring.space?.registered()}>
+      <Match when={keyring.account}>
         <div>
-          <h1>Welcome {keyring.agent?.email}!</h1>
+          <h1>Welcome {keyring.account}!</h1>
           <p>You are logged in!!</p>
           <form onSubmit={e => { e.preventDefault(); unloadAgent() }}>
             <button type='submit'>Sign Out</button>
@@ -34,22 +33,21 @@ export default function Component() {
       <Match when={submitted()}>
         <div>
           <h1>Verify your email address!</h1>
-          <p>Click the link in the email we sent to {keyring.agent?.email} to sign in.</p>
-          <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
+          <p>Click the link in the email we sent to {keyring.account} to sign in.</p>
+          <form onSubmit={e => { e.preventDefault(); cancelAuthorize() }}>
             <button type='submit'>Cancel</button>
           </form>
         </div>
       </Match>
-      <Match when={!keyring.space?.registered() && !submitted()}>
-        <form onSubmit={handleRegisterSubmit}>
+      <Match when={!keyring.account && !submitted()}>
+        <form onSubmit={handleAuthorizeSubmit}>
           <div>
             <label htmlFor='email'>Email address:</label>
             <input id='email' type='email' value={email()} onInput={e => setEmail(e.target.value)} required />
           </div>
-          <button type='submit' disabled={submitted()}>Register</button>
+          <button type='submit' disabled={submitted()}>Authorize</button>
         </form>
       </Match>
     </Switch>
   )
 }
-
diff --git a/sample-code/vue/keyring.vue b/sample-code/vue/keyring.vue
@@ -1,15 +1,18 @@
 <script>
+import { inject } from 'vue'
 import { KeyringProviderInjectionKey } from '@w3ui/vue-keyring'
 
 export default {
   inject: {
+    account: { from: KeyringProviderInjectionKey.account },
     agent: { from: KeyringProviderInjectionKey.agent },
-    space: { from: KeyringProviderInjectionKey.space },
-    createSpace: { from: KeyringProviderInjectionKey.createSpace },
-    registerSpace: { from: KeyringProviderInjectionKey.registerSpace },
-    cancelRegisterSpace: { from: KeyringProviderInjectionKey.cancelRegisterSpace },
+    authorize: { from: KeyringProviderInjectionKey.authorize },
+    cancelAuthorize: { from: KeyringProviderInjectionKey.cancelAuthorize },
     unloadAgent: { from: KeyringProviderInjectionKey.unloadAgent }
   },
+  setup: function(){
+    inject(KeyringProviderInjectionKey.loadAgent)()
+  },
   data () {
     return {
       email: '',
@@ -19,21 +22,20 @@ export default {
   computed: {
   },
   methods: {
-    async handleRegisterSubmit (e) {
+    async handleAuthorizeSubmit (e) {
       e.preventDefault()
       this.submitted = true
       try {
-        await this.createSpace()
-        await this.registerSpace(this.email)
+        await this.authorize(this.email)
       } catch (err) {
-        throw new Error('failed to register', { cause: err })
+        throw new Error('failed to authorize', { cause: err })
       } finally {
         this.submitted = false
       }
     },
-    handleCancelRegisterSubmit (e) {
+    handleCancelAuthorizeSubmit (e) {
       e.preventDefault()
-      this.cancelRegisterSpace()
+      this.cancelAuthorize()
     },
     handleSignOutSubmit (e) {
       e.preventDefault()
@@ -44,8 +46,8 @@ export default {
 </script>
 
 <template>
-  <div v-if="space?.registered()">
-    <h1>Welcome {{agent.email}}!</h1>
+  <div v-if="account">
+    <h1>Welcome {{account}}!</h1>
     <p>You are logged in!!</p>
     <form @submit="handleSignOutSubmit">
       <button type="submit">Sign Out</button>
@@ -54,17 +56,17 @@ export default {
 
   <div v-if="submitted">
     <h1>Verify your email address!</h1>
-    <p>Click the link in the email we sent to {{agent.email}} to sign in.</p>
-    <form @submit="handleCancelRegisterSubmit">
+    <p>Click the link in the email we sent to {{account}} to sign in.</p>
+    <form @submit="handleCancelAuthorizeSubmit">
       <button type="submit">Cancel</button>
     </form>
   </div>
 
-  <form v-if="!space?.registered() && !submitted" @submit="handleRegisterSubmit">
+  <form v-if="!account && !submitted" @submit="handleAuthorizeSubmit">
     <div>
       <label htmlFor="email">Email address:</label>
       <input id="email" type="email" v-model="email" required />
     </div>
-    <button type="submit" :disabled="submitted">Register</button>
+    <button type="submit" :disabled="submitted">Authorize</button>
   </form>
 </template>
diff --git a/utils.js b/utils.js
@@ -34,17 +34,7 @@ export const examples = [
     {
         title: 'Vue',
         link: 'https://github.com/web3-storage/w3ui/tree/main/examples/vue',
-    },
-    {
-        title: 'React Native',
-        link: '',
-        disabled: true
-    },
-    {
-        title: 'Svelte',
-        link: '',
-        disabled: true
-    },
+    }
 ]
 
 export const APIRefs = [