feat: make Storacha service information configurable (#13)

This lets us use staging Storacha for the staging environment, and
allows us to send folks through the Storacha auth rather than
web3.storage auth.

---------

Co-authored-by: Crostons <shubh1608003@gmail.com>

package.json

@@ -18,7 +18,10 @@
     "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.2.0",
     "@tailwindcss/postcss": "^4.0.9",
+    "@ipld/dag-ucan": "^3.4.5",
     "@tanstack/react-query": "^5.66.0",
+    "@ucanto/client": "^9.0.1",
+    "@ucanto/transport": "^9.1.1",
     "@w3ui/react": "^2.5.5",
     "@web3-storage/w3up-client": "^17.1.2",
     "dexie": "^4.0.11",

src/components/StorachaAuthenticator.tsx

@@ -28,5 +28,5 @@ export default function StorachaAuthenticator () {
         <Identity />
       </AuthenticationEnsurer>
     </Authenticator>
-  )
+   )
 }

src/components/W3UIProvider.tsx

@@ -1,9 +1,14 @@
+import type { ReactNode } from 'react'
 import { Provider } from '@w3ui/react'
+import { serviceConnection, servicePrincipal } from './services'
 
-export default function W3UIProvider({ children }: { children: React.ReactNode }) {
+export default function W3UIProvider ({ children }: { children: ReactNode }) {
   return (
-    <Provider>
-      {children}
+    <Provider
+      connection={serviceConnection}
+      servicePrincipal={servicePrincipal}
+    >
+      <>{children}</>
     </Provider>
   )
 }

src/components/services.ts

@@ -0,0 +1,21 @@
+import type { Service } from '@w3ui/react'
+import { connect } from '@ucanto/client'
+import { CAR, HTTP } from '@ucanto/transport'
+import * as DID from '@ipld/dag-ucan/did'
+
+export const serviceURL = new URL(
+  process.env.NEXT_PUBLIC_STORACHA_SERVICE_URL ?? 'https://up.storacha.network'
+)
+
+export const servicePrincipal = DID.parse(
+  process.env.NEXT_PUBLIC_STORACHA_SERVICE_DID ?? 'did:web:web3.storage'
+)
+
+export const serviceConnection = connect<Service>({
+  id: servicePrincipal,
+  codec: CAR.outbound,
+  channel: HTTP.open({
+    url: serviceURL,
+    method: 'POST',
+  }),
+})