feat!: integrate new ucanto and upload-client

[alanshaw]

This PR makes breaking changes to core and framework components to integrate the access agent (+ucanto 0.9) and the new upload client.

resolves #127

BREAKING CHANGE: core and framework components have changed considerably.

TODO: be more explicit about changes

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 08bc15a:

Sandbox	Source
@w3ui/example-react-file-upload	Configuration
@w3ui/example-react-sign-up-in	Configuration
@w3ui/example-react-uploads-list	Configuration
@w3ui/example-solid-file-upload	Configuration
@w3ui/example-solid-sign-up-in	Configuration
@w3ui/example-solid-uploads-list	Configuration
@w3ui/example-vue-file-upload	Configuration
@w3ui/example-vue-sign-up-in	Configuration
@w3ui/example-vue-uploads-list	Configuration

[yusefnapora]

I've been working on fixing up the vanilla file upload example and keep getting a 500 error when actually doing the upload. I figured I'd sanity check by running the react upload example, but I get a 500 there also:

This is with a staging-service.js added to the example source:

staging-service.js

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'
  })
})

Which is hooked into the providers:

App.js snippet

import {
  accessServicePrincipal,
  accessServiceConnection,
  uploadServicePrincipal,
  uploadServiceConnection,
} from './staging-service.js'

function App () {
  return (
    <KeyringProvider servicePrincipal={accessServicePrincipal} connection={accessServiceConnection}>
      <UploaderProvider servicePrincipal={uploadServicePrincipal} connection={uploadServiceConnection}>
   /// ... etc

Also, I bumped the @web3-storage/access dep to 7.0.2, and have npm linked a bunch of things so the example projects will find the local copy of the w3ui components. Here's the npm list output inside the react file-upload example dir:

npm list for examples/react/file-upload

w3ui@0.0.0 /home/yusef/work/repos/w3ui
└─┬ @w3ui/example-react-file-upload@0.0.0 -> ./examples/react/file-upload
  ├─┬ @w3ui/react-keyring@1.0.1 -> ./packages/react-keyring
  │ ├── @ucanto/interface@3.0.1
  │ ├── @ucanto/principal@3.0.1
  │ ├─┬ @w3ui/keyring-core@1.0.2 -> ./packages/keyring-core
  │ │ └── @web3-storage/access@7.0.2
  │ ├── @web3-storage/access@7.0.2
  │ └── react@18.2.0 deduped
  ├─┬ @w3ui/react-uploader@2.1.2 -> ./packages/react-uploader
  │ ├── @w3ui/react-keyring@1.0.1 deduped -> ./packages/react-keyring
  │ ├─┬ @w3ui/uploader-core@2.0.2 -> ./packages/uploader-core
  │ │ ├── @web3-storage/upload-client@2.1.0
  │ │ └── multiformats@10.0.2 deduped
  │ ├── multiformats@10.0.2
  │ └── react@18.2.0 deduped
  ├── react-dom@18.2.0
  ├── react-scripts@5.0.1
  └── react@18.2.0

@alanshaw should this be working, or is there some other config I need?

[flea89]

I'm having the same issue reported by @yusefnapora on a react app I created from scratch using this version of w3ui when trying to upload a file. (Auth, space, agent generations seemed to have worked just fine)

I've used npm link to point to a local, compiled and built version of w3ui using this branch.
I also bumped @web3-storage/access dep to 7.0.2

My staging service

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'
})
})

I also tried your space-manager example in this branch, and listing uploads also return a 500 Internal Server Error

[alanshaw]

I'm merging this into a branch called next and we'll land additional changes/fixes there and merge to main when the new service is deployed.

[alanshaw]

@flea89 @yusefnapora @travis it's an issue with calling the access-api (the space/info invocation). Tracking here: storacha/w3up#243