fix: update solid examples (#131)

This should do the trick to update the various examples, but I haven't tested end to end because I kept getting 500s from the uploads service. Co-authored-by: Alan Shaw <alan.shaw@protocol.ai>
storacha · Dec 2, 2022 · 9ccbe67 · 9ccbe67
1 parent 0110ae8
commit 9ccbe67
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 77 deletions.
diff --git a/examples/solid/file-upload/src/App.jsx b/examples/solid/file-upload/src/App.jsx
@@ -1,11 +1,11 @@
 import logo from './logo.png'
-import { AuthProvider, useAuth } from '@w3ui/solid-keyring'
+import { KeyringProvider, useKeyring } from '@w3ui/solid-keyring'
 import { UploaderProvider } from '@w3ui/solid-uploader'
 import ContentPage from './ContentPage'
 
 function App () {
   return (
-    <AuthProvider>
+    <KeyringProvider>
       <UploaderProvider>
         <IdentityLoader>
           <div className='vh-100 flex flex-column justify-center items-center sans-serif light-silver'>
@@ -18,13 +18,13 @@ function App () {
           </div>
         </IdentityLoader>
       </UploaderProvider>
-    </AuthProvider>
+    </KeyringProvider>
   )
 }
 
 function IdentityLoader ({ children }) {
-  const [, { loadDefaultIdentity }] = useAuth()
-  loadDefaultIdentity() // try load default identity - once.
+  const [, { loadAgent }] = useKeyring()
+  loadAgent() // try load default identity - once.
   return children
 }
 

diff --git a/examples/solid/file-upload/src/ContentPage.jsx b/examples/solid/file-upload/src/ContentPage.jsx
@@ -36,10 +36,10 @@ export function ContentPage () {
         </form>
       </Match>
       <Match when={status() === 'uploading'}>
-        <Uploading file={file()} uploadedCarChunks={progress.uploadedCarChunks} />
+        <Uploading file={file()} storedDAGShards={progress.storedDAGShards} />
       </Match>
       <Match when={status() === 'done'}>
-        {error() ? <Errored error={error()} /> : <Done file={file()} dataCid={dataCid()} uploadedCarChunks={progress.uploadedCarChunks} />}
+        {error() ? <Errored error={error()} /> : <Done file={file()} dataCid={dataCid()} storedDAGShards={progress.storedDAGShards} />}
       </Match>
     </Switch>
   )
@@ -50,7 +50,7 @@ const Uploading = props => (
     <div className='spinner mr3 flex-none' />
     <div className='flex-auto'>
       <p className='truncate'>Uploading DAG for {props.file.name}</p>
-      {props.uploadedCarChunks.map(({ cid, size }) => (
+      {props.storedDAGShards.map(({ cid, size }) => (
         <p key={cid.toString()} className='f7 truncate'>
           {cid.toString()} ({size} bytes)
         </p>
@@ -71,8 +71,8 @@ const Done = props => (
     <h1 className='near-white'>Done!</h1>
     <p className='f6 code truncate'>{props.dataCid.toString()}</p>
     <p><a href={`https://w3s.link/ipfs/${props.dataCid}`} className='blue'>View {props.file.name} on IPFS Gateway.</a></p>
-    <p className='near-white'>Chunks ({props.uploadedCarChunks.length}):</p>
-    {props.uploadedCarChunks.map(({ cid, size }) => (
+    <p className='near-white'>Chunks ({props.storedDAGShards.length}):</p>
+    {props.storedDAGShards.map(({ cid, size }) => (
       <p key={cid.toString()} className='f7 truncate'>
         {cid.toString()} ({size} bytes)
       </p>

diff --git a/examples/solid/file-upload/src/components/Authenticator.jsx b/examples/solid/file-upload/src/components/Authenticator.jsx
@@ -1,16 +1,17 @@
 import { createSignal, Switch, Match } from 'solid-js'
-import { useAuth, AuthStatus } from '@w3ui/solid-keyring'
+import { useKeyring } from '@w3ui/solid-keyring'
 
 function Authenticator ({ children }) {
-  const [auth, { registerAndStoreIdentity, cancelRegisterAndStoreIdentity }] = useAuth()
+  const [keyring, { createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
   const [email, setEmail] = createSignal('')
   const [submitted, setSubmitted] = createSignal(false)
 
   const handleRegisterSubmit = async e => {
     e.preventDefault()
     setSubmitted(true)
     try {
-      await registerAndStoreIdentity(email())
+      await createSpace()
+      await registerSpace(email())
     } catch (err) {
       throw new Error('failed to register', { cause: err })
     } finally {
@@ -20,19 +21,19 @@ function Authenticator ({ children }) {
 
   return (
     <Switch>
-      <Match when={auth.status === AuthStatus.SignedIn}>
+      <Match when={keyring.space?.registered()}>
         {children}
       </Match>
-      <Match when={auth.status === AuthStatus.EmailVerification}>
+      <Match when={submitted()}>
         <div>
           <h1 className='near-white'>Verify your email address!</h1>
-          <p>Click the link in the email we sent to {auth.identity.email} to sign in.</p>
-          <form onSubmit={e => { e.preventDefault(); cancelRegisterAndStoreIdentity() }}>
+          <p>Click the link in the email we sent to {keyring.agent?.email} to sign in.</p>
+          <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
             <button type='submit' className='ph3 pv2'>Cancel</button>
           </form>
         </div>
       </Match>
-      <Match when={auth.status === AuthStatus.SignedOut}>
+      <Match when={!keyring.space?.registered() && !submitted()}>
         <form onSubmit={handleRegisterSubmit}>
           <div className='mb3'>
             <label htmlFor='email' className='db mb2'>Email address:</label>

diff --git a/examples/solid/multi-file-upload/src/App.jsx b/examples/solid/multi-file-upload/src/App.jsx
@@ -1,11 +1,11 @@
 import logo from './logo.png'
-import { AuthProvider, useAuth } from '@w3ui/solid-keyring'
+import { KeyringProvider } from '@w3ui/solid-keyring'
 import { UploaderProvider } from '@w3ui/solid-uploader'
 import ContentPage from './ContentPage'
 
 function App () {
   return (
-    <AuthProvider>
+    <KeyringProvider>
       <UploaderProvider>
         <IdentityLoader>
           <div className='vh-100 flex flex-column justify-center items-center sans-serif light-silver'>
@@ -18,13 +18,13 @@ function App () {
           </div>
         </IdentityLoader>
       </UploaderProvider>
-    </AuthProvider>
+    </KeyringProvider>
   )
 }
 
 function IdentityLoader ({ children }) {
-  const [, { loadDefaultIdentity }] = useAuth()
-  loadDefaultIdentity() // try load default identity - once.
+  const [, { loadAgent }] = useKeyring()
+  loadAgent() // try load default identity - once.
   return children
 }
 

diff --git a/examples/solid/multi-file-upload/src/ContentPage.jsx b/examples/solid/multi-file-upload/src/ContentPage.jsx
@@ -58,10 +58,10 @@ export function ContentPage () {
         </form>
       </Match>
       <Match when={status() === 'uploading'}>
-        <Uploading files={files()} uploadedCarChunks={progress.uploadedCarChunks} />
+        <Uploading files={files()} storedDAGShards={progress.storedDAGShards} />
       </Match>
       <Match when={status() === 'done'}>
-        {error() ? <Errored error={error()} /> : <Done files={files()} dataCid={dataCid()} uploadedCarChunks={progress.uploadedCarChunks} />}
+        {error() ? <Errored error={error()} /> : <Done files={files()} dataCid={dataCid()} storedDAGShards={progress.storedDAGShards} />}
       </Match>
     </Switch>
   )
@@ -72,7 +72,7 @@ const Uploading = props => (
     <div className='spinner mr3 flex-none' />
     <div className='flex-auto'>
       <p className='truncate'>Uploading DAG for {props.files.length > 1 ? `${props.files.length} files` : props.files[0].name}</p>
-      {props.uploadedCarChunks.map(({ cid, size }) => (
+      {props.storedDAGShards.map(({ cid, size }) => (
         <p key={cid.toString()} className='f7 truncate'>
           {cid.toString()} ({size} bytes)
         </p>
@@ -93,8 +93,8 @@ const Done = props => (
     <h1 className='near-white'>Done!</h1>
     <p className='f6 code truncate'>{props.dataCid.toString()}</p>
     <p><a href={`https://w3s.link/ipfs/${props.dataCid}`} className='blue'>View {props.files.length > 1 ? 'files' : props.files[0].name} on IPFS Gateway.</a></p>
-    <p className='near-white'>Chunks ({props.uploadedCarChunks.length}):</p>
-    {props.uploadedCarChunks.map(({ cid, size }) => (
+    <p className='near-white'>Chunks ({props.storedDAGShards.length}):</p>
+    {props.storedDAGShards.map(({ cid, size }) => (
       <p key={cid.toString()} className='f7 truncate'>
         {cid.toString()} ({size} bytes)
       </p>

diff --git a/examples/solid/multi-file-upload/src/components/Authenticator.jsx b/examples/solid/multi-file-upload/src/components/Authenticator.jsx
@@ -1,16 +1,17 @@
 import { createSignal, Switch, Match } from 'solid-js'
-import { useAuth, AuthStatus } from '@w3ui/solid-keyring'
+import { useKeyring } from '@w3ui/solid-keyring'
 
 function Authenticator ({ children }) {
-  const [auth, { registerAndStoreIdentity, cancelRegisterAndStoreIdentity }] = useAuth()
+  const [keyring, { createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
   const [email, setEmail] = createSignal('')
   const [submitted, setSubmitted] = createSignal(false)
 
   const handleRegisterSubmit = async e => {
     e.preventDefault()
     setSubmitted(true)
     try {
-      await registerAndStoreIdentity(email())
+      await createSpace()
+      await registerSpace(email())
     } catch (err) {
       throw new Error('failed to register', { cause: err })
     } finally {
@@ -20,19 +21,19 @@ function Authenticator ({ children }) {
 
   return (
     <Switch>
-      <Match when={auth.status === AuthStatus.SignedIn}>
+      <Match when={keyring.space?.registered()}>
         {children}
       </Match>
-      <Match when={auth.status === AuthStatus.EmailVerification}>
+      <Match when={submitted()}>
         <div>
           <h1 className='near-white'>Verify your email address!</h1>
-          <p>Click the link in the email we sent to {auth.identity.email} to sign in.</p>
-          <form onSubmit={e => { e.preventDefault(); cancelRegisterAndStoreIdentity() }}>
+          <p>Click the link in the email we sent to {keyring.agent?.email} to sign in.</p>
+          <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
             <button type='submit' className='ph3 pv2'>Cancel</button>
           </form>
         </div>
       </Match>
-      <Match when={auth.status === AuthStatus.SignedOut}>
+      <Match when={!keyring.space?.registered() && !submitted()}>
         <form onSubmit={handleRegisterSubmit}>
           <div className='mb3'>
             <label htmlFor='email' className='db mb2'>Email address:</label>

diff --git a/examples/solid/sign-up-in/src/ContentPage.jsx b/examples/solid/sign-up-in/src/ContentPage.jsx
@@ -1,46 +1,46 @@
 import { createSignal, Switch, Match } from 'solid-js'
-import { useAuth, AuthStatus } from '@w3ui/solid-keyring'
+import { useKeyring } from '@w3ui/solid-keyring'
 
-export default function ContentPage () {
-  const [auth, { loadDefaultIdentity, registerAndStoreIdentity, unloadIdentity, cancelRegisterAndStoreIdentity }] = useAuth()
+export default function ContentPage() {
+  const [keyring, { createSpace, registerSpace, cancelRegisterSpace, loadAgent, unloadAgent }] = useKeyring()
   const [email, setEmail] = createSignal('')
   const [submitted, setSubmitted] = createSignal(false)
 
-  loadDefaultIdentity() // try load default identity - once.
+  loadAgent() // try load agent - once.
 
   const handleRegisterSubmit = async e => {
     e.preventDefault()
     setSubmitted(true)
     try {
-      await registerAndStoreIdentity(email())
+      await createSpace()
+      await registerSpace(email())
     } catch (err) {
       throw new Error('failed to register', { cause: err })
     } finally {
       setSubmitted(false)
     }
   }
-
   return (
     <Switch>
-      <Match when={auth.status === AuthStatus.SignedIn}>
+      <Match when={keyring.space?.registered()}>
         <div>
-          <h1 className='near-white'>Welcome {auth.identity.email}!</h1>
+          <h1 className='near-white'>Welcome {keyring.agent?.email}!</h1>
           <p>You are logged in!!</p>
-          <form onSubmit={e => { e.preventDefault(); unloadIdentity() }}>
+          <form onSubmit={e => { e.preventDefault(); unloadAgent() }}>
             <button type='submit' className='ph3 pv2'>Sign Out</button>
           </form>
         </div>
       </Match>
-      <Match when={auth.status === AuthStatus.EmailVerification}>
+      <Match when={submitted()}>
         <div>
           <h1 className='near-white'>Verify your email address!</h1>
-          <p>Click the link in the email we sent to {auth.identity.email} to sign in.</p>
-          <form onSubmit={e => { e.preventDefault(); cancelRegisterAndStoreIdentity() }}>
+          <p>Click the link in the email we sent to {keyring.agent?.email} to sign in.</p>
+          <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
             <button type='submit' className='ph3 pv2'>Cancel</button>
           </form>
         </div>
       </Match>
-      <Match when={auth.status === AuthStatus.SignedOut}>
+      <Match when={!keyring.space?.registered() && !submitted()}>
         <form onSubmit={handleRegisterSubmit}>
           <div className='mb3'>
             <label htmlFor='email' className='db mb2'>Email address:</label>

diff --git a/examples/solid/uploads-list/src/App.jsx b/examples/solid/uploads-list/src/App.jsx
@@ -1,10 +1,10 @@
 import logo from './logo.png'
-import { AuthProvider, useAuth } from '@w3ui/solid-keyring'
+import { KeyringProvider } from '@w3ui/solid-keyring'
 import ContentPage from './ContentPage'
 
 function App () {
   return (
-    <AuthProvider>
+    <KeyringProvider>
       <IdentityLoader>
         <div className='vh-100 flex flex-column justify-center items-center sans-serif light-silver'>
           <header>
@@ -13,13 +13,13 @@ function App () {
           <ContentPage />
         </div>
       </IdentityLoader>
-    </AuthProvider>
+    </KeyringProvider>
   )
 }
 
 function IdentityLoader ({ children }) {
-  const [, { loadDefaultIdentity }] = useAuth()
-  loadDefaultIdentity() // try load default identity - once.
+  const [, { loadAgent }] = useKeyring()
+  loadAgent() // try load default identity - once.
   return children
 }
 

diff --git a/examples/solid/uploads-list/src/ContentPage.jsx b/examples/solid/uploads-list/src/ContentPage.jsx
@@ -1,12 +1,12 @@
 import { Switch, Match } from 'solid-js'
-import { useAuth } from '@w3ui/solid-keyring'
+import { useKeyring } from '@w3ui/solid-keyring'
 import { createUploadsListResource } from '@w3ui/solid-uploads-list'
 import { withIdentity } from './components/Authenticator'
 import './spinner.css'
 
 export function ContentPage () {
-  const [auth] = useAuth()
-  const [data, { refetch }] = createUploadsListResource(() => auth.identity, { initialValue: { results: [] } })
+  const [keyringState, keyringActions] = useKeyring()
+  const [data, { refetch }] = createUploadsListResource(() => ({...keyringState, ...keyringActions}), { initialValue: { results: [] } })
 
   return (
     <div className='w-90 mw9'>

diff --git a/examples/solid/uploads-list/src/components/Authenticator.jsx b/examples/solid/uploads-list/src/components/Authenticator.jsx
@@ -1,16 +1,17 @@
 import { createSignal, Switch, Match } from 'solid-js'
-import { useAuth, AuthStatus } from '@w3ui/solid-keyring'
+import { useKeyring } from '@w3ui/solid-keyring'
 
 function Authenticator ({ children }) {
-  const [auth, { registerAndStoreIdentity, cancelRegisterAndStoreIdentity }] = useAuth()
+  const [keyring, { createSpace, registerSpace, cancelRegisterSpace }] = useKeyring()
   const [email, setEmail] = createSignal('')
   const [submitted, setSubmitted] = createSignal(false)
 
   const handleRegisterSubmit = async e => {
     e.preventDefault()
     setSubmitted(true)
     try {
-      await registerAndStoreIdentity(email())
+      await createSpace()
+      await registerSpace(email())
     } catch (err) {
       throw new Error('failed to register', { cause: err })
     } finally {
@@ -20,20 +21,20 @@ function Authenticator ({ children }) {
 
   return (
     <Switch>
-      <Match when={auth.status === AuthStatus.SignedIn}>
+      <Match when={keyring.space?.registered()}>
         {children}
       </Match>
-      <Match when={auth.status === AuthStatus.EmailVerification}>
+      <Match when={submitted()}>
         <div className='w-90 w-50-ns mw6'>
           <h1>Verify your email address!</h1>
-          <p>Click the link in the email we sent to {auth.identity.email} to sign in.</p>
-          <form onSubmit={e => { e.preventDefault(); cancelRegisterAndStoreIdentity() }}>
+          <p>Click the link in the email we sent to {keyring.agent?.email} to sign in.</p>
+          <form onSubmit={e => { e.preventDefault(); cancelRegisterSpace() }}>
             <button type='submit' className='ph3 pv2'>Cancel</button>
           </form>
         </div>
       </Match>
-      <Match when={auth.status === AuthStatus.SignedOut}>
-        <form className='w-90 w-50-ns mw6' onSubmit={handleRegisterSubmit}>
+      <Match when={!keyring.space?.registered() && !submitted()}>
+        <form onSubmit={handleRegisterSubmit}>
           <div className='mb3'>
             <label htmlFor='email' className='db mb2'>Email address:</label>
             <input id='email' className='db pa2 w-100' type='email' value={email()} onInput={e => setEmail(e.target.value)} required />