feat!: use new account model (storacha#400)

initial work on integrating new account model

* add new `authorize` function to the keyring context

---------

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

packages/w3ui/.github/workflows/w3console.yaml

@@ -23,6 +23,11 @@ jobs:
       - name: Build w3console
         run: pnpm build
         working-directory: examples/react/w3console
+        env:
+          VITE_W3UP_ACCESS_SERVICE_URL: 'https://w3access-staging.protocol-labs.workers.dev'
+          VITE_W3UP_ACCESS_SERVICE_DID: 'did:web:staging.web3.storage'
+          VITE_W3UP_UPLOAD_SERVICE_URL: 'https://staging.up.web3.storage'
+          VITE_W3UP_UPLOAD_SERVICE_DID: 'did:web:staging.web3.storage'
 
       - name: Publish static site
         uses: ./.github/actions/preview

packages/w3ui/examples/react/playground/package.json

@@ -32,7 +32,7 @@
     "@storybook/testing-library": "^0.0.13",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@ucanto/interface": "^4.2.3",
+    "@ucanto/interface": "^6.2.0",
     "@vitejs/plugin-react": "^3.0.0",
     "@w3ui/uploads-list-core": "workspace:^",
     "multiformats": "^11.0.1",

packages/w3ui/examples/react/w3console/package.json

@@ -25,8 +25,8 @@
   "devDependencies": {
     "@preact/preset-vite": "^2.4.0",
     "@types/blueimp-md5": "^2.18.0",
-    "@ucanto/core": "^4.1.0",
-    "@ucanto/interface": "^4.1.0",
+    "@ucanto/core": "^5.2.0",
+    "@ucanto/interface": "^6.2.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.4",

packages/w3ui/examples/react/w3console/src/app.tsx

@@ -13,7 +13,7 @@ import { Uploader } from './components/Uploader'
 import { UploadsList } from './components/UploadsList'
 import { W3APIProvider } from './components/W3API'
 import { SpaceFinder } from './components/SpaceFinder'
-import { SpaceCreator } from './components/SpaceCreator'
+import { SpaceCreatorForm, SpaceCreator } from './components/SpaceCreator'
 
 function SpaceRegistrar (): JSX.Element {
   const [, { registerSpace }] = useKeyring()
@@ -140,7 +140,12 @@ function SpaceSection (props: SpaceSectionProps): JSX.Element {
             </div>
           </>
         )}
-        {!registered && !share && <SpaceRegistrar />}
+        {(space && !registered) && !share && <SpaceRegistrar />}
+        {!space && (
+          <div className="text-center">
+            <h1 className="text-xl">Select a space from the dropdown on the left to get started.</h1>
+          </div>
+        )}
       </div>
     </div>
   )
@@ -187,7 +192,33 @@ export function Logo (): JSX.Element {
   )
 }
 
-export function Layout (): JsxElement {
+export function SpaceEnsurer ({
+  children
+}: {
+  children: JSX.Element | JSX.Element[]
+}): JSX.Element {
+  const [{ spaces, account }] = useKeyring()
+  if (spaces && spaces.length > 0) {
+    return <>{children}</>
+  }
+  return (
+    <div className="flex flex-col justify-center items-center h-screen">
+      <div className="text-gray-200 text-center">
+        <h1 className="my-4 text-lg">Welcome {account}!</h1>
+        <p>
+          To get started with w3up you'll need to create a space.
+        </p>
+        <p>
+          Give it a name and hit create!
+        </p>
+        <SpaceCreatorForm className='mt-4' />
+      </div>
+    </div>
+  )
+}
+
+
+export function Layout (): JSX.Element {
   const [share, setShare] = useState(false)
   const [{ space, spaces }, { setCurrentSpace }] = useKeyring()
 
@@ -224,7 +255,9 @@ export function App (): JSX.Element {
   return (
     <W3APIProvider uploadsListPageSize={20}>
       <Authenticator className='h-full'>
-        <Layout />
+        <SpaceEnsurer>
+          <Layout />
+        </SpaceEnsurer>
       </Authenticator>
     </W3APIProvider>
   )

packages/w3ui/examples/react/w3console/src/components/Authenticator.tsx

@@ -49,9 +49,9 @@ export function AuthenticationEnsurer ({
 }: {
   children: JSX.Element | JSX.Element[]
 }): JSX.Element {
-  const [{ spaces, submitted }] = useAuthenticator()
-  const registered = Boolean(spaces.some((s) => s.registered()))
-  if (registered) {
+  const [{ submitted, account }] = useAuthenticator()
+  const authenticated = !!account
+  if (authenticated) {
     return <>{children}</>
   }
   if (submitted) {

packages/w3ui/examples/react/w3console/src/components/SpaceCreator.tsx

@@ -13,91 +13,100 @@ export function SpaceCreatorCreating (): JSX.Element {
   )
 }
 
-interface SpaceCreatorProps {
+interface SpaceCreatorFormProps {
   className?: string
 }
 
-export function SpaceCreator ({
+export function SpaceCreatorForm ({
   className = ''
-}: SpaceCreatorProps): JSX.Element {
-  const [, { createSpace, registerSpace }] = useKeyring()
-  const [creating, setCreating] = useState(false)
+}: SpaceCreatorFormProps): JSX.Element {
+  const [{ account }, { createSpace, registerSpace }] = useKeyring()
   const [submitted, setSubmitted] = useState(false)
-  const [email, setEmail] = useState('')
   const [name, setName] = useState('')
 
   function resetForm (): void {
-    setEmail('')
     setName('')
   }
 
   async function onSubmit (e: React.FormEvent<HTMLFormElement>): Promise<void> {
     e.preventDefault()
-    setSubmitted(true)
-    try {
-      await createSpace(name)
-      // ignore this because the Space UI should handle helping the user recover
-      // from space registration failure
-      void registerSpace(email)
-    } catch (error) {
-      /* eslint-disable no-console */
-      console.error(error)
-      /* eslint-enable no-console */
-      throw new Error('failed to register', { cause: error })
-    } finally {
-      resetForm()
-      setSubmitted(false)
+    if (account) {
+      setSubmitted(true)
+      try {
+        await createSpace(name)
+        // ignore this because the Space UI should handle helping the user recover
+        // from space registration failure
+        await registerSpace(account)
+      } catch (error) {
+        /* eslint-disable no-console */
+        console.error(error)
+        /* eslint-enable no-console */
+        throw new Error('failed to register', { cause: error })
+      } finally {
+        resetForm()
+        setSubmitted(false)
+      }
+    } else {
+      throw new Error('cannot create space, no account found, have you authorized your email?')
     }
   }
-  /* eslint-disable no-nested-ternary */
+  return (
+    <div className={className}>
+      {
+        submitted
+          ? (
+            <SpaceCreatorCreating />
+          )
+          : (
+            <form
+              className='flex flex-col space-y-2'
+              onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                void onSubmit(e)
+              }}
+            >
+              <input
+                className='text-black py-1 px-2 rounded'
+                placeholder='Name'
+                value={name}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                  setName(e.target.value)
+                }}
+              />
+              <input
+                type='submit'
+                className='w3ui-button'
+                value='Create'
+              />
+            </form>
+          )
+      }
+    </div>
+  )
+}
+
+interface SpaceCreatorProps {
+  className?: string
+}
+
+export function SpaceCreator ({
+  className = ''
+}: SpaceCreatorProps): JSX.Element {
+  const [creating, setCreating] = useState(false)
+
   return (
     <div className={`${className}`}>
       {creating
         ? (
-            submitted
-              ? (
-              <SpaceCreatorCreating />
-                )
-              : (
-              <form
-                className='flex flex-col space-y-2'
-                onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-                  void onSubmit(e)
-                }}
-              >
-                <input
-                  className='text-black py-1 px-2 rounded'
-                  type='email'
-                  placeholder='Email'
-                  value={email}
-                  onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                    setEmail(e.target.value)
-                  }}
-                />
-                <input
-                  className='text-black py-1 px-2 rounded'
-                  placeholder='Name'
-                  value={name}
-                  onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                    setName(e.target.value)
-                  }}
-                />
-                <input
-                  type='submit'
-                  className='w3ui-button'
-                  value='Create'
-                />
-              </form>
-                )
-          )
+          <SpaceCreatorForm />
+        )
         : (
           <button
             className='w3ui-button py-2'
             onClick={() => { setCreating(true) }}
           >
             Add Space
           </button>
-          )}
+        )}
     </div>
   )
   /* eslint-enable no-nested-ternary */

packages/w3ui/examples/react/w3console/src/components/SpaceFinder.tsx

@@ -33,7 +33,7 @@ export function SpaceFinder ({
       <Combobox
         value={selected}
         onChange={setSelected}
-        by={(a, b) => a.sameAs(b)}
+        by={(a, b) => a?.sameAs(b)}
       >
         <div className='relative mt-1'>
           <div className='relative w-full overflow-hidden rounded-lg bg-white text-left shadow-md'>
@@ -57,7 +57,7 @@ export function SpaceFinder ({
             afterLeave={() => { setQuery('') }}
           >
             <Combobox.Options
-              className='absolute mt-1 max-h-44 w-full bg-white rounded-md pt-1 shadow-lg'
+              className='absolute mt-1 max-h-96 w-full bg-white rounded-md pt-1 shadow-lg overflow-scroll'
               static
             >
               {filtered.length === 0 && query !== ''

packages/w3ui/examples/react/w3console/src/components/W3API.tsx

@@ -15,6 +15,7 @@ import {
   KeyringContextValue,
   KeyringProvider
 } from '@w3ui/react-keyring'
+import { accessServiceConnection, accessServicePrincipal, uploadServiceConnection, uploadServicePrincipal } from './services'
 
 export interface W3APIContextValue {
   keyring: KeyringContextValue
@@ -35,9 +36,9 @@ export function W3APIProvider ({
   uploadsListPageSize
 }: W3APIProviderProps): JSX.Element {
   return (
-    <KeyringProvider>
-      <UploaderProvider>
-        <UploadsListProvider size={uploadsListPageSize}>
+    <KeyringProvider servicePrincipal={accessServicePrincipal} connection={accessServiceConnection}>
+      <UploaderProvider servicePrincipal={uploadServicePrincipal} connection={uploadServiceConnection}>
+        <UploadsListProvider servicePrincipal={uploadServicePrincipal} connection={uploadServiceConnection} size={uploadsListPageSize}>
           <>{children}</>
         </UploadsListProvider>
       </UploaderProvider>

packages/w3ui/examples/react/w3console/src/components/services.ts

@@ -0,0 +1,43 @@
+import type { Service } from '@web3-storage/access/types'
+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'
+  import.meta.env.VITE_W3UP_ACCESS_SERVICE_URL
+)
+export const accessServicePrincipal = DID.parse(
+  //'did:web:staging.web3.storage'
+  import.meta.env.VITE_W3UP_ACCESS_SERVICE_DID
+)
+
+export const accessServiceConnection = connect<Service>({
+  id: accessServicePrincipal,
+  encoder: CAR,
+  decoder: CBOR,
+  channel: HTTP.open<Record<string, any>>({
+    url: accessServiceURL,
+    method: 'POST',
+  }),
+})
+
+export const uploadServiceURL = new URL(
+  //'https://staging.up.web3.storage'
+  import.meta.env.VITE_W3UP_UPLOAD_SERVICE_URL
+)
+export const uploadServicePrincipal = DID.parse(
+  //'did:web:staging.web3.storage'
+  import.meta.env.VITE_W3UP_UPLOAD_SERVICE_DID
+)
+
+export const uploadServiceConnection = connect<Service>({
+  id: uploadServicePrincipal,
+  encoder: CAR,
+  decoder: CBOR,
+  channel: HTTP.open<Record<string, any>>({
+    url: uploadServiceURL,
+    method: 'POST',
+  }),
+})

packages/w3ui/package.json

@@ -40,11 +40,11 @@
     "@types/jest": "^29.4.0",
     "@types/jsdom": "^20.0.1",
     "@types/react": "^18.0.26",
-    "@ucanto/client": "^4.2.3",
-    "@ucanto/server": "^4.2.3",
-    "@ucanto/transport": "^4.2.3",
+    "@ucanto/client": "^5.1.0",
+    "@ucanto/server": "^6.1.0",
+    "@ucanto/transport": "^5.1.1",
     "@web-std/file": "^3.0.2",
-    "@web3-storage/capabilities": "^2.2.0",
+    "@web3-storage/capabilities": "^4.0.0",
     "esm": "^3.2.25",
     "fake-indexeddb": "^4.0.1",
     "hd-scripts": "^4.1.0",

packages/w3ui/packages/keyring-core/package.json

@@ -31,9 +31,9 @@
   },
   "homepage": "https://github.com/web3-storage/w3ui/tree/main/packages/keyring-core",
   "dependencies": {
-    "@ucanto/interface": "^4.2.3",
-    "@ucanto/principal": "^4.2.3",
-    "@web3-storage/access": "^9.4.0"
+    "@ucanto/interface": "^6.2.0",
+    "@ucanto/principal": "^5.1.0",
+    "@web3-storage/access": "11.0.0-rc.0"
   },
   "eslintConfig": {
     "extends": [