From 27a80fad88eb956e361001084975ef9d25d24b21 Mon Sep 17 00:00:00 2001
From: haishan <haishanhan@gmail.com>
Date: Mon, 18 Sep 2023 22:39:03 +0800
Subject: [PATCH] Run prettier

---
 src/api/connections.ts                      |  10 +-
 src/api/logs.ts                             |   2 +-
 src/api/proxies.ts                          |   6 +-
 src/api/rules.ts                            |   2 +-
 src/api/traffic.ts                          |  15 ++-
 src/api/version.ts                          |   2 +-
 src/app.tsx                                 |   2 +-
 src/components/APIConfig.tsx                |   2 +-
 src/components/APIDiscovery.tsx             |  12 +-
 src/components/BackendList.tsx              |   4 +-
 src/components/Button.tsx                   |   4 +-
 src/components/CollapsibleSectionHeader.tsx |   2 +-
 src/components/Config.tsx                   |  24 ++--
 src/components/ConnectionTable.module.scss  |   4 +-
 src/components/ConnectionTable.tsx          | 134 ++++++++++----------
 src/components/Connections.tsx              |  30 ++---
 src/components/Input.tsx                    |   2 +-
 src/components/Logs.tsx                     |  14 +-
 src/components/ModalCloseAllConnections.tsx |  12 +-
 src/components/Search.tsx                   |  14 +-
 src/components/StateProvider.tsx            |  14 +-
 src/components/SwitchThemed.tsx             |   7 +-
 src/components/ToggleSwitch.tsx             |   2 +-
 src/components/TrafficChart.tsx             |  10 +-
 src/components/TrafficChartSample.tsx       |   2 +-
 src/components/TrafficNow.tsx               |   4 +-
 src/components/about/About.tsx              |   2 +-
 src/components/proxies/Proxy.tsx            |  14 +-
 src/components/proxies/ProxyGroup.tsx       |   2 +-
 src/components/proxies/ProxyPageFab.tsx     |   2 +-
 src/components/proxies/Settings.tsx         |   5 +-
 src/components/proxies/hooks.tsx            |  15 +--
 src/components/proxies/proxies.hooks.tsx    |   2 +-
 src/components/rules/rules.hooks.tsx        |  10 +-
 src/components/shared/BaseModal.module.scss |   4 +-
 src/components/shared/BaseModal.tsx         |  12 +-
 src/components/shared/Basic.tsx             |   5 +-
 src/components/shared/ThemeSwitcher.tsx     |   5 +-
 src/hooks/useLineChart.ts                   |   2 +-
 src/hooks/useRemainingViewPortHeight.ts     |   2 +-
 src/hooks/useTextInput.ts                   |   4 +-
 src/misc/chart-lib.ts                       |   2 +-
 src/misc/errors.ts                          |   5 +-
 src/misc/i18n.ts                            |   2 +-
 src/misc/storage.ts                         |   2 +-
 src/store/app.ts                            |   4 +-
 src/store/configs.ts                        |   4 +-
 src/store/logs.ts                           |   2 +-
 src/store/proxies.tsx                       |   8 +-
 src/store/types.ts                          |   6 +-
 src/sw.ts                                   |   4 +-
 src/swRegistration.ts                       |   4 +-
 52 files changed, 268 insertions(+), 197 deletions(-)

diff --git a/src/api/connections.ts b/src/api/connections.ts
index 5ac27b909..89289c57c 100644
--- a/src/api/connections.ts
+++ b/src/api/connections.ts
@@ -61,8 +61,14 @@ export function fetchData(apiConfig: ClashAPIConfig, listener: unknown): Unsubsc
   const ws = new WebSocket(url);
 
   let frozenState = false;
-  const onFrozen = () => { frozenState = true; ws.close(); },
-    onResume = () => { frozenState = false; fetchData(apiConfig, undefined); };
+  const onFrozen = () => {
+      frozenState = true;
+      ws.close();
+    },
+    onResume = () => {
+      frozenState = false;
+      fetchData(apiConfig, undefined);
+    };
   document.addEventListener('freeze', onFrozen, { capture: true, once: true });
   document.addEventListener('resume', onResume, { capture: true, once: true });
 
diff --git a/src/api/logs.ts b/src/api/logs.ts
index 044a31b1a..a0daee159 100644
--- a/src/api/logs.ts
+++ b/src/api/logs.ts
@@ -146,6 +146,6 @@ function fetchLogsWithFetch(apiConfig: LogsAPIConfig, appendLog: AppendLogFn) {
 
       // eslint-disable-next-line no-console
       console.log('GET /logs error:', err.message);
-    }
+    },
   );
 }
diff --git a/src/api/proxies.ts b/src/api/proxies.ts
index 1fa5acc3b..34f407a49 100644
--- a/src/api/proxies.ts
+++ b/src/api/proxies.ts
@@ -25,7 +25,7 @@ export async function fetchProxies(config: ClashAPIConfig) {
 export async function requestToSwitchProxy(
   apiConfig: ClashAPIConfig,
   groupName: string,
-  name: string
+  name: string,
 ) {
   const body = { name };
   const { url, init } = getURLAndInit(apiConfig);
@@ -41,7 +41,7 @@ export async function requestToSwitchProxy(
 export async function requestDelayForProxy(
   apiConfig: ClashAPIConfig,
   name: string,
-  latencyTestUrl = 'http://www.gstatic.com/generate_204'
+  latencyTestUrl = 'http://www.gstatic.com/generate_204',
 ) {
   const { url, init } = getURLAndInit(apiConfig);
   const qs = `timeout=5000&url=${encodeURIComponent(latencyTestUrl)}`;
@@ -69,6 +69,6 @@ export async function healthcheckProviderByName(config: ClashAPIConfig, name: st
   const options = { ...init, method: 'GET' };
   return await fetch(
     url + '/providers/proxies/' + encodeURIComponent(name) + '/healthcheck',
-    options
+    options,
   );
 }
diff --git a/src/api/rules.ts b/src/api/rules.ts
index 4d18c2376..cfe1b07fe 100644
--- a/src/api/rules.ts
+++ b/src/api/rules.ts
@@ -15,7 +15,7 @@ type RuleAPIItem = {
 function normalizeAPIResponse(json: { rules: Array<RuleAPIItem> }): Array<RuleItem> {
   invariant(
     json.rules && json.rules.length >= 0,
-    'there is no valid rules list in the rules API response'
+    'there is no valid rules list in the rules API response',
   );
 
   // attach an id
diff --git a/src/api/traffic.ts b/src/api/traffic.ts
index 0f2f79564..b8a827516 100644
--- a/src/api/traffic.ts
+++ b/src/api/traffic.ts
@@ -7,7 +7,7 @@ const textDecoder = new TextDecoder('utf-8');
 
 const Size = 150;
 
-type Traffic = { up: number; down: number }
+type Traffic = { up: number; down: number };
 
 const traffic = {
   labels: Array(Size).fill(0),
@@ -85,7 +85,10 @@ function fetchData(apiConfig: ClashAPIConfig) {
   const ws = new WebSocket(url);
 
   let frozenState = false;
-  const onFrozen = () => { frozenState = true; ws.close(); },
+  const onFrozen = () => {
+      frozenState = true;
+      ws.close();
+    },
     onResume = () => {
       frozenState = false;
 
@@ -99,10 +102,10 @@ function fetchData(apiConfig: ClashAPIConfig) {
   document.addEventListener('freeze', onFrozen, { capture: true, once: true });
   document.addEventListener('resume', onResume, { capture: true, once: true });
 
-  ws.addEventListener('error', function(_ev) {
+  ws.addEventListener('error', function (_ev) {
     wsState = 3;
   });
-  ws.addEventListener('close', function(_ev) {
+  ws.addEventListener('close', function (_ev) {
     wsState = 3;
     if (!frozenState) {
       // For unexpected close, remove listeners and re-fetch
@@ -112,7 +115,7 @@ function fetchData(apiConfig: ClashAPIConfig) {
       fetchDataWithFetch(apiConfig);
     }
   });
-  ws.addEventListener('message', function(event) {
+  ws.addEventListener('message', function (event) {
     parseAndAppend(event.data);
   });
   return traffic;
@@ -135,7 +138,7 @@ function fetchDataWithFetch(apiConfig: ClashAPIConfig) {
       // eslint-disable-next-line no-console
       console.log('fetch /traffic error', err);
       fetched = false;
-    }
+    },
   );
   return traffic;
 }
diff --git a/src/api/version.ts b/src/api/version.ts
index 78ceb834c..bbb3be456 100644
--- a/src/api/version.ts
+++ b/src/api/version.ts
@@ -8,7 +8,7 @@ type VersionData = {
 
 export async function fetchVersion(
   endpoint: string,
-  apiConfig: ClashAPIConfig
+  apiConfig: ClashAPIConfig,
 ): Promise<VersionData> {
   let json = {};
   try {
diff --git a/src/app.tsx b/src/app.tsx
index 65e6ed9d9..23b5c5fe7 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -43,7 +43,7 @@ Modal.setAppElement(rootEl);
 root.render(
   <React.StrictMode>
     <Root />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 
 setTimeout(() => {
diff --git a/src/components/APIConfig.tsx b/src/components/APIConfig.tsx
index 1761573df..521a82fe2 100644
--- a/src/components/APIConfig.tsx
+++ b/src/components/APIConfig.tsx
@@ -73,7 +73,7 @@ function APIConfig({ dispatch }: { dispatch: DispatchFn }) {
 
       onConfirm();
     },
-    [onConfirm]
+    [onConfirm],
   );
 
   const detectApiServer = async () => {
diff --git a/src/components/APIDiscovery.tsx b/src/components/APIDiscovery.tsx
index 42e78fd2b..3ed59e53f 100644
--- a/src/components/APIDiscovery.tsx
+++ b/src/components/APIDiscovery.tsx
@@ -15,10 +15,14 @@ import { connect } from './StateProvider';
 
 const { useCallback, useEffect } = React;
 
-function APIDiscovery({ dispatch, apiConfig, modals }: {
-  dispatch: DispatchFn,
-  apiConfig: ClashAPIConfig,
-  modals: StateModals,
+function APIDiscovery({
+  dispatch,
+  apiConfig,
+  modals,
+}: {
+  dispatch: DispatchFn;
+  apiConfig: ClashAPIConfig;
+  modals: StateModals;
 }) {
   if (!window.fetch) {
     const { detail } = errors[DOES_NOT_SUPPORT_FETCH];
diff --git a/src/components/BackendList.tsx b/src/components/BackendList.tsx
index 40b8dc828..26868fac0 100644
--- a/src/components/BackendList.tsx
+++ b/src/components/BackendList.tsx
@@ -34,13 +34,13 @@ function BackendListImpl({
     (conf: ClashAPIConfig) => {
       removeClashAPIConfig(conf);
     },
-    [removeClashAPIConfig]
+    [removeClashAPIConfig],
   );
   const onSelect = React.useCallback(
     (conf: ClashAPIConfig) => {
       selectClashAPIConfig(conf);
     },
-    [selectClashAPIConfig]
+    [selectClashAPIConfig],
   );
 
   return (
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 8125edc02..76e2cc5db 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -41,12 +41,12 @@ function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
       if (isLoading) return;
       onClick && onClick(e);
     },
-    [isLoading, onClick]
+    [isLoading, onClick],
   );
   const btnClassName = cx(
     s0.btn,
     { [s0.minimal]: kind === 'minimal', [s0.circular]: kind === 'circular' },
-    className
+    className,
   );
   return (
     <button
diff --git a/src/components/CollapsibleSectionHeader.tsx b/src/components/CollapsibleSectionHeader.tsx
index 8b701e11f..037521f99 100644
--- a/src/components/CollapsibleSectionHeader.tsx
+++ b/src/components/CollapsibleSectionHeader.tsx
@@ -22,7 +22,7 @@ export default function Header({ name, type, toggle, isOpen, qty }: Props) {
         toggle();
       }
     },
-    [toggle]
+    [toggle],
   );
   return (
     <div
diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index 66b40b15c..fd3347bd5 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -63,10 +63,14 @@ const mapState2 = (s: State) => ({
 const Config = connect(mapState2)(ConfigImpl);
 export default connect(mapState)(ConfigContainer);
 
-function ConfigContainer({ dispatch, configs, apiConfig }: {
-  dispatch: DispatchFn,
-  configs: ClashGeneralConfig,
-  apiConfig: ClashAPIConfig,
+function ConfigContainer({
+  dispatch,
+  configs,
+  apiConfig,
+}: {
+  dispatch: DispatchFn;
+  configs: ClashGeneralConfig;
+  apiConfig: ClashAPIConfig;
 }) {
   useEffect(() => {
     dispatch(fetchConfigs(apiConfig));
@@ -106,7 +110,7 @@ function ConfigImpl({
     (name: keyof ClashGeneralConfig, val: ClashGeneralConfig[keyof ClashGeneralConfig]) => {
       setConfigStateInternal({ ...configState, [name]: val });
     },
-    [configState]
+    [configState],
   );
 
   const handleSwitchOnChange = useCallback(
@@ -116,7 +120,7 @@ function ConfigImpl({
       setConfigState(name, value);
       dispatch(updateConfigs(apiConfig, { 'allow-lan': value }));
     },
-    [apiConfig, dispatch, setConfigState]
+    [apiConfig, dispatch, setConfigState],
   );
 
   const handleChangeValue = useCallback(
@@ -144,12 +148,12 @@ function ConfigImpl({
           return;
       }
     },
-    [apiConfig, dispatch, setConfigState]
+    [apiConfig, dispatch, setConfigState],
   );
 
   const handleInputOnChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
     (e) => handleChangeValue(e.target),
-    [handleChangeValue]
+    [handleChangeValue],
   );
 
   const { selectChartStyleIndex, updateAppConfig } = useStoreActions();
@@ -176,7 +180,7 @@ function ConfigImpl({
           throw new Error(`unknown input name ${name}`);
       }
     },
-    [apiConfig, dispatch, updateAppConfig]
+    [apiConfig, dispatch, updateAppConfig],
   );
 
   const mode = useMemo(() => {
@@ -201,7 +205,7 @@ function ConfigImpl({
                 onBlur={handleInputOnBlur}
               />
             </div>
-          ) : null
+          ) : null,
         )}
 
         <div>
diff --git a/src/components/ConnectionTable.module.scss b/src/components/ConnectionTable.module.scss
index d5ec9f967..c6a79aee8 100644
--- a/src/components/ConnectionTable.module.scss
+++ b/src/components/ConnectionTable.module.scss
@@ -24,13 +24,13 @@
     white-space: nowrap;
   }
   td {
-    border:none;
+    border: none;
     white-space: nowrap;
     padding: 8px 13px;
     font-size: 0.9em;
     font-family: var(--font-normal);
   }
-  & >tbody>tr:nth-of-type(odd)>* {
+  & > tbody > tr:nth-of-type(odd) > * {
     background: var(--color-row-odd);
   }
 }
diff --git a/src/components/ConnectionTable.tsx b/src/components/ConnectionTable.tsx
index f4400b9ae..4144519c9 100644
--- a/src/components/ConnectionTable.tsx
+++ b/src/components/ConnectionTable.tsx
@@ -19,56 +19,57 @@ const fullColumns = [
   { header: 'Host', accessorKey: 'host' },
   { header: 'Process', accessorKey: 'process' },
   {
-    header: 'DL', accessorKey: 'download',
-    cell: (info: any) => prettyBytes(info.getValue())
+    header: 'DL',
+    accessorKey: 'download',
+    cell: (info: any) => prettyBytes(info.getValue()),
   },
   {
-    header: 'UL', accessorKey: 'upload',
-    cell: (info: any) => prettyBytes(info.getValue())
+    header: 'UL',
+    accessorKey: 'upload',
+    cell: (info: any) => prettyBytes(info.getValue()),
   },
   {
-    header: 'DL Speed', accessorKey: 'downloadSpeedCurr',
-    cell: (info: any) => prettyBytes(info.getValue()) + '/s'
+    header: 'DL Speed',
+    accessorKey: 'downloadSpeedCurr',
+    cell: (info: any) => prettyBytes(info.getValue()) + '/s',
   },
   {
-    header: 'UL Speed', accessorKey: 'uploadSpeedCurr',
-    cell: (info: any) => prettyBytes(info.getValue()) + '/s'
+    header: 'UL Speed',
+    accessorKey: 'uploadSpeedCurr',
+    cell: (info: any) => prettyBytes(info.getValue()) + '/s',
   },
   { header: 'Chains', accessorKey: 'chains' },
   { header: 'Rule', accessorKey: 'rule' },
   {
-    header: 'Time', accessorKey: 'start',
-    cell: (info: any) => formatDistance(info.getValue(), 0)
+    header: 'Time',
+    accessorKey: 'start',
+    cell: (info: any) => formatDistance(info.getValue(), 0),
   },
   { header: 'Source', accessorKey: 'source' },
   { header: 'Destination IP', accessorKey: 'destinationIP' },
   { header: 'Type', accessorKey: 'type' },
 ];
 
-const COLUMN_SORT = [
-  { id: 'id', desc: true }
-]
+const COLUMN_SORT = [{ id: 'id', desc: true }];
 
 const columns = fullColumns;
 const columnsWithoutProcess = fullColumns.filter((item) => item.accessorKey !== 'process');
 
 function Table({ data }: { data: any }) {
   const connCtx = React.useContext(MutableConnRefCtx);
-  const [sorting, setSorting] = React.useState<SortingState>(COLUMN_SORT)
-  const table = useReactTable(
-    {
-      columns: connCtx.hasProcessPath ? columns : columnsWithoutProcess,
-      data,
-      state: {
-        sorting,
-        columnVisibility: { id: false }
-      },
-      onSortingChange: setSorting,
-      getCoreRowModel: getCoreRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      // debugTable: true,
+  const [sorting, setSorting] = React.useState<SortingState>(COLUMN_SORT);
+  const table = useReactTable({
+    columns: connCtx.hasProcessPath ? columns : columnsWithoutProcess,
+    data,
+    state: {
+      sorting,
+      columnVisibility: { id: false },
     },
-  );
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    // debugTable: true,
+  });
   // className={s.tr}
   return (
     <table className={s.table}>
@@ -78,65 +79,62 @@ function Table({ data }: { data: any }) {
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <th key={header.id}
+                  <th
+                    key={header.id}
                     className={header.column.getCanSort() ? cx(s.th, s.pointer) : s.th}
-                    onClick={header.column.getToggleSortingHandler()}>
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
                     <span className={s.thWrap}>
-                      <span>
-                        {
-                          flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )
-                        }
-                      </span>
+                      <span>{flexRender(header.column.columnDef.header, header.getContext())}</span>
                       {header.column.getIsSorted() ? (
-                        <span className={header.column.getIsSorted() === 'desc' ? s.sortIconContainer : cx(s.rotate180, s.sortIconContainer)}>
+                        <span
+                          className={
+                            header.column.getIsSorted() === 'desc'
+                              ? s.sortIconContainer
+                              : cx(s.rotate180, s.sortIconContainer)
+                          }
+                        >
                           <ChevronDown size={16} />
                         </span>
                       ) : null}
                     </span>
                   </th>
-                )
+                );
               })}
-            </tr>)
+            </tr>
+          );
         })}
       </thead>
       <tbody>
         {table.getRowModel().rows.map((row) => {
           return (
             <tr key={row.id}>
-              {
-                row.getVisibleCells().map((cell) => {
-                  return (
-                    <td
-                      key={cell.id}
-                      className={cx(
-                        'xxxx'
-                        // s.td,
-                        // i % 2 === 0 ? s.odd : false,
-                        // connCtx.hasProcessPath
-                        //   ? j >= 2 && j <= 5
-                        //     ? s.du
-                        //     : false
-                        //   : j >= 1 && j <= 4
-                        //     ? s.du
-                        //     : false
-                      )}
-                    >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </td>
-                  );
-                })
-              }
+              {row.getVisibleCells().map((cell) => {
+                return (
+                  <td
+                    key={cell.id}
+                    className={cx(
+                      'xxxx',
+                      // s.td,
+                      // i % 2 === 0 ? s.odd : false,
+                      // connCtx.hasProcessPath
+                      //   ? j >= 2 && j <= 5
+                      //     ? s.du
+                      //     : false
+                      //   : j >= 1 && j <= 4
+                      //     ? s.du
+                      //     : false
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                );
+              })}
             </tr>
-          )
+          );
         })}
       </tbody>
-    </table >
+    </table>
   );
 }
 
diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx
index ba6b08289..904dc3730 100644
--- a/src/components/Connections.tsx
+++ b/src/components/Connections.tsx
@@ -66,25 +66,25 @@ function filterConns(conns: FormattedConn[], keyword: string) {
   return !keyword
     ? conns
     : conns.filter((conn) =>
-      [
-        conn.host,
-        conn.sourceIP,
-        conn.sourcePort,
-        conn.destinationIP,
-        conn.chains,
-        conn.rule,
-        conn.type,
-        conn.network,
-        conn.processPath,
-      ].some((field) => hasSubstring(field, keyword))
-    );
+        [
+          conn.host,
+          conn.sourceIP,
+          conn.sourcePort,
+          conn.destinationIP,
+          conn.chains,
+          conn.rule,
+          conn.type,
+          conn.network,
+          conn.processPath,
+        ].some((field) => hasSubstring(field, keyword)),
+      );
 }
 
 function formatConnectionDataItem(
   i: ConnectionItem,
   prevKv: Record<string, { upload: number; download: number }>,
   now: number,
-  mutConnCtxRef: { hasProcessPath: boolean }
+  mutConnCtxRef: { hasProcessPath: boolean },
 ): FormattedConn {
   const { id, metadata, upload, download, start, chains, rule, rulePayload } = i;
   const { host, destinationPort, destinationIP, network, type, sourceIP, sourcePort } = metadata;
@@ -152,7 +152,7 @@ function Conn({ apiConfig }: { apiConfig: ClashAPIConfig }) {
       const prevConnsKv = arrayToIdKv(prevConnsRef.current);
       const now = Date.now();
       const x = connections.map((c: ConnectionItem) =>
-        formatConnectionDataItem(c, prevConnsKv, now, connCtx)
+        formatConnectionDataItem(c, prevConnsKv, now, connCtx),
       );
       const closed = [];
       for (const c of prevConnsRef.current) {
@@ -172,7 +172,7 @@ function Conn({ apiConfig }: { apiConfig: ClashAPIConfig }) {
         prevConnsRef.current = x;
       }
     },
-    [setConns, isRefreshPaused, connCtx]
+    [setConns, isRefreshPaused, connCtx],
   );
   useEffect(() => {
     return connAPI.fetchData(apiConfig, read);
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 734bd96a8..a0d33c374 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -29,7 +29,7 @@ export function SelfControlledInput({ value, ...restProps }: InputProps) {
   }, [value]);
   const onChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => setInternalValue(e.target.value),
-    [setInternalValue]
+    [setInternalValue],
   );
 
   return <input className={s0.input} value={internalValue} onChange={onChange} {...restProps} />;
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
index a47b441a5..8e1b6e08d 100644
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@@ -62,7 +62,19 @@ const Row = memo(({ index, style, data }: ListChildComponentProps<Log[]>) => {
 
 Row.displayName = 'MemoRow';
 
-function Logs({ dispatch, logLevel, apiConfig, logs, logStreamingPaused }: { dispatch: DispatchFn; logLevel: string; apiConfig: ClashAPIConfig; logs: Log[]; logStreamingPaused: boolean }) {
+function Logs({
+  dispatch,
+  logLevel,
+  apiConfig,
+  logs,
+  logStreamingPaused,
+}: {
+  dispatch: DispatchFn;
+  logLevel: string;
+  apiConfig: ClashAPIConfig;
+  logs: Log[];
+  logStreamingPaused: boolean;
+}) {
   const actions = useStoreActions();
   const toggleIsRefreshPaused = useCallback(() => {
     logStreamingPaused ? reconnectLogs({ ...apiConfig, logLevel }) : stopLogs();
diff --git a/src/components/ModalCloseAllConnections.tsx b/src/components/ModalCloseAllConnections.tsx
index 75e5a6b6d..1d1db73b3 100644
--- a/src/components/ModalCloseAllConnections.tsx
+++ b/src/components/ModalCloseAllConnections.tsx
@@ -8,7 +8,15 @@ import s from './ModalCloseAllConnections.module.scss';
 
 const { useRef, useCallback, useMemo } = React;
 
-export default function Comp({ isOpen, onRequestClose, primaryButtonOnTap }: { isOpen: boolean; onRequestClose: (x: any) => void; primaryButtonOnTap: () => void }) {
+export default function Comp({
+  isOpen,
+  onRequestClose,
+  primaryButtonOnTap,
+}: {
+  isOpen: boolean;
+  onRequestClose: (x: any) => void;
+  primaryButtonOnTap: () => void;
+}) {
   const primaryButtonRef = useRef(null);
   const onAfterOpen = useCallback(() => {
     primaryButtonRef.current.focus();
@@ -19,7 +27,7 @@ export default function Comp({ isOpen, onRequestClose, primaryButtonOnTap }: { i
       afterOpen: s.afterOpen,
       beforeClose: '',
     }),
-    []
+    [],
   );
   return (
     <Modal
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 423d7e740..c8b539024 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -6,17 +6,25 @@ import { DispatchFn } from '$src/store/types';
 
 import s0 from './Search.module.scss';
 
-function RuleSearch({ dispatch, searchText, updateSearchText }: { dispatch: DispatchFn; searchText: string; updateSearchText: (x: string) => any }) {
+function RuleSearch({
+  dispatch,
+  searchText,
+  updateSearchText,
+}: {
+  dispatch: DispatchFn;
+  searchText: string;
+  updateSearchText: (x: string) => any;
+}) {
   const [text, setText] = useState(searchText);
   const updateSearchTextInternal = useCallback(
     (v: string) => {
       dispatch(updateSearchText(v));
     },
-    [dispatch, updateSearchText]
+    [dispatch, updateSearchText],
   );
   const updateSearchTextDebounced = useMemo(
     () => debounce(updateSearchTextInternal, 300),
-    [updateSearchTextInternal]
+    [updateSearchTextInternal],
   );
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setText(e.target.value);
diff --git a/src/components/StateProvider.tsx b/src/components/StateProvider.tsx
index e69a88786..94ad2d0c2 100644
--- a/src/components/StateProvider.tsx
+++ b/src/components/StateProvider.tsx
@@ -30,7 +30,15 @@ export function useStoreActions() {
 }
 
 // boundActionCreators
-export default function Provider({ initialState, actions = {}, children }: { initialState: Partial<State>, actions: any, children: ReactNode }) {
+export default function Provider({
+  initialState,
+  actions = {},
+  children,
+}: {
+  initialState: Partial<State>;
+  actions: any;
+  children: ReactNode;
+}) {
   const stateRef = useRef(initialState);
   const [state, setState] = useState(initialState);
   const getState = useCallback(() => stateRef.current, []);
@@ -53,7 +61,7 @@ export default function Provider({ initialState, actions = {}, children }: { ini
         setState(stateNext);
       }
     },
-    [getState]
+    [getState],
   );
   const boundActions = useMemo(() => bindActions(actions, dispatch), [actions, dispatch]);
 
@@ -82,7 +90,7 @@ export function connect(mapStateToProps: any) {
 
 // steal from https://github.com/reduxjs/redux/blob/master/src/bindActionCreators.ts
 function bindAction(action: any, dispatch: any) {
-  return function(...args: any[]) {
+  return function (...args: any[]) {
     return dispatch(action.apply(this, args));
   };
 }
diff --git a/src/components/SwitchThemed.tsx b/src/components/SwitchThemed.tsx
index cabb53e40..7493d43e3 100644
--- a/src/components/SwitchThemed.tsx
+++ b/src/components/SwitchThemed.tsx
@@ -10,7 +10,12 @@ import { connect } from './StateProvider';
 // @ts-ignore
 const Switch = ReactSwitch.default ? ReactSwitch.default : ReactSwitch;
 
-function SwitchThemed({ checked = false, onChange, theme, name }: {
+function SwitchThemed({
+  checked = false,
+  onChange,
+  theme,
+  name,
+}: {
   checked: boolean;
   onChange: (v: boolean) => void;
   theme: string;
diff --git a/src/components/ToggleSwitch.tsx b/src/components/ToggleSwitch.tsx
index 58400c997..92ed5457d 100644
--- a/src/components/ToggleSwitch.tsx
+++ b/src/components/ToggleSwitch.tsx
@@ -21,7 +21,7 @@ function ToggleSwitch({ options, value, name, onChange }: Props) {
         return w;
       }
     },
-    [options]
+    [options],
   );
 
   const sliderStyle = useMemo(() => {
diff --git a/src/components/TrafficChart.tsx b/src/components/TrafficChart.tsx
index 877b309ab..1f10b7761 100644
--- a/src/components/TrafficChart.tsx
+++ b/src/components/TrafficChart.tsx
@@ -25,7 +25,13 @@ const mapState = (s: State) => ({
 
 export default connect(mapState)(TrafficChart);
 
-function TrafficChart({ apiConfig, selectedChartStyleIndex }: { apiConfig: ClashAPIConfig; selectedChartStyleIndex: number }) {
+function TrafficChart({
+  apiConfig,
+  selectedChartStyleIndex,
+}: {
+  apiConfig: ClashAPIConfig;
+  selectedChartStyleIndex: number;
+}) {
   const ChartMod = chartJSResource.read();
   const traffic = fetchData(apiConfig);
   const { t } = useTranslation();
@@ -47,7 +53,7 @@ function TrafficChart({ apiConfig, selectedChartStyleIndex }: { apiConfig: Clash
         },
       ],
     }),
-    [traffic, selectedChartStyleIndex, t]
+    [traffic, selectedChartStyleIndex, t],
   );
 
   useLineChart(ChartMod.Chart, 'trafficChart', data, traffic);
diff --git a/src/components/TrafficChartSample.tsx b/src/components/TrafficChartSample.tsx
index e2c7972a1..169aab0d3 100644
--- a/src/components/TrafficChartSample.tsx
+++ b/src/components/TrafficChartSample.tsx
@@ -38,7 +38,7 @@ export default function TrafficChart({ id }: { id: string }) {
         },
       ],
     }),
-    [id]
+    [id],
   );
 
   const eleId = 'chart-' + id;
diff --git a/src/components/TrafficNow.tsx b/src/components/TrafficNow.tsx
index bcdef3f92..55ac5b289 100644
--- a/src/components/TrafficNow.tsx
+++ b/src/components/TrafficNow.tsx
@@ -55,7 +55,7 @@ function useSpeed(apiConfig: ClashAPIConfig) {
       setSpeed({
         upStr: prettyBytes(o.up) + '/s',
         downStr: prettyBytes(o.down) + '/s',
-      })
+      }),
     );
   }, [apiConfig]);
   return speed;
@@ -75,7 +75,7 @@ function useConnection(apiConfig: ClashAPIConfig) {
         connNumber: connections.length,
       });
     },
-    [setState]
+    [setState],
   );
   useEffect(() => {
     return connAPI.fetchData(apiConfig, read);
diff --git a/src/components/about/About.tsx b/src/components/about/About.tsx
index 3d381fccb..52d5876e9 100644
--- a/src/components/about/About.tsx
+++ b/src/components/about/About.tsx
@@ -33,7 +33,7 @@ function Version({ name, link, version }: { name: string; link: string; version:
 
 function AboutImpl(props: Props) {
   const { data: version } = useQuery(['/version', props.apiConfig], () =>
-    fetchVersion('/version', props.apiConfig)
+    fetchVersion('/version', props.apiConfig),
   );
   return (
     <>
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index 5abf336b3..b71fb8847 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -76,7 +76,7 @@ function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: Pr
     (e: React.KeyboardEvent) => {
       if (e.key === 'Enter') doSelect();
     },
-    [doSelect]
+    [doSelect],
   );
 
   return (
@@ -103,7 +103,15 @@ const positionProxyNameTooltip = (triggerRect: { left: number; top: number }) =>
   };
 };
 
-function ProxyNameTooltip({ children, label, 'aria-label': ariaLabel }: { children: React.ReactElement; label: string; 'aria-label': string }) {
+function ProxyNameTooltip({
+  children,
+  label,
+  'aria-label': ariaLabel,
+}: {
+  children: React.ReactElement;
+  label: string;
+  'aria-label': string;
+}) {
   const [trigger, tooltip] = useTooltip();
   return (
     <>
@@ -127,7 +135,7 @@ function ProxyImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyPr
     (e: React.KeyboardEvent) => {
       if (e.key === 'Enter') doSelect();
     },
-    [doSelect]
+    [doSelect],
   );
   const className = useMemo(() => {
     return cx(s0.proxy, {
diff --git a/src/components/proxies/ProxyGroup.tsx b/src/components/proxies/ProxyGroup.tsx
index 3f46b1c5c..0cf57b812 100644
--- a/src/components/proxies/ProxyGroup.tsx
+++ b/src/components/proxies/ProxyGroup.tsx
@@ -62,7 +62,7 @@ function ProxyGroupImpl({
       if (!isSelectable) return;
       dispatch(switchProxy(apiConfig, name, proxyName));
     },
-    [apiConfig, dispatch, name, isSelectable]
+    [apiConfig, dispatch, name, isSelectable],
   );
 
   const testingLatency = useState2(false);
diff --git a/src/components/proxies/ProxyPageFab.tsx b/src/components/proxies/ProxyPageFab.tsx
index 44e446feb..16288716c 100644
--- a/src/components/proxies/ProxyPageFab.tsx
+++ b/src/components/proxies/ProxyPageFab.tsx
@@ -34,7 +34,7 @@ function useTestLatencyAction({
     setIsTestingLatency(true);
     dispatch(requestDelayAll(apiConfig)).then(
       () => setIsTestingLatency(false),
-      () => setIsTestingLatency(false)
+      () => setIsTestingLatency(false),
     );
   }, [apiConfig, dispatch, isTestingLatency]);
   return [requestDelayAllFn, isTestingLatency];
diff --git a/src/components/proxies/Settings.tsx b/src/components/proxies/Settings.tsx
index 2ca09796c..449c2a997 100644
--- a/src/components/proxies/Settings.tsx
+++ b/src/components/proxies/Settings.tsx
@@ -28,15 +28,14 @@ function Settings({ appConfig }: { appConfig: StateApp }) {
     (e: React.ChangeEvent<HTMLSelectElement>) => {
       updateAppConfig('proxySortBy', e.target.value);
     },
-    [updateAppConfig]
+    [updateAppConfig],
   );
 
-
   const handleHideUnavailablesSwitchOnChange = useCallback(
     (v: boolean) => {
       updateAppConfig('hideUnavailableProxies', v);
     },
-    [updateAppConfig]
+    [updateAppConfig],
   );
   const { t } = useTranslation();
   return (
diff --git a/src/components/proxies/hooks.tsx b/src/components/proxies/hooks.tsx
index ed515ba47..be53d5f0c 100644
--- a/src/components/proxies/hooks.tsx
+++ b/src/components/proxies/hooks.tsx
@@ -24,12 +24,7 @@ function filterAvailableProxies(list: string[], delay: DelayMapping) {
   });
 }
 
-const getSortDelay = (
-  d:
-    | undefined
-    | ProxyDelayItem,
-  proxyInfo: ProxyItem
-) => {
+const getSortDelay = (d: undefined | ProxyDelayItem, proxyInfo: ProxyItem) => {
   if (d && 'number' in d && d.number > 0) {
     return d.number;
   }
@@ -93,7 +88,7 @@ function filterAvailableProxiesAndSort(
   hideUnavailableProxies: boolean,
   filterText: string,
   proxySortBy: string,
-  proxies?: ProxiesMapping
+  proxies?: ProxiesMapping,
 ) {
   // all is freezed
   let filtered = [...all];
@@ -112,7 +107,7 @@ export function useFilteredAndSorted(
   delay: DelayMapping,
   hideUnavailableProxies: boolean,
   proxySortBy: string,
-  proxies?: ProxiesMapping
+  proxies?: ProxiesMapping,
 ) {
   const [filterText] = useAtom(proxyFilterTextAtom);
   return useMemo(
@@ -123,8 +118,8 @@ export function useFilteredAndSorted(
         hideUnavailableProxies,
         filterText,
         proxySortBy,
-        proxies
+        proxies,
       ),
-    [all, delay, hideUnavailableProxies, filterText, proxySortBy, proxies]
+    [all, delay, hideUnavailableProxies, filterText, proxySortBy, proxies],
   );
 }
diff --git a/src/components/proxies/proxies.hooks.tsx b/src/components/proxies/proxies.hooks.tsx
index 20695ac57..173f13766 100644
--- a/src/components/proxies/proxies.hooks.tsx
+++ b/src/components/proxies/proxies.hooks.tsx
@@ -16,7 +16,7 @@ export function useUpdateProviderItem({
 }) {
   return useCallback(
     () => dispatch(updateProviderByName(apiConfig, name)),
-    [apiConfig, dispatch, name]
+    [apiConfig, dispatch, name],
   );
 }
 
diff --git a/src/components/rules/rules.hooks.tsx b/src/components/rules/rules.hooks.tsx
index 1b4aba8e1..c2043ebcf 100644
--- a/src/components/rules/rules.hooks.tsx
+++ b/src/components/rules/rules.hooks.tsx
@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useAtom } from 'jotai'
+import { useAtom } from 'jotai';
 import * as React from 'react';
 import {
   fetchRuleProviders,
@@ -14,7 +14,7 @@ const { useCallback } = React;
 
 export function useUpdateRuleProviderItem(
   name: string,
-  apiConfig: ClashAPIConfig
+  apiConfig: ClashAPIConfig,
 ): [(ev: React.MouseEvent<HTMLButtonElement>) => unknown, boolean] {
   const queryClient = useQueryClient();
   const { mutate, isLoading } = useMutation(refreshRuleProviderByName, {
@@ -30,7 +30,7 @@ export function useUpdateRuleProviderItem(
 }
 
 export function useUpdateAllRuleProviderItems(
-  apiConfig: ClashAPIConfig
+  apiConfig: ClashAPIConfig,
 ): [(ev: React.MouseEvent<HTMLButtonElement>) => unknown, boolean] {
   const queryClient = useQueryClient();
   const { data: provider } = useRuleProviderQuery(apiConfig);
@@ -56,13 +56,13 @@ export function useInvalidateQueries() {
 
 export function useRuleProviderQuery(apiConfig: ClashAPIConfig) {
   return useQuery(['/providers/rules', apiConfig], () =>
-    fetchRuleProviders('/providers/rules', apiConfig)
+    fetchRuleProviders('/providers/rules', apiConfig),
   );
 }
 
 export function useRuleAndProvider(apiConfig: ClashAPIConfig) {
   const { data: rules, isFetching } = useQuery(['/rules', apiConfig], () =>
-    fetchRules('/rules', apiConfig)
+    fetchRules('/rules', apiConfig),
   );
   const { data: provider } = useRuleProviderQuery(apiConfig);
 
diff --git a/src/components/shared/BaseModal.module.scss b/src/components/shared/BaseModal.module.scss
index 1d206e18e..a7f89e81c 100644
--- a/src/components/shared/BaseModal.module.scss
+++ b/src/components/shared/BaseModal.module.scss
@@ -9,7 +9,9 @@
   opacity: 0.6;
   transition: all 0.3s ease;
   transform: translate(-50%, -50%) scale(1.2);
-  box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 4px, rgba(0, 0, 0, 0.24) 0px 16px 32px;
+  box-shadow:
+    rgba(0, 0, 0, 0.12) 0px 4px 4px,
+    rgba(0, 0, 0, 0.24) 0px 16px 32px;
 }
 .afterOpen {
   opacity: 1;
diff --git a/src/components/shared/BaseModal.tsx b/src/components/shared/BaseModal.tsx
index e7577088c..35306ff0b 100644
--- a/src/components/shared/BaseModal.tsx
+++ b/src/components/shared/BaseModal.tsx
@@ -7,14 +7,22 @@ import s from './BaseModal.module.scss';
 
 const { useMemo } = React;
 
-export default function BaseModal({ isOpen, onRequestClose, children }: { isOpen: boolean; onRequestClose: (ev: any) => void; children: React.ReactNode }) {
+export default function BaseModal({
+  isOpen,
+  onRequestClose,
+  children,
+}: {
+  isOpen: boolean;
+  onRequestClose: (ev: any) => void;
+  children: React.ReactNode;
+}) {
   const className = useMemo(
     () => ({
       base: cx(modalStyle.content, s.cnt),
       afterOpen: s.afterOpen,
       beforeClose: '',
     }),
-    []
+    [],
   );
   return (
     <Modal
diff --git a/src/components/shared/Basic.tsx b/src/components/shared/Basic.tsx
index 8483540ed..58432cc7f 100644
--- a/src/components/shared/Basic.tsx
+++ b/src/components/shared/Basic.tsx
@@ -2,10 +2,7 @@ import React from 'react';
 
 import s from './Basic.module.scss';
 
-export function SectionNameType({ name, type }: {
-  name: string;
-  type: string;
-}) {
+export function SectionNameType({ name, type }: { name: string; type: string }) {
   return (
     <h2 className={s.sectionNameType}>
       <span>{name}</span>
diff --git a/src/components/shared/ThemeSwitcher.tsx b/src/components/shared/ThemeSwitcher.tsx
index ce7c66772..882d98019 100644
--- a/src/components/shared/ThemeSwitcher.tsx
+++ b/src/components/shared/ThemeSwitcher.tsx
@@ -11,10 +11,7 @@ import { DispatchFn, State } from 'src/store/types';
 
 import s from './ThemeSwitcher.module.scss';
 
-function ThemeSwitcherImpl({ theme, dispatch }: {
-theme: string,
-dispatch: DispatchFn
-}) {
+function ThemeSwitcherImpl({ theme, dispatch }: { theme: string; dispatch: DispatchFn }) {
   const { t } = useTranslation();
 
   const themeIcon = React.useMemo(() => {
diff --git a/src/hooks/useLineChart.ts b/src/hooks/useLineChart.ts
index a3205aa06..c7c39eaa1 100644
--- a/src/hooks/useLineChart.ts
+++ b/src/hooks/useLineChart.ts
@@ -9,7 +9,7 @@ export default function useLineChart(
   elementId: string,
   data: ChartConfiguration['data'],
   subscription: any,
-  extraChartOptions = {}
+  extraChartOptions = {},
 ) {
   useEffect(() => {
     const ctx = (document.getElementById(elementId) as HTMLCanvasElement).getContext('2d');
diff --git a/src/hooks/useRemainingViewPortHeight.ts b/src/hooks/useRemainingViewPortHeight.ts
index 2c920c25e..78d820fd5 100644
--- a/src/hooks/useRemainingViewPortHeight.ts
+++ b/src/hooks/useRemainingViewPortHeight.ts
@@ -11,7 +11,7 @@ const { useState, useRef, useCallback, useLayoutEffect } = React;
  */
 export default function useRemainingViewPortHeight<ElementType extends HTMLDivElement>(): [
   React.MutableRefObject<ElementType>,
-  number
+  number,
 ] {
   const ref = useRef<ElementType>(null);
   const [containerHeight, setContainerHeight] = useState(200);
diff --git a/src/hooks/useTextInput.ts b/src/hooks/useTextInput.ts
index 739f0705f..301cd9d00 100644
--- a/src/hooks/useTextInput.ts
+++ b/src/hooks/useTextInput.ts
@@ -5,7 +5,7 @@ import * as React from 'react';
 const { useCallback, useState, useMemo } = React;
 
 export function useTextInput(
-  x: PrimitiveAtom<string>
+  x: PrimitiveAtom<string>,
 ): [(e: React.ChangeEvent<HTMLInputElement>) => void, string] {
   const [, setTextGlobal] = useAtom(x);
   const [text, setText] = useState('');
@@ -15,7 +15,7 @@ export function useTextInput(
       setText(e.target.value);
       setTextDebounced(e.target.value);
     },
-    [setTextDebounced]
+    [setTextDebounced],
   );
   return [onChange, text];
 }
diff --git a/src/misc/chart-lib.ts b/src/misc/chart-lib.ts
index 9a2bf35fd..dee64f1d9 100644
--- a/src/misc/chart-lib.ts
+++ b/src/misc/chart-lib.ts
@@ -17,7 +17,7 @@ Chart.register(
   CategoryScale,
   LinearScale,
   Filler,
-  Legend
+  Legend,
 );
 
 export { Chart };
diff --git a/src/misc/errors.ts b/src/misc/errors.ts
index ec7e76589..14a739d59 100644
--- a/src/misc/errors.ts
+++ b/src/misc/errors.ts
@@ -1,7 +1,10 @@
 export const DOES_NOT_SUPPORT_FETCH = 0;
 
 export class YacdError extends Error {
-  constructor(public message: string, public code?: string | number) {
+  constructor(
+    public message: string,
+    public code?: string | number,
+  ) {
     super(message);
   }
 }
diff --git a/src/misc/i18n.ts b/src/misc/i18n.ts
index e8515c47b..8f9d2f89d 100644
--- a/src/misc/i18n.ts
+++ b/src/misc/i18n.ts
@@ -20,7 +20,7 @@ const LngBackend = {
     if (p) {
       p.then(
         (d) => callback(null, d.data),
-        (err) => callback(err, null)
+        (err) => callback(err, null),
       );
     } else {
       callback(new Error(`unable to load translation file for language ${lng}`), null);
diff --git a/src/misc/storage.ts b/src/misc/storage.ts
index d9894fe3c..138f19865 100644
--- a/src/misc/storage.ts
+++ b/src/misc/storage.ts
@@ -1,6 +1,6 @@
 // manage localStorage
 
-import { StateApp } from "$src/store/types";
+import { StateApp } from '$src/store/types';
 
 const StorageKey = 'yacd.haishan.me';
 
diff --git a/src/store/app.ts b/src/store/app.ts
index a9d0a5244..c5ee68d74 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -26,7 +26,7 @@ const saveStateDebounced = debounce(saveState, 600);
 
 function findClashAPIConfigIndex(
   getState: GetStateFn,
-  { baseURL, secret, metaLabel }: ClashAPIConfig
+  { baseURL, secret, metaLabel }: ClashAPIConfig,
 ) {
   const arr = getClashAPIConfigs(getState());
   for (let i = 0; i < arr.length; i++) {
@@ -115,7 +115,7 @@ function insertThemeColorMeta(color: string, media?: string) {
 
 function updateMetaThemeColor(theme: ThemeType) {
   const metas = Array.from(
-    document.querySelectorAll('meta[name=theme-color]')
+    document.querySelectorAll('meta[name=theme-color]'),
   ) as HTMLMetaElement[];
   let meta0: HTMLMetaElement;
   for (const m of metas) {
diff --git a/src/store/configs.ts b/src/store/configs.ts
index 7571b4e4c..c7a80567b 100644
--- a/src/store/configs.ts
+++ b/src/store/configs.ts
@@ -55,7 +55,7 @@ function markHaveFetchedConfig() {
 
 export function updateConfigs(
   apiConfig: ClashAPIConfig,
-  partialConfg: Partial<ClashGeneralConfig>
+  partialConfg: Partial<ClashGeneralConfig>,
 ) {
   return async (dispatch: DispatchFn) => {
     configsAPI
@@ -71,7 +71,7 @@ export function updateConfigs(
           // eslint-disable-next-line no-console
           console.log('Error update configs', err);
           throw err;
-        }
+        },
       )
       .then(() => {
         dispatch(fetchConfigs(apiConfig));
diff --git a/src/store/logs.ts b/src/store/logs.ts
index 4795154fb..890ad8da7 100644
--- a/src/store/logs.ts
+++ b/src/store/logs.ts
@@ -23,7 +23,7 @@ export const getLogsForDisplay = createSelector(
 
     if (searchText === '') return x;
     return x.filter((r) => r.payload.toLowerCase().indexOf(searchText) >= 0);
-  }
+  },
 );
 
 export function updateSearchText(text: string) {
diff --git a/src/store/proxies.tsx b/src/store/proxies.tsx
index 546731a29..90f76291d 100644
--- a/src/store/proxies.tsx
+++ b/src/store/proxies.tsx
@@ -146,7 +146,7 @@ export function healthcheckProviderByName(apiConfig: ClashAPIConfig, name: strin
 async function closeGroupConns(
   apiConfig: ClashAPIConfig,
   groupName: string,
-  exceptionItemName: string
+  exceptionItemName: string,
 ) {
   const res = await connAPI.fetchConns(apiConfig);
   if (!res.ok) {
@@ -187,7 +187,7 @@ async function switchProxyImpl(
   getState: GetStateFn,
   apiConfig: ClashAPIConfig,
   groupName: string,
-  itemName: string
+  itemName: string,
 ) {
   try {
     const res = await proxiesAPI.requestToSwitchProxy(apiConfig, groupName, itemName);
@@ -221,7 +221,7 @@ function closeModalClosePrevConns() {
 function closePrevConns(
   apiConfig: ClashAPIConfig,
   proxies: ProxiesMapping,
-  switchTo: SwitchProxyCtxItem
+  switchTo: SwitchProxyCtxItem,
 ) {
   // we must have fetched the proxies before
   // so the proxies here is fresh
@@ -346,7 +346,7 @@ export function requestDelayAll(apiConfig: ClashAPIConfig) {
     const proxyNames = getDangleProxyNames(getState());
     const latencyTestUrl = getLatencyTestUrl(getState());
     await Promise.all(
-      proxyNames.map((p) => proxiesAPI.requestDelayForProxy(apiConfig, p, latencyTestUrl))
+      proxyNames.map((p) => proxiesAPI.requestDelayForProxy(apiConfig, p, latencyTestUrl)),
     );
     const proxyProviders = getProxyProviders(getState());
     // one by one
diff --git a/src/store/types.ts b/src/store/types.ts
index 867e437ab..715b642df 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -116,8 +116,8 @@ export type State = {
 export type GetStateFn = () => State;
 export interface DispatchFn {
   (msg: string, change: (s: State) => void): void;
-  (action: (dispatch: DispatchFn, getState: GetStateFn) => Promise<void>): ReturnType<
-    typeof action
-  >;
+  (
+    action: (dispatch: DispatchFn, getState: GetStateFn) => Promise<void>,
+  ): ReturnType<typeof action>;
   (action: (dispatch: DispatchFn, getState: GetStateFn) => void): ReturnType<typeof action>;
 }
diff --git a/src/sw.ts b/src/sw.ts
index f5776770d..e46d2afad 100644
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -46,7 +46,7 @@ registerRoute(
     // Return true to signal that we want to use the handler.
     return true;
   },
-  createHandlerBoundToURL('index.html')
+  createHandlerBoundToURL('index.html'),
 );
 
 // An example runtime caching route for requests that aren't handled by the
@@ -62,7 +62,7 @@ registerRoute(
       // least-recently used images are removed.
       new ExpirationPlugin({ maxEntries: 50 }),
     ],
-  })
+  }),
 );
 
 // This allows the web app to trigger skipWaiting via
diff --git a/src/swRegistration.ts b/src/swRegistration.ts
index a2d062225..939e18477 100644
--- a/src/swRegistration.ts
+++ b/src/swRegistration.ts
@@ -3,7 +3,7 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
 );
 
 type Config = {
@@ -59,7 +59,7 @@ function registerValidSW(swUrl: string, config?: Config) {
               // content until all client tabs are closed.
               console.log(
                 'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://cra.link/PWA.'
+                  'tabs for this page are closed. See https://cra.link/PWA.',
               );
 
               // Execute callback