feat(p2p): enable browser pkc mode

package.json

@@ -8,13 +8,13 @@
   "license": "GPL-3.0-or-later",
   "private": true,
   "dependencies": {
-    "@bitsocial/bitsocial-react-hooks": "0.1.2",
+    "@bitsocial/bitsocial-react-hooks": "0.1.3",
     "@capacitor/app": "7.0.1",
     "@capacitor/status-bar": "7.0.1",
     "@capawesome/capacitor-android-edge-to-edge-support": "7.2.2",
     "@chenglou/pretext": "0.0.5",
     "@floating-ui/react": "0.26.1",
-    "@pkcprotocol/pkc-js": "https://github.com/pkcprotocol/pkc-js.git#e63026e6cd33df5af3a3b5e6473b1e364d89fbdb",
+    "@pkcprotocol/pkc-js": "0.0.23",
     "@react-spring/web": "10.0.3",
     "@types/node": "20.19.37",
     "@types/react": "18.2.25",

src/globals.d.ts

@@ -1,6 +1,7 @@
 declare global {
   interface Window {
     isElectron: boolean;
+    defaultPkcOptions?: Record<string, unknown>;
   }
 }
 

src/index.tsx

@@ -2,7 +2,6 @@ import './polyfills.js';
 import './lib/react-scan';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './app';
 import { HashRouter as Router } from 'react-router-dom';
 import './lib/init-translations';
 import './index.css';
@@ -10,6 +9,7 @@ import './themes.css';
 import AppUpdateRegistration from './components/app-update-registration';
 import { App as CapacitorApp } from '@capacitor/app';
 import { Analytics } from '@vercel/analytics/react';
+import { configureP2PBrowserPkcOptions } from './lib/p2p-browser-config';
 
 // Only enable analytics on 5chan.app (Vercel deployment)
 // Exclude Electron (file:// or localhost), Capacitor/APK (capacitor:// or localhost), and IPFS (ipfs:// or different domain)
@@ -22,26 +22,32 @@ if (typeof window !== 'undefined' && e2eStartHash && window.location.hash.length
   window.location.hash = e2eStartHash.startsWith('#') ? e2eStartHash : `#${e2eStartHash}`;
 }
 
+configureP2PBrowserPkcOptions();
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 const renderRoot = async () => {
   let e2eHarness: React.ComponentType | null = null;
+
   if (requestedE2EHarness === 'thread-auto-update') {
     e2eHarness = (await import('./e2e/thread-auto-update-harness')).default;
   } else if (requestedE2EHarness === 'pretext-benchmark') {
     e2eHarness = (await import('./e2e/pretext-benchmark-harness')).default;
   }
 
+  if (e2eHarness) {
+    root.render(<React.StrictMode>{React.createElement(e2eHarness)}</React.StrictMode>);
+    return;
+  }
+
+  const App = (await import('./app')).default;
+
   root.render(
     <React.StrictMode>
-      {e2eHarness ? (
+      <Router>
-        React.createElement(e2eHarness)
+        <AppUpdateRegistration />
-      ) : (
+        <App />
-        <Router>
+        {isVercelDeployment && <Analytics />}
-          <AppUpdateRegistration />
+      </Router>
-          <App />
-          {isVercelDeployment && <Analytics />}
-        </Router>
-      )}
     </React.StrictMode>,
   );
 };

src/lib/__tests__/p2p-browser-config.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+
+import { configureP2PBrowserPkcOptions, isP2PBrowserHostname, P2P_BROWSER_PKC_OPTIONS } from '../p2p-browser-config';
+
+describe('p2p-browser-config', () => {
+  it('detects p2p subdomains', () => {
+    expect(isP2PBrowserHostname('p2p.5chan.app')).toBe(true);
+    expect(isP2PBrowserHostname('P2P.5chan.app')).toBe(true);
+    expect(isP2PBrowserHostname('5chan.app')).toBe(false);
+    expect(isP2PBrowserHostname('www.p2p.5chan.app')).toBe(false);
+  });
+
+  it('configures browser PKC options for p2p hostnames', () => {
+    const targetWindow = {
+      location: { hostname: 'p2p.5chan.app' },
+      defaultPkcOptions: {
+        ipfsGatewayUrls: ['https://gateway.example'],
+      },
+    };
+
+    expect(configureP2PBrowserPkcOptions(targetWindow)).toBe(true);
+    expect(targetWindow.defaultPkcOptions).toEqual({
+      ipfsGatewayUrls: ['https://gateway.example'],
+      ...P2P_BROWSER_PKC_OPTIONS,
+    });
+  });
+
+  it('leaves normal hostnames untouched', () => {
+    const defaultPkcOptions = {
+      ipfsGatewayUrls: ['https://gateway.example'],
+    };
+    const targetWindow = {
+      location: { hostname: '5chan.app' },
+      defaultPkcOptions,
+    };
+
+    expect(configureP2PBrowserPkcOptions(targetWindow)).toBe(false);
+    expect(targetWindow.defaultPkcOptions).toBe(defaultPkcOptions);
+  });
+});

src/lib/p2p-browser-config.ts

@@ -0,0 +1,25 @@
+export const P2P_BROWSER_PKC_OPTIONS = {
+  libp2pJsClientsOptions: [{ key: 'libp2pjs' }],
+  httpRoutersOptions: ['https://peers.pleb.bot', 'https://peers.forumindex.com'],
+};
+
+type P2PBrowserConfigWindow = {
+  location: Pick<Location, 'hostname'>;
+  defaultPkcOptions?: Record<string, unknown>;
+};
+
+export const isP2PBrowserHostname = (hostname: string) => hostname.toLowerCase().startsWith('p2p.');
+
+export const configureP2PBrowserPkcOptions = (targetWindow: P2PBrowserConfigWindow = window) => {
+  if (!isP2PBrowserHostname(targetWindow.location.hostname)) {
+    return false;
+  }
+
+  targetWindow.defaultPkcOptions = {
+    ...targetWindow.defaultPkcOptions,
+    libp2pJsClientsOptions: P2P_BROWSER_PKC_OPTIONS.libp2pJsClientsOptions.map((options) => ({ ...options })),
+    httpRoutersOptions: [...P2P_BROWSER_PKC_OPTIONS.httpRoutersOptions],
+  };
+
+  return true;
+};