fix: move Web3.Storage keys to server-side only

packages/web/config.ts

@@ -25,10 +25,7 @@ export const CONFIG = {
   ceramicNetwork:
     process.env.NEXT_PUBLIC_CERAMIC_NETWORK || 'mainnet' || 'testnet-clay',
   googleDataAPIKey: process.env.NEXT_PUBLIC_YOUTUBE_API_KEY,
-  web3StorageToken: process.env.NEXT_PUBLIC_WEB3_STORAGE_TOKEN,
-  web3StorageKey: process.env.NEXT_PUBLIC_WEB3_STORAGE_KEY,
   web3StorageDID: process.env.NEXT_PUBLIC_WEB3_STORAGE_DID,
-  web3StorageProof: process.env.WEB3_STORAGE_PROOF,
   openseaAPIKey: process.env.OPENSEA_API_KEY,
   alchemyAPIKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
   mainnetRPC: process.env.NEXT_PUBLIC_MAINNET_RPC || 'https://eth.llamarpc.com',

packages/web/lib/hooks/useW3.ts

@@ -1,19 +1,36 @@
-import { Client } from '@web3-storage/w3up-client';
+import { CAR } from '@ucanto/core';
+import { importDAG } from '@ucanto/core/delegation';
+import * as Client from '@web3-storage/w3up-client';
 import { CONFIG } from 'config';
-import { delegate } from 'pages/api/w3up-client';
 import { useEffect, useState } from 'react';
 
 export function useW3upClient() {
-  const [w3upClient, setW3upClient] = useState<Client | null>(null);
+  const [w3upClient, setW3upClient] = useState<Client.Client | null>(null);
   const { web3StorageDID } = CONFIG;
+
   useEffect(() => {
     if (!web3StorageDID) return;
+
     async function fetchW3upClient() {
       try {
-        const result = await delegate(web3StorageDID);
-        if (result) {
-          setW3upClient(result[1] as Client);
+        const response = await fetch('/api/w3up-delegate', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ did: web3StorageDID }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`Delegation request failed: ${response.status}`);
         }
+
+        const { delegation: base64 } = await response.json();
+        const car = CAR.decode(Buffer.from(base64, 'base64'));
+        const delegation = await importDAG(car.blocks.values());
+
+        const client = await Client.create();
+        await client.addSpace(delegation);
+
+        setW3upClient(client);
       } catch (error) {
         console.error('Error occurred during delegation:', error);
       }

packages/web/pages/api/w3up-delegate.ts

@@ -0,0 +1,63 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { CAR, DID } from '@ucanto/core';
+import { importDAG } from '@ucanto/core/delegation';
+import * as Signer from '@ucanto/principal/ed25519';
+import { StoreMemory } from '@web3-storage/access/stores/store-memory';
+import * as Client from '@web3-storage/w3up-client';
+
+const principal =
+  process.env.WEB3_STORAGE_KEY &&
+  Signer.parse(process.env.WEB3_STORAGE_KEY);
+
+const initClient = async () => {
+  if (!principal) {
+    throw new Error('WEB3_STORAGE_KEY must be set');
+  }
+  const client = await Client.create({ principal, store: new StoreMemory() });
+  const space = client.spaces().find((s) => s.name === 'metagame');
+  if (!space) {
+    const proof = parseProof(process.env.WEB3_STORAGE_PROOF || '');
+    const spaceProof = await client.addSpace(proof);
+    await client.setCurrentSpace(spaceProof.did());
+  }
+  return client;
+};
+
+function parseProof(data: string) {
+  const car = CAR.decode(Buffer.from(data, 'base64'));
+  return importDAG(car.blocks.values());
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  const { did } = req.body;
+  if (!did || typeof did !== 'string') {
+    return res.status(400).json({ error: 'Missing or invalid DID' });
+  }
+
+  try {
+    const audience = DID.parse(did);
+    const client = await initClient();
+    const delegation = await client.createDelegation(
+      audience,
+      ['store/add', 'upload/add', 'upload/remove', 'store/remove'],
+      { lifetimeInSeconds: 60 * 60 * 24 },
+    );
+    const archive = await delegation.archive();
+    if (!archive.ok) {
+      return res.status(500).json({ error: 'Failed to archive delegation' });
+    }
+    const base64 = Buffer.from(archive.ok).toString('base64');
+    return res.status(200).json({ delegation: base64 });
+  } catch (error) {
+    console.error('Delegation error:', error);
+    return res.status(500).json({ error: 'Delegation failed' });
+  }
+}