chore: run ts-migrate

39 files changed, 201 insertions, 151 deletions

diff --git a/src/components/APIConfig.tsx b/src/components/APIConfig.tsx
index 01c1b43..54e6e58 100644
--- a/src/components/APIConfig.tsx
+++ b/src/components/APIConfig.tsx
@@ -80,6 +80,7 @@ function APIConfig({ dispatch }) {
         <div className={s0.hostnamePort}>
           <Field
             id="baseURL"
+            // @ts-expect-error ts-migrate(2322) FIXME: Type '{ id: string; name: string; label: string; t... Remove this comment to see the full error message
             name="baseURL"
             label="API Base URL"
             type="text"
@@ -88,6 +89,7 @@ function APIConfig({ dispatch }) {
           />
           <Field
             id="secret"
+            // @ts-expect-error ts-migrate(2322) FIXME: Type '{ id: string; name: string; label: string; v... Remove this comment to see the full error message
             name="secret"
             label="Secret(optional)"
             value={secret}
diff --git a/src/components/APIDiscovery.js b/src/components/APIDiscovery.tsx
index 550fae0..97f3538 100644
--- a/src/components/APIDiscovery.js
+++ b/src/components/APIDiscovery.tsx
@@ -15,6 +15,7 @@ function APIDiscovery({ dispatch, apiConfig, modals }) {
   if (!window.fetch) {
     const { detail } = errors[DOES_NOT_SUPPORT_FETCH];
     const err = new Error(detail);
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'code' does not exist on type 'Error'.
     err.code = DOES_NOT_SUPPORT_FETCH;
     throw err;
   }
@@ -31,6 +32,7 @@ function APIDiscovery({ dispatch, apiConfig, modals }) {
       isOpen={modals.apiConfig}
       className={s0.content}
       overlayClassName={s0.overlay}
+      // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; isOpen: any; className:... Remove this comment to see the full error message
       shouldCloseOnOverlayClick={false}
       shouldCloseOnEsc={false}
       onRequestClose={closeApiConfigModal}
diff --git a/src/components/BackendList.tsx b/src/components/BackendList.tsx
index a0c993f..4bfb64c 100644
--- a/src/components/BackendList.tsx
+++ b/src/components/BackendList.tsx
@@ -114,6 +114,7 @@ function Item({
         <>
           <span className={s.secret}>{show ? secret : '***'}</span>
 
+          {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'boolean | (() => void)' is not assignable to... Remove this comment to see the full error message */}
           <Button onClick={toggle} className={s.eye}>
             <Icon size={20} />
           </Button>
diff --git a/src/components/Collapsible.js b/src/components/Collapsible.tsx
index d8d9313..e9a1ee8 100644
--- a/src/components/Collapsible.js
+++ b/src/components/Collapsible.tsx
@@ -50,10 +50,12 @@ const variantsCollpapsibleChildContainer = {
   },
 };
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'isOpen' does not exist on type '{ childr... Remove this comment to see the full error message
 const Collapsible = memo(({ children, isOpen }) => {
   const module = framerMotionResouce.read();
   const motion = module.motion;
   const previous = usePrevious(isOpen);
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'height' does not exist on type 'MutableR... Remove this comment to see the full error message
   const [refToMeature, { height }] = useMeasure();
   return (
     <div>
diff --git a/src/components/Config.js b/src/components/Config.tsx
index f14f7d9..16fc6b1 100644
--- a/src/components/Config.js
+++ b/src/components/Config.tsx
@@ -119,11 +119,11 @@ function ConfigImpl({
   );
 
   const handleSwitchOnChange = useCallback(
-    (checked) => {
+    (checked: boolean) => {
       const name = 'allow-lan';
       const value = checked;
       setConfigState(name, value);
-      dispatch(updateConfigs(apiConfig, { [name]: value }));
+      dispatch(updateConfigs(apiConfig, { 'allow-lan': value }));
     },
     [apiConfig, dispatch, setConfigState]
   );
@@ -200,6 +200,7 @@ function ConfigImpl({
                 name={f.key}
                 value={configState[f.key]}
                 onChange={handleInputOnChange}
+                // @ts-expect-error ts-migrate(2322) FIXME: Type '{ name: string; value: any; onChange: (e: an... Remove this comment to see the full error message
                 onBlur={handleInputOnBlur}
               />
             </div>
@@ -267,6 +268,7 @@ function ConfigImpl({
   );
 }
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'propTypes' does not exist on type '(prop... Remove this comment to see the full error message
 Config.propTypes = {
   configs: PropTypes.object,
 };
diff --git a/src/components/ConnectionTable.js b/src/components/ConnectionTable.tsx
index 6d9f86e..6d9f86e 100644
--- a/src/components/ConnectionTable.js
+++ b/src/components/ConnectionTable.tsx
diff --git a/src/components/Connections.js b/src/components/Connections.tsx
index e5c8110..078d32e 100644
--- a/src/components/Connections.js
+++ b/src/components/Connections.tsx
@@ -3,6 +3,8 @@ import './Connections.css';
 import React from 'react';
 import { Pause, Play, X as IconClose } from 'react-feather';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
+import { ConnectionItem } from 'src/api/connections';
+import { State } from 'src/store/types';
 
 import * as connAPI from '../api/connections';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
@@ -19,7 +21,7 @@ const { useEffect, useState, useRef, useCallback } = React;
 
 const paddingBottom = 30;
 
-function arrayToIdKv(items) {
+function arrayToIdKv<T extends { id: string }>(items: T[]) {
   const o = {};
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
@@ -28,9 +30,30 @@ function arrayToIdKv(items) {
   return o;
 }
 
-function filterConns(conns, keyword) {
-  const hasSubstring = (s, pat) => s.toLowerCase().includes(pat.toLowerCase());
+type FormattedConn = {
+  id: string;
+  upload: number;
+  download: number;
+  start: number;
+  chains: string;
+  rule: string;
+  destinationPort: string;
+  destinationIP: string;
+  sourceIP: string;
+  sourcePort: string;
+  source: string;
+  host: string;
+  type: string;
+  network: string;
+  downloadSpeedCurr?: number;
+  uploadSpeedCurr?: number;
+};
 
+function hasSubstring(s: string, pat: string) {
+  return s.toLowerCase().includes(pat.toLowerCase());
+}
+
+function filterConns(conns: FormattedConn[], keyword: string) {
   return !keyword
     ? conns
     : conns.filter((conn) =>
@@ -47,10 +70,13 @@ function filterConns(conns, keyword) {
       );
 }
 
-function formatConnectionDataItem(i, prevKv, now) {
+function formatConnectionDataItem(
+  i: ConnectionItem,
+  prevKv: Record<string, { upload: number; download: number }>,
+  now: number
+): FormattedConn {
   const { id, metadata, upload, download, start, chains, rule } = i;
-  // eslint-disable-next-line prefer-const
-  let {
+  const {
     host,
     destinationPort,
     destinationIP,
@@ -60,27 +86,27 @@ function formatConnectionDataItem(i, prevKv, now) {
     sourcePort,
   } = metadata;
   // host could be an empty string if it's direct IP connection
-  if (host === '') host = destinationIP;
-
+  let host2 = host;
+  if (host2 === '') host2 = destinationIP;
+  const prev = prevKv[id];
   const ret = {
     id,
     upload,
     download,
-    start: now - new Date(start),
+    start: now - new Date(start).valueOf(),
     chains: chains.reverse().join(' / '),
     rule,
     ...metadata,
-    host: `${host}:${destinationPort}`,
+    host: `${host2}:${destinationPort}`,
     type: `${type}(${network})`,
     source: `${sourceIP}:${sourcePort}`,
+    downloadSpeedCurr: download - (prev ? prev.download : 0),
+    uploadSpeedCurr: upload - (prev ? prev.upload : 0),
   };
-  const prev = prevKv[id];
-  ret.downloadSpeedCurr = download - (prev ? prev.download : 0);
-  ret.uploadSpeedCurr = upload - (prev ? prev.upload : 0);
   return ret;
 }
 
-function renderTableOrPlaceholder(conns) {
+function renderTableOrPlaceholder(conns: FormattedConn[]) {
   return conns.length > 0 ? (
     <ConnectionTable data={conns} />
   ) : (
@@ -119,13 +145,13 @@ function Conn({ apiConfig }) {
   const read = useCallback(
     ({ connections }) => {
       const prevConnsKv = arrayToIdKv(prevConnsRef.current);
-      const now = new Date();
-      const x = connections.map((c) =>
+      const now = Date.now();
+      const x = connections.map((c: ConnectionItem) =>
         formatConnectionDataItem(c, prevConnsKv, now)
       );
       const closed = [];
       for (const c of prevConnsRef.current) {
-        const idx = x.findIndex((conn) => conn.id === c.id);
+        const idx = x.findIndex((conn: ConnectionItem) => conn.id === c.id);
         if (idx < 0) closed.push(c);
       }
       setClosedConns((prev) => {
@@ -165,12 +191,14 @@ function Conn({ apiConfig }) {
             <Tab>
               <span>Active</span>
               <span className={s.connQty}>
+                {/* @ts-expect-error ts-migrate(2786) FIXME: 'ConnQty' cannot be used as a JSX component. */}
                 <ConnQty qty={filteredConns.length} />
               </span>
             </Tab>
             <Tab>
               <span>Closed</span>
               <span className={s.connQty}>
+                {/* @ts-expect-error ts-migrate(2786) FIXME: 'ConnQty' cannot be used as a JSX component. */}
                 <ConnQty qty={filteredClosedConns.length} />
               </span>
             </Tab>
@@ -187,11 +215,13 @@ function Conn({ apiConfig }) {
           </div>
         </div>
         <div
+          // @ts-expect-error ts-migrate(2322) FIXME: Type 'number | MutableRefObject<any>' is not assig... Remove this comment to see the full error message
           ref={refContainer}
           style={{ padding: 30, paddingBottom, paddingTop: 0 }}
         >
           <div
             style={{
+              // @ts-expect-error ts-migrate(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
               height: containerHeight - paddingBottom,
               overflow: 'auto',
             }}
@@ -234,7 +264,7 @@ function Conn({ apiConfig }) {
   );
 }
 
-const mapState = (s) => ({
+const mapState = (s: State) => ({
   apiConfig: getClashAPIConfig(s),
 });
 
diff --git a/src/components/ContentHeader.js b/src/components/ContentHeader.tsx
index 44df5a8..148a071 100644
--- a/src/components/ContentHeader.js
+++ b/src/components/ContentHeader.tsx
@@ -1,9 +1,13 @@
-import PropTypes from 'prop-types';
+
 import React from 'react';
 
 import s0 from './ContentHeader.module.css';
 
-function ContentHeader({ title }) {
+type Props = {
+    title: string;
+};
+
+function ContentHeader({ title }: Props) {
   return (
     <div className={s0.root}>
       <h1 className={s0.h1}>{title}</h1>
@@ -11,8 +15,4 @@ function ContentHeader({ title }) {
   );
 }
 
-ContentHeader.propTypes = {
-  title: PropTypes.string.isRequired,
-};
-
 export default React.memo(ContentHeader);
diff --git a/src/components/ErrorBoundary.js b/src/components/ErrorBoundary.tsx
index ff49e1e..38d90e2 100644
--- a/src/components/ErrorBoundary.js
+++ b/src/components/ErrorBoundary.tsx
@@ -1,18 +1,21 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import * as React from 'react';
 
 // import { getSentry } from '../misc/sentry';
-import { deriveMessageFromError } from '../misc/errors';
+import { deriveMessageFromError,Err } from '../misc/errors';
 import ErrorBoundaryFallback from './ErrorBoundaryFallback';
 
-class ErrorBoundary extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-  };
+type Props = {
+  children: React.ReactNode;
+};
 
+type State = {
+  error?: Err;
+};
+
+class ErrorBoundary extends React.Component<Props, State> {
   state = { error: null };
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(error: Err) {
     return { error };
   }
 
diff --git a/src/components/ErrorBoundaryFallback.js b/src/components/ErrorBoundaryFallback.tsx
index b03428e..bbaf2d7 100644
--- a/src/components/ErrorBoundaryFallback.js
+++ b/src/components/ErrorBoundaryFallback.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import s0 from './ErrorBoundaryFallback.module.css';
@@ -6,7 +5,12 @@ import SvgGithub from './SvgGithub';
 import SvgYacd from './SvgYacd';
 const yacdRepoIssueUrl = 'https://github.com/haishanh/yacd/issues';
 
-function ErrorBoundaryFallback({ message, detail }) {
+type Props = {
+  message?: string;
+  detail?: string;
+};
+
+function ErrorBoundaryFallback({ message, detail }: Props) {
   return (
     <div className={s0.root}>
       <div className={s0.yacd}>
@@ -24,8 +28,4 @@ function ErrorBoundaryFallback({ message, detail }) {
   );
 }
 
-ErrorBoundaryFallback.propTypes = {
-  message: PropTypes.string,
-};
-
 export default ErrorBoundaryFallback;
diff --git a/src/components/Field.js b/src/components/Field.tsx
index 81bd372..8e2f7e3 100644
--- a/src/components/Field.js
+++ b/src/components/Field.tsx
@@ -1,12 +1,19 @@
 import cx from 'clsx';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import s from './Field.module.css';
 
 const { useCallback } = React;
 
-export default function Field({ id, label, value, onChange, ...props }) {
+type Props = {
+    value?: string | number;
+    type?: 'text' | 'number';
+    onChange?: (...args: any[]) => any;
+    id?: string;
+    label?: string;
+};
+
+export default function Field({ id, label, value, onChange, ...props }: Props) {
   const valueOnChange = useCallback((e) => onChange(e), [onChange]);
   const labelClassName = cx({
     [s.floatAbove]: typeof value === 'string' && value !== '',
@@ -20,11 +27,3 @@ export default function Field({ id, label, value, onChange, ...props }) {
     </div>
   );
 }
-
-Field.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  type: PropTypes.oneOf(['text', 'number']),
-  onChange: PropTypes.func,
-  id: PropTypes.string,
-  label: PropTypes.string,
-};
diff --git a/src/components/Home.js b/src/components/Home.tsx
index 532379b..532379b 100644
--- a/src/components/Home.js
+++ b/src/components/Home.tsx
diff --git a/src/components/Icon.js b/src/components/Icon.tsx
index 2ad162c..9922e58 100644
--- a/src/components/Icon.js
+++ b/src/components/Icon.tsx
@@ -1,8 +1,14 @@
 import cx from 'clsx';
-import PropTypes from 'prop-types';
 import React from 'react';
 
-const Icon = ({ id, width = 20, height = 20, className, ...props }) => {
+type Props = {
+    id: string;
+    width?: number;
+    height?: number;
+    className?: string;
+};
+
+const Icon = ({ id, width = 20, height = 20, className, ...props }: Props) => {
   const c = cx('icon', id, className);
   const href = '#' + id;
   return (
@@ -12,11 +18,4 @@ const Icon = ({ id, width = 20, height = 20, className, ...props }) => {
   );
 };
 
-Icon.propTypes = {
-  id: PropTypes.string.isRequired,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  className: PropTypes.string,
-};
-
 export default React.memo(Icon);
diff --git a/src/components/Input.js b/src/components/Input.tsx
index efdb6ca..8a8c65a 100644
--- a/src/components/Input.js
+++ b/src/components/Input.tsx
@@ -1,11 +1,19 @@
-import PropTypes from 'prop-types';
+
 import React from 'react';
 
 import s0 from './Input.module.css';
 
 const { useState, useRef, useEffect, useCallback } = React;
 
-export default function Input(props) {
+type InputProps = {
+    value?: string | number;
+    type?: string;
+    onChange?: (...args: any[]) => any;
+    name?: string;
+    placeholder?: string;
+};
+
+export default function Input(props: InputProps) {
   return <input className={s0.input} {...props} />;
 }
 
@@ -32,11 +40,3 @@ export function SelfControlledInput({ value, ...restProps }) {
     />
   );
 }
-
-Input.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  type: PropTypes.string,
-  onChange: PropTypes.func,
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-};
diff --git a/src/components/Loading.js b/src/components/Loading.tsx
index 3547d03..7f83416 100644
--- a/src/components/Loading.js
+++ b/src/components/Loading.tsx
@@ -1,9 +1,13 @@
-import PropTypes from 'prop-types';
+
 import React from 'react';
 
 import s0 from './Loading.module.css';
 
-const Loading = ({ height }) => {
+type Props = {
+    height?: string;
+};
+
+const Loading = ({ height }: Props) => {
   const style = height ? { height } : {};
   return (
     <div className={s0.loading} style={style}>
@@ -12,8 +16,4 @@ const Loading = ({ height }) => {
   );
 };
 
-Loading.propTypes = {
-  height: PropTypes.string,
-};
-
 export default Loading;
diff --git a/src/components/Loading2.js b/src/components/Loading2.tsx
index edb2656..edb2656 100644
--- a/src/components/Loading2.js
+++ b/src/components/Loading2.tsx
diff --git a/src/components/LogSearch.js b/src/components/LogSearch.ts
index 9c7879f..9c7879f 100644
--- a/src/components/LogSearch.js
+++ b/src/components/LogSearch.ts
diff --git a/src/components/Logs.js b/src/components/Logs.tsx
index 4ba59b9..d563e77 100644
--- a/src/components/Logs.js
+++ b/src/components/Logs.tsx
@@ -1,5 +1,4 @@
 import cx from 'clsx';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { areEqual, FixedSizeList as List } from 'react-window';
 
@@ -26,7 +25,14 @@ const colors = {
   error: '#c11c1c',
 };
 
-function LogLine({ time, even, payload, type }) {
+type LogLineProps = {
+    time?: string;
+    even?: boolean;
+    payload?: string;
+    type?: string;
+};
+
+function LogLine({ time, even, payload, type }: LogLineProps) {
   const className = cx({ even }, s0.log);
   return (
     <div className={className}>
@@ -41,18 +47,12 @@ function LogLine({ time, even, payload, type }) {
   );
 }
 
-LogLine.propTypes = {
-  time: PropTypes.string,
-  even: PropTypes.bool,
-  payload: PropTypes.string,
-  type: PropTypes.string,
-};
-
 function itemKey(index, data) {
   const item = data[index];
   return item.id;
 }
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'index' does not exist on type '{ childre... Remove this comment to see the full error message
 const Row = memo(({ index, style, data }) => {
   const r = data[index];
   return (
@@ -78,10 +78,12 @@ function Logs({ dispatch, logLevel, apiConfig, logs }) {
     <div>
       <ContentHeader title="Logs" />
       <LogSearch />
+      {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'number | MutableRefObject<any>' is not assig... Remove this comment to see the full error message */}
       <div ref={refLogsContainer} style={{ paddingBottom }}>
         {logs.length === 0 ? (
           <div
             className={s0.logPlaceholder}
+            // @ts-expect-error ts-migrate(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
             style={{ height: containerHeight - paddingBottom }}
           >
             <div className={s0.logPlaceholderIcon}>
@@ -92,6 +94,7 @@ function Logs({ dispatch, logLevel, apiConfig, logs }) {
         ) : (
           <div className={s0.logsWrapper}>
             <List
+              // @ts-expect-error ts-migrate(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
               height={containerHeight - paddingBottom}
               width="100%"
               itemCount={logs.length}
diff --git a/src/components/Modal.js b/src/components/Modal.tsx
index 2144eb5..885b350 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.tsx
@@ -1,18 +1,18 @@
 import cx from 'clsx';
-import PropTypes from 'prop-types';
 import React from 'react';
 import Modal from 'react-modal';
 
 import s0 from './Modal.module.css';
 
-function ModalAPIConfig({
-  isOpen,
-  onRequestClose,
-  className,
-  overlayClassName,
-  children,
-  ...otherProps
-}) {
+type Props = {
+    isOpen: boolean;
+    onRequestClose: (...args: any[]) => any;
+    children: React.ReactNode;
+    className?: string;
+    overlayClassName?: string;
+};
+
+function ModalAPIConfig({ isOpen, onRequestClose, className, overlayClassName, children, ...otherProps }: Props) {
   const contentCls = cx(className, s0.content);
   const overlayCls = cx(overlayClassName, s0.overlay);
   return (
@@ -28,12 +28,4 @@ function ModalAPIConfig({
   );
 }
 
-ModalAPIConfig.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onRequestClose: PropTypes.func.isRequired,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  overlayClassName: PropTypes.string,
-};
-
 export default React.memo(ModalAPIConfig);
diff --git a/src/components/ModalCloseAllConnections.js b/src/components/ModalCloseAllConnections.tsx
index ce567b8..ce567b8 100644
--- a/src/components/ModalCloseAllConnections.js
+++ b/src/components/ModalCloseAllConnections.tsx
diff --git a/src/components/Rule.js b/src/components/Rule.tsx
index da21e2f..cf5339d 100644
--- a/src/components/Rule.js
+++ b/src/components/Rule.tsx
@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types';
+
 import React from 'react';
 
 import s0 from './Rule.module.css';
@@ -17,7 +17,14 @@ function getStyleFor({ proxy }) {
   return { color };
 }
 
-function Rule({ type, payload, proxy, id }) {
+type Props = {
+    id?: number;
+    type?: string;
+    payload?: string;
+    proxy?: string;
+};
+
+function Rule({ type, payload, proxy, id }: Props) {
   const styleProxy = getStyleFor({ proxy });
   return (
     <div className={s0.rule}>
@@ -33,11 +40,4 @@ function Rule({ type, payload, proxy, id }) {
   );
 }
 
-Rule.propTypes = {
-  id: PropTypes.number,
-  type: PropTypes.string,
-  payload: PropTypes.string,
-  proxy: PropTypes.string,
-};
-
 export default Rule;
diff --git a/src/components/Rules.js b/src/components/Rules.tsx
index 949e5e9..dab479c 100644
--- a/src/components/Rules.js
+++ b/src/components/Rules.tsx
@@ -43,6 +43,7 @@ function getItemSizeFactory({ provider }) {
   };
 }
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'index' does not exist on type '{ childre... Remove this comment to see the full error message
 const Row = memo(({ index, style, data }) => {
   const { rules, provider, apiConfig } = data;
   const providerQty = provider.names.length;
@@ -110,6 +111,7 @@ function Rules({ apiConfig }) {
   const { rules, provider } = useRuleAndProvider(apiConfig);
   const invalidateQueries = useInvalidateQueries();
 
+  // @ts-expect-error ts-migrate(2345) FIXME: Argument of type '{ rules: RuleItem[]; provider: {... Remove this comment to see the full error message
   const getItemSize = getItemSizeFactory({ rules, provider });
 
   return (
@@ -118,8 +120,10 @@ function Rules({ apiConfig }) {
         <ContentHeader title="Rules" />
         <TextFilter />
       </div>
+      {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'number | MutableRefObject<any>' is not assig... Remove this comment to see the full error message */}
       <div ref={refRulesContainer} style={{ paddingBottom }}>
         <VariableSizeList
+          // @ts-expect-error ts-migrate(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
           height={containerHeight - paddingBottom}
           width="100%"
           itemCount={rules.length + provider.names.length}
diff --git a/src/components/Search.js b/src/components/Search.tsx
index 2d8c754..2d8c754 100644
--- a/src/components/Search.js
+++ b/src/components/Search.tsx
diff --git a/src/components/Selection.js b/src/components/Selection.tsx
index 764e7b3..9bcb4c8 100644
--- a/src/components/Selection.js
+++ b/src/components/Selection.tsx
@@ -1,15 +1,16 @@
 import cx from 'clsx';
-import { array, func, number } from 'prop-types';
 import React from 'react';
 
 import s from './Selection.module.css';
 
-export default function Selection({
-  OptionComponent,
-  optionPropsList,
-  selectedIndex,
-  onChange,
-}) {
+type SelectionProps = {
+    OptionComponent?: (...args: any[]) => any;
+    optionPropsList?: any[];
+    selectedIndex?: number;
+    onChange?: (...args: any[]) => any;
+};
+
+export default function Selection({ OptionComponent, optionPropsList, selectedIndex, onChange, }: SelectionProps) {
   return (
     <div className={s.root}>
       {optionPropsList.map((props, idx) => {
@@ -35,14 +36,8 @@ export default function Selection({
   );
 }
 
-Selection.propTypes = {
-  OptionComponent: func,
-  optionPropsList: array,
-  selectedIndex: number,
-  onChange: func,
-};
-
 // for test
+// @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
 export function Option({ title }) {
   // eslint-disable-next-line no-undef
   if (__DEV__) {
diff --git a/src/components/SideBar.js b/src/components/SideBar.tsx
index 756af06..6bf58b5 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.tsx
@@ -40,9 +40,13 @@ const icons = {
 };
 
 const SideBarRow = React.memo(function SideBarRow({
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'isActive' does not exist on type '{ chil... Remove this comment to see the full error message
   isActive,
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'to' does not exist on type '{ children?:... Remove this comment to see the full error message
   to,
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'iconId' does not exist on type '{ childr... Remove this comment to see the full error message
   iconId,
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'labelText' does not exist on type '{ chi... Remove this comment to see the full error message
   labelText,
 }) {
   const Comp = icons[iconId];
@@ -55,6 +59,7 @@ const SideBarRow = React.memo(function SideBarRow({
   );
 });
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'propTypes' does not exist on type 'Named... Remove this comment to see the full error message
 SideBarRow.propTypes = {
   isActive: PropTypes.bool.isRequired,
   to: PropTypes.string.isRequired,
@@ -107,6 +112,7 @@ function SideBar({ dispatch, theme }) {
         {pages.map(({ to, iconId, labelText }) => (
           <SideBarRow
             key={to}
+            // @ts-expect-error ts-migrate(2322) FIXME: Type '{ key: string; to: string; isActive: boolean... Remove this comment to see the full error message
             to={to}
             isActive={location.pathname === to}
             iconId={iconId}
diff --git a/src/components/StateProvider.js b/src/components/StateProvider.tsx
index e905d98..beb7ce4 100644
--- a/src/components/StateProvider.js
+++ b/src/components/StateProvider.tsx
@@ -42,6 +42,7 @@ export default function Provider({ initialState, actions = {}, children }) {
   const getState = useCallback(() => stateRef.current, []);
   useEffect(() => {
     if (process.env.NODE_ENV === 'development') {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'getState2' does not exist on type 'Windo... Remove this comment to see the full error message
       window.getState2 = getState;
     }
   }, [getState]);
@@ -94,6 +95,7 @@ export function connect(mapStateToProps) {
 // steal from https://github.com/reduxjs/redux/blob/master/src/bindActionCreators.ts
 function bindAction(action, dispatch) {
   return function (...args) {
+    // @ts-expect-error ts-migrate(2683) FIXME: 'this' implicitly has type 'any' because it does n... Remove this comment to see the full error message
     return dispatch(action.apply(this, args));
   };
 }
diff --git a/src/components/StyleGuide.js b/src/components/StyleGuide.tsx
index 5979ee5..99c8bb0 100644
--- a/src/components/StyleGuide.js
+++ b/src/components/StyleGuide.tsx
@@ -51,12 +51,15 @@ class StyleGuide extends PureComponent {
   render() {
     return (
       <div>
+        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
         <Pane>
           <SwitchExample />
         </Pane>
+        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
         <Pane>
           <Input />
         </Pane>
+        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
         <Pane>
           <ToggleSwitch
             name="test"
@@ -65,6 +68,7 @@ class StyleGuide extends PureComponent {
             onChange={noop}
           />
         </Pane>
+        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
         <Pane>
           <Button text="Test Lxatency" start={<Zap size={16} />} />
           <Button text="Test Lxatency" start={<Zap size={16} />} isLoading />
diff --git a/src/components/SvgGithub.js b/src/components/SvgGithub.tsx
index bc79cd3..b400b55 100644
--- a/src/components/SvgGithub.js
+++ b/src/components/SvgGithub.tsx
@@ -1,7 +1,12 @@
-import PropTypes from 'prop-types';
+
 import React from 'react';
 
-export default function SvgGithub({ width = 24, height = 24 } = {}) {
+type Props = {
+    width?: number;
+    height?: number;
+};
+
+export default function SvgGithub({ width = 24, height = 24 }: Props = {}) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -18,8 +23,3 @@ export default function SvgGithub({ width = 24, height = 24 } = {}) {
     </svg>
   );
 }
-
-SvgGithub.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-};
diff --git a/src/components/SvgYacd.js b/src/components/SvgYacd.tsx
index 0dcd36c..2aa5cc1 100644
--- a/src/components/SvgYacd.js
+++ b/src/components/SvgYacd.tsx
@@ -1,16 +1,23 @@
 import cx from 'clsx';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import s from './SvgYacd.module.css';
 
+type Props = {
+  width?: number;
+  height?: number;
+  animate?: boolean;
+  c0?: string;
+  c1?: string;
+};
+
 function SvgYacd({
   width = 320,
   height = 320,
   animate = false,
   c0 = 'currentColor',
   c1 = '#eee',
-}) {
+}: Props) {
   const faceClasName = cx({ [s.path]: animate });
   return (
     <svg
@@ -40,9 +47,4 @@ function SvgYacd({
   );
 }
 
-SvgYacd.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-};
-
 export default SvgYacd;
diff --git a/src/components/SwitchThemed.js b/src/components/SwitchThemed.tsx
index 5c528f4..5c528f4 100644
--- a/src/components/SwitchThemed.js
+++ b/src/components/SwitchThemed.tsx
diff --git a/src/components/ToggleSwitch.js b/src/components/ToggleSwitch.tsx
index 03af15f..62f3418 100644
--- a/src/components/ToggleSwitch.js
+++ b/src/components/ToggleSwitch.tsx
@@ -1,15 +1,23 @@
-import PropTypes from 'prop-types';
+
 import React, { useCallback, useMemo } from 'react';
 
 import s0 from './ToggleSwitch.module.css';
 
-function ToggleSwitch({ options, value, name, onChange }) {
+type Props = {
+    options?: any[];
+    value?: string;
+    name?: string;
+    onChange?: (...args: any[]) => any;
+};
+
+function ToggleSwitch({ options, value, name, onChange }: Props) {
   const idxSelected = useMemo(
     () => options.map((o) => o.value).indexOf(value),
     [options, value]
   );
 
   const getPortionPercentage = useCallback(
+    // @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
     (idx) => {
       const w = Math.floor(100 / options.length);
       if (idx === options.length - 1) {
@@ -59,11 +67,4 @@ function ToggleSwitch({ options, value, name, onChange }) {
   );
 }
 
-ToggleSwitch.propTypes = {
-  options: PropTypes.array,
-  value: PropTypes.string,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-};
-
 export default React.memo(ToggleSwitch);
diff --git a/src/components/TrafficChart.js b/src/components/TrafficChart.tsx
index bcfd4dc..5fcdf7d 100644
--- a/src/components/TrafficChart.js
+++ b/src/components/TrafficChart.tsx
@@ -50,6 +50,7 @@ function TrafficChart({ apiConfig, selectedChartStyleIndex }) {
   useLineChart(Chart, 'trafficChart', data, traffic);
 
   return (
+    // @ts-expect-error ts-migrate(2322) FIXME: Type '{ position: string; maxWidth: number; }' is ... Remove this comment to see the full error message
     <div style={chartWrapperStyle}>
       <canvas id="trafficChart" />
     </div>
diff --git a/src/components/TrafficChartSample.js b/src/components/TrafficChartSample.tsx
index 0723505..0723505 100644
--- a/src/components/TrafficChartSample.js
+++ b/src/components/TrafficChartSample.tsx
diff --git a/src/components/TrafficNow.js b/src/components/TrafficNow.tsx
index cfab65b..cfab65b 100644
--- a/src/components/TrafficNow.js
+++ b/src/components/TrafficNow.tsx
diff --git a/src/components/proxies/ProxyProvider.tsx b/src/components/proxies/ProxyProvider.tsx
index fd9f942..de0a94f 100644
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/src/components/proxies/ProxyProvider.tsx
@@ -1,6 +1,7 @@
 import { formatDistance } from 'date-fns';
 import * as React from 'react';
 import { RotateCw, Zap } from 'react-feather';
+import { DelayMapping } from 'src/store/types';
 
 import { framerMotionResouce } from '../../misc/motion';
 import {
@@ -10,7 +11,6 @@ import {
   getProxySortBy,
 } from '../../store/app';
 import {
-  DelayMapping,
   getDelay,
   healthcheckProviderByName,
   updateProviderByName,
@@ -89,6 +89,7 @@ function ProxyProviderImpl({
       <div className={s.updatedAt}>
         <small>Updated {timeAgo} ago</small>
       </div>
+      {/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element[]; isOpen: boolean; }' i... Remove this comment to see the full error message */}
       <Collapsible isOpen={isOpen}>
         <ProxyList all={proxies} />
         <div className={s.actionFooter}>
@@ -101,6 +102,7 @@ function ProxyProviderImpl({
           />
         </div>
       </Collapsible>
+      {/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; isOpen: boolean; }' is ... Remove this comment to see the full error message */}
       <Collapsible isOpen={!isOpen}>
         <ProxyListSummaryView all={proxies} />
       </Collapsible>
diff --git a/src/components/proxies/Settings.js b/src/components/proxies/Settings.tsx
index bb859ac..bb859ac 100644
--- a/src/components/proxies/Settings.js
+++ b/src/components/proxies/Settings.tsx
diff --git a/src/components/proxies/hooks.tsx b/src/components/proxies/hooks.tsx
index 7536633..861c0e5 100644
--- a/src/components/proxies/hooks.tsx
+++ b/src/components/proxies/hooks.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
+import { DelayMapping, ProxiesMapping, ProxyItem } from 'src/store/types';
 
 import {
   // types
-  DelayMapping,
   NonProxyTypes,
-  ProxiesMapping,
   // atom
   proxyFilterText,
-  ProxyItem,
 } from '../../store/proxies';
 
 const { useMemo } = React;
diff --git a/src/components/shared/BaseModal.js b/src/components/shared/BaseModal.tsx
index dcd0b57..dcd0b57 100644
--- a/src/components/shared/BaseModal.js
+++ b/src/components/shared/BaseModal.tsx
diff --git a/src/components/shared/Basic.js b/src/components/shared/Basic.tsx
index dbd1bc7..dbd1bc7 100644
--- a/src/components/shared/Basic.js
+++ b/src/components/shared/Basic.tsx