refactor(settings): rebrand plebbit options to P2P options

src/components/settings-modal/p2p-options/index.ts

@@ -0,0 +1 @@
+export { default } from './p2p-options';

src/components/settings-modal/p2p-options/p2p-options.module.css

@@ -33,12 +33,12 @@
   cursor: pointer;
 }
 
-.plebbitRpcSettingsInfo {
+.p2pRpcSettingsInfo {
   padding: 5px 20px 0 0;
   word-break: break-word;
 }
 
-.plebbitRpcSettingsInfo ol {
+.p2pRpcSettingsInfo ol {
   padding-bottom: 5px;
   padding-left: 20px;
 }
@@ -58,12 +58,14 @@
   padding: 2px 4px 3px;
   width: 95%;
   font-size: 13px;
+  font-family: monospace;
 }
 
 .content input[type="text"] {
   outline: none;
   width: 55%;
   font-size: 13px;
+  font-family: monospace;
 }
 
 .settingTip {
@@ -73,6 +75,6 @@
   padding-left: 1px;
 }
 
-.plebbitRPCSettings button {
+.p2pRPCSettings button {
   margin-left: 5px;
 }

src/components/settings-modal/p2p-options/p2p-options.tsx

@@ -1,7 +1,7 @@
 import { RefObject, useRef, useState } from 'react';
 import { setAccount, useAccount, usePlebbitRpcSettings } from '@plebbit/plebbit-react-hooks';
 import { useTranslation } from 'react-i18next';
-import styles from './pkc-options.module.css';
+import styles from './p2p-options.module.css';
 
 interface SettingsProps {
   ipfsGatewayUrlsRef?: RefObject<HTMLTextAreaElement>;
@@ -10,8 +10,8 @@ interface SettingsProps {
   ethRpcRef?: RefObject<HTMLTextAreaElement>;
   solRpcRef?: RefObject<HTMLTextAreaElement>;
   maticRpcRef?: RefObject<HTMLTextAreaElement>;
-  plebbitRpcRef?: RefObject<HTMLInputElement>;
+  p2pRpcRef?: RefObject<HTMLInputElement>;
-  plebbitDataPathRef?: RefObject<HTMLInputElement>;
+  p2pDataPathRef?: RefObject<HTMLInputElement>;
 }
 
 const IPFSGatewaysSettings = ({ ipfsGatewayUrlsRef, mediaIpfsGatewayUrlRef }: SettingsProps) => {
@@ -122,21 +122,21 @@ const BlockchainProvidersSettings = ({ ethRpcRef, solRpcRef, maticRpcRef }: Sett
   );
 };
 
-const PlebbitRPCSettings = ({ plebbitRpcRef }: SettingsProps) => {
+const P2pRPCSettings = ({ p2pRpcRef }: SettingsProps) => {
   const [showInfo, setShowInfo] = useState(false);
   const account = useAccount();
   const { plebbitOptions } = account || {};
   const { plebbitRpcClientsOptions } = plebbitOptions || {};
 
   return (
-    <div className={styles.plebbitRPCSettings}>
+    <div className={styles.p2pRPCSettings}>
       <div>
-        <input type='text' defaultValue={plebbitRpcClientsOptions} ref={plebbitRpcRef} autoCorrect='off' autoCapitalize='off' spellCheck='false' />
+        <input type='text' defaultValue={plebbitRpcClientsOptions} ref={p2pRpcRef} autoCorrect='off' autoCapitalize='off' spellCheck='false' />
         <button onClick={() => setShowInfo(!showInfo)}>{showInfo ? 'X' : '?'}</button>
       </div>
       {showInfo && (
-        <div className={styles.plebbitRpcSettingsInfo}>
+        <div className={styles.p2pRpcSettingsInfo}>
-          use a PKC full node locally, or remotely with SSL
+          use a P2P full node locally, or remotely with SSL
           <br />
           <ol>
             <li>get secret auth key from the node</li>
@@ -152,16 +152,16 @@ const PlebbitRPCSettings = ({ plebbitRpcRef }: SettingsProps) => {
   );
 };
 
-const PlebbitDataPathSettings = ({ plebbitDataPathRef }: SettingsProps) => {
+const P2pDataPathSettings = ({ p2pDataPathRef }: SettingsProps) => {
   const plebbitRpc = usePlebbitRpcSettings();
   const { plebbitRpcSettings } = plebbitRpc || {};
   const isConnectedToRpc = plebbitRpc?.state === 'connected';
   const path = plebbitRpcSettings?.plebbitOptions?.dataPath || '';
 
   return (
-    <div className={styles.plebbitDataPathSettings}>
+    <div className={styles.p2pDataPathSettings}>
       <div>
-        <input autoCorrect='off' autoCapitalize='off' spellCheck='false' type='text' defaultValue={path} disabled={!isConnectedToRpc} ref={plebbitDataPathRef} />
+        <input autoCorrect='off' autoCapitalize='off' spellCheck='false' type='text' defaultValue={path} disabled={!isConnectedToRpc} ref={p2pDataPathRef} />
       </div>
     </div>
   );
@@ -169,7 +169,7 @@ const PlebbitDataPathSettings = ({ plebbitDataPathRef }: SettingsProps) => {
 
 const isElectron = window.electronApi?.isElectron === true;
 
-const PlebbitOptions = () => {
+const P2pOptions = () => {
   const { t } = useTranslation();
   const account = useAccount();
   const { plebbitOptions } = account || {};
@@ -181,8 +181,8 @@ const PlebbitOptions = () => {
   const solRpcRef = useRef<HTMLTextAreaElement>(null);
   const maticRpcRef = useRef<HTMLTextAreaElement>(null);
   const httpRoutersRef = useRef<HTMLTextAreaElement>(null);
-  const plebbitRpcRef = useRef<HTMLInputElement>(null);
+  const p2pRpcRef = useRef<HTMLInputElement>(null);
-  const plebbitDataPathRef = useRef<HTMLInputElement>(null);
+  const p2pDataPathRef = useRef<HTMLInputElement>(null);
 
   const handleSave = async () => {
     const ipfsGatewayUrls = ipfsGatewayUrlsRef.current?.value
@@ -217,8 +217,8 @@ const PlebbitOptions = () => {
       .map((url) => url.trim())
       .filter((url) => url !== '');
 
-    const plebbitRpcClientsOptions = plebbitRpcRef.current?.value.trim() ? [plebbitRpcRef.current.value.trim()] : undefined;
+    const plebbitRpcClientsOptions = p2pRpcRef.current?.value.trim() ? [p2pRpcRef.current.value.trim()] : undefined;
-    const dataPath = plebbitDataPathRef.current?.value.trim() || undefined;
+    const dataPath = p2pDataPathRef.current?.value.trim() || undefined;
 
     const chainProviders = {
       eth: {
@@ -289,14 +289,14 @@ const PlebbitOptions = () => {
       <div className={styles.category}>
         <span className={styles.categoryTitle}>Node RPC:</span>
         <span className={styles.categorySettings}>
-          <PlebbitRPCSettings plebbitRpcRef={plebbitRpcRef} />
+          <P2pRPCSettings p2pRpcRef={p2pRpcRef} />
         </span>
       </div>
       {isElectron && (
         <div className={styles.category}>
-          <span className={styles.categoryTitle}>plebbit data path:</span>
+          <span className={styles.categoryTitle}>p2p data path:</span>
           <span className={styles.categorySettings}>
-            <PlebbitDataPathSettings plebbitDataPathRef={plebbitDataPathRef} />
+            <P2pDataPathSettings p2pDataPathRef={p2pDataPathRef} />
           </span>
         </div>
       )}
@@ -304,4 +304,4 @@ const PlebbitOptions = () => {
   );
 };
 
-export default PlebbitOptions;
+export default P2pOptions;

src/components/settings-modal/pkc-options/index.ts

@@ -1 +0,0 @@
-export { default } from './pkc-options';

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

@@ -8,7 +8,7 @@ import BlockedAddressesSetting from './blocked-addresses-setting';
 import CryptoAddressSetting from './crypto-address-setting';
 import CryptoWalletsSetting from './crypto-wallets-setting';
 import InterfaceSettings from './interface-settings';
-import PlebbitOptions from './pkc-options';
+import P2pOptions from './p2p-options';
 import SubscriptionsSetting from './subscriptions-setting';
 
 const SettingsModal = () => {
@@ -42,7 +42,7 @@ const SettingsModal = () => {
   const [showCryptoWalletSettings, setShowCryptoWalletSettings] = useState(false);
   const [showSubscriptionsSettings, setShowSubscriptionsSettings] = useState(false);
   const [showBlockedAddressesSetting, setShowBlockedAddressesSetting] = useState(false);
-  const [showPlebbitOptionsSettings, setShowPlebbitOptionsSettings] = useState(false);
+  const [showP2pOptionsSettings, setShowP2pOptionsSettings] = useState(false);
   const [expandAll, setExpandAll] = useState(false);
 
   const getExpandedCount = () => {
@@ -54,7 +54,7 @@ const SettingsModal = () => {
       Number(showCryptoWalletSettings) +
       Number(showSubscriptionsSettings) +
       Number(showBlockedAddressesSetting) +
-      Number(showPlebbitOptionsSettings)
+      Number(showP2pOptionsSettings)
     );
   };
 
@@ -66,7 +66,7 @@ const SettingsModal = () => {
     if (showCryptoWalletSettings && 'crypto-wallet-settings' !== excludeCategoryId) return 'crypto-wallet-settings';
     if (showSubscriptionsSettings && 'subscriptions-settings' !== excludeCategoryId) return 'subscriptions-settings';
     if (showBlockedAddressesSetting && 'blocked-addresses-settings' !== excludeCategoryId) return 'blocked-addresses-settings';
-    if (showPlebbitOptionsSettings && 'pkc-options-settings' !== excludeCategoryId) return 'pkc-options-settings';
+    if (showP2pOptionsSettings && 'p2p-options-settings' !== excludeCategoryId) return 'p2p-options-settings';
     return null;
   };
 
@@ -106,7 +106,7 @@ const SettingsModal = () => {
       setShowCryptoWalletSettings(hash === 'crypto-wallet-settings');
       setShowSubscriptionsSettings(hash === 'subscriptions-settings');
       setShowBlockedAddressesSetting(hash === 'blocked-addresses-settings');
-      setShowPlebbitOptionsSettings(hash === 'pkc-options-settings');
+      setShowP2pOptionsSettings(hash === 'p2p-options-settings');
     }
   }, [hash]);
 
@@ -120,7 +120,7 @@ const SettingsModal = () => {
     setShowCryptoWalletSettings(newExpandState);
     setShowSubscriptionsSettings(newExpandState);
     setShowBlockedAddressesSetting(newExpandState);
-    setShowPlebbitOptionsSettings(newExpandState);
+    setShowP2pOptionsSettings(newExpandState);
 
     const baseSettingsPath = location.pathname.split('#')[0];
     navigate(baseSettingsPath, { replace: true });
@@ -186,13 +186,13 @@ const SettingsModal = () => {
           </label>
         </div>
         {showBlockedAddressesSetting && <BlockedAddressesSetting />}
-        <div id='pkc-options-settings' className={`${styles.setting} ${styles.category}`}>
+        <div id='p2p-options-settings' className={`${styles.setting} ${styles.category}`}>
-          <label onClick={() => handleCategoryClick('pkc-options-settings', showPlebbitOptionsSettings, setShowPlebbitOptionsSettings)}>
+          <label onClick={() => handleCategoryClick('p2p-options-settings', showP2pOptionsSettings, setShowP2pOptionsSettings)}>
-            <span className={showPlebbitOptionsSettings ? styles.hideButton : styles.showButton} />
+            <span className={showP2pOptionsSettings ? styles.hideButton : styles.showButton} />
             {t('p2p_options')}
           </label>
         </div>
-        {showPlebbitOptionsSettings && <PlebbitOptions />}
+        {showP2pOptionsSettings && <P2pOptions />}
       </div>
     </>
   );