feat(p2p settings): add browser p2p stats

src/components/settings-modal/advanced-settings/__tests__/advanced-settings.test.tsx

@@ -84,6 +84,7 @@ const clickButton = async (text: string) => {
 describe('AdvancedSettings', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    localStorage.clear();
     testState.account = {
       mediaIpfsGatewayUrl: 'https://media.old.example',
       chainProviders: {
@@ -192,6 +193,66 @@ describe('AdvancedSettings', () => {
     expect(textInputs[2]?.value).toBe('/tmp/connected-node');
   });
 
+  it('saves the browser pure p2p toggle through advanced settings', async () => {
+    await renderSettings(false);
+
+    const checkbox = container.querySelector<HTMLInputElement>('input[type="checkbox"]');
+    expect(checkbox?.checked).toBe(false);
+    expect(container.textContent).not.toContain('pure P2P:');
+    expect(checkbox?.closest('label')?.nextElementSibling?.textContent).toBe('enable_pure_p2p_tip');
+
+    await act(async () => {
+      checkbox?.click();
+    });
+    await clickButton('save_advanced_settings');
+
+    expect(testState.setAccountMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pkcOptions: expect.objectContaining({
+          httpRoutersOptions: ['https://router.old.example'],
+          ipfsGatewayUrls: undefined,
+          libp2pJsClientsOptions: [{ key: 'libp2pjs' }],
+          pkcRpcClientsOptions: undefined,
+          pubsubKuboRpcClientsOptions: undefined,
+        }),
+      }),
+    );
+    expect(localStorage.getItem('5chan:pure-p2p-browser-enabled')).toBe('true');
+    expect(reloadMock).toHaveBeenCalledOnce();
+  });
+
+  it('saves gateway mode defaults when browser pure p2p is disabled', async () => {
+    testState.account = {
+      mediaIpfsGatewayUrl: 'https://media.old.example',
+      pkcOptions: {
+        httpRoutersOptions: ['https://peers.pleb.bot'],
+        libp2pJsClientsOptions: [{ key: 'libp2pjs' }],
+      },
+    };
+
+    await renderSettings(false);
+
+    const checkbox = container.querySelector<HTMLInputElement>('input[type="checkbox"]');
+    expect(checkbox?.checked).toBe(true);
+
+    await act(async () => {
+      checkbox?.click();
+    });
+    await clickButton('save_advanced_settings');
+
+    expect(testState.setAccountMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pkcOptions: expect.objectContaining({
+          httpRoutersOptions: ['https://peers.pleb.bot'],
+          ipfsGatewayUrls: ['https://ipfsgateway.xyz', 'https://gateway.plebpubsub.xyz', 'https://gateway.forumindex.com'],
+          libp2pJsClientsOptions: undefined,
+          pubsubKuboRpcClientsOptions: ['https://pubsubprovider.xyz/api/v0', 'https://plebpubsub.xyz/api/v0', 'https://rannithepleb.com/api/v0'],
+        }),
+      }),
+    );
+    expect(localStorage.getItem('5chan:pure-p2p-browser-enabled')).toBe('false');
+  });
+
   it('toggles the node rpc instructions panel', async () => {
     await renderSettings(false);
 

src/components/settings-modal/advanced-settings/advanced-settings.module.css

@@ -78,6 +78,19 @@
   padding-left: 1px;
 }
 
+.pureP2PSettings {
+  margin-bottom: 15px;
+}
+
+.pureP2PSettings .settingTip {
+  margin: 2px 0 5px 0;
+  padding-left: 19px;
+}
+
+.pureP2PCheckbox {
+  margin-right: 5px;
+}
+
 .p2pRPCSettings button {
   margin-left: 5px;
 }

src/components/settings-modal/advanced-settings/advanced-settings.tsx

@@ -1,6 +1,8 @@
 import { memo, RefObject, useRef, useState } from 'react';
 import { setAccount, useAccount, usePkcRpcSettings } from '@bitsocial/bitsocial-react-hooks';
 import { useTranslation } from 'react-i18next';
+import { getBrowserGatewayPkcOptions, getBrowserPureP2PPkcOptions, setPureP2PBrowserPreference } from '../../../lib/p2p-browser-config';
+import { canConfigureBrowserPureP2P, isBrowserPureP2PEnabled } from '../../../lib/p2p-runtime';
 import styles from './advanced-settings.module.css';
 
 interface SettingsProps {
@@ -12,6 +14,7 @@ interface SettingsProps {
   solRpcRef?: RefObject<HTMLTextAreaElement>;
   p2pRpcRef?: RefObject<HTMLInputElement>;
   p2pDataPathRef?: RefObject<HTMLInputElement>;
+  pureP2PBrowserRef?: RefObject<HTMLInputElement>;
 }
 
 type AccountProtocolOptions = {
@@ -19,6 +22,8 @@ type AccountProtocolOptions = {
   dataPath?: string;
   httpRoutersOptions?: string[];
   ipfsGatewayUrls?: string[];
+  kuboRpcClientsOptions?: unknown[];
+  libp2pJsClientsOptions?: unknown[];
   pkcRpcClientsOptions?: string[];
   pubsubHttpClientsOptions?: string[];
   pubsubKuboRpcClientsOptions?: string[];
@@ -210,6 +215,21 @@ const P2pDataPathSettings = ({ p2pDataPathRef }: SettingsProps) => {
   );
 };
 
+const PureP2PBrowserSettings = ({ pureP2PBrowserRef }: SettingsProps) => {
+  const { t } = useTranslation();
+  const account = useAccount() as AccountShape | undefined;
+
+  return (
+    <div className={styles.pureP2PSettings}>
+      <label>
+        <input className={styles.pureP2PCheckbox} type='checkbox' defaultChecked={isBrowserPureP2PEnabled(account)} ref={pureP2PBrowserRef} />
+        {t('enable_pure_p2p')}
+      </label>
+      <div className={styles.settingTip}>{t('enable_pure_p2p_tip')}</div>
+    </div>
+  );
+};
+
 const isElectron = window.electronApi?.isElectron === true;
 
 const AdvancedSettings = () => {
@@ -225,6 +245,7 @@ const AdvancedSettings = () => {
   const httpRoutersRef = useRef<HTMLTextAreaElement>(null);
   const p2pRpcRef = useRef<HTMLInputElement>(null);
   const p2pDataPathRef = useRef<HTMLInputElement>(null);
+  const pureP2PBrowserRef = useRef<HTMLInputElement>(null);
 
   const handleSave = async () => {
     const ipfsGatewayUrls = ipfsGatewayUrlsRef.current?.value
@@ -256,6 +277,7 @@ const AdvancedSettings = () => {
 
     const pkcRpcClientsOptions = p2pRpcRef.current?.value.trim() ? [p2pRpcRef.current.value.trim()] : undefined;
     const dataPath = p2pDataPathRef.current?.value.trim() || undefined;
+    const pureP2PBrowserPreference = canConfigureBrowserPureP2P() ? pureP2PBrowserRef.current?.checked : undefined;
 
     const chainProviders: Record<string, { urls: string[] | undefined; chainId: number }> = {};
     if (ethRpcUrls && ethRpcUrls.length > 0) {
@@ -265,20 +287,44 @@ const AdvancedSettings = () => {
       chainProviders.sol = { urls: solRpcUrls, chainId: 101 };
     }
 
+    let pkcOptions: AccountProtocolOptions = {
+      ...protocolOptions,
+      ipfsGatewayUrls,
+      pubsubKuboRpcClientsOptions,
+      httpRoutersOptions,
+      pkcRpcClientsOptions,
+      dataPath,
+    };
+
+    if (pureP2PBrowserPreference !== undefined) {
+      if (pureP2PBrowserPreference) {
+        const pureP2POptions = getBrowserPureP2PPkcOptions();
+        pkcOptions = {
+          ...pkcOptions,
+          ...pureP2POptions,
+          httpRoutersOptions: httpRoutersOptions?.length ? httpRoutersOptions : pureP2POptions.httpRoutersOptions,
+          pkcRpcClientsOptions: undefined,
+        };
+      } else {
+        const gatewayOptions = getBrowserGatewayPkcOptions();
+        pkcOptions = {
+          ...pkcOptions,
+          ...gatewayOptions,
+          ipfsGatewayUrls: ipfsGatewayUrls?.length ? ipfsGatewayUrls : gatewayOptions.ipfsGatewayUrls,
+          pubsubKuboRpcClientsOptions: pubsubKuboRpcClientsOptions?.length ? pubsubKuboRpcClientsOptions : gatewayOptions.pubsubKuboRpcClientsOptions,
+          httpRoutersOptions: httpRoutersOptions?.length ? httpRoutersOptions : gatewayOptions.httpRoutersOptions,
+        };
+      }
+    }
+
     try {
       await setAccount({
         ...account,
         mediaIpfsGatewayUrl,
         chainProviders,
-        pkcOptions: {
-          ...protocolOptions,
-          ipfsGatewayUrls,
-          pubsubKuboRpcClientsOptions,
-          httpRoutersOptions,
-          pkcRpcClientsOptions,
-          dataPath,
-        },
+        pkcOptions,
       });
+      if (pureP2PBrowserPreference !== undefined) setPureP2PBrowserPreference(pureP2PBrowserPreference);
       alert('Options saved, reloading...');
       window.location.reload();
     } catch (e) {
@@ -293,6 +339,7 @@ const AdvancedSettings = () => {
 
   return (
     <div className={styles.content}>
+      {canConfigureBrowserPureP2P() && <PureP2PBrowserSettings pureP2PBrowserRef={pureP2PBrowserRef} />}
       <div className={styles.category}>
         <span className={styles.categoryTitle}>IPFS gateways:</span>
         <span className={styles.categorySettings}>