refactoring and formatting

src/components/Checkbox/index.tsx

@@ -4,27 +4,41 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from "react"
 
-function Checkbox({ label, id, checked, onChange, disabled, arrangement, orientation }:
-        {
-            disabled?: boolean,
-            label: string,
-            id: string,
-            arrangement?: "vertical" | "horizontal",
-            orientation?: "first" | "last",
-            checked: boolean,
-            onChange: (val: boolean) => void
-        }) {
-    const elements = [
-        <label htmlFor={id} key={0} className="px-1 enabled:cursor-pointer enabled:hover:text-blue-600 ">{label}</label>,
-        <input id={id} type="checkbox" checked={checked} disabled={disabled} key={1} onChange={(e) => {
-            onChange(e.target.checked)
-        }} />
-    ]
-    return <div className="m-1 flex items-center cursor-pointer disabled:opacity-50 disabled:pointer-events-none">
-        {orientation === "last" ? elements : elements.reverse()}
+function Checkbox({
+  label,
+  checked,
+  onChange,
+  disabled = false,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (val: boolean) => void;
+  disabled: boolean;
+}) {
+  const elements = [
+    <input
+      id={label}
+      type="checkbox"
+      checked={checked}
+      disabled={disabled}
+      key={label}
+      onChange={(e) => {
+        onChange(e.target.checked);
+      }}
+    />,
+    <label
+      htmlFor={label}
+      key={label}
+      className="px-1 enabled:cursor-pointer enabled:hover:text-blue-600 ">
+      {label}
+    </label>,
+  ];
+  return (
+    <div className="m-1 flex cursor-pointer items-center disabled:pointer-events-none disabled:opacity-50">
+      {elements}
     </div>
+  );
 }
 
-export default Checkbox
+export default Checkbox;

src/components/Grid/Grid.tsx

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { ReactNode } from "react"
+import { ReactNode } from "react"
 import styles from  './styles.module.css';
 
 interface IGrid {

src/components/GridBlock/GridBlock.tsx

@@ -4,13 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { ReactNode } from "react"
+import { ReactNode } from "react"
 import styles from  './styles.module.css';
 
 interface IGridBlock {
   children: ReactNode | ReactNode[]
-  symbol?: string
-  title?: string
+  symbol: string
+  title: string
 }
 
 function GridBlock({ children, symbol, title }: IGridBlock) {

src/components/ProtectButton/index.tsx

@@ -53,13 +53,11 @@ export const generateRpcUrl = ({
   const rpcUrl = new URL(protectUrl);
 
   if (hints) {
-    Object.entries(hints).forEach(
-      ([hintName, hintEnabled]) => {
-        if (hintEnabled) {
-          rpcUrl.searchParams.append('hint', hintName.toLowerCase());
-        }
-      },
-    );
+    Object.entries(hints).forEach(([hintName, hintEnabled]) => {
+      if (hintEnabled) {
+        rpcUrl.searchParams.append('hint', hintName.toLowerCase());
+      }
+    });
   }
 
   if (fast) {
@@ -135,13 +133,15 @@ function FlashbotsProtectButton(options: ProtectButtonOptions) {
           <path fill-rule="evenodd" d="M19.902 4.098a3.75 3.75 0 00-5.304 0l-4.5 4.5a3.75 3.75 0 001.035 6.037.75.75 0 01-.646 1.353 5.25 5.25 0 01-1.449-8.45l4.5-4.5a5.25 5.25 0 117.424 7.424l-1.757 1.757a.75.75 0 11-1.06-1.06l1.757-1.757a3.75 3.75 0 000-5.304zm-7.389 4.267a.75.75 0 011-.353 5.25 5.25 0 011.449 8.45l-4.5 4.5a5.25 5.25 0 11-7.424-7.424l1.757-1.757a.75.75 0 111.06 1.06l-1.757 1.757a3.75 3.75 0 105.304 5.304l4.5-4.5a3.75 3.75 0 00-1.035-6.037.75.75 0 01-.354-1z" clip-rule="evenodd" />
         </svg>
         <div>
-          <p className='m-0 text-sm font-bold'>RPC URL</p>
-          <p className='m-0 text-sm text-gray-700 break-words'>{rpcUrl.toString()}</p>
+          <p className="m-0 text-sm font-bold">RPC URL</p>
+          <p className="m-0 break-all text-sm text-gray-700">
+            {rpcUrl.toString()}
+          </p>
         </div>
       </div>
       <button
         type="button"
-        className="min-w-full h-10 px-4 py-2 cursor-pointer inline-flex items-center justify-center whitespace-nowrap border-none rounded-md text-base font-bold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 bg-gray-950 text-white hover:bg-gray-700"
+        className="ring-offset-background focus-visible:ring-ring inline-flex h-10 min-w-full cursor-pointer items-center justify-center whitespace-nowrap rounded-md border-none bg-gray-950 px-4 py-2 text-base font-bold text-white transition-colors hover:bg-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
         onClick={() => connectToProtect()}>
         {children}
       </button>

src/components/ProtectButtonSelector/BuilderOptions.tsx

@@ -21,8 +21,6 @@ function BuilderOptions({ supportedBuilders, buildersSelection, fastMode, setBui
         {supportedBuilders.map((builder: string) => (
           <Checkbox
             label={builder}
-            id={`builder_${builder}`}
-            key={builder}
             checked={buildersSelection[builder] || fastMode}
             disabled={fastMode === true}
             onChange={() => setBuilder(builder)}

src/components/ProtectButtonSelector/FastOptionCheckbox.tsx

@@ -5,28 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 import * as Switch from '@radix-ui/react-switch';
-import styles from './styles.module.css';
 
 interface FastOptionCheckboxProps {
   fastMode: boolean;
   setFastMode: (value: boolean) => void;
 }
 
-function FastOptionCheckbox({ fastMode, setFastMode }: FastOptionCheckboxProps) {
+function FastOptionCheckbox({fastMode, setFastMode}: FastOptionCheckboxProps) {
   return (
-    <div className="p-3 flex items-start gap-2 border-solid rounded-md border-slate-200">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 mt-0.5 min-w-[16px]">
-        <path fillRule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clipRule="evenodd" />
+    <div className="flex items-start gap-2 rounded-md border-solid border-slate-200 p-3">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="mt-0.5 w-4 min-w-[16px]">
+        <path
+          fillRule="evenodd"
+          d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z"
+          clipRule="evenodd"
+        />
       </svg>
       <div>
-        <p className='m-0 text-sm font-bold grow'>Fast mode</p>
-        <p className='m-0 text-sm text-gray-700'>Send to more builders and give validators a larger tip.</p>
+        <p className="m-0 grow text-sm font-bold">Fast mode</p>
+        <p className="m-0 text-sm text-gray-700">
+          Send to more builders and give validators a larger tip.
+        </p>
       </div>
-      <Switch.Root 
-        id="fast" 
+      <Switch.Root
+        id="fast"
         checked={fastMode}
         onCheckedChange={setFastMode}
-        className="peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-950 data-[state=unchecked]:bg-gray-300">
+        className="focus-visible:ring-ring focus-visible:ring-offset-background peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-950 data-[state=unchecked]:bg-gray-300">
         <Switch.Thumb className="pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-[-5.5px]" />
       </Switch.Root>
     </div>

src/components/ProtectButtonSelector/MevShareHints.tsx

@@ -15,29 +15,31 @@ interface MevShareHintsProps {
   onSetHashOnly: (val: boolean) => void;
 }
 
-function MevShareHints({ hintLabels, hints, hashOnly, setHint, onSetHashOnly }: MevShareHintsProps) {
+function MevShareHints({
+  hintLabels,
+  hints,
+  hashOnly,
+  setHint,
+  onSetHashOnly,
+}: MevShareHintsProps) {
   return (
     <div>
-      <p className='text-sm font-bold m-2'>MEV-Share Hints</p>
+      <p className="m-2 text-sm font-bold">MEV-Share Hints</p>
       <div className="grid grid-cols-2">
         {hintLabels.map((label) => (
           <Checkbox
             label={capitalCase(label)}
-            id={label.toLowerCase()}
-            key={label}
             checked={hints[label] || false}
             onChange={(value) => setHint(label, value)}
           />
         ))}
         <Checkbox
-          label='Hash Only'
-          id='hash_only'
-          key='hash_only'
+          label="Hash Only"
           checked={hashOnly}
           onChange={onSetHashOnly}
         />
       </div>
-      <hr className='my-3 mx-2 opacity-50' />
+      <hr className="mx-2 my-3 opacity-50" />
     </div>
   );
 }

src/components/ProtectButtonSelector/index.tsx

@@ -5,14 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import {useState} from 'react';
+import FlashbotsLogo from '@site/static/img/flashbots-logo.svg';
 import FlashbotsProtectButton from '../ProtectButton';
 import SimpleDropdown from '../SimpleDropdown';
 import BuilderOptions from './BuilderOptions';
 import {useSupportedBuilders} from '../mev-share/useSupportedBuilders';
 import FastOptionCheckbox from './FastOptionCheckbox';
 import MevShareHints from './MevShareHints';
-import FlashbotsLogo from '/static/img/flashbots-logo.svg';
-
 
 const hintLabels = [
   'calldata',
@@ -74,19 +73,20 @@ export default function ProtectButtonSelector() {
   };
 
   return (
-    <div className="bg-gray-50 text-gray-950 p-2 max-w-md mx-auto border border-solid border-slate-200 rounded-2xl">
+    <div className="mx-auto max-w-md rounded-2xl border border-solid border-slate-200 bg-gray-50 p-2 text-gray-950">
       <SimpleDropdown
         header="Advanced options"
         onClickHeader={() => {
           setAdvancedOptionsShown(!advancedOptionsShown);
         }}
         isOpen={advancedOptionsShown}>
-
         <SimpleDropdown.Body>
-          <div className="bg-white flex flex-col gap-2 p-4 mb-2 border-solid border-slate-200 rounded-xl">
-            <div className='flex mb-3'>
-              <p className='font-bold text-2xl m-0 grow'>Flashbots Protect RPC</p>
-              <FlashbotsLogo className='mx-1' />
+          <div className="mb-2 flex flex-col gap-2 rounded-xl border-solid border-slate-200 bg-white p-4">
+            <div className="mb-3 flex">
+              <p className="m-0 grow text-2xl font-bold">
+                Flashbots Protect RPC
+              </p>
+              <FlashbotsLogo className="mx-1" />
             </div>
             <FastOptionCheckbox fastMode={fastMode} setFastMode={setFastMode} />
             <FlashbotsProtectButton

src/components/SimpleDropdown/index.tsx

@@ -4,55 +4,77 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { Children, PropsWithChildren } from 'react'
-import styles from './styles.module.css'
+import {Children, PropsWithChildren} from 'react';
+import styles from './styles.module.css';
 
 type SimpleDropdownParams = {
-    header: string,
-    italicHeader?: boolean,
-    onClickHeader?: () => void,
-    isOpen: boolean,
-}
+  header: string;
+  italicHeader?: boolean;
+  onClickHeader?: () => void;
+  isOpen: boolean;
+};
 
-function SimpleDropdown({ children, header, italicHeader, onClickHeader, isOpen }: PropsWithChildren<SimpleDropdownParams>) {
-    const useItalic = italicHeader !== false // default to true
-    const subComponentList = Object.keys(SimpleDropdown)
+function SimpleDropdown({
+  children,
+  header,
+  italicHeader,
+  onClickHeader,
+  isOpen,
+}: PropsWithChildren<SimpleDropdownParams>) {
+  const useItalic = italicHeader !== false; // default to true
+  const subComponentList = Object.keys(SimpleDropdown);
 
-    const subComponents = subComponentList.map((key) => Children.map(children, (child: any) => child.type({}).key === key ? child : null))
+  const subComponents = subComponentList.map((key) =>
+    Children.map(children, (child: any) =>
+      child.type({}).key === key ? child : null,
+    ),
+  );
 
-    return (
-        <div className='dropdown-container'>
-            {subComponents[0]}
-            <details open={isOpen}>
-                <summary
-                    className="cursor-pointer text-gray-600 pl-1"
-                    onClick={(event) => {
-                        event.preventDefault();
-                        onClickHeader();
-                    }}
-                >
-                    {useItalic ? <em>{header}</em> : header}
-                </summary>
-                {subComponents[1]}
-            </details>
-        </div>
-    )
+  return (
+    <div className="dropdown-container">
+      {subComponents[0]}
+      <details open={isOpen}>
+        <summary
+          role="button"
+          tabIndex={0}
+          className="cursor-pointer pl-1 text-gray-600"
+          onClick={(event) => {
+            event.preventDefault();
+            onClickHeader();
+          }}
+          onKeyDown={(event) => {
+            // Enter or Space key
+            if (event.keyCode === 13 || event.keyCode === 32) {
+              event.preventDefault();
+              onClickHeader();
+            }
+          }}>
+          {useItalic ? <em>{header}</em> : header}
+        </summary>
+        {subComponents[1]}
+      </details>
+    </div>
+  );
 }
 
 function Body(props) {
-    return (<div key='Body' className={styles.dropdownBody}>
-        <div>
-            {props.children}
-        </div>
-    </div>)
+  return (
+    <div key="Body" className={styles.dropdownBody}>
+      <div>{props.children}</div>
+    </div>
+  );
 }
-SimpleDropdown.Body = Body
+SimpleDropdown.Body = Body;
 
-function HiddenBody({ children }) {
-    return (
-        <div key='HiddenBody' className="p-2 border-solid border-slate-200/75 rounded-xl">{children}</div>
-    )
+function HiddenBody({children}) {
+  return (
+    <div
+      key="HiddenBody"
+      className="rounded-xl border-solid border-slate-200/75 p-2">
+      {children}
+    </div>
+  );
 }
-SimpleDropdown.HiddenBody = HiddenBody
+SimpleDropdown.HiddenBody = HiddenBody;
 
-export default SimpleDropdown
+export default SimpleDropdown;