chore(post menu): update plebones link to eth limo

src/components/views/Rules.jsx

@@ -21,22 +21,23 @@ import packageJson from '../../../package.json';
 const { version } = packageJson;
 const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
-
 const Rules = () => {
-  const {
+	const { defaultSubplebbits, isSettingsOpen, setIsSettingsOpen, selectedAddress, setSelectedAddress, selectedStyle, setSelectedTitle } = useGeneralStore(
-    defaultSubplebbits,
+		(state) => state,
-    isSettingsOpen, setIsSettingsOpen,
+	);
-    selectedAddress, setSelectedAddress,
-    selectedStyle,
-    setSelectedTitle,
-  } = useGeneralStore(state => state);
 
 	// temporary hardcode
 	const plebtokenRules = [
-    "This community is strictly SFW. Any NSFW language or content will be removed.",
+		'This community is strictly SFW. Any NSFW language or content will be removed.',
-    <span>Only post about the plebbit token ($PLEB). For general cryptocurrency discussion, go to <Link className='quotelink' to="/p/business-and-finance.eth">p/business-and-finance.eth</Link>.</span>,
+		<span>
-    "FUD is allowed unless blatantly meaningless and spammy."
+			Only post about the plebbit token ($PLEB). For general cryptocurrency discussion, go to{' '}
-  ]
+			<Link className='quotelink' to='/p/business-and-finance.eth'>
+				p/business-and-finance.eth
+			</Link>
+			.
+		</span>,
+		'FUD is allowed unless blatantly meaningless and spammy.',
+	];
 
 	const navigate = useNavigate();
 
@@ -58,7 +59,6 @@ const Rules = () => {
 	const { subplebbitAddress } = useParams();
 	const subplebbit = useSubplebbit({ subplebbitAddress: selectedAddress });
 
-
 	const handleOptionClick = () => {
 		setOpenMenuCid(null);
 	};
@@ -67,19 +67,23 @@ const Rules = () => {
 		setOpenMobileMenuCid(null);
 	};
 
-
+	const handleOutsideClick = useCallback(
-  const handleOutsideClick = useCallback((e) => {
+		(e) => {
 			if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
 				setOpenMenuCid(null);
 			}
-  }, [openMenuCid, postMenuCatalogRef]);
+		},
+		[openMenuCid, postMenuCatalogRef],
+	);
 
-  const handleMobileOutsideClick = useCallback((e) => {
+	const handleMobileOutsideClick = useCallback(
+		(e) => {
 			if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) {
 				setOpenMobileMenuCid(null);
 			}
-  }, [openMobileMenuCid, postMenuMobileRef]);
+		},
-  
+		[openMobileMenuCid, postMenuMobileRef],
+	);
 
 	useEffect(() => {
 		if (openMenuCid !== null) {
@@ -93,7 +97,6 @@ const Rules = () => {
 		};
 	}, [openMenuCid, handleOutsideClick]);
 
-
 	useEffect(() => {
 		if (openMobileMenuCid !== null) {
 			document.addEventListener('click', handleMobileOutsideClick);
@@ -106,18 +109,16 @@ const Rules = () => {
 		};
 	}, [openMobileMenuCid, handleMobileOutsideClick]);
 
-  
 	useEffect(() => {
 		window.scrollTo(0, 0);
 	}, []);
 
-
 	useEffect(() => {
 		const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
 		if (subplebbitAddress) {
 			setSelectedAddress(subplebbitAddress);
 		} else if (subplebbit?.address) {
-      setSelectedAddress(subplebbit.address)
+			setSelectedAddress(subplebbit.address);
 		}
 		if (selectedSubplebbit) {
 			setSelectedTitle(selectedSubplebbit.title);
@@ -157,240 +158,279 @@ const Rules = () => {
 		navigate(`/p/${selected}`);
 	};
 
-
 	return (
 		<>
 			<Helmet>
-          <title>
+				<title>{'Board Rules - ' + (subplebbit.title || subplebbit.address) + ' - plebchan'}</title>
-          {"Board Rules - " + (subplebbit.title || subplebbit.address) + " - plebchan"}
-          </title>
 			</Helmet>
 			<Container>
-        <CreateBoardModal
+				<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
-        selectedStyle={selectedStyle}
+				<AdminListModal selectedStyle={selectedStyle} isOpen={isAdminListOpen} closeModal={() => setIsAdminListOpen(false)} roles={subplebbit.roles} />
-        isOpen={isCreateBoardOpen}
+				<SettingsModal selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} />
-        closeModal={() => setIsCreateBoardOpen(false)} />
-        <AdminListModal
-        selectedStyle={selectedStyle}
-        isOpen={isAdminListOpen}
-        closeModal={() => setIsAdminListOpen(false)}
-        roles={subplebbit.roles} />
-        <SettingsModal
-        selectedStyle={selectedStyle}
-        isOpen={isSettingsOpen}
-        closeModal={() => setIsSettingsOpen(false)} />
 				<NavBar selectedStyle={selectedStyle}>
 					<>
-          <span className="boardList">
+						<span className='boardList'>
 							[
-              <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
+							<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
+								All
+							</Link>
 							 / 
-              <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
+							<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
+								Subscriptions
+							</Link>
 							]&nbsp;[
 							{defaultSubplebbits.map((subplebbit, index) => (
-              <span className="boardList" key={`span-${subplebbit.address}`}>
+								<span className='boardList' key={`span-${subplebbit.address}`}>
-                {index === 0 ? null : "\u00a0"}
+									{index === 0 ? null : '\u00a0'}
-                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+									<Link
+										to={`/p/${subplebbit.address}`}
+										key={`a-${subplebbit.address}`}
+										onClick={() => {
 											setSelectedTitle(subplebbit.title);
 											setSelectedAddress(subplebbit.address);
 										}}
-                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+									>
-                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+										{subplebbit.title ? subplebbit.title : subplebbit.address}
+									</Link>
+									{index !== defaultSubplebbits.length - 1 ? ' /' : null}
 								</span>
 							))}
 							]
 						</span>
-            <span className="nav">
+						<span className='nav'>
 							[
-              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+							<span
-              () => {
+								id='button-span'
-                window.electron && window.electron.isElectron ? (
+								style={{ cursor: 'pointer' }}
-                  setIsCreateBoardOpen(true)
+								onClick={() => {
-                ) : (
+									window.electron && window.electron.isElectron
-                  alert(
+										? setIsCreateBoardOpen(true)
-                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
+										: alert(
-                  )
+												'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-                )
+										  );
-              }
+								}}
-              }>Create Board</span>
+							>
-              ]
+								Create Board
-              [
-              <Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
-              ]
-              [
-              <Link to="/">Home</Link>
-              ]
 							</span>
-            <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
+							] [
-              <div className="nav-container">
+							<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
-                <div className="board-select">
+								Settings
+							</Link>
+							] [<Link to='/'>Home</Link>]
+						</span>
+						<div id='board-nav-mobile' style={{ top: visible ? 0 : '-23px' }}>
+							<div className='nav-container'>
+								<div className='board-select'>
 									<strong>Board</strong>
 									&nbsp;
-                  <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
+									<select id='board-select-mobile' value={selectedAddress} onChange={handleSelectChange}>
-                    <option value="all">All</option>
+										<option value='all'>All</option>
-                    <option value="subscriptions">Subscriptions</option>
+										<option value='subscriptions'>Subscriptions</option>
-                    {!defaultSubplebbits.some(subplebbit => subplebbit.address === selectedAddress) && (
+										{!defaultSubplebbits.some((subplebbit) => subplebbit.address === selectedAddress) && <option value={selectedAddress}>{selectedAddress}</option>}
-                      <option value={selectedAddress}>{selectedAddress}</option>
+										{defaultSubplebbits.map((subplebbit) => (
-                    )}
+											<option key={`option-${subplebbit.address}`} value={subplebbit.address}>
-                    {defaultSubplebbits.map(subplebbit => (
+												{subplebbit.title ? subplebbit.title : subplebbit.address}
-                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
+											</option>
-                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
 										))}
-                  </select> 
+									</select>
-                  <span id="button-span" style={{cursor: 'pointer'}} onClick={
+									 
-                  () => alert(
+									<span
-                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
+										id='button-span'
+										style={{ cursor: 'pointer' }}
+										onClick={() =>
+											alert(
+												'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
 											)
-                  }>Create Board</span>
+										}
+									>
+										Create Board
+									</span>
 								</div>
-                <div className="page-jump">
+								<div className='page-jump'>
-                  <Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+									<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
+										Settings
+									</Link>
 									&nbsp;
-                  <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
+									<Link
+										to='/'
+										onClick={() => {
+											handleStyleChange({ target: { value: 'Yotsuba' } });
+											window.scrollTo(0, 0);
+										}}
+									>
+										Home
+									</Link>
 								</div>
 							</div>
 						</div>
-            <div id="separator-mobile">&nbsp;</div>
+						<div id='separator-mobile'>&nbsp;</div>
-            <div id="separator-mobile">&nbsp;</div>
+						<div id='separator-mobile'>&nbsp;</div>
 					</>
 				</NavBar>
 				<Header selectedStyle={selectedStyle}>
 					<>
-            <div className="banner">
+						<div className='banner'>
 							<ImageBanner />
 						</div>
 						<>
-              <div className="board-title">{subplebbit.title ?? null}</div>
+							<div className='board-title'>{subplebbit.title ?? null}</div>
-              <div className="board-address">p/{subplebbit.address}
+							<div className='board-address'>
-                <OfflineIndicator 
+								p/{subplebbit.address}
-                address={subplebbit.address} 
+								<OfflineIndicator address={subplebbit.address} className='offline' tooltipPlace='top' />
-                className="offline"
-                tooltipPlace="top" />
 							</div>
 						</>
 					</>
 				</Header>
 				<Break selectedStyle={selectedStyle} />
 				<PostForm selectedStyle={selectedStyle}>
-          <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} style={{marginBottom: '10px'}}>
+					<ReplyFormLink id='post-form-link' selectedStyle={selectedStyle} style={{ marginBottom: '10px' }}>
-          <div id="return-button-mobile">
+						<div id='return-button-mobile'>
-              <span className="btn-wrap" onClick={()=> {window.scrollTo(0, 0)}}>
+							<span
+								className='btn-wrap'
+								onClick={() => {
+									window.scrollTo(0, 0);
+								}}
+							>
 								<Link to={`/p/${selectedAddress}`}>Return</Link>
 							</span>
 						</div>
-            <div id="catalog-button-mobile">
+						<div id='catalog-button-mobile'>
-              <span className="btn-wrap">
+							<span className='btn-wrap'>
-                <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
+								<Link
+									to={`/p/${selectedAddress}/catalog`}
+									onClick={() => {
+										window.scrollTo(0, 0);
+									}}
+								>
+									Catalog
+								</Link>
 							</span>
 						</div>
-            <div id="bottom-button-mobile">
+						<div id='bottom-button-mobile'>
-              <span className="btn-wrap">
+							<span className='btn-wrap'>
-                <span style={{cursor: 'pointer'}} onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</span>
+								<span
+									style={{ cursor: 'pointer' }}
+									onClick={() => window.scrollTo(0, document.body.scrollHeight)}
+									onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
+								>
+									Bottom
+								</span>
 							</span>
 						</div>
 					</ReplyFormLink>
 				</PostForm>
 				<BoardStats subplebbitAddress={selectedAddress} />
 				<TopBar selectedStyle={selectedStyle}>
-          <span className="style-changer">
+					<span className='style-changer'>
-            Style:
+						Style:  
-             
+						<select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
-            <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
+							<option value='Yotsuba'>Yotsuba</option>
-              <option value="Yotsuba">Yotsuba</option>
+							<option value='Yotsuba-B'>Yotsuba B</option>
-              <option value="Yotsuba-B">Yotsuba B</option>
+							<option value='Futaba'>Futaba</option>
-              <option value="Futaba">Futaba</option>
+							<option value='Burichan'>Burichan</option>
-              <option value="Burichan">Burichan</option>
+							<option value='Tomorrow'>Tomorrow</option>
-              <option value="Tomorrow">Tomorrow</option>
+							<option value='Photon'>Photon</option>
-              <option value="Photon">Photon</option>
 						</select>
 					</span>
-          <span className="return-button" id="return-button-desktop">
+					<span className='return-button' id='return-button-desktop'>
-            [
+						[<Link to={`/p/${selectedAddress}`}>Return</Link>]
-            <Link to={`/p/${selectedAddress}`}>Return</Link>
-            ]
 					</span>
-          <span className="return-button catalog-button" id="catalog-button-desktop">
+					<span className='return-button catalog-button' id='catalog-button-desktop'>
-            [
+						[<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>]
-            <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
-            ]
 					</span>
-          <span className="return-button catalog-button" id="bottom-button-desktop">
+					<span className='return-button catalog-button' id='bottom-button-desktop'>
 						[
-            <span id="button" style={{cursor: 'pointer'}} onClick={() =>  window.scrollTo(0, document.body.scrollHeight)} 
+						<span
-            onMouseOver={(event) => event.target.style.cursor='pointer'} 
+							id='button'
-            onTouchStart={() =>  window.scrollTo(0, document.body.scrollHeight)}>Bottom</span>
+							style={{ cursor: 'pointer' }}
+							onClick={() => window.scrollTo(0, document.body.scrollHeight)}
+							onMouseOver={(event) => (event.target.style.cursor = 'pointer')}
+							onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}
+						>
+							Bottom
+						</span>
 						]
 					</span>
 				</TopBar>
-        <Tooltip id="tooltip" className="tooltip" />
+				<Tooltip id='tooltip' className='tooltip' />
 				<BoardForm selectedStyle={selectedStyle}>
 					<>
-            <div className="thread">
+						<div className='thread'>
-              <div className="op-container">
+							<div className='op-container'>
-                <div className="post op op-desktop">
+								<div className='post op op-desktop'>
 									<hr />
-                  <div className="post-info">
+									<div className='post-info'>
-                    <span className="name-block">
+										<span className='name-block'>
-                      <span className="title">Rules</span>
+											<span className='title'>Rules</span>
 											&nbsp;
-                      <span className="name capcode"
+											<span
+												className='name capcode'
 												style={{ cursor: 'pointer' }}
-                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+												onClick={() => {
-                      >## Board Admins</span>
+													setIsAdminListOpen(!isAdminListOpen);
+												}}
+											>
+												## Board Admins
+											</span>
 											&nbsp;
-                      <span className="date-time">{getDate(subplebbit.createdAt)}</span>
+											<span className='date-time'>{getDate(subplebbit.createdAt)}</span>
 											&nbsp;
-                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
+											<img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
 											&nbsp;
-                      <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
+											<img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginBottom: '-1px', imageRendering: 'pixelated' }} />
-                      <span>&nbsp;
+											<span>
-                          [
+												&nbsp; [
-                          <Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
+												<Link to={() => {}} style={{ textDecoration: 'none' }} className='reply-link'>
+													Reply
+												</Link>
 												]
 											</span>
 											<PostMenu
-                        title="Post menu"
+												title='Post menu'
-                        ref={el => { 
+												ref={(el) => {
-                          threadMenuRefs.current["rules"] = el;
+													threadMenuRefs.current['rules'] = el;
 												}}
 												className='post-menu-button'
-                        rotated={openMenuCid === "rules"}
+												rotated={openMenuCid === 'rules'}
 												onClick={(event) => {
 													event.stopPropagation();
-                          const rect = threadMenuRefs.current["rules"].getBoundingClientRect();
+													const rect = threadMenuRefs.current['rules'].getBoundingClientRect();
 													setMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-                          setOpenMenuCid(prevCid => (prevCid === "rules" ? null : "rules"));
+													setOpenMenuCid((prevCid) => (prevCid === 'rules' ? null : 'rules'));
 												}}
 											>
 												▶
 											</PostMenu>
 											{createPortal(
-                        <PostMenuCatalog selectedStyle={selectedStyle} 
+												<PostMenuCatalog
-                        ref={el => {postMenuCatalogRef.current = el}}
+													selectedStyle={selectedStyle}
+													ref={(el) => {
+														postMenuCatalogRef.current = el;
+													}}
 													onClick={(event) => event.stopPropagation()}
-                        style={{position: "absolute", 
+													style={{ position: 'absolute', top: menuPosition.top + 7, left: menuPosition.left }}
-                        top: menuPosition.top + 7, 
-                        left: menuPosition.left}}>
-                        <div className={`post-menu-thread post-menu-thread-${"rules"}`}
-                        style={{ display: openMenuCid === "rules" ? 'block' : 'none' }}
 												>
-                          <ul className="post-menu-catalog">
+													<div className={`post-menu-thread post-menu-thread-${'rules'}`} style={{ display: openMenuCid === 'rules' ? 'block' : 'none' }}>
+														<ul className='post-menu-catalog'>
 															{/* {isModerator ? (
                               <>
                                 change rules
                               </>
                             ) : null} */}
 															<li
-                            onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+																onMouseOver={() => {
-                            onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+																	setIsClientRedirectMenuOpen(true);
+																}}
+																onMouseLeave={() => {
+																	setIsClientRedirectMenuOpen(false);
+																}}
+															>
 																View on »
-                              <ul className="dropdown-menu post-menu-catalog"
+																<ul className='dropdown-menu post-menu-catalog' style={{ display: isClientRedirectMenuOpen ? 'block' : 'none' }}>
-                                style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+																	<li onClick={() => handleOptionClick('rules')}>
-                                <li onClick={() => handleOptionClick("rules")}>
+																		<a href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
-                                  <a 
+																			Plebbit
-                                  href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
+																		</a>
-                                  target="_blank" rel="noreferrer"
-                                  >Plebbit</a>
 																	</li>
 																	{/* <li onClick={() => handleOptionClick("rules")}>
                                   <a
@@ -398,224 +438,275 @@ const Rules = () => {
                                   target="_blank" rel="noreferrer"
                                   >Seedit</a>
                                 </li> */}
-                                <li onClick={() => handleOptionClick("rules")}>
+																	<li onClick={() => handleOptionClick('rules')}>
-                                  <a
+																		<a href={`https://plebones.eth.limo/#/p/${selectedAddress}`} target='_blank' rel='noreferrer'>
-                                  href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
+																			Plebones
-                                  target="_blank" rel="noreferrer"
+																		</a>
-                                  >Plebones</a>
 																	</li>
 																</ul>
 															</li>
 														</ul>
 													</div>
-                        </PostMenuCatalog>, document.body
+												</PostMenuCatalog>,
+												document.body,
 											)}
 										</span>
 										<blockquote>
-                      <div className="custom-paragraph"  style={{paddingBottom: '17px'}}>
+											<div className='custom-paragraph' style={{ paddingBottom: '17px' }}>
-                        {subplebbit.address === "plebtoken.eth" ? (
+												{subplebbit.address === 'plebtoken.eth'
-                          plebtokenRules.map((rule, index) => (
+													? plebtokenRules.map((rule, index) => (
 															<React.Fragment key={index}>
 																{index + 1}. {rule}
 																<br />
 															</React.Fragment>
 													  ))
-                        ) : (
+													: subplebbit.rules?.map((rule, index) => (
-                          subplebbit.rules?.map((rule, index) => (
 															<React.Fragment key={index}>
 																{index + 1}. {rule}
 																<br />
 															</React.Fragment>
-                          ))
+													  ))}
-                        )}
 											</div>
 										</blockquote>
 									</div>
 								</div>
 							</div>
 						</div>
-            <div className="thread-mobile">
+						<div className='thread-mobile'>
 							<hr />
-              <div className="op-container">
+							<div className='op-container'>
-                <div className="post op op-mobile">
+								<div className='post op op-mobile'>
-                  <div className="post-info-mobile">
+									<div className='post-info-mobile'>
-                    <button key={`mob-pb-`} className="post-menu-button-mobile"
+										<button
-                      ref={el => {
+											key={`mob-pb-`}
-                        threadMenuRefsMobile.current["rules"] = el;
+											className='post-menu-button-mobile'
+											ref={(el) => {
+												threadMenuRefsMobile.current['rules'] = el;
 											}}
 											onClick={(event) => {
 												event.stopPropagation();
-                        const rect = threadMenuRefsMobile.current["rules"].getBoundingClientRect();
+												const rect = threadMenuRefsMobile.current['rules'].getBoundingClientRect();
 												setMobileMenuPosition({ top: rect.top + window.scrollY, left: rect.left });
-                        setOpenMobileMenuCid(prevCid => (prevCid === "rules" ? null : "rules"));
+												setOpenMobileMenuCid((prevCid) => (prevCid === 'rules' ? null : 'rules'));
 											}}
 											style={{ all: 'unset', cursor: 'pointer' }}
-                    >...</button>
+										>
+											...
+										</button>
 										{createPortal(
-                      <PostMenuMobile selectedStyle={selectedStyle}
+											<PostMenuMobile
-                      ref={el => {postMenuMobileRef.current = el}}
+												selectedStyle={selectedStyle}
+												ref={(el) => {
+													postMenuMobileRef.current = el;
+												}}
 												onClick={(event) => event.stopPropagation()}
-                      style={{position: "absolute", 
+												style={{
-                      display: openMobileMenuCid === "rules" ? "block" : "none",
+													position: 'absolute',
+													display: openMobileMenuCid === 'rules' ? 'block' : 'none',
 													top: mobileMenuPosition.top + 20,
-                      left: mobileMenuPosition.left}}>
+													left: mobileMenuPosition.left,
+												}}
+											>
 												<ul className={`post-menu-mobile-thread-description`}>
-                          <a style={{color: 'inherit', textDecoration: 'none'}}
+													<a
+														style={{ color: 'inherit', textDecoration: 'none' }}
 														href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
-                          target="_blank" rel="noreferrer">
+														target='_blank'
-                            <li onClick={() => handleMobileOptionClick("rules")}>
+														rel='noreferrer'
-                              View on plebbit
+													>
-                            </li>
+														<li onClick={() => handleMobileOptionClick('rules')}>View on plebbit</li>
 													</a>
-                          <a style={{color: 'inherit', textDecoration: 'none'}}
+													<a
-                          href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
+														style={{ color: 'inherit', textDecoration: 'none' }}
-                          target="_blank" rel="noreferrer">
+														href={`https://plebones.eth.limo/#/p/${selectedAddress}`}
-                            <li onClick={() => handleMobileOptionClick("rules")}>
+														target='_blank'
-                              View on plebones
+														rel='noreferrer'
-                            </li>
+													>
+														<li onClick={() => handleMobileOptionClick('rules')}>View on plebones</li>
 													</a>
 												</ul>
-                      </PostMenuMobile>, document.body
+											</PostMenuMobile>,
+											document.body,
 										)}
-                    <span className="name-block-mobile">
+										<span className='name-block-mobile'>
-                      <span className="name-mobile capcode"
+											<span
+												className='name-mobile capcode'
 												style={{ cursor: 'pointer' }}
-                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+												onClick={() => {
-                      >## Board Admins</span>
+													setIsAdminListOpen(!isAdminListOpen);
+												}}
+											>
+												## Board Admins
+											</span>
 											&nbsp;
-                      <span className="thread-icons-mobile"
+											<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
-                      style={{float: "right", marginRight: "18px"}}>
+												<img src='assets/sticky.gif' alt='Sticky' title='Sticky' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
-                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
 												&nbsp;
-                        <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
+												<img src='assets/closed.gif' alt='Closed' title='Closed' style={{ marginTop: '-1px', marginRight: '2px', imageRendering: 'pixelated' }} />
 											</span>
 											<br />
-                      <span className="subject-mobile"
+											<span className='subject-mobile' style={{ marginBottom: '-15px' }}>
-                    style={{marginBottom: "-15px"}}>Rules</span>
+												Rules
+											</span>
 											&nbsp;
 										</span>
-                    <span className="date-time-mobile post-number-mobile">{getDate(subplebbit.createdAt)}</span>
+										<span className='date-time-mobile post-number-mobile'>{getDate(subplebbit.createdAt)}</span>
 										&nbsp;
 									</div>
-                  <blockquote className="post-message-mobile">
+									<blockquote className='post-message-mobile'>
-                    <div className="custom-paragraph">
+										<div className='custom-paragraph'>
-                      {subplebbit.address === "plebtoken.eth" ? (
+											{subplebbit.address === 'plebtoken.eth'
-                        plebtokenRules.map((rule, index) => (
+												? plebtokenRules.map((rule, index) => (
 														<React.Fragment key={index}>
 															{index + 1}. {rule}
 															<br />
 														</React.Fragment>
 												  ))
-                      ) : (
+												: subplebbit.rules?.map((rule, index) => (
-                        subplebbit.rules?.map((rule, index) => (
 														<React.Fragment key={index}>
 															{index + 1}. {rule}
 															<br />
 														</React.Fragment>
-                        ))
+												  ))}
-                      )}
 										</div>
 									</blockquote>
 								</div>
-                <div className="post-link-mobile">
+								<div className='post-link-mobile'>
-                  <Link to={() => {}} className="button-mobile">View Thread</Link>
+									<Link to={() => {}} className='button-mobile'>
+										View Thread
+									</Link>
 								</div>
 							</div>
 						</div>
 					</>
 				</BoardForm>
 				<Footer selectedStyle={selectedStyle}>
-          <Break id="break" selectedStyle={selectedStyle} style={{
+					<Break
-            marginTop: "-36px",
+						id='break'
-            width: "100%",
+						selectedStyle={selectedStyle}
-          }} />
+						style={{
-          <Break selectedStyle={selectedStyle} style={{
+							marginTop: '-36px',
-            width: "100%",
+							width: '100%',
-          }} />
+						}}
-          <span className="style-changer" style={{
+					/>
-            float: "right",
+					<Break
-            marginTop: "2px",
+						selectedStyle={selectedStyle}
-          }}>
+						style={{
-            Style:
+							width: '100%',
-             
+						}}
-            <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
+					/>
-              <option value="Yotsuba">Yotsuba</option>
+					<span
-              <option value="Yotsuba-B">Yotsuba B</option>
+						className='style-changer'
-              <option value="Futaba">Futaba</option>
+						style={{
-              <option value="Burichan">Burichan</option>
+							float: 'right',
-              <option value="Tomorrow">Tomorrow</option>
+							marginTop: '2px',
-              <option value="Photon">Photon</option>
+						}}
+					>
+						Style:  
+						<select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
+							<option value='Yotsuba'>Yotsuba</option>
+							<option value='Yotsuba-B'>Yotsuba B</option>
+							<option value='Futaba'>Futaba</option>
+							<option value='Burichan'>Burichan</option>
+							<option value='Tomorrow'>Tomorrow</option>
+							<option value='Photon'>Photon</option>
 						</select>
 					</span>
-          <NavBar selectedStyle={selectedStyle} style={{
+					<NavBar
-            marginTop: "42px",
+						selectedStyle={selectedStyle}
-          }}>
+						style={{
+							marginTop: '42px',
+						}}
+					>
 						<>
-            <span className="boardList">
+							<span className='boardList'>
 								[
-                <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
+								<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
+									All
+								</Link>
 								 / 
-                <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
+								<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
+									Subscriptions
+								</Link>
 								]&nbsp;
 							</span>
 							{defaultSubplebbits.map((subplebbit, index) => (
-              <span className="boardList" key={`span-${subplebbit.address}`}>
+								<span className='boardList' key={`span-${subplebbit.address}`}>
-                {index === 0 ? null : "\u00a0"}
+									{index === 0 ? null : '\u00a0'}
-                <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
+									<Link
+										to={`/p/${subplebbit.address}`}
+										key={`a-${subplebbit.address}`}
+										onClick={() => {
 											setSelectedTitle(subplebbit.title);
 											setSelectedAddress(subplebbit.address);
 										}}
-                >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+									>
-                {index !== defaultSubplebbits.length - 1 ? " /" : null}
+										{subplebbit.title ? subplebbit.title : subplebbit.address}
+									</Link>
+									{index !== defaultSubplebbits.length - 1 ? ' /' : null}
 								</span>
 							))}
-            <span className="nav">
+							<span className='nav'>
 								[
-              <span id="button-span" style={{cursor: 'pointer'}} onClick={
+								<span
-              () => {
+									id='button-span'
-                window.electron && window.electron.isElectron ? (
+									style={{ cursor: 'pointer' }}
-                  setIsCreateBoardOpen(true)
+									onClick={() => {
-                ) : (
+										window.electron && window.electron.isElectron
-                  alert(
+											? setIsCreateBoardOpen(true)
-                    'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
+											: alert(
-                  )
+													'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
-                )
+											  );
-              }
+									}}
-              }>Create Board</span>
+								>
-              ]
+									Create Board
-                [
+								</span>
-                <Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+								] [
-                ]
+								<Link to={`/p/${selectedAddress}/rules/settings`} onClick={() => setIsSettingsOpen(true)}>
-                [
+									Settings
-                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+								</Link>
-                )}>Home</Link>
+								] [
+								<Link to='/' onClick={() => handleStyleChange({ target: { value: 'Yotsuba' } })}>
+									Home
+								</Link>
 								]
 							</span>
 						</>
 					</NavBar>
-          <div id="version">
+					<div id='version'>
-            plebchan v{version}{commitRef}. GPL-2.0
+						plebchan v{version}
+						{commitRef}. GPL-2.0
 					</div>
-          <div className="footer-links"
+					<div
+						className='footer-links'
 						style={{
-              textAlign: "center",
+							textAlign: 'center',
-              fontSize: "x-small",
+							fontSize: 'x-small',
-              fontFamily: "arial",
+							fontFamily: 'arial',
-              marginTop: "5px",
+							marginTop: '5px',
-              marginBottom: "15px",
+							marginBottom: '15px',
-            }}>
+						}}
-            <a style={{textDecoration: 'underline'}} href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+					>
+						<a style={{ textDecoration: 'underline' }} href='https://plebbit.com' target='_blank' rel='noopener noreferrer'>
+							About
+						</a>
 						&nbsp;•&nbsp;
-            <a style={{textDecoration: 'underline'}} href="https://github.com/plebbit/plebchan/releases/latest" target="_blank" rel="noopener noreferrer">App</a>
+						<a style={{ textDecoration: 'underline' }} href='https://github.com/plebbit/plebchan/releases/latest' target='_blank' rel='noopener noreferrer'>
+							App
+						</a>
 						&nbsp;•&nbsp;
-            <a style={{textDecoration: 'underline'}} href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
+						<a style={{ textDecoration: 'underline' }} href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
+							Twitter
+						</a>
 						&nbsp;•&nbsp;
-            <a style={{textDecoration: 'underline'}} href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+						<a style={{ textDecoration: 'underline' }} href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
+							Telegram
+						</a>
 					</div>
 				</Footer>
 			</Container>
 		</>
 	);
-}
+};
 
 export default Rules;