feat(p2p options): add http routers field

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

@@ -25,6 +25,10 @@
   height: unset;
 }
 
+.httpRoutersSettings textarea {
+  height: unset;
+}
+
 .blockchainProvidersSettings textarea {
   height: unset;
 }

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

@@ -7,6 +7,7 @@ interface SettingsProps {
   ipfsGatewayUrlsRef?: RefObject<HTMLTextAreaElement>;
   mediaIpfsGatewayUrlRef?: RefObject<HTMLInputElement>;
   pubsubProvidersRef?: RefObject<HTMLTextAreaElement>;
+  httpRoutersRef?: RefObject<HTMLTextAreaElement>;
   ethRpcRef?: RefObject<HTMLTextAreaElement>;
   solRpcRef?: RefObject<HTMLTextAreaElement>;
   maticRpcRef?: RefObject<HTMLTextAreaElement>;
@@ -75,6 +76,30 @@ const PubsubProvidersSettings = ({ pubsubProvidersRef }: SettingsProps) => {
   );
 };
 
+const HttpRoutersSettings = ({ httpRoutersRef }: SettingsProps) => {
+  const account = useAccount();
+  const { plebbitOptions } = account || {};
+  const { httpRoutersOptions } = plebbitOptions || {};
+  const plebbitRpc = usePlebbitRpcSettings();
+  const isConnectedToRpc = plebbitRpc?.state === 'connected';
+  const httpRoutersDefaultValue = httpRoutersOptions?.join('\n');
+
+  return (
+    <div className={styles.httpRoutersSettings}>
+      <textarea
+        defaultValue={httpRoutersDefaultValue}
+        ref={httpRoutersRef}
+        disabled={isConnectedToRpc}
+        autoCorrect='off'
+        autoCapitalize='off'
+        autoComplete='off'
+        spellCheck='false'
+        rows={httpRoutersOptions?.length || 1}
+      />
+    </div>
+  );
+};
+
 const BlockchainProvidersSettings = ({ ethRpcRef, solRpcRef, maticRpcRef }: SettingsProps) => {
   const account = useAccount();
   const { plebbitOptions } = account || {};
@@ -278,6 +303,12 @@ const P2pOptions = () => {
           <PubsubProvidersSettings pubsubProvidersRef={pubsubProvidersRef} />
         </span>
       </div>
+      <div className={styles.category}>
+        <span className={styles.categoryTitle}>http routers:</span>
+        <span className={styles.categorySettings}>
+          <HttpRoutersSettings httpRoutersRef={httpRoutersRef} />
+        </span>
+      </div>
       <div className={styles.category}>
         <span className={styles.categoryTitle} style={{ marginBottom: '-5px' }}>
           blockchain providers: