From e7213b127d33bcde48ba5d0fe90b50f3f79b261a Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 26 Oct 2024 07:20:56 +0200
Subject: [PATCH] linting

---
 .../src/lib/custom-script-runner.tsx          | 272 +++++++++---------
 .../scriptrunner/src/lib/script-runner-ui.tsx |   6 +-
 libs/remix-ui/scriptrunner/src/types/index.ts |  12 +-
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx  |  28 +-
 4 files changed, 156 insertions(+), 162 deletions(-)

diff --git a/libs/remix-ui/scriptrunner/src/lib/custom-script-runner.tsx b/libs/remix-ui/scriptrunner/src/lib/custom-script-runner.tsx
index 8846d973f7..be0959bd5b 100644
--- a/libs/remix-ui/scriptrunner/src/lib/custom-script-runner.tsx
+++ b/libs/remix-ui/scriptrunner/src/lib/custom-script-runner.tsx
@@ -4,7 +4,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faToggleOff, faToggleOn, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { CustomTooltip } from "@remix-ui/helper";
 
-
 export interface ScriptRunnerUIProps {
     publishedConfigurations: ProjectConfiguration[];
     openCustomConfig: () => any;
@@ -14,157 +13,156 @@ export interface ScriptRunnerUIProps {
 }
 
 export const CustomScriptRunner = (props: ScriptRunnerUIProps) => {
-    const [dependencies, setDependencies] = useState<Dependency[]>([]);
-    const [name, setName] = useState<string>('');
-    const [alias, setAlias] = useState<string>('');
-    const [version, setVersion] = useState<string>('');
-    const [baseConfig, setBaseConfig] = useState<string>('default');
-    const [loading, setLoading] = useState<boolean>(false);
-    const [useRequire, setUseRequire] = useState<boolean>(false)
-
-    const { customConfig } = props;
+  const [dependencies, setDependencies] = useState<Dependency[]>([]);
+  const [name, setName] = useState<string>('');
+  const [alias, setAlias] = useState<string>('');
+  const [version, setVersion] = useState<string>('');
+  const [baseConfig, setBaseConfig] = useState<string>('default');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [useRequire, setUseRequire] = useState<boolean>(false)
 
-    useEffect(() => {
-        if(!customConfig) return;
-        setDependencies(customConfig.dependencies);
-        setBaseConfig(customConfig.baseConfiguration);
-    },[customConfig])
+  const { customConfig } = props;
 
-    const handleAddDependency = () => {
-        if (name.trim() && version.trim()) {
-            const newDependency: Dependency = { name, version, require: useRequire, alias };
-            setDependencies([...dependencies, newDependency]);
-            setName('');
-            setVersion('');
-        } else {
-            alert('Please fill out both name and version.');
-        }
-    };
+  useEffect(() => {
+    if (!customConfig) return;
+    setDependencies(customConfig.dependencies);
+    setBaseConfig(customConfig.baseConfiguration);
+  },[customConfig])
 
-    const handleRemoveDependency = (index: number) => {
-        const updatedDependencies = dependencies.filter((_, i) => i !== index);
-        setDependencies(updatedDependencies);
-    };
+  const handleAddDependency = () => {
+    if (name.trim() && version.trim()) {
+      const newDependency: Dependency = { name, version, require: useRequire, alias };
+      setDependencies([...dependencies, newDependency]);
+      setName('');
+      setVersion('');
+    } else {
+      alert('Please fill out both name and version.');
+    }
+  };
 
+  const handleRemoveDependency = (index: number) => {
+    const updatedDependencies = dependencies.filter((_, i) => i !== index);
+    setDependencies(updatedDependencies);
+  };
 
-    const handleSaveToFile = () => {
-        const fileData = JSON.stringify(dependencies, null, 2);
-        console.log(fileData, baseConfig);
-        const customConfig: customScriptRunnerConfig = { baseConfiguration: baseConfig, dependencies };
-        console.log(customConfig);
-        props.saveCustomConfig(customConfig);
-    };
+  const handleSaveToFile = () => {
+    const fileData = JSON.stringify(dependencies, null, 2);
+    console.log(fileData, baseConfig);
+    const customConfig: customScriptRunnerConfig = { baseConfiguration: baseConfig, dependencies };
+    console.log(customConfig);
+    props.saveCustomConfig(customConfig);
+  };
 
-    const openConfig = async () => {
-        const fileData: customScriptRunnerConfig = await props.openCustomConfig();
-    }
+  const openConfig = async () => {
+    const fileData: customScriptRunnerConfig = await props.openCustomConfig();
+  }
 
-    const activateCustomConfig = async () => {
-        const customConfig: customScriptRunnerConfig = { baseConfiguration: baseConfig, dependencies };
-        setLoading(true);
-        try {
-            await props.activateCustomScriptRunner(customConfig);
-        } catch (e) {
-            console.log(e)
-        } finally {
-            setLoading(false);
-        }
+  const activateCustomConfig = async () => {
+    const customConfig: customScriptRunnerConfig = { baseConfiguration: baseConfig, dependencies };
+    setLoading(true);
+    try {
+      await props.activateCustomScriptRunner(customConfig);
+    } catch (e) {
+      console.log(e)
+    } finally {
+      setLoading(false);
     }
+  }
 
-    const onSelectBaseConfig = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        setBaseConfig(e.target.value);
-    }
+  const onSelectBaseConfig = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setBaseConfig(e.target.value);
+  }
 
-    const toggleRequire = () => {
-        setUseRequire((prev) => !prev)
-    }
+  const toggleRequire = () => {
+    setUseRequire((prev) => !prev)
+  }
 
-    if (loading) {
-        return <div style={{ padding: '20px', maxWidth: '400px', margin: 'auto' }}>
-            <div className="text-center py-5">
-                <i className="fas fa-spinner fa-pulse fa-2x"></i>
-            </div>
-        </div>
-    }
+  if (loading) {
+    return <div style={{ padding: '20px', maxWidth: '400px', margin: 'auto' }}>
+      <div className="text-center py-5">
+        <i className="fas fa-spinner fa-pulse fa-2x"></i>
+      </div>
+    </div>
+  }
 
-    return (
-        <div style={{ padding: '20px', maxWidth: '400px', margin: 'auto' }}>
-            <h5>Custom configuration</h5>
-            <label>Select a base configuration</label>
-            <select value={baseConfig} className="form-control" onChange={onSelectBaseConfig} style={{ marginBottom: '10px' }}>
-                <option value="none">Select a base configuration</option>
-                {props.publishedConfigurations.map((config: ProjectConfiguration, index) => (
-                    <option key={index} value={config.name}>
-                        {config.name}
-                    </option>
-                ))}
-            </select>
-            <label>Add dependencies</label>
-            <div style={{ marginBottom: '10px' }}>
-                <input
-                    type="text"
-                    placeholder="Dependency Name"
-                    value={name}
-                    className="form-control"
-                    onChange={(e) => setName(e.target.value)}
-                    style={{ marginRight: '10px' }}
-                />
-                <input
-                    type="text"
-                    placeholder="Alias"
-                    className="form-control mt-1"
-                    value={alias}
-                    onChange={(e) => setAlias(e.target.value)} />
-                <input
-                    type="text"
-                    placeholder="Version"
-                    className="form-control mt-1"
-                    value={version}
-                    onChange={(e) => setVersion(e.target.value)}
-                />
-                <CustomTooltip
-                    placement="bottom"
-                    tooltipText="use require when the module doesn't support import statements"
-                >
-                    <div>
-                        <label className="pr-2 pt-2">Use 'require':</label>
-                        <FontAwesomeIcon className={useRequire ? 'text-success' : ''} onClick={toggleRequire} icon={useRequire ? faToggleOn : faToggleOff}></FontAwesomeIcon>
-                    </div>
-                </CustomTooltip>
-                <button
-                    className="btn btn-primary w-100 mt-1"
-                    onClick={handleAddDependency}>
+  return (
+    <div style={{ padding: '20px', maxWidth: '400px', margin: 'auto' }}>
+      <h5>Custom configuration</h5>
+      <label>Select a base configuration</label>
+      <select value={baseConfig} className="form-control" onChange={onSelectBaseConfig} style={{ marginBottom: '10px' }}>
+        <option value="none">Select a base configuration</option>
+        {props.publishedConfigurations.map((config: ProjectConfiguration, index) => (
+          <option key={index} value={config.name}>
+            {config.name}
+          </option>
+        ))}
+      </select>
+      <label>Add dependencies</label>
+      <div style={{ marginBottom: '10px' }}>
+        <input
+          type="text"
+          placeholder="Dependency Name"
+          value={name}
+          className="form-control"
+          onChange={(e) => setName(e.target.value)}
+          style={{ marginRight: '10px' }}
+        />
+        <input
+          type="text"
+          placeholder="Alias"
+          className="form-control mt-1"
+          value={alias}
+          onChange={(e) => setAlias(e.target.value)} />
+        <input
+          type="text"
+          placeholder="Version"
+          className="form-control mt-1"
+          value={version}
+          onChange={(e) => setVersion(e.target.value)}
+        />
+        <CustomTooltip
+          placement="bottom"
+          tooltipText="use require when the module doesn't support import statements"
+        >
+          <div>
+            <label className="pr-2 pt-2">Use 'require':</label>
+            <FontAwesomeIcon className={useRequire ? 'text-success' : ''} onClick={toggleRequire} icon={useRequire ? faToggleOn : faToggleOff}></FontAwesomeIcon>
+          </div>
+        </CustomTooltip>
+        <button
+          className="btn btn-primary w-100 mt-1"
+          onClick={handleAddDependency}>
                     Add
-                </button>
+        </button>
+      </div>
+      <ul>
+        {dependencies.map((dependency, index) => (
+          <li key={index} style={{ marginBottom: '5px' }}>
+            <div className="d-flex align-items-baseline justify-content-between">
+              {dependency.name} - {dependency.version}
+              <button
+                onClick={() => handleRemoveDependency(index)}
+                className="btn btn-danger"
+                style={{ marginLeft: '10px' }}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+              </button>
             </div>
-            <ul>
-                {dependencies.map((dependency, index) => (
-                    <li key={index} style={{ marginBottom: '5px' }}>
-                        <div className="d-flex align-items-baseline justify-content-between">
-                            {dependency.name} - {dependency.version}
-                            <button
-                                onClick={() => handleRemoveDependency(index)}
-                                className="btn btn-danger"
-                                style={{ marginLeft: '10px' }}
-                            >
-                                <FontAwesomeIcon icon={faTrash} />
-                            </button>
-                        </div>
-                    </li>
-                ))}
-            </ul>
-            {dependencies.length > 0 && (
-                <button className="btn btn-primary w-100" onClick={handleSaveToFile} style={{ marginTop: '20px' }}>
+          </li>
+        ))}
+      </ul>
+      {dependencies.length > 0 && (
+        <button className="btn btn-primary w-100" onClick={handleSaveToFile} style={{ marginTop: '20px' }}>
                     Save config
-                </button>
-            )}
-            <button className="btn btn-primary w-100" onClick={openConfig} style={{ marginTop: '20px' }}>
+        </button>
+      )}
+      <button className="btn btn-primary w-100" onClick={openConfig} style={{ marginTop: '20px' }}>
                 Open config
-            </button>
-            {dependencies.length > 0 && (
-                <button className="btn btn-success w-100" onClick={activateCustomConfig} style={{ marginTop: '20px' }}>
+      </button>
+      {dependencies.length > 0 && (
+        <button className="btn btn-success w-100" onClick={activateCustomConfig} style={{ marginTop: '20px' }}>
                     Activate
-                </button>)}
-        </div>
-    );
+        </button>)}
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/libs/remix-ui/scriptrunner/src/lib/script-runner-ui.tsx b/libs/remix-ui/scriptrunner/src/lib/script-runner-ui.tsx
index 03043180ab..52692be16f 100644
--- a/libs/remix-ui/scriptrunner/src/lib/script-runner-ui.tsx
+++ b/libs/remix-ui/scriptrunner/src/lib/script-runner-ui.tsx
@@ -22,7 +22,7 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
   const [activeKey, setActiveKey] = useState('default');
 
   useEffect(() => {
-    if(activeConfig) {
+    if (activeConfig) {
       setActiveKey(activeConfig.name)
     }
   },[activeConfig])
@@ -31,8 +31,6 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
     return <div>Loading...</div>;
   }
 
-
-
   return (
     <div className="px-1">
       <Accordion activeKey={activeKey} defaultActiveKey="default">
@@ -78,7 +76,6 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
               </div>
             </div>
 
-
             <Accordion.Collapse className="px-4" eventKey={config.name}>
               <>
                 <p><strong>Description: </strong>{config.description}</p>
@@ -104,4 +101,3 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
   );
 };
 
-
diff --git a/libs/remix-ui/scriptrunner/src/types/index.ts b/libs/remix-ui/scriptrunner/src/types/index.ts
index 99e453bd37..d675fa2084 100644
--- a/libs/remix-ui/scriptrunner/src/types/index.ts
+++ b/libs/remix-ui/scriptrunner/src/types/index.ts
@@ -8,12 +8,12 @@ export interface Dependency {
     require: boolean;
     windowImport?: boolean;
   }
-  
-  export interface Replacements {
+
+export interface Replacements {
     [key: string]: string;
   }
-  
-  export interface ProjectConfiguration {
+
+export interface ProjectConfiguration {
     name: string;
     publish: boolean;
     description: string;
@@ -25,12 +25,12 @@ export interface Dependency {
     isLoading: boolean;
   }
 
-  export interface customScriptRunnerConfig {
+export interface customScriptRunnerConfig {
     baseConfiguration: string;
     dependencies: Dependency[];
   }
 
-  export interface ScriptRunnerConfig {
+export interface ScriptRunnerConfig {
     defaultConfig: string,
     customConfig: customScriptRunnerConfig
   }
diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
index 7572db392c..53d4b17f2e 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
@@ -51,19 +51,19 @@ const initialTabsState: ITabsState = {
 
 const tabsReducer = (state: ITabsState, action: ITabsAction) => {
   switch (action.type) {
-    case 'SELECT_INDEX':
-      return {
-        ...state,
-        currentExt: action.ext,
-        selectedIndex: action.payload
-      }
-    case 'SET_FILE_DECORATIONS':
-      return {
-        ...state,
-        fileDecorations: action.payload as fileDecoration[]
-      }
-    default:
-      return state
+  case 'SELECT_INDEX':
+    return {
+      ...state,
+      currentExt: action.ext,
+      selectedIndex: action.payload
+    }
+  case 'SET_FILE_DECORATIONS':
+    return {
+      ...state,
+      fileDecorations: action.payload as fileDecoration[]
+    }
+  default:
+    return state
   }
 }
 
@@ -241,7 +241,7 @@ export const TabsUI = (props: TabsUIProps) => {
                 onClick={async () => {
                   props.plugin.call('menuicons', 'select', 'scriptRunnerBridge')
                 }}
-                >
+              >
                 <i className="fas fa-cogs"></i>
               </button></CustomTooltip>
           }