diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index bbec80d..4e9b25c 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -3,17 +3,20 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: ['airbnb', 'plugin:react/recommended', 'plugin:prettier/recommended'],
+  extends: [
+    'airbnb',
+    'airbnb-typescript',
+    'airbnb/hooks',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
+    project: './tsconfig.json',
   },
-  plugins: ['import', 'react', 'jsx-a11y', 'react-hooks', 'prettier'],
+  plugins: ['@typescript-eslint', 'import', 'react', 'jsx-a11y', 'prettier'],
   rules: {
-    'react/display-name': 'off',
     'prettier/prettier': 'error',
-    'react/react-in-jsx-scope': 'off',
-    'react/jsx-filename-extension': 'off',
+    'react/require-default-props': 'off',
     'jsx-a11y/control-has-associated-label': 'off',
     'jsx-a11y/label-has-associated-control': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
diff --git a/README.md b/README.md
index 16baa32..f4beb87 100644
--- a/README.md
+++ b/README.md
@@ -4,16 +4,16 @@ Are you ready to dive into the world of cryptocurrency trading? Look no further!
 
 **Key Features**
 
-* **Real-time Market Data**: Stay up-to-date with the latest market trends and prices.
-* **User Profile Management**: Manage your account, view transaction history, and track your portfolio.
-* **Secure Transactions**: Execute trades with confidence using our secure transaction processing system.
-* **Multi-Currency Support**: Trade with a variety of cryptocurrencies and fiat currencies.
-* **Responsive Design**: Accessible on any device, ensuring a seamless user experience across all platforms.
+- **Real-time Market Data**: Stay up-to-date with the latest market trends and prices.
+- **User Profile Management**: Manage your account, view transaction history, and track your portfolio.
+- **Secure Transactions**: Execute trades with confidence using our secure transaction processing system.
+- **Multi-Currency Support**: Trade with a variety of cryptocurrencies and fiat currencies.
+- **Responsive Design**: Accessible on any device, ensuring a seamless user experience across all platforms.
 
 **Why Choose This Template?**
 
-* **Easy Customization**: Tailor the template to fit your brand's unique style and needs.
-* **Fast Development**: Get your exchange up and running quickly with our pre-built components and features.
+- **Easy Customization**: Tailor the template to fit your brand's unique style and needs.
+- **Fast Development**: Get your exchange up and running quickly with our pre-built components and features.
 
 **Get Started Today!**
 
diff --git a/package.json b/package.json
index 3a7149f..2d9be1e 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,13 @@
   "private": true,
   "dependencies": {
     "apexcharts": "^3.51.0",
-    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",
     "react-scripts": "^5.0.1",
-    "react-sparklines": "^1.7.0"
+    "react-sparklines": "^1.7.0",
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -37,14 +37,23 @@
     ]
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-sparklines": "^1.7.5",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "prettier": "^3.3.3"
+    "prettier": "^3.3.3",
+    "typescript-eslint": "^7.17.0"
   }
 }
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 9a47fcf..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Navigation from './navigation/Navigation';
-
-const App = () => <Navigation />;
-
-export default App;
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..6bbc2bb
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import Navigation from './navigation/Navigation';
+
+const App = (): React.JSX.Element => <Navigation />;
+
+export default App;
diff --git a/src/components/Common/Box.js b/src/components/Common/Box.js
deleted file mode 100644
index 4997bfe..0000000
--- a/src/components/Common/Box.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
-
-const Box = memo(({ children }) => <div className='box'>{children}</div>);
-
-Box.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default Box;
diff --git a/src/components/Common/Box.tsx b/src/components/Common/Box.tsx
new file mode 100644
index 0000000..0c92f00
--- /dev/null
+++ b/src/components/Common/Box.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+// interfaces
+interface IProps {
+  children: React.ReactNode;
+}
+
+const Box = ({ children }: IProps): React.JSX.Element => <div className='box'>{children}</div>;
+
+export default Box;
diff --git a/src/components/Forms/FormButton.js b/src/components/Forms/FormButton.js
deleted file mode 100644
index ba3a257..0000000
--- a/src/components/Forms/FormButton.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
-
-const FormButton = memo(({ type, text, onClick }) => (
-  <button
-    type={type === 'submit' ? 'submit' : 'button'}
-    className='button button-purple button-medium'
-    onClick={onClick}
-  >
-    {text}
-  </button>
-));
-
-FormButton.propTypes = {
-  type: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-export default FormButton;
diff --git a/src/components/Forms/FormButton.tsx b/src/components/Forms/FormButton.tsx
new file mode 100644
index 0000000..566b141
--- /dev/null
+++ b/src/components/Forms/FormButton.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+// interfaces
+interface IProps {
+  type: string;
+  text: string;
+  onClick: (e: React.FormEvent) => void;
+}
+
+const FormButton = ({ type, text, onClick }: IProps): React.JSX.Element => (
+  <button
+    onClick={onClick}
+    type={type === 'submit' ? 'submit' : 'button'}
+    className='button button-purple button-medium'
+  >
+    {text}
+  </button>
+);
+
+export default FormButton;
diff --git a/src/components/Forms/FormCheckbox.js b/src/components/Forms/FormCheckbox.js
deleted file mode 100644
index 9250719..0000000
--- a/src/components/Forms/FormCheckbox.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
-
-const FormCheckbox = memo(({ name, text, onChange, checked }) => (
-  <label className='checkbox-container'>
-    {text}
-    <input
-      type='checkbox'
-      id={name}
-      name={name}
-      value='0'
-      defaultChecked={checked}
-      onChange={(e) => onChange(e)}
-    />
-    <span className='checkmark' />
-  </label>
-));
-
-FormCheckbox.propTypes = {
-  name: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  checked: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default FormCheckbox;
diff --git a/src/components/Forms/FormCheckbox.tsx b/src/components/Forms/FormCheckbox.tsx
new file mode 100644
index 0000000..5af01ba
--- /dev/null
+++ b/src/components/Forms/FormCheckbox.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+// interfaces
+interface IProps {
+  name: string;
+  text: string;
+  checked: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const FormCheckbox = ({ name, text, onChange, checked }: IProps): React.JSX.Element => (
+  <label className='checkbox-container'>
+    {text}
+    <input
+      value='0'
+      id={name}
+      name={name}
+      type='checkbox'
+      onChange={onChange}
+      defaultChecked={checked}
+    />
+    <span className='checkmark' />
+  </label>
+);
+
+export default FormCheckbox;
diff --git a/src/components/Forms/FormInput.js b/src/components/Forms/FormInput.js
deleted file mode 100644
index dbb93f4..0000000
--- a/src/components/Forms/FormInput.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
-
-const FormInput = memo(({ type, name, value, placeholder, onChange }) => (
-  <input
-    id={name}
-    name={name}
-    type={type}
-    value={value}
-    autoComplete='off'
-    onChange={onChange}
-    placeholder={placeholder}
-  />
-));
-
-FormInput.defaultProps = {
-  value: '',
-};
-
-FormInput.propTypes = {
-  type: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string.isRequired,
-};
-
-export default FormInput;
diff --git a/src/components/Forms/FormInput.tsx b/src/components/Forms/FormInput.tsx
new file mode 100644
index 0000000..dddde2e
--- /dev/null
+++ b/src/components/Forms/FormInput.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+// interfaces
+interface IProps {
+  type: string;
+  name: string;
+  value: string;
+  placeholder: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const FormInput = ({ type, name, value, placeholder, onChange }: IProps): React.JSX.Element => (
+  <input
+    id={name}
+    name={name}
+    type={type}
+    value={value}
+    autoComplete='off'
+    onChange={onChange}
+    placeholder={placeholder}
+  />
+);
+
+export default FormInput;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.tsx
similarity index 50%
rename from src/components/Header/Header.js
rename to src/components/Header/Header.tsx
index 2c529cf..5f797e7 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.tsx
@@ -1,23 +1,20 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
+// components
 import HeaderLeft from './HeaderLeft';
 import HeaderRight from './HeaderRight';
 
-const Header = memo(({ icon, title }) => (
+// interfaces
+interface IProps {
+  icon?: string;
+  title: string;
+}
+
+const Header = ({ icon, title }: IProps): React.JSX.Element => (
   <header className='flex flex-center flex-space-between'>
     <HeaderLeft icon={icon} title={title} />
     <HeaderRight />
   </header>
-));
-
-Header.defaultProps = {
-  icon: null,
-};
-
-Header.propTypes = {
-  icon: PropTypes.string,
-  title: PropTypes.string.isRequired,
-};
+);
 
 export default Header;
diff --git a/src/components/Header/HeaderLeft.js b/src/components/Header/HeaderLeft.js
deleted file mode 100644
index d7fdafb..0000000
--- a/src/components/Header/HeaderLeft.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
-
-const HeaderLeft = memo(({ icon, title }) => (
-  <div className='header-left nowrap no-select'>
-    {icon && (
-      <button type='button' className='pointer'>
-        <i className='material-icons'>{icon}</i>
-      </button>
-    )}
-    <h1>{title}</h1>
-  </div>
-));
-
-HeaderLeft.defaultProps = {
-  icon: null,
-};
-
-HeaderLeft.propTypes = {
-  icon: PropTypes.string,
-  title: PropTypes.string.isRequired,
-};
-
-export default HeaderLeft;
diff --git a/src/components/Header/HeaderLeft.tsx b/src/components/Header/HeaderLeft.tsx
new file mode 100644
index 0000000..9acdb31
--- /dev/null
+++ b/src/components/Header/HeaderLeft.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+// interfaces
+interface IProps {
+  icon?: string;
+  title: string;
+}
+
+const HeaderLeft = ({ icon, title }: IProps): React.JSX.Element => (
+  <div className='header-left nowrap no-select'>
+    {icon && (
+      <button type='button' className='pointer'>
+        <i className='material-icons'>{icon}</i>
+      </button>
+    )}
+    <h1>{title}</h1>
+  </div>
+);
+
+export default HeaderLeft;
diff --git a/src/components/Header/HeaderRight.js b/src/components/Header/HeaderRight.tsx
similarity index 97%
rename from src/components/Header/HeaderRight.js
rename to src/components/Header/HeaderRight.tsx
index 699abca..f7987aa 100644
--- a/src/components/Header/HeaderRight.js
+++ b/src/components/Header/HeaderRight.tsx
@@ -1,7 +1,8 @@
-import { memo } from 'react';
+import React from 'react';
+
 import { Link, useLocation } from 'react-router-dom';
 
-const HeaderRight = memo(() => {
+const HeaderRight = () => {
   const location = useLocation();
 
   return (
@@ -80,6 +81,6 @@ const HeaderRight = memo(() => {
       </div>
     </div>
   );
-});
+};
 
 export default HeaderRight;
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.tsx
similarity index 96%
rename from src/components/Navbar/Navbar.js
rename to src/components/Navbar/Navbar.tsx
index 6d2342c..7b01604 100644
--- a/src/components/Navbar/Navbar.js
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,9 +1,11 @@
-import { memo } from 'react';
+import React from 'react';
+
 import { Link } from 'react-router-dom';
 
+// components
 import NavbarButton from './NavbarButton';
 
-const Navbar = memo(() => (
+const Navbar = () => (
   <nav className='navbar-inner no-select'>
     <div className='logo'>
       <Link to='/market'>
@@ -60,6 +62,6 @@ const Navbar = memo(() => (
       </p>
     </div>
   </nav>
-));
+);
 
 export default Navbar;
diff --git a/src/components/Navbar/NavbarButton.js b/src/components/Navbar/NavbarButton.tsx
similarity index 57%
rename from src/components/Navbar/NavbarButton.js
rename to src/components/Navbar/NavbarButton.tsx
index 1ddd6c8..8fb9a43 100644
--- a/src/components/Navbar/NavbarButton.js
+++ b/src/components/Navbar/NavbarButton.tsx
@@ -1,8 +1,15 @@
-import { memo } from 'react';
+import React from 'react';
+
 import { Link, useLocation } from 'react-router-dom';
-import PropTypes from 'prop-types';
 
-const NavbarButton = memo(({ url, icon, title }) => {
+// interfaces
+interface IProps {
+  url: string;
+  icon: string;
+  title: string;
+}
+
+const NavbarButton = ({ url, icon, title }: IProps): React.JSX.Element => {
   const location = useLocation();
 
   return (
@@ -14,12 +21,6 @@ const NavbarButton = memo(({ url, icon, title }) => {
       <span>{title}</span>
     </Link>
   );
-});
-
-NavbarButton.propTypes = {
-  url: PropTypes.string.isRequired,
-  icon: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
 };
 
 export default NavbarButton;
diff --git a/src/components/Tables/Capital/CapitalRow.js b/src/components/Tables/Capital/CapitalRow.tsx
similarity index 80%
rename from src/components/Tables/Capital/CapitalRow.js
rename to src/components/Tables/Capital/CapitalRow.tsx
index ce271d5..001cfd7 100644
--- a/src/components/Tables/Capital/CapitalRow.js
+++ b/src/components/Tables/Capital/CapitalRow.tsx
@@ -1,20 +1,30 @@
-import { memo, useState, useEffect } from 'react';
+import React from 'react';
+
 import { Sparklines, SparklinesLine } from 'react-sparklines';
-import PropTypes from 'prop-types';
 
-const CapitalRow = memo(({ item, index }) => {
-  const [color, setColor] = useState('');
-  const [menuOpened, setMenuOpened] = useState(false);
+// interfaces
+interface IProps {
+  item: any;
+  index: number;
+}
+
+const CapitalRow = ({ item, index }: IProps): React.JSX.Element => {
+  const [color, setColor] = React.useState<string>('');
+  const [menuOpened, setMenuOpened] = React.useState<boolean>(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (item.status === 1) {
       setColor('green');
     } else {
       setColor('red');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleMenuOpen = () => {
+  /**
+   * Toggles the state of the menu to open or close.
+   */
+  const handleMenuOpen = (): void => {
     setMenuOpened(!menuOpened);
   };
 
@@ -75,12 +85,6 @@ const CapitalRow = memo(({ item, index }) => {
       </td>
     </tr>
   );
-});
-
-CapitalRow.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
-  index: PropTypes.number.isRequired,
 };
 
 export default CapitalRow;
diff --git a/src/components/Tables/TopBar/TopBar.js b/src/components/Tables/TopBar/TopBar.tsx
similarity index 78%
rename from src/components/Tables/TopBar/TopBar.js
rename to src/components/Tables/TopBar/TopBar.tsx
index d771566..b8239f9 100644
--- a/src/components/Tables/TopBar/TopBar.js
+++ b/src/components/Tables/TopBar/TopBar.tsx
@@ -1,7 +1,13 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const TopBar = memo(({ searchValue, searchOnChange, searchSubmit }) => (
+// interfaces
+interface IProps {
+  searchValue: string;
+  searchSubmit: (e: React.FormEvent) => void;
+  searchOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const TopBar = ({ searchValue, searchOnChange, searchSubmit }: IProps): React.JSX.Element => (
   <div className='top-buttons flex flex-destroy flex-center flex-space-between'>
     <div>
       <div className='top-search no-select nowrap'>
@@ -11,9 +17,9 @@ const TopBar = memo(({ searchValue, searchOnChange, searchSubmit }) => (
             id='search'
             name='search'
             autoComplete='off'
-            placeholder='Aranacak kelime'
-            onChange={searchOnChange}
             value={searchValue}
+            onChange={searchOnChange}
+            placeholder='Aranacak kelime'
           />
           <button type='submit' className='pointer'>
             <i className='material-icons'>search</i>
@@ -33,12 +39,6 @@ const TopBar = memo(({ searchValue, searchOnChange, searchSubmit }) => (
       </button>
     </div>
   </div>
-));
-
-TopBar.propTypes = {
-  searchValue: PropTypes.string.isRequired,
-  searchSubmit: PropTypes.func.isRequired,
-  searchOnChange: PropTypes.func.isRequired,
-};
+);
 
 export default TopBar;
diff --git a/src/components/Tables/Transactions/Amount.js b/src/components/Tables/Transactions/Amount.js
deleted file mode 100644
index baf1b53..0000000
--- a/src/components/Tables/Transactions/Amount.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
-
-const Amount = memo(({ type, amount }) => {
-  if (type === 1) {
-    return <strong className='red'>{amount}</strong>;
-  }
-
-  return <strong className='green'>{amount}</strong>;
-});
-
-Amount.propTypes = {
-  type: PropTypes.number.isRequired,
-  amount: PropTypes.string.isRequired,
-};
-
-export default Amount;
diff --git a/src/components/Tables/Transactions/Amount.tsx b/src/components/Tables/Transactions/Amount.tsx
new file mode 100644
index 0000000..577eb41
--- /dev/null
+++ b/src/components/Tables/Transactions/Amount.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+// interfaces
+interface IProps {
+  type: number;
+  amount: string;
+}
+
+const Amount = ({ type, amount }: IProps): React.JSX.Element => {
+  if (type === 1) {
+    return <strong className='red'>{amount}</strong>;
+  }
+
+  return <strong className='green'>{amount}</strong>;
+};
+
+export default Amount;
diff --git a/src/components/Tables/Transactions/Icon.js b/src/components/Tables/Transactions/Icon.tsx
similarity index 65%
rename from src/components/Tables/Transactions/Icon.js
rename to src/components/Tables/Transactions/Icon.tsx
index c1cfc48..5787753 100644
--- a/src/components/Tables/Transactions/Icon.js
+++ b/src/components/Tables/Transactions/Icon.tsx
@@ -1,7 +1,11 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const Icon = memo(({ type }) => {
+// interfaces
+interface IProps {
+  type: number;
+}
+
+const Icon = ({ type }: IProps): React.JSX.Element => {
   if (type === 1) {
     return (
       <div className='operation red'>
@@ -15,10 +19,6 @@ const Icon = memo(({ type }) => {
       <i className='material-icons'>arrow_downward</i>
     </div>
   );
-});
-
-Icon.propTypes = {
-  type: PropTypes.number.isRequired,
 };
 
 export default Icon;
diff --git a/src/components/Tables/Transactions/Status.js b/src/components/Tables/Transactions/Status.tsx
similarity index 60%
rename from src/components/Tables/Transactions/Status.js
rename to src/components/Tables/Transactions/Status.tsx
index 08aabca..842dad5 100644
--- a/src/components/Tables/Transactions/Status.js
+++ b/src/components/Tables/Transactions/Status.tsx
@@ -1,7 +1,11 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const Status = memo(({ status }) => {
+// interfaces
+interface IProps {
+  status: number;
+}
+
+const Status = ({ status }: IProps): React.JSX.Element => {
   if (status === 1) {
     return <span className='status green'>BİTMİŞ</span>;
   }
@@ -11,10 +15,6 @@ const Status = memo(({ status }) => {
   }
 
   return <span className='status gray'>BEKLİYOR</span>;
-});
-
-Status.propTypes = {
-  status: PropTypes.number.isRequired,
 };
 
 export default Status;
diff --git a/src/components/Tables/Transactions/TransactionRow.js b/src/components/Tables/Transactions/TransactionRow.tsx
similarity index 78%
rename from src/components/Tables/Transactions/TransactionRow.js
rename to src/components/Tables/Transactions/TransactionRow.tsx
index 312060b..0c738a8 100644
--- a/src/components/Tables/Transactions/TransactionRow.js
+++ b/src/components/Tables/Transactions/TransactionRow.tsx
@@ -1,11 +1,16 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
+// components
 import Icon from './Icon';
 import Amount from './Amount';
 import Status from './Status';
 
-const TransactionRow = memo(({ item }) => (
+// interfaces
+interface IProps {
+  item: any;
+}
+
+const TransactionRow = ({ item }: IProps): React.JSX.Element => (
   <tr>
     <td aria-label='type'>
       <Icon type={item.type} />
@@ -28,11 +33,6 @@ const TransactionRow = memo(({ item }) => (
       <Status status={item.status} />
     </td>
   </tr>
-));
-
-TransactionRow.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
-};
+);
 
 export default TransactionRow;
diff --git a/src/components/Widgets/BankProcess/BankProcess.js b/src/components/Widgets/BankProcess/BankProcess.js
deleted file mode 100644
index 42d0ea7..0000000
--- a/src/components/Widgets/BankProcess/BankProcess.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import { memo, useState, useEffect } from 'react';
-
-import Box from '../../Common/Box';
-
-const BankProcess = memo(() => {
-  const [tab, setTab] = useState(0);
-  const [bankDetails, setBankDetails] = useState([]);
-  const [selectedBank, setSelectedBank] = useState(1);
-
-  useEffect(() => {
-    const dataArray = [
-      {
-        id: 1,
-        name: 'Ziraat Bankası',
-        branch: 'Ataşehir Şubesi',
-        iban: 'TR01 0000 0000 0000 0000 0000 01',
-        logo: 'https://mekaskablo.com/wp-content/uploads/2019/11/ziraat-bankas%C4%B1-logo.jpg',
-      },
-      {
-        id: 2,
-        name: 'Garanti Bankası',
-        branch: 'Etiler Şubesi',
-        iban: 'TR02 0000 0000 0000 0000 0000 02',
-        logo: 'https://upload.wikimedia.org/wikipedia/tr/7/75/Garanti_BBVA.png',
-      },
-      {
-        id: 3,
-        name: 'Yapı ve Kredi Bankası',
-        branch: 'Şişli Şubesi',
-        iban: 'TR03 0000 0000 0000 0000 0000 03',
-        logo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhYAAABeCAMAAABIDa3JAAAAxlBMVEX///8AOG2dnZyampkANGsANmwAL2gALWcAMmqYmJcAImLQ2uMbRna0xNPs8fXO1d4zV4Lk6u9ohqSBla7V3OQ8WYJOZYlCX4YAO3AAKmhng6Kjo6LCy9YnVoNMcJW6urnq6ur19fWrq6rj4+Pa2tqHnbWZqb3ExMO5ydfNzc2xsbDm5ubHx8e8vLzR0dEAG18AE1ylscIAGV4mTHqFm7QAH2BefZ12j6tddJUdR3aSp71AZY01U34KP3GessZVbI5re5hzkK4cTaAVAAAYIElEQVR4nO1dfV/qvM8H9oyCoqhMOLIBiiDg5fH4cHy8fu//Td1sa7cmTbsNcTfX52P+UrZ1XfNtkiZpWqvlUxiMV9P5fNToj+bz4XI1DoKwwGOFKIjaHq7b7Tf68/l0Ni7cdKeLqV3wYgW0d47oOPusAbr02KqwY/SodJ6ORXrJH6xgNRw1PMMwGgmt//LWHJxOgi93MZxM12gQ2m5EbY/mi3GRp1+cHiT3OL3WPjXRRX/w5e6WoZZjuyI5b+lIh48+uGQ3O9X1q/0JBsZmiNz7xxbIudf3KBwvAdcyWvPPayxvNhca4c2s73lU03Hb80lu0wc9qw7IPUuH/uBdfa0Sapnw/eZJ1rcm7JtzWWG/2qeu8GrL57Bogs4e6mARLkYk2wT+jabBRr0Lp/NGTtP95U1OG2do6Otm+jUtH11yjnVNbZ9aJuS9AItHG1yx3rsV9gvCou6UhsV4SM9lxL4i8xpROJ4Xa3o00bZz6SDe+3f8Ehr6uuXslezkF0ktLfaQkHOequzXF2FxM9TPZnFez2elejbJERSgaR0wug8IFvYjv4R1iPVeqotfJzUsMJj9Ci2LL8IiWEuKYpxLpnVfP61FGo/KNT3SmJ+vaOxT5nduEWCcl8Id3A4plUgHIbZi7fYVWKz6JTiXsG8eFOpVWFgIpS03pkoldYUtCIupig98wa1Sf0eklBYvsGvWe7XabXNYBCOvJCgi7nlq7mU0K2BSyE33VQJjbx/pCucjufAvMi3c5635WQqSChbhXyQsjqrt18awKC8qGPdGQU6XwuFmLTcaC0WLn+Ab18ZFYr618Rqlch2iVCJ3Lvy9Wstic1hMNxAVDBeG3vSclNUfGXlzerZjLcK+Z4CESN2pePCV0iJ8hUCudhlS2xgW841ZFwFjqenQ7Estj0hctJtYi8Q2xJ2Elm2MaClSSIuBD3623g8q7pcKFv84Avm/ICzCkZp3kdPb82ifZ3qPYlavaamTQvltGyPSuXWBtIh/Rf5aZdAhIYW0QMLCPq+6XwpYdF6uRLoDLmEVKiJu9YfT1WRNsyiMoeSfChdqsyJuez6dpW036LaNfkC0i+WCexH9ivS3tV+5DlHA4gD+WPerXiCpYKGjkNYgXn8+g2uBcLKYN2j3A829QKGbDK8/nI0BksLxbE5HSiiTtnuPENBb/3iA3FzVz0mVEnmCKyS74mVIbSNYULwzjNGMEgBhOBuRJiTFPVoKrZmvcJwHsz6BDNK+eEb6wh3IfkTnTn7uu4mUFh3r/9my2AQWxBrE8IYa/+XNlFrLyvIiIJe8Ho03RpOhDAxjLt+HHVfOlQQVy8z99O0TKS2eIF4zX311VBoWE2J+znMSH8IFwXEsLwJKVhj9VY6HaSI/Zsj+ixDBwv631jmEM1Ue/ZBT3phQTxW7mZIWHeh9swpaFmF78PFCsa/YZ7S7rY+PQbed3FUWFqEkK9acK9DnBTGrgbSnNEihpgnHmiHDFIep79sDvA4BCTjd1p+LX73ft7e3zd7h41VLtkbDPUjJj63jX/bvW793eFxI8lOwuELCopDJMzjef2j6zQvE+4O7o4t3P/6M9/VnXKuySVqPzQff95sPzder6FPLwkJaKmgWm4AIc9IYCteJy5owh75pwrxo2cht2EWjb55knA8/Pv+6jssEvGXajvv2iNl80NsXqRe/5cR1IkZblum8X4hQujw7FejsindLViJtKMWsHsoXAy2dJbk5rbO6EzUEvfftl7N33+HrregzrLcjSvR0Hh0+ayzX+ftHCYvuifgVp4/8CyVnkwddluHNZDUdztc0XC8mYVYWMaun6cWphAocFA3Hq8UyankutVxboKe9aQ1R5w3OS+fyAv2QhSiv9puuhUPudvMVRqsOHEskf/3T8YPQpuX8FR44902BfP4yQlq0gCexbj+jLzkSW/KjRUr7yGdMtB+zcQlfer6J/bim45xLgq9z6Ij3Wf5rJ1S4s36LX+FwL2eImQdD5ZNhf21+Gin1+0NxDSHrCYM/LlssxlLkfLAYxW4QTo0+XJ1Izwf427EWOXyH/zt8Uu6d+ngw2Zj3QHD7AIxl3Y9eAR909zOZfQRe72hgcQKFhY+lFGgpCqF1PlO5Z5+ng9K9cOjPcPbRiit8xnlK9lv3E/Qix/mN57SoxNd2peyjMLyGmK8nrWLYciTEzzUMwaoIJ0SaFmp5gq5Kq5FrOAnrWBrss/sGDgqrCvc0zwUoSrB4wS72upNZsUpYICVy+mGpmuAtiUxcw6J7mP2Q2SGDd+VnmP4VaPBOxo/9egJ+08Mi6CPeCKigFhsJh/rDbDBX+GLCPsk4EIPkK8o7kdwlSBQkLwy8Yg6xWoDk/GF86uHMTzBcFwIsoGwwD4gXmKldUFBaWG8XessCtWQ/tU8c8V92095fZFCDRqGHBqeoxbfAf/WwQNzzsqEf65IvjEZmgIyxFRBdWnn4gSyyMZ7rWhaU2Aq0bIzwcD5hUQmIJeB0pRkPqZnpEQgL6/2MYEQGo4LSoo6wJeKQtyR+h/v4DHQKg0V4ppQV8UtcwepBtgxJWligxalgMM5yguFCVhaS9pEaCZEQEmVFbsuZKEIaDouLgU4MuJ+xGYAMcGpE06UaUiJ4giX0wK2LgtICv02yLBAsLCjcbNbuJU47Q+R+ZmIWpzlTpIUFHHdBfQ9zky+EaY2l/Vxe9KayItQGVJPnM68YsGjB6jdm+YmGBU6ibnFIbb2qQ9w271WwIMn/+BIsCGGBWiIzPjt/cdfw/1mwGC/RSNLBAk1qL2XHslCKRKpIFhgX+M4UQboAfvZ8n6NoDH9P+8foSTMt3ERL/oVDZLlvb/doedG8LgOLNMpVVIkgIva4HWk+g7WLXDKWY7pIg7op3rRCNG1XA4sJmLmZCimYY+etFA9Q1kZxVIjRFdCwgX0XOGIKPjD5apgJbrmtTruD0JQmSlGwkH5JpfVG0sI9lVGhh0Xs3UK5XZZ51WpdYpXHvReSgJQlpB4WkEl9rp0WRdP30mQ9bEvAu1LdVBAVES5YXwLYQzygkmhNiW0ogjFVKxkMlPFpnnUUsLAcy8WmSbq030hakBtitbCIdWEb4J99BsoOtfliBFvilnN/co+tcw0soMGZhqOg5Nazj1uSYw2SssBq8UzfNAsQqjMcGZG2l6VD8Z4w7xyMuMn2o8L8cGu/S8PC7V0NWhd4kO+7ObBQdClu8ZVARQFYwC2U5mH8GZ036IngPcBx5PerbruLRYgGFnAV6XFhUSIBPJP2amvEU5kgWuJLZYBRSYsMeorR5F4gOET2vyGBJss5IGFhHsYAuMA7R/c2h4VFBqh0sEgcVVAAsI9DQs/m0RO4t8pie9PvILw1sACsTEX9SmZenHGpyJxiT8leTU6pbsIODqFl4gpXGKLekQJm8iZl/tWJRG2fQo8v490fOERNGhZMD0mqZZADC7USMc/ISKEKFlFDibSAS06OebgrwnxlS+dfUEWyDXddqHDVsAhHgEFsehJhjv58uZqsFktqG3sqC+TIGHua26WE/WE0RsvFZDJbjmQJxfsDREy2VqqRDM4GlCcZkLBAm4wUsLhNfu2g9EA3DxZkj5Ju7ZM7yY6oj7Ad3627fjOGBXS+KGBxyGAB+8tXKJ2TgjGRAM5ONuKS07K/4rwIJ0s5RpIahzQqMmEhhWoNb5raCsECL1+4lyIQNZ2HszW6eM8pGzg2FjQsQqR9VdKCHM+6vTksuDMF0f8kaWH5/vlVazAY3F3cFYUFN6eQtOCwQIU/1LAAZmKqQ7CRAMPsYymJInUy0eIiNQdk2AwDseVwiq8zPIlCRt6PckhygRv8NCz2UMwgBxZQUVm50kKzEjF/UVpEkhb2/SXMrqFhAe1pq6eHBTTD1LAARkS6DoGskXekSyFTb6zie3yV8x6vQuSdaMhZyo1OAEQpLiJtUuZfF1P75HdToH8SDwVewZWCxVeUSPYqQBgW7hvWNTQs4HdsCxZALnAm3ECuBzWJcAgktQPJ/HE+vfGql9p1PCEfBcpH8lxIRZEAj2pdmIYXD5wUSapOWtD5esjkNPelfKtCsMhRIkVhMaeMOShCyMRLvFQxaEQlxLmPdROZQgz0EF/kQCEiCWEiFGbZ1/guge5w5a1tw0Lqj/j0G7GhCUkLXy6pVaW0GInD7bEOiOyj8vAjQsZjukglkjd5CwF6RLHbACxWmLEK5Yy08/BFNuPTBByCuo9yplaFsCC3riBp4cpZuxAW5tnVx5ruHqHJuSVYgOFmsAD7y6iN6DGrcJYGm/qyx4NfwaFaKTGTuo2tjWCmkAQLqf6Nbjd4+2WfiHtUqESEiFZGsCUX53rXJJFo+jFhb+Y3wILNeODL8AizOYhMU+SCSGVC30CUOrv68v1DonWoMBIIAFgQYgZvR1ZWwAkPjhwyRlqltKg35c4dkc4qkXKTRurfJC0YAwEPPLl/tTAOkmO5wObwbIiIMxHe70W3LwwCFpTCCHNgIQUM3VNy78Tds62IoFQKC55LKBC0LaiaWjsPi8CIjVOoRrTlLWrYcxqvhScGJYsgLMbsYT0s8CZl0mfUeeo5yqGtUonUzTcJtIqWBCoEi29UIrmwmBjx7iIcMSXuFAiuUSJTci0CJEd2DS9RA7lLBCxwYSQeGxLp6V6XYVOh3yIaemmZtCVYfKPJCWFBFBwZGslshwtOT1+HcSgJi7W0oezORZ7JuREs7nr6tKtKpQWxM3a3pAUwA/lKZIQZCCnmkVHDoRPVUpY1Cg3OkCkLojwBUDZsgXoD4Cv7O3JhcanYPJRSpbYFsQDdLWkBMi6ZSIcFUORKJjHf4nmOAq26Mt0TSVjE4kO2SGACCOnOkt+TB4tzvCPA7H1vTCSPf5K7ardgAZ3fbBrSORicmF8hmucoD1S3EX2JGcucW9gvAj0UHDUQK7KEyYHFC3Z1+71rGECrWInI+Zy7pUSm0iSuyVt2AqFzId8mEGl4lK0hxbCEx4BxECGN4wSaF+MGaa8Aw0SKieTBAh8yYdl/auFnqcD6l01OC/+EEjpLw8JtEvTgbCmCSgXW8YYioR5FVo4knsjQcUktNzm7pYyJFFHCJiQpsN4nAuvlYYG30kTlfttfgUV5aWG9naOt9Mh1URYW7vMBSWzAvggLlFXNGIQDG54xXI1vbsZTcZtyxJ0bCAu1FoEh9RAYkYY3iltfzXGCD9chIA1H2kGUB4s2co3Hm2y+GRZ1RP4HqgJv9aDRWRYWOWVTvggLtEBgMnsiF8fxvAYqrxfLBsKhTRLQIRFfoRFpxK3LQXlm7EBVR0RptLBAFbbMX/ETlcLCem/XUBeb0CjeLVggwcDlc5FyvrFHY0pKG4mAiyoGX5EMcC4XIHY9Ih6vhQXaKZRkbVWqRCz3TkrxQEbnjsECuaTY2k+35SO9N+Iu9F2qYuWEi6rQVsYgeRpFXwgLRgsLlMxrxXGqSqVFnGGBtQhM9d0xWEAAZEmZ+biIYYHWIoq4CAzVJ7HTfFikIBtpF8wxkzWwQPvV2UahSmHByrWiXRrg4IJNYdEZQNrOSqRWQ/xnErrAMQ+Jm2JJKiEMC9k2yFdTKcaQd4Q6iUAPC1P+6mqVSAILBBaY6rspLJDhxA9s+zIsIP+NlLG5fEt8CtB0pEJfa5qB5Wk8GrmwS1GB95ZQqX4Vw6Ks34KVgkdh3gfRdbEpLFB680N3S7BAq450kUnLC2OEYAFzvRWHikBvevxTZqsS24YaYiwGbTIgBdJ/Qlpo6/huLC1gm1uDhbSDLJ2N0m6eqATiLPs7MU8LLFGhizPxagpGKFXbU6inoizWs8uwAG1zWHTReSJ/hSStXYMFLnGVqZHaDap6FtVkzljIfJoFlqjy8lRcXawlDCoGbAiOT1zvzSDjcf8NJdLGpw8Jqb5bgsWWQmUR4ZkqFPBdZQdUGl5/GgIMJbcUWKJSSbtCDlY/rAXLhvAi4fxTLMsoF2dtB2FBn1WG6tm4r9lIbwcWeaEyVHxJCwupLKcw9OF42Y/na38eVW8P5btCMuQpEszfGEmPxc+Es3nyntFUkAfSIScKz8h3wcJqJr92fiE+byQtal3kuhDKwW8JFrS04OdyoVPG9bCQtpF7oNRuLby5uQkYgzMupWF0ZJrK3wPkSWobCAznO96D9XvAm4my33LzEX2btLhN+HmAgtrWZtICH0sl7FrIh8VnEVjck7Com23q15wqvjPsu1IVghe5lFoRcCMRkeQHpFGa2gdMGloGjIscEhBTCViww+7xARMKWDCfE64h3WN3l5QWOENdSPXNhwXchMxhAau38FI/+Ehp+2j9e/upeDWcmKSqE0aDCIaCo0GyNQdMqCNWClDL8F+BjPKIs05D2dOqzC4vAws7ZmkXHa6rgIXVu+q0u3/QeKaO67KwaKOcMDftZj4sYBkPXskCgoUVIpU3zji/no738a6JPFgUOmRmAuauEESHoJKyM0GCv2C3wLAofh15hk1fldChjYmgShZJ3YurYjvW65b5dvgXnYqX7SItq0RqxyrXRT4sBoB5rKTaHnSRpVoJoqUeHyJQqtJeTERdPcMbzYK0T8EK13nO+ouMCwwnECYTEvuQI8yYT9LXBZMlVeZXpULKhcrq/lPr+g4PmwoWZOVCk29OKistpCvp0b35sAghOKMCjNd3bzDek1baU9aZA2/JPR6XPDrK6I+Gs9WalnNct13M29THLGAwTUzPxYU816+bL6fT5XxEV4knktALweJYqiji1qVRU8OCIPtfPTPVsAiRAzyNl+XDAksAyzEtB302X4jgNQdN+bCgD5prxOXODLncGfBmopUM8k7DejviSkI6maDBzhYhe6JyWeTDAh8uQRbyLgULh+dtl1Yi2AFunhSHhVSZVz4ZIt3zTJb8kD4j/zBtVdkrBYsCsb8oZwOKerDGhBOeqOeneSV9onYBWNSKzJxSsHjgqRKlpQV2gOfV7AP0mVfe3U3r7OABIanIGeuE2almEVxQogQ8MKsh3FCENb8kfDFU5MBCf7hEQmVgYaa1M8pLixCtEfgzRWCxh01fRGLxBuqbrUNU3LUALNYLzaLAwKm8qB4niIvM4HoDPVgkOZA9qT33Tg8LXD6NIhUsyPpLaSyjvLSQCrqzVN8isMClnBHZJ8IYdQgR6VyWOpSKkew9UrBIck2gnA3x5KmRYh3CLhfEhZdz0GLO9qFL+cwVG9X+TWEBjw6w/yfjwj3Lc0LpYNHF29k+dC0herlV4sJyTgA75cNH7DPk2i0Gi6JV2mVPF8r8E+xKuEqR46sFcZF3RmbeZsMLrJX9Y1RYSRUqu27JteGz9JnySkTyNLFU32KwqLX2bRoYlnMKuRk+4rODD5UnG+phETkWc5Om5HKM0iI027uOUj2JbIwiR85QLldI7TMXnFNpoZNfw0ewCdX1z2udW/CAAhbN69qHDYMR5kfW7hE4HjM78NJxAdmHAixaD/Ba4khXtCRR98KXgWGZjv2CZ0771M/miuU2zzrrn2zwFg6LB/FXV4IFeYg1ZBEtzXF6P+MjkgV0qQP5IFX4RoOqpCQNwTs41Xb/HRcyuNxPjg9df7ZTP4vKS8BzcC0lLGp7ZxY/jdZ0zFexwNETeG2P7xQbnH4COv1XgEX7E149vSNakgvtpTR43gfIWGPCfTsmivfVPu5dP4ae4++ffqxHsf0M38JhYYKheyXaComcrIyvlKiIn8I3Dic3wRj7rxW+62CokVHKV0JCtTf39qRyM92rQ/P37W///eJyEBKPsAcIWNTag8uL94fb9cOvT3DraIco+bkZlWlp7+6599D0nTVFB2UfPl0rbu+0Xi4iurxjK2r6m9EB4oqqY1OFk1F3NrpUnzeuUoB+Uz4+mdNYNIxRkePYi1KBo+pJWBR9tkIKw8HH1Zo+rruVdSpcSQfXGp4HDzRGVMQbpgx0rWk8NIhXDnWv/B5SweKHIgpWUWQi9nt7XqM/Gq5yGJS/eTCniFJtshz1G15yaHf8yuoxUfuBRS6FN+PJbLFYrCbjIJ9B6iNm+OTX1lBK2gjGk/iVi0Kv/Bb6gcV2Kc95rty2vFv0A4stk+rooWIqZFfoBxbbJp3DUpMrsVv0A4ttk8aR7WlyJXaLfmCxfVLhIq/w8w7RDyy2T3RMxdDU1No5+oHFd9BYPipT2FD6H6AfWHwLhStQec0oGNPYGTpoOiL9Qx5x/EMb0Hg5Yv7RxmiqzOHfUer8uRTpDx03+qFNKBzPIlrd7E5s6Yd+6Id+6Ie2Tv8HwnCW2YUdbv4AAAAASUVORK5CYII=',
-      },
-    ];
-
-    setBankDetails(dataArray);
-
-    setSelectedBank(dataArray[0]);
-  }, []);
-
-  const handleViewOnChange = (e) => {
-    e.preventDefault();
-
-    const { value } = e.target;
-
-    const findBank = bankDetails.find((item) => item.id === +value);
-
-    setSelectedBank(findBank);
-  };
-
-  return (
-    <Box>
-      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
-        <div className='flex flex-center flex-space-between'>
-          <div>
-            <p>Yatır-çek</p>
-          </div>
-          <ul>
-            <li>
-              <button
-                type='button'
-                className={tab === 0 ? 'active' : 'passive'}
-                onClick={() => setTab(0)}
-              >
-                Yatır
-              </button>
-            </li>
-            <li>
-              <button
-                type='button'
-                className={tab === 1 ? 'active' : 'passive'}
-                onClick={() => setTab(1)}
-              >
-                Çek
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-      {tab === 0 && (
-        <div className='box-content box-horizontal-padding box-vertical-padding box-content-height-nobutton'>
-          <form className='form' noValidate>
-            <div className='form-elements'>
-              <div className='form-line'>
-                <div className='full-width'>
-                  <label htmlFor='view'>Banka bilgilerini görüntüle</label>
-                  <select name='view' id='view' onChange={handleViewOnChange}>
-                    {bankDetails &&
-                      bankDetails.map((item) => (
-                        <option key={item.id.toString()} value={item.id}>
-                          {item.name}
-                        </option>
-                      ))}
-                  </select>
-                </div>
-              </div>
-            </div>
-          </form>
-
-          <div className='box-text flex flex-center flex-space-between'>
-            {selectedBank && (
-              <>
-                <div className='bank-info box-horizontal-padding'>
-                  <img height='35' src={selectedBank.logo} alt='Bank logo' draggable='false' />
-                  <p>
-                    <strong>
-                      {selectedBank.name} - {selectedBank.branch}
-                    </strong>
-                    <br />
-                    {selectedBank.iban}
-                  </p>
-                </div>
-                <button type='button' className='pointer red no-select'>
-                  <i className='material-icons'>content_copy</i>
-                </button>
-              </>
-            )}
-          </div>
-        </div>
-      )}
-
-      {tab === 1 && (
-        <div className='box-content box-horizontal-padding box-vertical-padding box-content-height-nobutton'>
-          <form className='form' noValidate>
-            <div className='form-elements'>
-              <div className='form-line'>
-                <div className='full-width'>
-                  <label htmlFor='iban'>IBAN ekle</label>
-                  <input type='text' name='iban' id='iban' placeholder='IBAN numarası giriniz' />
-                </div>
-              </div>
-            </div>
-          </form>
-
-          <form className='form' noValidate>
-            <div className='form-elements'>
-              <div className='form-line'>
-                <div className='full-width'>
-                  <label htmlFor='view'>Kayıtlı IBANlarım</label>
-                  <select name='view' id='view'>
-                    <option value='ZB'>Ziraat Bankası</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-          </form>
-
-          <div className='box-text box-horizontal-padding center'>
-            <p>
-              <strong>TR00 0000 0000 0000 0000 0000 00</strong>
-            </p>
-            <p>
-              <span>Çekilecek tutar : </span>
-              <strong>2376.00 TL</strong>
-            </p>
-          </div>
-
-          <button type='button' className='button button-purple button-medium button-block'>
-            Para çek
-          </button>
-        </div>
-      )}
-    </Box>
-  );
-});
-
-export default BankProcess;
diff --git a/src/components/Widgets/BankProcess/BankProcess.tsx b/src/components/Widgets/BankProcess/BankProcess.tsx
new file mode 100644
index 0000000..1a4f243
--- /dev/null
+++ b/src/components/Widgets/BankProcess/BankProcess.tsx
@@ -0,0 +1,186 @@
+import React from 'react';
+
+// components
+import Box from '../../Common/Box';
+
+// interfaces
+interface IBankDetails {
+  id: number;
+  name: string;
+  iban: string;
+  logo: string;
+  branch: string;
+}
+
+// variables
+const dataArray: IBankDetails[] = [
+  {
+    id: 1,
+    name: 'Ziraat Bankası',
+    branch: 'Ataşehir Şubesi',
+    iban: 'TR01 0000 0000 0000 0000 0000 01',
+    logo: 'https://mekaskablo.com/wp-content/uploads/2019/11/ziraat-bankas%C4%B1-logo.jpg',
+  },
+  {
+    id: 2,
+    name: 'Garanti Bankası',
+    branch: 'Etiler Şubesi',
+    iban: 'TR02 0000 0000 0000 0000 0000 02',
+    logo: 'https://upload.wikimedia.org/wikipedia/tr/7/75/Garanti_BBVA.png',
+  },
+  {
+    id: 3,
+    name: 'Yapı ve Kredi Bankası',
+    branch: 'Şişli Şubesi',
+    iban: 'TR03 0000 0000 0000 0000 0000 03',
+    logo: 'data:image/png;base64,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',
+  },
+];
+
+const BankProcess = () => {
+  const [tab, setTab] = React.useState<number>(0);
+  const [bankDetails, setBankDetails] = React.useState<IBankDetails[]>([]);
+  const [selectedBank, setSelectedBank] = React.useState<IBankDetails | null>(null);
+
+  React.useEffect(() => {
+    setBankDetails(dataArray);
+
+    setSelectedBank(dataArray[0]);
+  }, []);
+
+  /**
+   * Handles the change event for the bank selection dropdown.
+   * Prevents the default event behavior, extracts the value from the target element,
+   * finds the corresponding bank details based on the value, and updates the selected bank state.
+   *
+   * @param {React.ChangeEvent<HTMLSelectElement>} e - The change event object.
+   */
+  const handleViewOnChange = (e: React.ChangeEvent<HTMLSelectElement>): void => {
+    e.preventDefault();
+
+    const { value } = e.target;
+
+    const findBank = bankDetails.find((item: IBankDetails) => item.id === +value);
+
+    if (findBank) {
+      setSelectedBank(findBank);
+    }
+  };
+
+  return (
+    <Box>
+      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
+        <div className='flex flex-center flex-space-between'>
+          <div>
+            <p>Yatır-çek</p>
+          </div>
+          <ul>
+            <li>
+              <button
+                type='button'
+                className={tab === 0 ? 'active' : 'passive'}
+                onClick={() => setTab(0)}
+              >
+                Yatır
+              </button>
+            </li>
+            <li>
+              <button
+                type='button'
+                className={tab === 1 ? 'active' : 'passive'}
+                onClick={() => setTab(1)}
+              >
+                Çek
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      {tab === 0 && (
+        <div className='box-content box-horizontal-padding box-vertical-padding box-content-height-nobutton'>
+          <form className='form' noValidate>
+            <div className='form-elements'>
+              <div className='form-line'>
+                <div className='full-width'>
+                  <label htmlFor='view'>Banka bilgilerini görüntüle</label>
+                  <select name='view' id='view' onChange={handleViewOnChange}>
+                    {bankDetails &&
+                      bankDetails.map((item: IBankDetails) => (
+                        <option key={item.id.toString()} value={item.id}>
+                          {item.name}
+                        </option>
+                      ))}
+                  </select>
+                </div>
+              </div>
+            </div>
+          </form>
+
+          <div className='box-text flex flex-center flex-space-between'>
+            {selectedBank && (
+              <>
+                <div className='bank-info box-horizontal-padding'>
+                  <img height='35' src={selectedBank.logo} alt='Bank logo' draggable='false' />
+                  <p>
+                    <strong>
+                      {selectedBank.name} - {selectedBank.branch}
+                    </strong>
+                    <br />
+                    {selectedBank.iban}
+                  </p>
+                </div>
+                <button type='button' className='pointer red no-select'>
+                  <i className='material-icons'>content_copy</i>
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {tab === 1 && (
+        <div className='box-content box-horizontal-padding box-vertical-padding box-content-height-nobutton'>
+          <form className='form' noValidate>
+            <div className='form-elements'>
+              <div className='form-line'>
+                <div className='full-width'>
+                  <label htmlFor='iban'>IBAN ekle</label>
+                  <input type='text' name='iban' id='iban' placeholder='IBAN numarası giriniz' />
+                </div>
+              </div>
+            </div>
+          </form>
+
+          <form className='form' noValidate>
+            <div className='form-elements'>
+              <div className='form-line'>
+                <div className='full-width'>
+                  <label htmlFor='view'>Kayıtlı IBANlarım</label>
+                  <select name='view' id='view'>
+                    <option value='ZB'>Ziraat Bankası</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </form>
+
+          <div className='box-text box-horizontal-padding center'>
+            <p>
+              <strong>TR00 0000 0000 0000 0000 0000 00</strong>
+            </p>
+            <p>
+              <span>Çekilecek tutar : </span>
+              <strong>2376.00 TL</strong>
+            </p>
+          </div>
+
+          <button type='button' className='button button-purple button-medium button-block'>
+            Para çek
+          </button>
+        </div>
+      )}
+    </Box>
+  );
+};
+
+export default BankProcess;
diff --git a/src/components/Widgets/BuyOrders/BuyOrders.js b/src/components/Widgets/BuyOrders/BuyOrders.tsx
similarity index 54%
rename from src/components/Widgets/BuyOrders/BuyOrders.js
rename to src/components/Widgets/BuyOrders/BuyOrders.tsx
index 5c24164..5fd0469 100644
--- a/src/components/Widgets/BuyOrders/BuyOrders.js
+++ b/src/components/Widgets/BuyOrders/BuyOrders.tsx
@@ -1,92 +1,107 @@
-import { memo, useState, useEffect } from 'react';
+import React from 'react';
 
+// components
 import Box from '../../Common/Box';
 import BuyOrdersRow from './BuyOrdersRow';
 
-const BuyOrders = memo(() => {
-  const [data, setData] = useState([]);
-  const [menuOpened, setMenuOpened] = useState(false);
+// interfaces
+interface IPriceList {
+  id: number;
+  type: number;
+  price: string;
+  total: string;
+  amount: string;
+  currency: string;
+}
 
-  useEffect(() => {
-    const dataArray = [
-      {
-        id: 1,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 1,
-      },
-      {
-        id: 2,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 1,
-      },
-      {
-        id: 3,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 3,
-      },
-      {
-        id: 4,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 3,
-      },
-      {
-        id: 5,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 2,
-      },
-      {
-        id: 6,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 1,
-      },
-      {
-        id: 7,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 2,
-      },
-      {
-        id: 8,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 3,
-      },
-      {
-        id: 9,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 3,
-      },
-    ];
+// variables
+const dataArray: IPriceList[] = [
+  {
+    id: 1,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 1,
+  },
+  {
+    id: 2,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 1,
+  },
+  {
+    id: 3,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 3,
+  },
+  {
+    id: 4,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 3,
+  },
+  {
+    id: 5,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 2,
+  },
+  {
+    id: 6,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 1,
+  },
+  {
+    id: 7,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 2,
+  },
+  {
+    id: 8,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 3,
+  },
+  {
+    id: 9,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 3,
+  },
+];
 
+const BuyOrders = () => {
+  const [data, setData] = React.useState<IPriceList[]>([]);
+  const [menuOpened, setMenuOpened] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
     setData(dataArray);
   }, []);
 
-  const handleMenuOpen = () => {
+  /**
+   * Toggles the state of the menu to open or close.
+   */
+  const handleMenuOpen = (): void => {
     setMenuOpened(!menuOpened);
   };
 
@@ -137,7 +152,7 @@ const BuyOrders = memo(() => {
                 </tr>
               </thead>
               <tbody>
-                {data.map((item) => (
+                {data.map((item: IPriceList) => (
                   <BuyOrdersRow key={item.id.toString()} item={item} />
                 ))}
               </tbody>
@@ -147,6 +162,6 @@ const BuyOrders = memo(() => {
       </div>
     </Box>
   );
-});
+};
 
 export default BuyOrders;
diff --git a/src/components/Widgets/BuyOrders/BuyOrdersRow.js b/src/components/Widgets/BuyOrders/BuyOrdersRow.tsx
similarity index 58%
rename from src/components/Widgets/BuyOrders/BuyOrdersRow.js
rename to src/components/Widgets/BuyOrders/BuyOrdersRow.tsx
index dfa54b3..7c63287 100644
--- a/src/components/Widgets/BuyOrders/BuyOrdersRow.js
+++ b/src/components/Widgets/BuyOrders/BuyOrdersRow.tsx
@@ -1,15 +1,20 @@
-import { memo, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const BuyOrdersRow = memo(({ item }) => {
-  const [color, setColor] = useState('white');
+// interfaces
+interface IProps {
+  item: any;
+}
 
-  useEffect(() => {
+const BuyOrdersRow = ({ item }: IProps): React.JSX.Element => {
+  const [color, setColor] = React.useState<string>('white');
+
+  React.useEffect(() => {
     if (item.type === 1) {
       setColor('green');
     } else if (item.type === 2) {
       setColor('red');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -25,11 +30,6 @@ const BuyOrdersRow = memo(({ item }) => {
       </td>
     </tr>
   );
-});
-
-BuyOrdersRow.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
 };
 
 export default BuyOrdersRow;
diff --git a/src/components/Widgets/BuySell/BuySell.js b/src/components/Widgets/BuySell/BuySell.tsx
similarity index 92%
rename from src/components/Widgets/BuySell/BuySell.js
rename to src/components/Widgets/BuySell/BuySell.tsx
index 2be7ea9..3699680 100644
--- a/src/components/Widgets/BuySell/BuySell.js
+++ b/src/components/Widgets/BuySell/BuySell.tsx
@@ -1,18 +1,29 @@
-import { memo, useState } from 'react';
+import React from 'react';
 
+// components
 import Box from '../../Common/Box';
 
-const BuySell = memo(() => {
-  const [primaryTab, setPrimaryTab] = useState(0);
-  const [secondaryTab, setSecondaryTab] = useState(0);
+const BuySell = (): React.JSX.Element => {
+  const [primaryTab, setPrimaryTab] = React.useState<number>(0);
+  const [secondaryTab, setSecondaryTab] = React.useState<number>(0);
 
-  const handlePrimaryTab = (tabNum) => {
+  /**
+   * Handles the primary tab change event.
+   *
+   * @param {number} tabNum - The number of the tab to be selected.
+   */
+  const handlePrimaryTab = (tabNum: number): void => {
     setPrimaryTab(tabNum);
 
     setSecondaryTab(0);
   };
 
-  const handleSecondaryTab = (tabNum) => {
+  /**
+   * Handles the secondary tab change event.
+   *
+   * @param {number} tabNum - The number of the tab to be selected.
+   */
+  const handleSecondaryTab = (tabNum: number): void => {
     setSecondaryTab(tabNum);
   };
 
@@ -223,6 +234,6 @@ const BuySell = memo(() => {
       </div>
     </Box>
   );
-});
+};
 
 export default BuySell;
diff --git a/src/components/Widgets/CandleStick/CandleStick.js b/src/components/Widgets/CandleStick/CandleStick.js
deleted file mode 100644
index 3414ae3..0000000
--- a/src/components/Widgets/CandleStick/CandleStick.js
+++ /dev/null
@@ -1,295 +0,0 @@
-import { memo, useState, useEffect } from 'react';
-import ReactApexChart from 'react-apexcharts';
-
-import Box from '../../Common/Box';
-
-const CandleStick = memo(() => {
-  const [state, setState] = useState(null);
-
-  useEffect(() => {
-    const data = {
-      series: [
-        {
-          data: [
-            {
-              x: new Date(1538778600000),
-              y: [6629.81, 6650.5, 6623.04, 6633.33],
-            },
-            {
-              x: new Date(1538780400000),
-              y: [6632.01, 6643.59, 6620, 6630.11],
-            },
-            {
-              x: new Date(1538782200000),
-              y: [6630.71, 6648.95, 6623.34, 6635.65],
-            },
-            {
-              x: new Date(1538784000000),
-              y: [6635.65, 6651, 6629.67, 6638.24],
-            },
-            {
-              x: new Date(1538785800000),
-              y: [6638.24, 6640, 6620, 6624.47],
-            },
-            {
-              x: new Date(1538787600000),
-              y: [6624.53, 6636.03, 6621.68, 6624.31],
-            },
-            {
-              x: new Date(1538789400000),
-              y: [6624.61, 6632.2, 6617, 6626.02],
-            },
-            {
-              x: new Date(1538791200000),
-              y: [6627, 6627.62, 6584.22, 6603.02],
-            },
-            {
-              x: new Date(1538793000000),
-              y: [6605, 6608.03, 6598.95, 6604.01],
-            },
-            {
-              x: new Date(1538794800000),
-              y: [6604.5, 6614.4, 6602.26, 6608.02],
-            },
-            {
-              x: new Date(1538796600000),
-              y: [6608.02, 6610.68, 6601.99, 6608.91],
-            },
-            {
-              x: new Date(1538798400000),
-              y: [6608.91, 6618.99, 6608.01, 6612],
-            },
-            {
-              x: new Date(1538800200000),
-              y: [6612, 6615.13, 6605.09, 6612],
-            },
-            {
-              x: new Date(1538802000000),
-              y: [6612, 6624.12, 6608.43, 6622.95],
-            },
-            {
-              x: new Date(1538803800000),
-              y: [6623.91, 6623.91, 6615, 6615.67],
-            },
-            {
-              x: new Date(1538805600000),
-              y: [6618.69, 6618.74, 6610, 6610.4],
-            },
-            {
-              x: new Date(1538807400000),
-              y: [6611, 6622.78, 6610.4, 6614.9],
-            },
-            {
-              x: new Date(1538809200000),
-              y: [6614.9, 6626.2, 6613.33, 6623.45],
-            },
-            {
-              x: new Date(1538811000000),
-              y: [6623.48, 6627, 6618.38, 6620.35],
-            },
-            {
-              x: new Date(1538812800000),
-              y: [6619.43, 6620.35, 6610.05, 6615.53],
-            },
-            {
-              x: new Date(1538814600000),
-              y: [6615.53, 6617.93, 6610, 6615.19],
-            },
-            {
-              x: new Date(1538816400000),
-              y: [6615.19, 6621.6, 6608.2, 6620],
-            },
-            {
-              x: new Date(1538818200000),
-              y: [6619.54, 6625.17, 6614.15, 6620],
-            },
-            {
-              x: new Date(1538820000000),
-              y: [6620.33, 6634.15, 6617.24, 6624.61],
-            },
-            {
-              x: new Date(1538821800000),
-              y: [6625.95, 6626, 6611.66, 6617.58],
-            },
-            {
-              x: new Date(1538823600000),
-              y: [6619, 6625.97, 6595.27, 6598.86],
-            },
-            {
-              x: new Date(1538825400000),
-              y: [6598.86, 6598.88, 6570, 6587.16],
-            },
-            {
-              x: new Date(1538827200000),
-              y: [6588.86, 6600, 6580, 6593.4],
-            },
-            {
-              x: new Date(1538829000000),
-              y: [6593.99, 6598.89, 6585, 6587.81],
-            },
-            {
-              x: new Date(1538830800000),
-              y: [6587.81, 6592.73, 6567.14, 6578],
-            },
-            {
-              x: new Date(1538832600000),
-              y: [6578.35, 6581.72, 6567.39, 6579],
-            },
-            {
-              x: new Date(1538834400000),
-              y: [6579.38, 6580.92, 6566.77, 6575.96],
-            },
-            {
-              x: new Date(1538836200000),
-              y: [6575.96, 6589, 6571.77, 6588.92],
-            },
-            {
-              x: new Date(1538838000000),
-              y: [6588.92, 6594, 6577.55, 6589.22],
-            },
-            {
-              x: new Date(1538839800000),
-              y: [6589.3, 6598.89, 6589.1, 6596.08],
-            },
-            {
-              x: new Date(1538841600000),
-              y: [6597.5, 6600, 6588.39, 6596.25],
-            },
-            {
-              x: new Date(1538843400000),
-              y: [6598.03, 6600, 6588.73, 6595.97],
-            },
-            {
-              x: new Date(1538845200000),
-              y: [6595.97, 6602.01, 6588.17, 6602],
-            },
-            {
-              x: new Date(1538847000000),
-              y: [6602, 6607, 6596.51, 6599.95],
-            },
-            {
-              x: new Date(1538848800000),
-              y: [6600.63, 6601.21, 6590.39, 6591.02],
-            },
-            {
-              x: new Date(1538850600000),
-              y: [6591.02, 6603.08, 6591, 6591],
-            },
-            {
-              x: new Date(1538852400000),
-              y: [6591, 6601.32, 6585, 6592],
-            },
-            {
-              x: new Date(1538854200000),
-              y: [6593.13, 6596.01, 6590, 6593.34],
-            },
-            {
-              x: new Date(1538856000000),
-              y: [6593.34, 6604.76, 6582.63, 6593.86],
-            },
-            {
-              x: new Date(1538857800000),
-              y: [6593.86, 6604.28, 6586.57, 6600.01],
-            },
-            {
-              x: new Date(1538859600000),
-              y: [6601.81, 6603.21, 6592.78, 6596.25],
-            },
-            {
-              x: new Date(1538861400000),
-              y: [6596.25, 6604.2, 6590, 6602.99],
-            },
-            {
-              x: new Date(1538863200000),
-              y: [6602.99, 6606, 6584.99, 6587.81],
-            },
-            {
-              x: new Date(1538865000000),
-              y: [6587.81, 6595, 6583.27, 6591.96],
-            },
-            {
-              x: new Date(1538866800000),
-              y: [6591.97, 6596.07, 6585, 6588.39],
-            },
-            {
-              x: new Date(1538868600000),
-              y: [6587.6, 6598.21, 6587.6, 6594.27],
-            },
-            {
-              x: new Date(1538870400000),
-              y: [6596.44, 6601, 6590, 6596.55],
-            },
-            {
-              x: new Date(1538872200000),
-              y: [6598.91, 6605, 6596.61, 6600.02],
-            },
-            {
-              x: new Date(1538874000000),
-              y: [6600.55, 6605, 6589.14, 6593.01],
-            },
-            {
-              x: new Date(1538875800000),
-              y: [6593.15, 6605, 6592, 6603.06],
-            },
-            {
-              x: new Date(1538877600000),
-              y: [6603.07, 6604.5, 6599.09, 6603.89],
-            },
-            {
-              x: new Date(1538879400000),
-              y: [6604.44, 6604.44, 6600, 6603.5],
-            },
-            {
-              x: new Date(1538881200000),
-              y: [6603.5, 6603.99, 6597.5, 6603.86],
-            },
-            {
-              x: new Date(1538883000000),
-              y: [6603.85, 6605, 6600, 6604.07],
-            },
-            {
-              x: new Date(1538884800000),
-              y: [6604.98, 6606, 6604.07, 6606],
-            },
-          ],
-        },
-      ],
-      options: {
-        chart: {
-          type: 'candlestick',
-          height: 470,
-        },
-        xaxis: {
-          type: 'datetime',
-        },
-        yaxis: {
-          tooltip: {
-            enabled: true,
-          },
-        },
-      },
-    };
-
-    setState(data);
-  }, []);
-
-  return (
-    <Box>
-      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
-        Piyasa geçmişi
-      </div>
-      <div className='box-content box-content-height-nobutton'>
-        {state && (
-          <ReactApexChart
-            options={state.options}
-            series={state.series}
-            type='candlestick'
-            height={470}
-          />
-        )}
-      </div>
-    </Box>
-  );
-});
-
-export default CandleStick;
diff --git a/src/components/Widgets/CandleStick/CandleStick.tsx b/src/components/Widgets/CandleStick/CandleStick.tsx
new file mode 100644
index 0000000..1bf2f3e
--- /dev/null
+++ b/src/components/Widgets/CandleStick/CandleStick.tsx
@@ -0,0 +1,304 @@
+import React from 'react';
+
+import ReactApexChart from 'react-apexcharts';
+
+// components
+import Box from '../../Common/Box';
+
+// interfaces
+interface ISeries {
+  series: any;
+  options: any;
+}
+
+// variables
+const data: ISeries = {
+  series: [
+    {
+      data: [
+        {
+          x: new Date(1538778600000),
+          y: [6629.81, 6650.5, 6623.04, 6633.33],
+        },
+        {
+          x: new Date(1538780400000),
+          y: [6632.01, 6643.59, 6620, 6630.11],
+        },
+        {
+          x: new Date(1538782200000),
+          y: [6630.71, 6648.95, 6623.34, 6635.65],
+        },
+        {
+          x: new Date(1538784000000),
+          y: [6635.65, 6651, 6629.67, 6638.24],
+        },
+        {
+          x: new Date(1538785800000),
+          y: [6638.24, 6640, 6620, 6624.47],
+        },
+        {
+          x: new Date(1538787600000),
+          y: [6624.53, 6636.03, 6621.68, 6624.31],
+        },
+        {
+          x: new Date(1538789400000),
+          y: [6624.61, 6632.2, 6617, 6626.02],
+        },
+        {
+          x: new Date(1538791200000),
+          y: [6627, 6627.62, 6584.22, 6603.02],
+        },
+        {
+          x: new Date(1538793000000),
+          y: [6605, 6608.03, 6598.95, 6604.01],
+        },
+        {
+          x: new Date(1538794800000),
+          y: [6604.5, 6614.4, 6602.26, 6608.02],
+        },
+        {
+          x: new Date(1538796600000),
+          y: [6608.02, 6610.68, 6601.99, 6608.91],
+        },
+        {
+          x: new Date(1538798400000),
+          y: [6608.91, 6618.99, 6608.01, 6612],
+        },
+        {
+          x: new Date(1538800200000),
+          y: [6612, 6615.13, 6605.09, 6612],
+        },
+        {
+          x: new Date(1538802000000),
+          y: [6612, 6624.12, 6608.43, 6622.95],
+        },
+        {
+          x: new Date(1538803800000),
+          y: [6623.91, 6623.91, 6615, 6615.67],
+        },
+        {
+          x: new Date(1538805600000),
+          y: [6618.69, 6618.74, 6610, 6610.4],
+        },
+        {
+          x: new Date(1538807400000),
+          y: [6611, 6622.78, 6610.4, 6614.9],
+        },
+        {
+          x: new Date(1538809200000),
+          y: [6614.9, 6626.2, 6613.33, 6623.45],
+        },
+        {
+          x: new Date(1538811000000),
+          y: [6623.48, 6627, 6618.38, 6620.35],
+        },
+        {
+          x: new Date(1538812800000),
+          y: [6619.43, 6620.35, 6610.05, 6615.53],
+        },
+        {
+          x: new Date(1538814600000),
+          y: [6615.53, 6617.93, 6610, 6615.19],
+        },
+        {
+          x: new Date(1538816400000),
+          y: [6615.19, 6621.6, 6608.2, 6620],
+        },
+        {
+          x: new Date(1538818200000),
+          y: [6619.54, 6625.17, 6614.15, 6620],
+        },
+        {
+          x: new Date(1538820000000),
+          y: [6620.33, 6634.15, 6617.24, 6624.61],
+        },
+        {
+          x: new Date(1538821800000),
+          y: [6625.95, 6626, 6611.66, 6617.58],
+        },
+        {
+          x: new Date(1538823600000),
+          y: [6619, 6625.97, 6595.27, 6598.86],
+        },
+        {
+          x: new Date(1538825400000),
+          y: [6598.86, 6598.88, 6570, 6587.16],
+        },
+        {
+          x: new Date(1538827200000),
+          y: [6588.86, 6600, 6580, 6593.4],
+        },
+        {
+          x: new Date(1538829000000),
+          y: [6593.99, 6598.89, 6585, 6587.81],
+        },
+        {
+          x: new Date(1538830800000),
+          y: [6587.81, 6592.73, 6567.14, 6578],
+        },
+        {
+          x: new Date(1538832600000),
+          y: [6578.35, 6581.72, 6567.39, 6579],
+        },
+        {
+          x: new Date(1538834400000),
+          y: [6579.38, 6580.92, 6566.77, 6575.96],
+        },
+        {
+          x: new Date(1538836200000),
+          y: [6575.96, 6589, 6571.77, 6588.92],
+        },
+        {
+          x: new Date(1538838000000),
+          y: [6588.92, 6594, 6577.55, 6589.22],
+        },
+        {
+          x: new Date(1538839800000),
+          y: [6589.3, 6598.89, 6589.1, 6596.08],
+        },
+        {
+          x: new Date(1538841600000),
+          y: [6597.5, 6600, 6588.39, 6596.25],
+        },
+        {
+          x: new Date(1538843400000),
+          y: [6598.03, 6600, 6588.73, 6595.97],
+        },
+        {
+          x: new Date(1538845200000),
+          y: [6595.97, 6602.01, 6588.17, 6602],
+        },
+        {
+          x: new Date(1538847000000),
+          y: [6602, 6607, 6596.51, 6599.95],
+        },
+        {
+          x: new Date(1538848800000),
+          y: [6600.63, 6601.21, 6590.39, 6591.02],
+        },
+        {
+          x: new Date(1538850600000),
+          y: [6591.02, 6603.08, 6591, 6591],
+        },
+        {
+          x: new Date(1538852400000),
+          y: [6591, 6601.32, 6585, 6592],
+        },
+        {
+          x: new Date(1538854200000),
+          y: [6593.13, 6596.01, 6590, 6593.34],
+        },
+        {
+          x: new Date(1538856000000),
+          y: [6593.34, 6604.76, 6582.63, 6593.86],
+        },
+        {
+          x: new Date(1538857800000),
+          y: [6593.86, 6604.28, 6586.57, 6600.01],
+        },
+        {
+          x: new Date(1538859600000),
+          y: [6601.81, 6603.21, 6592.78, 6596.25],
+        },
+        {
+          x: new Date(1538861400000),
+          y: [6596.25, 6604.2, 6590, 6602.99],
+        },
+        {
+          x: new Date(1538863200000),
+          y: [6602.99, 6606, 6584.99, 6587.81],
+        },
+        {
+          x: new Date(1538865000000),
+          y: [6587.81, 6595, 6583.27, 6591.96],
+        },
+        {
+          x: new Date(1538866800000),
+          y: [6591.97, 6596.07, 6585, 6588.39],
+        },
+        {
+          x: new Date(1538868600000),
+          y: [6587.6, 6598.21, 6587.6, 6594.27],
+        },
+        {
+          x: new Date(1538870400000),
+          y: [6596.44, 6601, 6590, 6596.55],
+        },
+        {
+          x: new Date(1538872200000),
+          y: [6598.91, 6605, 6596.61, 6600.02],
+        },
+        {
+          x: new Date(1538874000000),
+          y: [6600.55, 6605, 6589.14, 6593.01],
+        },
+        {
+          x: new Date(1538875800000),
+          y: [6593.15, 6605, 6592, 6603.06],
+        },
+        {
+          x: new Date(1538877600000),
+          y: [6603.07, 6604.5, 6599.09, 6603.89],
+        },
+        {
+          x: new Date(1538879400000),
+          y: [6604.44, 6604.44, 6600, 6603.5],
+        },
+        {
+          x: new Date(1538881200000),
+          y: [6603.5, 6603.99, 6597.5, 6603.86],
+        },
+        {
+          x: new Date(1538883000000),
+          y: [6603.85, 6605, 6600, 6604.07],
+        },
+        {
+          x: new Date(1538884800000),
+          y: [6604.98, 6606, 6604.07, 6606],
+        },
+      ],
+    },
+  ],
+  options: {
+    chart: {
+      type: 'candlestick',
+      height: 470,
+    },
+    xaxis: {
+      type: 'datetime',
+    },
+    yaxis: {
+      tooltip: {
+        enabled: true,
+      },
+    },
+  },
+};
+
+const CandleStick = (): React.JSX.Element => {
+  const [state, setState] = React.useState<ISeries | null>(null);
+
+  React.useEffect(() => {
+    setState(data);
+  }, []);
+
+  return (
+    <Box>
+      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
+        Piyasa geçmişi
+      </div>
+      <div className='box-content box-content-height-nobutton'>
+        {state && (
+          <ReactApexChart
+            options={state.options}
+            series={state.series}
+            type='candlestick'
+            height={470}
+          />
+        )}
+      </div>
+    </Box>
+  );
+};
+
+export default CandleStick;
diff --git a/src/components/Widgets/Coin/CoinHorizontal.js b/src/components/Widgets/Coin/CoinHorizontal.tsx
similarity index 81%
rename from src/components/Widgets/Coin/CoinHorizontal.js
rename to src/components/Widgets/Coin/CoinHorizontal.tsx
index 132294c..4a86ba9 100644
--- a/src/components/Widgets/Coin/CoinHorizontal.js
+++ b/src/components/Widgets/Coin/CoinHorizontal.tsx
@@ -1,9 +1,22 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
+// components
 import Box from '../../Common/Box';
 
-const CoinHorizontal = memo(({ item, searchValue, searchOnChange, searchSubmit }) => (
+// interfaces
+interface IProps {
+  item: any;
+  searchValue: string;
+  searchSubmit: (e: React.FormEvent) => void;
+  searchOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const CoinHorizontal = ({
+  item,
+  searchValue,
+  searchOnChange,
+  searchSubmit,
+}: IProps): React.JSX.Element => (
   <Box>
     <div className='box-content box-vertical-padding box-horizontal-padding'>
       <div className='widget-coin-horizontal flex flex-center flex-space-around nowrap'>
@@ -37,12 +50,12 @@ const CoinHorizontal = memo(({ item, searchValue, searchOnChange, searchSubmit }
           <form onSubmit={searchSubmit} noValidate>
             <input
               type='text'
-              name='keyword'
               id='keyword'
-              placeholder='Arama'
+              name='keyword'
               autoComplete='off'
-              onChange={searchOnChange}
+              placeholder='Arama'
               value={searchValue}
+              onChange={searchOnChange}
             />
             <button type='button' className='pointer'>
               <i className='material-icons'>search</i>
@@ -52,14 +65,6 @@ const CoinHorizontal = memo(({ item, searchValue, searchOnChange, searchSubmit }
       </div>
     </div>
   </Box>
-));
-
-CoinHorizontal.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
-  searchValue: PropTypes.string.isRequired,
-  searchSubmit: PropTypes.func.isRequired,
-  searchOnChange: PropTypes.func.isRequired,
-};
+);
 
 export default CoinHorizontal;
diff --git a/src/components/Widgets/Coin/CoinVertical.js b/src/components/Widgets/Coin/CoinVertical.tsx
similarity index 77%
rename from src/components/Widgets/Coin/CoinVertical.js
rename to src/components/Widgets/Coin/CoinVertical.tsx
index c3ce1f2..9bee2ff 100644
--- a/src/components/Widgets/Coin/CoinVertical.js
+++ b/src/components/Widgets/Coin/CoinVertical.tsx
@@ -1,21 +1,37 @@
-import { memo, useState } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
+// components
 import Box from '../../Common/Box';
 
-const CoinVertical = memo(({ item }) => {
-  const [showMore, setShowMore] = useState(false);
-  const [menuOpened, setMenuOpened] = useState(false);
+// interfaces
+interface IProps {
+  item: any;
+}
 
-  const handleMenuOpen = () => {
+const CoinVertical = ({ item }: IProps): React.JSX.Element => {
+  const [showMore, setShowMore] = React.useState<boolean>(false);
+  const [menuOpened, setMenuOpened] = React.useState<boolean>(false);
+
+  /**
+   * Toggles the state of the menu to open or close.
+   */
+  const handleMenuOpen = (): void => {
     setMenuOpened(!menuOpened);
   };
 
-  const handleShowMore = () => {
+  /**
+   * Toggles the state of showMore to true or false.
+   */
+  const handleShowMore = (): void => {
     setShowMore(!showMore);
   };
 
-  const handleSliceDescription = (description) => {
+  /**
+   * Slices the description of the item.
+   * @param {string} description - The description of the item.
+   * @returns {string} The sliced description.
+   */
+  const handleSliceDescription = (description: string): string => {
     if (description) {
       if (description.length > 100) {
         return `${item.description
@@ -96,11 +112,6 @@ const CoinVertical = memo(({ item }) => {
       </div>
     </Box>
   );
-});
-
-CoinVertical.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
 };
 
 export default CoinVertical;
diff --git a/src/components/Widgets/Limits/Limits.js b/src/components/Widgets/Limits/Limits.js
deleted file mode 100644
index 50a9de2..0000000
--- a/src/components/Widgets/Limits/Limits.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { memo, useState, useEffect } from 'react';
-
-import Box from '../../Common/Box';
-import LimitsRow from './LimitsRow';
-
-const Limits = memo(() => {
-  const [data, setData] = useState([]);
-
-  useEffect(() => {
-    const dataArray = [
-      {
-        id: 1,
-        currency: 'Cardano',
-        icon: 'https://cdn4.iconfinder.com/data/icons/crypto-currency-and-coin-2/256/cardano_ada-512.png',
-        limit24h: '65.000',
-        limit30d: '163,00',
-        status: 1,
-      },
-      {
-        id: 2,
-        currency: 'Bitcoin',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
-        limit24h: '12.000',
-        limit30d: '5.157,00',
-        status: 2,
-      },
-      {
-        id: 3,
-        currency: 'Etherium',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png',
-        limit24h: '5.000',
-        limit30d: '63,00',
-        status: 1,
-      },
-      {
-        id: 4,
-        currency: 'Ripple',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ripple-XRP-icon.png',
-        limit24h: '1.000',
-        limit30d: '7.500,00',
-        status: 1,
-      },
-      {
-        id: 5,
-        currency: 'Dogecoin',
-        icon: 'https://www.kindpng.com/picc/m/202-2028344_dogecoin-doge-icon-metro-symbole-hd-png-download.png',
-        limit24h: '100',
-        limit30d: '9.063,00',
-        status: 2,
-      },
-    ];
-
-    setData(dataArray);
-  }, []);
-
-  return (
-    <Box>
-      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
-        <div className='flex flex-center flex-space-between'>
-          <div>
-            <p>Limitler</p>
-          </div>
-          <ul>
-            <li>
-              <button type='button' className='active'>
-                Yatırma
-              </button>
-            </li>
-            <li>
-              <button type='button'>Çekme</button>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div className='box-content box-content-height-nobutton'>
-        <div className='limits-header-row flex flex-center flex-space-between no-select'>
-          <div>&nbsp;</div>
-          <div className='center'>
-            <span className='gray'>24s limit</span>
-          </div>
-          <div className='center'>
-            <span className='gray'>30g limit</span>
-          </div>
-          <div className='center'>
-            <span className='gray'>Durum</span>
-          </div>
-        </div>
-
-        {data && data.map((item) => <LimitsRow key={item.id.toString()} item={item} />)}
-      </div>
-    </Box>
-  );
-});
-
-export default Limits;
diff --git a/src/components/Widgets/Limits/Limits.tsx b/src/components/Widgets/Limits/Limits.tsx
new file mode 100644
index 0000000..26c10cb
--- /dev/null
+++ b/src/components/Widgets/Limits/Limits.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+
+// components
+import Box from '../../Common/Box';
+import LimitsRow from './LimitsRow';
+
+// interfaces
+interface ICrypto {
+  id: number;
+  icon: string;
+  status: number;
+  currency: string;
+  limit24h: string;
+  limit30d: string;
+}
+
+// variables
+const dataArray: ICrypto[] = [
+  {
+    id: 1,
+    currency: 'Cardano',
+    icon: 'https://cdn4.iconfinder.com/data/icons/crypto-currency-and-coin-2/256/cardano_ada-512.png',
+    limit24h: '65.000',
+    limit30d: '163,00',
+    status: 1,
+  },
+  {
+    id: 2,
+    currency: 'Bitcoin',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
+    limit24h: '12.000',
+    limit30d: '5.157,00',
+    status: 2,
+  },
+  {
+    id: 3,
+    currency: 'Etherium',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png',
+    limit24h: '5.000',
+    limit30d: '63,00',
+    status: 1,
+  },
+  {
+    id: 4,
+    currency: 'Ripple',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ripple-XRP-icon.png',
+    limit24h: '1.000',
+    limit30d: '7.500,00',
+    status: 1,
+  },
+  {
+    id: 5,
+    currency: 'Dogecoin',
+    icon: 'https://www.kindpng.com/picc/m/202-2028344_dogecoin-doge-icon-metro-symbole-hd-png-download.png',
+    limit24h: '100',
+    limit30d: '9.063,00',
+    status: 2,
+  },
+];
+
+const Limits = (): React.JSX.Element => {
+  const [data, setData] = React.useState<ICrypto[]>([]);
+
+  React.useEffect(() => {
+    setData(dataArray);
+  }, []);
+
+  return (
+    <Box>
+      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
+        <div className='flex flex-center flex-space-between'>
+          <div>
+            <p>Limitler</p>
+          </div>
+          <ul>
+            <li>
+              <button type='button' className='active'>
+                Yatırma
+              </button>
+            </li>
+            <li>
+              <button type='button'>Çekme</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className='box-content box-content-height-nobutton'>
+        <div className='limits-header-row flex flex-center flex-space-between no-select'>
+          <div>&nbsp;</div>
+          <div className='center'>
+            <span className='gray'>24s limit</span>
+          </div>
+          <div className='center'>
+            <span className='gray'>30g limit</span>
+          </div>
+          <div className='center'>
+            <span className='gray'>Durum</span>
+          </div>
+        </div>
+
+        {data && data.map((item) => <LimitsRow key={item.id.toString()} item={item} />)}
+      </div>
+    </Box>
+  );
+};
+
+export default Limits;
diff --git a/src/components/Widgets/Limits/LimitsRow.js b/src/components/Widgets/Limits/LimitsRow.tsx
similarity index 70%
rename from src/components/Widgets/Limits/LimitsRow.js
rename to src/components/Widgets/Limits/LimitsRow.tsx
index ae77a30..723e294 100644
--- a/src/components/Widgets/Limits/LimitsRow.js
+++ b/src/components/Widgets/Limits/LimitsRow.tsx
@@ -1,9 +1,14 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
+// components
 import StatusName from './StatusName';
 
-const LimitsRow = memo(({ item }) => (
+// interfaces
+interface IProps {
+  item: any;
+}
+
+const LimitsRow = ({ item }: IProps): React.JSX.Element => (
   <div className='limits-row flex flex-center flex-space-between no-select'>
     <div>
       <div className='icon cover' style={{ backgroundImage: `url('${item.icon}')` }} />
@@ -19,11 +24,6 @@ const LimitsRow = memo(({ item }) => (
       <StatusName status={item.status} />
     </div>
   </div>
-));
-
-LimitsRow.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
-};
+);
 
 export default LimitsRow;
diff --git a/src/components/Widgets/Limits/StatusName.js b/src/components/Widgets/Limits/StatusName.js
deleted file mode 100644
index ccf2667..0000000
--- a/src/components/Widgets/Limits/StatusName.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
-
-const StatusName = memo(({ status }) => {
-  if (status === 1) {
-    return <span className='green'>Limit uygun</span>;
-  }
-
-  return <span className='red'>Bakiye yetersiz</span>;
-});
-
-StatusName.propTypes = {
-  status: PropTypes.number.isRequired,
-};
-
-export default StatusName;
diff --git a/src/components/Widgets/Limits/StatusName.tsx b/src/components/Widgets/Limits/StatusName.tsx
new file mode 100644
index 0000000..8690db4
--- /dev/null
+++ b/src/components/Widgets/Limits/StatusName.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+// interfaces
+interface IProps {
+  status: number;
+}
+
+const StatusName = ({ status }: IProps): React.JSX.Element => {
+  if (status === 1) {
+    return <span className='green'>Limit uygun</span>;
+  }
+
+  return <span className='red'>Bakiye yetersiz</span>;
+};
+
+export default StatusName;
diff --git a/src/components/Widgets/Market/Market.js b/src/components/Widgets/Market/Market.js
deleted file mode 100644
index abadc95..0000000
--- a/src/components/Widgets/Market/Market.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { memo, useState, useEffect } from 'react';
-
-import { Link } from 'react-router-dom';
-
-import Box from '../../Common/Box';
-import MarketRow from './MarketRow';
-
-const Market = memo(() => {
-  const [data, setData] = useState([]);
-
-  useEffect(() => {
-    const dataArray = [
-      {
-        id: 1,
-        name: 'BTC/USD',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
-        date: 'Eylül 2021',
-        amount: '18.783,33',
-        currency: 'TRY',
-        change: '%45',
-        lineChartData: [10, 15, 10, 15, 15, 18],
-        status: 1,
-      },
-      {
-        id: 2,
-        name: 'ETH/USD',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png',
-        date: 'Eylül 2021',
-        amount: '3.125,25',
-        currency: 'TRY',
-        change: '-%30',
-        lineChartData: [30, 20, 25, 35, 10, 8],
-        status: 2,
-      },
-      {
-        id: 3,
-        name: 'USDT/USD',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Tether-USDT-icon.png',
-        date: 'Eylül 2021',
-        amount: '125,12',
-        currency: 'TRY',
-        change: '%3',
-        lineChartData: [30, 20, 25, 35, 30, 35],
-        status: 1,
-      },
-      {
-        id: 4,
-        name: 'XRP/USD',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ripple-XRP-icon.png',
-        date: 'Eylül 2021',
-        amount: '10,05',
-        currency: 'TRY',
-        change: '%16',
-        lineChartData: [30, 20, 25, 35, 30, 35],
-        status: 1,
-      },
-      {
-        id: 5,
-        name: 'DOT/USD',
-        icon: 'data:image/png;base64,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',
-        date: 'Eylül 2021',
-        amount: '3,05',
-        currency: 'TRY',
-        change: '-%3',
-        lineChartData: [30, 20, 25, 35, 20, 10],
-        status: 2,
-      },
-      {
-        id: 6,
-        name: 'DOGE/USD',
-        icon: 'https://www.kindpng.com/picc/m/202-2028344_dogecoin-doge-icon-metro-symbole-hd-png-download.png',
-        date: 'Eylül 2021',
-        amount: '1,05',
-        currency: 'TRY',
-        change: '-%6',
-        lineChartData: [30, 20, 25, 35, 25, 30],
-        status: 2,
-      },
-      {
-        id: 7,
-        name: 'ADA/USD',
-        icon: 'https://cdn4.iconfinder.com/data/icons/crypto-currency-and-coin-2/256/cardano_ada-512.png',
-        date: 'Eylül 2021',
-        amount: '10,12',
-        currency: 'TRY',
-        change: '%6',
-        lineChartData: [30, 20, 25, 35, 25, 30],
-        status: 1,
-      },
-    ];
-
-    setData(dataArray);
-  }, []);
-
-  return (
-    <Box>
-      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
-        Piyasalar
-      </div>
-      <div className='box-content box-content-height'>
-        {data && data.map((item) => <MarketRow key={item.id.toString()} item={item} />)}
-      </div>
-      <div className='box-button box-vertical-padding box-horizontal-padding'>
-        <Link to='/capital' className='button button-purple button-medium button-block'>
-          Daha fazla
-          <i className='material-icons button-icon-right'>chevron_right</i>
-        </Link>
-      </div>
-    </Box>
-  );
-});
-
-export default Market;
diff --git a/src/components/Widgets/Market/Market.tsx b/src/components/Widgets/Market/Market.tsx
new file mode 100644
index 0000000..6a49023
--- /dev/null
+++ b/src/components/Widgets/Market/Market.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+
+// components
+import Box from '../../Common/Box';
+import MarketRow from './MarketRow';
+
+// interfaces
+interface ICrypto {
+  id: number;
+  name: string;
+  icon: string;
+  date: string;
+  amount: string;
+  change: string;
+  status: number;
+  currency: string;
+  lineChartData: number[];
+}
+
+// variables
+const dataArray: ICrypto[] = [
+  {
+    id: 1,
+    name: 'BTC/USD',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
+    date: 'Eylül 2021',
+    amount: '18.783,33',
+    currency: 'TRY',
+    change: '%45',
+    lineChartData: [10, 15, 10, 15, 15, 18],
+    status: 1,
+  },
+  {
+    id: 2,
+    name: 'ETH/USD',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png',
+    date: 'Eylül 2021',
+    amount: '3.125,25',
+    currency: 'TRY',
+    change: '-%30',
+    lineChartData: [30, 20, 25, 35, 10, 8],
+    status: 2,
+  },
+  {
+    id: 3,
+    name: 'USDT/USD',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Tether-USDT-icon.png',
+    date: 'Eylül 2021',
+    amount: '125,12',
+    currency: 'TRY',
+    change: '%3',
+    lineChartData: [30, 20, 25, 35, 30, 35],
+    status: 1,
+  },
+  {
+    id: 4,
+    name: 'XRP/USD',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ripple-XRP-icon.png',
+    date: 'Eylül 2021',
+    amount: '10,05',
+    currency: 'TRY',
+    change: '%16',
+    lineChartData: [30, 20, 25, 35, 30, 35],
+    status: 1,
+  },
+  {
+    id: 5,
+    name: 'DOT/USD',
+    icon: 'data:image/png;base64,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',
+    date: 'Eylül 2021',
+    amount: '3,05',
+    currency: 'TRY',
+    change: '-%3',
+    lineChartData: [30, 20, 25, 35, 20, 10],
+    status: 2,
+  },
+  {
+    id: 6,
+    name: 'DOGE/USD',
+    icon: 'https://www.kindpng.com/picc/m/202-2028344_dogecoin-doge-icon-metro-symbole-hd-png-download.png',
+    date: 'Eylül 2021',
+    amount: '1,05',
+    currency: 'TRY',
+    change: '-%6',
+    lineChartData: [30, 20, 25, 35, 25, 30],
+    status: 2,
+  },
+  {
+    id: 7,
+    name: 'ADA/USD',
+    icon: 'https://cdn4.iconfinder.com/data/icons/crypto-currency-and-coin-2/256/cardano_ada-512.png',
+    date: 'Eylül 2021',
+    amount: '10,12',
+    currency: 'TRY',
+    change: '%6',
+    lineChartData: [30, 20, 25, 35, 25, 30],
+    status: 1,
+  },
+];
+
+const Market = (): React.JSX.Element => {
+  const [data, setData] = React.useState<ICrypto[]>([]);
+
+  React.useEffect(() => {
+    setData(dataArray);
+  }, []);
+
+  return (
+    <Box>
+      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
+        Piyasalar
+      </div>
+      <div className='box-content box-content-height'>
+        {data && data.map((item) => <MarketRow key={item.id.toString()} item={item} />)}
+      </div>
+      <div className='box-button box-vertical-padding box-horizontal-padding'>
+        <Link to='/capital' className='button button-purple button-medium button-block'>
+          Daha fazla
+          <i className='material-icons button-icon-right'>chevron_right</i>
+        </Link>
+      </div>
+    </Box>
+  );
+};
+
+export default Market;
diff --git a/src/components/Widgets/Market/MarketRow.js b/src/components/Widgets/Market/MarketRow.tsx
similarity index 75%
rename from src/components/Widgets/Market/MarketRow.js
rename to src/components/Widgets/Market/MarketRow.tsx
index c8e7364..68956f0 100644
--- a/src/components/Widgets/Market/MarketRow.js
+++ b/src/components/Widgets/Market/MarketRow.tsx
@@ -1,16 +1,22 @@
-import { memo, useState, useEffect } from 'react';
+import React from 'react';
+
 import { Sparklines, SparklinesLine } from 'react-sparklines';
-import PropTypes from 'prop-types';
 
-const MarketRow = memo(({ item }) => {
-  const [color, setColor] = useState('');
+// interfaces
+interface IProps {
+  item: any;
+}
+
+const MarketRow = ({ item }: IProps): React.JSX.Element => {
+  const [color, setColor] = React.useState<string>('');
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (item.status === 1) {
       setColor('green');
     } else {
       setColor('red');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -39,11 +45,6 @@ const MarketRow = memo(({ item }) => {
       </div>
     </div>
   );
-});
-
-MarketRow.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
 };
 
 export default MarketRow;
diff --git a/src/components/Widgets/MyAssets/MyAssets.js b/src/components/Widgets/MyAssets/MyAssets.js
deleted file mode 100644
index c25ff1f..0000000
--- a/src/components/Widgets/MyAssets/MyAssets.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import { memo, useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-
-import Box from '../../Common/Box';
-import MyAssetsRow from './MyAssetsRow';
-
-const MyAssets = memo(() => {
-  const [data, setData] = useState([]);
-  const [menuOpened, setMenuOpened] = useState(false);
-
-  useEffect(() => {
-    const dataArray = [
-      {
-        id: 1,
-        name: 'Bitcoin',
-        symbol: 'BTC',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
-        amount: '18.783,33',
-        currency: 'TRY',
-        change: '%45',
-        changePeriod: 'Bu hafta',
-        barChartData: [30, 20, 25, 35, 30],
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 45],
-        status: 1,
-      },
-      {
-        id: 2,
-        name: 'Etherium',
-        symbol: 'ETH',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png',
-        amount: '3.125,25',
-        currency: 'TRY',
-        change: '-%30',
-        changePeriod: 'Bu hafta',
-        barChartData: [30, 20, 25, 35, 10],
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 10],
-        status: 2,
-      },
-      {
-        id: 3,
-        name: 'Tether',
-        symbol: 'USDT',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Tether-USDT-icon.png',
-        amount: '125,12',
-        currency: 'TRY',
-        change: '%3',
-        changePeriod: 'Bu hafta',
-        barChartData: [30, 20, 25, 35, 30],
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 43],
-        status: 1,
-      },
-      {
-        id: 4,
-        name: 'Ripple',
-        symbol: 'XRP',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ripple-XRP-icon.png',
-        amount: '10,05',
-        currency: 'TRY',
-        change: '%16',
-        changePeriod: 'Bu hafta',
-        barChartData: [30, 20, 25, 35, 30],
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 44],
-        status: 1,
-      },
-      {
-        id: 5,
-        name: 'Polkadot',
-        symbol: 'DOT',
-        icon: 'data:image/png;base64,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',
-        amount: '3,05',
-        currency: 'TRY',
-        change: '-%3',
-        changePeriod: 'Bu hafta',
-        barChartData: [30, 20, 25, 35, 20],
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 30],
-        status: 2,
-      },
-      {
-        id: 6,
-        name: 'Dogecoin',
-        symbol: 'DOGE',
-        icon: 'https://www.kindpng.com/picc/m/202-2028344_dogecoin-doge-icon-metro-symbole-hd-png-download.png',
-        amount: '1,05',
-        currency: 'TRY',
-        change: '-%6',
-        changePeriod: 'Bu hafta',
-        barChartData: [30, 20, 25, 35, 25],
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 40],
-        status: 2,
-      },
-      {
-        id: 7,
-        name: 'Cardano',
-        symbol: 'ADA',
-        icon: 'https://cdn4.iconfinder.com/data/icons/crypto-currency-and-coin-2/256/cardano_ada-512.png',
-        amount: '10,12',
-        currency: 'TRY',
-        change: '%6',
-        changePeriod: 'Bu hafta',
-        barChartData: [30, 20, 25, 35, 25],
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 40],
-        status: 1,
-      },
-    ];
-
-    setData(dataArray);
-  }, []);
-
-  const handleMenuOpen = () => {
-    setMenuOpened(!menuOpened);
-  };
-
-  return (
-    <Box>
-      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
-        <div className='flex flex-center flex-space-between'>
-          <p>Kripto değerlerim</p>
-          <div>
-            <Link to='/' type='button' className='button button-purple button-small'>
-              Kripto al
-            </Link>
-            <button type='button' className='box-icon pointer' onClick={() => handleMenuOpen()}>
-              <i className='material-icons'>more_vert</i>
-            </button>
-
-            {menuOpened && (
-              <div className='box-dropdown'>
-                <ul>
-                  <li>
-                    <button type='button'>
-                      <i className='material-icons'>settings</i>
-                      Button 1
-                    </button>
-                  </li>
-                  <li>
-                    <button type='button'>
-                      <i className='material-icons'>favorite</i>
-                      Button 2
-                    </button>
-                  </li>
-                  <li>
-                    <button type='button'>
-                      <i className='material-icons'>info</i>
-                      Button 3
-                    </button>
-                  </li>
-                </ul>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className='box-content box-content-height-nobutton'>
-        {data && data.map((item) => <MyAssetsRow key={item.id.toString()} item={item} />)}
-      </div>
-    </Box>
-  );
-});
-
-export default MyAssets;
diff --git a/src/components/Widgets/MyAssets/MyAssets.tsx b/src/components/Widgets/MyAssets/MyAssets.tsx
new file mode 100644
index 0000000..de17c85
--- /dev/null
+++ b/src/components/Widgets/MyAssets/MyAssets.tsx
@@ -0,0 +1,181 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+
+// components
+import Box from '../../Common/Box';
+import MyAssetsRow from './MyAssetsRow';
+
+// interfaces
+interface ICrypto {
+  id: number;
+  name: string;
+  icon: string;
+  symbol: string;
+  amount: string;
+  change: string;
+  status: number;
+  currency: string;
+  changePeriod: string;
+  barChartData: number[];
+  lineChartData: number[];
+}
+
+// variables
+const dataArray: ICrypto[] = [
+  {
+    id: 1,
+    name: 'Bitcoin',
+    symbol: 'BTC',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
+    amount: '18.783,33',
+    currency: 'TRY',
+    change: '%45',
+    changePeriod: 'Bu hafta',
+    barChartData: [30, 20, 25, 35, 30],
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 45],
+    status: 1,
+  },
+  {
+    id: 2,
+    name: 'Etherium',
+    symbol: 'ETH',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png',
+    amount: '3.125,25',
+    currency: 'TRY',
+    change: '-%30',
+    changePeriod: 'Bu hafta',
+    barChartData: [30, 20, 25, 35, 10],
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 10],
+    status: 2,
+  },
+  {
+    id: 3,
+    name: 'Tether',
+    symbol: 'USDT',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Tether-USDT-icon.png',
+    amount: '125,12',
+    currency: 'TRY',
+    change: '%3',
+    changePeriod: 'Bu hafta',
+    barChartData: [30, 20, 25, 35, 30],
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 43],
+    status: 1,
+  },
+  {
+    id: 4,
+    name: 'Ripple',
+    symbol: 'XRP',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ripple-XRP-icon.png',
+    amount: '10,05',
+    currency: 'TRY',
+    change: '%16',
+    changePeriod: 'Bu hafta',
+    barChartData: [30, 20, 25, 35, 30],
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 44],
+    status: 1,
+  },
+  {
+    id: 5,
+    name: 'Polkadot',
+    symbol: 'DOT',
+    icon: 'data:image/png;base64,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',
+    amount: '3,05',
+    currency: 'TRY',
+    change: '-%3',
+    changePeriod: 'Bu hafta',
+    barChartData: [30, 20, 25, 35, 20],
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 30],
+    status: 2,
+  },
+  {
+    id: 6,
+    name: 'Dogecoin',
+    symbol: 'DOGE',
+    icon: 'https://www.kindpng.com/picc/m/202-2028344_dogecoin-doge-icon-metro-symbole-hd-png-download.png',
+    amount: '1,05',
+    currency: 'TRY',
+    change: '-%6',
+    changePeriod: 'Bu hafta',
+    barChartData: [30, 20, 25, 35, 25],
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 40],
+    status: 2,
+  },
+  {
+    id: 7,
+    name: 'Cardano',
+    symbol: 'ADA',
+    icon: 'https://cdn4.iconfinder.com/data/icons/crypto-currency-and-coin-2/256/cardano_ada-512.png',
+    amount: '10,12',
+    currency: 'TRY',
+    change: '%6',
+    changePeriod: 'Bu hafta',
+    barChartData: [30, 20, 25, 35, 25],
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 40],
+    status: 1,
+  },
+];
+
+const MyAssets = (): React.JSX.Element => {
+  const [data, setData] = React.useState<ICrypto[]>([]);
+  const [menuOpened, setMenuOpened] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    setData(dataArray);
+  }, []);
+
+  /**
+   * Toggles the state of the menu to open or close.
+   */
+  const handleMenuOpen = (): void => {
+    setMenuOpened(!menuOpened);
+  };
+
+  return (
+    <Box>
+      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
+        <div className='flex flex-center flex-space-between'>
+          <p>Kripto değerlerim</p>
+          <div>
+            <Link to='/' type='button' className='button button-purple button-small'>
+              Kripto al
+            </Link>
+            <button type='button' className='box-icon pointer' onClick={() => handleMenuOpen()}>
+              <i className='material-icons'>more_vert</i>
+            </button>
+
+            {menuOpened && (
+              <div className='box-dropdown'>
+                <ul>
+                  <li>
+                    <button type='button'>
+                      <i className='material-icons'>settings</i>
+                      Button 1
+                    </button>
+                  </li>
+                  <li>
+                    <button type='button'>
+                      <i className='material-icons'>favorite</i>
+                      Button 2
+                    </button>
+                  </li>
+                  <li>
+                    <button type='button'>
+                      <i className='material-icons'>info</i>
+                      Button 3
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className='box-content box-content-height-nobutton'>
+        {data && data.map((item) => <MyAssetsRow key={item.id.toString()} item={item} />)}
+      </div>
+    </Box>
+  );
+};
+
+export default MyAssets;
diff --git a/src/components/Widgets/MyAssets/MyAssetsRow.js b/src/components/Widgets/MyAssets/MyAssetsRow.tsx
similarity index 83%
rename from src/components/Widgets/MyAssets/MyAssetsRow.js
rename to src/components/Widgets/MyAssets/MyAssetsRow.tsx
index 1d3de72..649e806 100644
--- a/src/components/Widgets/MyAssets/MyAssetsRow.js
+++ b/src/components/Widgets/MyAssets/MyAssetsRow.tsx
@@ -1,17 +1,23 @@
-import { memo, useState, useEffect } from 'react';
+import React from 'react';
+
 import { Link } from 'react-router-dom';
 import { Sparklines, SparklinesLine, SparklinesBars } from 'react-sparklines';
-import PropTypes from 'prop-types';
 
-const MyAssetsRow = memo(({ item }) => {
-  const [color, setColor] = useState('');
+// interface
+interface IProps {
+  item: any;
+}
+
+const MyAssetsRow = ({ item }: IProps): React.JSX.Element => {
+  const [color, setColor] = React.useState<string>('');
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (item.status === 1) {
       setColor('green');
     } else {
       setColor('red');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -52,11 +58,6 @@ const MyAssetsRow = memo(({ item }) => {
       </div>
     </div>
   );
-});
-
-MyAssetsRow.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
 };
 
 export default MyAssetsRow;
diff --git a/src/components/Widgets/Profile/Profile.js b/src/components/Widgets/Profile/Profile.tsx
similarity index 89%
rename from src/components/Widgets/Profile/Profile.js
rename to src/components/Widgets/Profile/Profile.tsx
index 7e5fb8a..26f05f0 100644
--- a/src/components/Widgets/Profile/Profile.js
+++ b/src/components/Widgets/Profile/Profile.tsx
@@ -1,12 +1,17 @@
-import { memo, useState } from 'react';
+import React from 'react';
+
 import { Link } from 'react-router-dom';
 
+// components
 import Box from '../../Common/Box';
 
-const Profile = memo(() => {
-  const [menuOpened, setMenuOpened] = useState(false);
+const Profile = (): React.JSX.Element => {
+  const [menuOpened, setMenuOpened] = React.useState<boolean>(false);
 
-  const handleMenuOpen = () => {
+  /**
+   * Toggles the state of the menu to open or close.
+   */
+  const handleMenuOpen = (): void => {
     setMenuOpened(!menuOpened);
   };
 
@@ -73,6 +78,6 @@ const Profile = memo(() => {
       </div>
     </Box>
   );
-});
+};
 
 export default Profile;
diff --git a/src/components/Widgets/RecentActivity/ProcessType.js b/src/components/Widgets/RecentActivity/ProcessType.tsx
similarity index 72%
rename from src/components/Widgets/RecentActivity/ProcessType.js
rename to src/components/Widgets/RecentActivity/ProcessType.tsx
index cc7670e..ac80f28 100644
--- a/src/components/Widgets/RecentActivity/ProcessType.js
+++ b/src/components/Widgets/RecentActivity/ProcessType.tsx
@@ -1,7 +1,11 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const ProcessType = memo(({ type }) => {
+// interfaces
+interface IProps {
+  type: number;
+}
+
+const ProcessType = ({ type }: IProps): React.JSX.Element => {
   if (type === 1) {
     return (
       <div className='nowrap'>
@@ -21,10 +25,6 @@ const ProcessType = memo(({ type }) => {
       <strong>Çekme</strong>
     </div>
   );
-});
-
-ProcessType.propTypes = {
-  type: PropTypes.number.isRequired,
 };
 
 export default ProcessType;
diff --git a/src/components/Widgets/RecentActivity/RecentActivity.js b/src/components/Widgets/RecentActivity/RecentActivity.js
deleted file mode 100644
index 8687e62..0000000
--- a/src/components/Widgets/RecentActivity/RecentActivity.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import { memo, useState, useEffect } from 'react';
-
-import Box from '../../Common/Box';
-import RecentActivityRow from './RecentActivityRow';
-
-const RecentActivity = memo(() => {
-  const [data, setData] = useState([]);
-
-  useEffect(() => {
-    const dataArray = [
-      {
-        id: 1,
-        type: 1,
-        time: '06:25:57',
-        amount: '212,50',
-        currency: 'TRY',
-        status: 1,
-      },
-      {
-        id: 2,
-        type: 1,
-        time: '08:30:25',
-        amount: '1.465,85',
-        currency: 'TRY',
-        status: 1,
-      },
-      {
-        id: 3,
-        type: 2,
-        time: '09:16:11',
-        amount: '6.000,00',
-        currency: 'TRY',
-        status: 2,
-      },
-      {
-        id: 4,
-        type: 1,
-        time: '12:05:03',
-        amount: '2.225,35',
-        currency: 'TRY',
-        status: 1,
-      },
-      {
-        id: 5,
-        type: 1,
-        time: '14:46:53',
-        amount: '128,01',
-        currency: 'TRY',
-        status: 3,
-      },
-      {
-        id: 6,
-        type: 2,
-        time: '18:01:03',
-        amount: '350,00',
-        currency: 'TRY',
-        status: 2,
-      },
-    ];
-
-    setData(dataArray);
-  }, []);
-
-  return (
-    <Box>
-      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
-        <div className='flex flex-center flex-space-between'>
-          <div>
-            <p>Son işlemlerim</p>
-          </div>
-          <ul>
-            <li>
-              <button type='button'>Dün</button>
-            </li>
-            <li>
-              <button type='button' className='active'>
-                Bugün
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div className='box-content box-content-height-nobutton'>
-        {data && data.map((item) => <RecentActivityRow key={item.id.toString()} item={item} />)}
-      </div>
-    </Box>
-  );
-});
-
-export default RecentActivity;
diff --git a/src/components/Widgets/RecentActivity/RecentActivity.tsx b/src/components/Widgets/RecentActivity/RecentActivity.tsx
new file mode 100644
index 0000000..38e4172
--- /dev/null
+++ b/src/components/Widgets/RecentActivity/RecentActivity.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+
+// components
+import Box from '../../Common/Box';
+import RecentActivityRow from './RecentActivityRow';
+
+// interfaces
+interface IActivity {
+  id: number;
+  type: number;
+  time: string;
+  amount: string;
+  status: number;
+  currency: string;
+}
+
+// variables
+const dataArray: IActivity[] = [
+  {
+    id: 1,
+    type: 1,
+    time: '06:25:57',
+    amount: '212,50',
+    currency: 'TRY',
+    status: 1,
+  },
+  {
+    id: 2,
+    type: 1,
+    time: '08:30:25',
+    amount: '1.465,85',
+    currency: 'TRY',
+    status: 1,
+  },
+  {
+    id: 3,
+    type: 2,
+    time: '09:16:11',
+    amount: '6.000,00',
+    currency: 'TRY',
+    status: 2,
+  },
+  {
+    id: 4,
+    type: 1,
+    time: '12:05:03',
+    amount: '2.225,35',
+    currency: 'TRY',
+    status: 1,
+  },
+  {
+    id: 5,
+    type: 1,
+    time: '14:46:53',
+    amount: '128,01',
+    currency: 'TRY',
+    status: 3,
+  },
+  {
+    id: 6,
+    type: 2,
+    time: '18:01:03',
+    amount: '350,00',
+    currency: 'TRY',
+    status: 2,
+  },
+];
+
+const RecentActivity = (): React.JSX.Element => {
+  const [data, setData] = React.useState<IActivity[]>([]);
+
+  React.useEffect(() => {
+    setData(dataArray);
+  }, []);
+
+  return (
+    <Box>
+      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
+        <div className='flex flex-center flex-space-between'>
+          <div>
+            <p>Son işlemlerim</p>
+          </div>
+          <ul>
+            <li>
+              <button type='button'>Dün</button>
+            </li>
+            <li>
+              <button type='button' className='active'>
+                Bugün
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className='box-content box-content-height-nobutton'>
+        {data &&
+          data.map((item: IActivity) => <RecentActivityRow key={item.id.toString()} item={item} />)}
+      </div>
+    </Box>
+  );
+};
+
+export default RecentActivity;
diff --git a/src/components/Widgets/RecentActivity/RecentActivityRow.js b/src/components/Widgets/RecentActivity/RecentActivityRow.tsx
similarity index 67%
rename from src/components/Widgets/RecentActivity/RecentActivityRow.js
rename to src/components/Widgets/RecentActivity/RecentActivityRow.tsx
index 4a594f8..33594b3 100644
--- a/src/components/Widgets/RecentActivity/RecentActivityRow.js
+++ b/src/components/Widgets/RecentActivity/RecentActivityRow.tsx
@@ -1,10 +1,15 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-import ProcessType from './ProcessType';
+// components
 import StatusName from './StatusName';
+import ProcessType from './ProcessType';
 
-const RecentActivityRow = memo(({ item }) => (
+// interfaces
+interface IProps {
+  item: any;
+}
+
+const RecentActivityRow = ({ item }: IProps): React.JSX.Element => (
   <div className='activity-row flex flex-center flex-space-between no-select'>
     <ProcessType type={item.type} />
     <div className='center'>
@@ -19,11 +24,6 @@ const RecentActivityRow = memo(({ item }) => (
       <StatusName status={item.status} />
     </div>
   </div>
-));
-
-RecentActivityRow.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
-};
+);
 
 export default RecentActivityRow;
diff --git a/src/components/Widgets/RecentActivity/StatusName.js b/src/components/Widgets/RecentActivity/StatusName.tsx
similarity index 57%
rename from src/components/Widgets/RecentActivity/StatusName.js
rename to src/components/Widgets/RecentActivity/StatusName.tsx
index 7b758d4..c828864 100644
--- a/src/components/Widgets/RecentActivity/StatusName.js
+++ b/src/components/Widgets/RecentActivity/StatusName.tsx
@@ -1,7 +1,11 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const StatusName = memo(({ status }) => {
+// interfaces
+interface IProps {
+  status: number;
+}
+
+const StatusName = ({ status }: IProps): React.JSX.Element => {
   if (status === 1) {
     return <span className='green'>Bitmiş</span>;
   }
@@ -11,10 +15,6 @@ const StatusName = memo(({ status }) => {
   }
 
   return <span className='gray'>Bekliyor</span>;
-});
-
-StatusName.propTypes = {
-  status: PropTypes.number.isRequired,
 };
 
 export default StatusName;
diff --git a/src/components/Widgets/SellOrders/SellOrders.js b/src/components/Widgets/SellOrders/SellOrders.tsx
similarity index 55%
rename from src/components/Widgets/SellOrders/SellOrders.js
rename to src/components/Widgets/SellOrders/SellOrders.tsx
index e0021ae..d88d609 100644
--- a/src/components/Widgets/SellOrders/SellOrders.js
+++ b/src/components/Widgets/SellOrders/SellOrders.tsx
@@ -1,92 +1,107 @@
-import { memo, useState, useEffect } from 'react';
+import React from 'react';
 
+// components
 import Box from '../../Common/Box';
 import SellOrdersRow from './SellOrdersRow';
 
-const SellOrders = memo(() => {
-  const [data, setData] = useState([]);
-  const [menuOpened, setMenuOpened] = useState(false);
+// interfaces
+interface IOrder {
+  id: number;
+  type: number;
+  price: string;
+  total: string;
+  amount: string;
+  currency: string;
+}
 
-  useEffect(() => {
-    const dataArray = [
-      {
-        id: 1,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 3,
-      },
-      {
-        id: 2,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 3,
-      },
-      {
-        id: 3,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 1,
-      },
-      {
-        id: 4,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 3,
-      },
-      {
-        id: 5,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 2,
-      },
-      {
-        id: 6,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 1,
-      },
-      {
-        id: 7,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 1,
-      },
-      {
-        id: 8,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 3,
-      },
-      {
-        id: 9,
-        price: '82,03',
-        amount: '0,15',
-        total: '237,31',
-        currency: 'TRY',
-        type: 2,
-      },
-    ];
+// variables
+const dataArray: IOrder[] = [
+  {
+    id: 1,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 3,
+  },
+  {
+    id: 2,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 3,
+  },
+  {
+    id: 3,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 1,
+  },
+  {
+    id: 4,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 3,
+  },
+  {
+    id: 5,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 2,
+  },
+  {
+    id: 6,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 1,
+  },
+  {
+    id: 7,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 1,
+  },
+  {
+    id: 8,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 3,
+  },
+  {
+    id: 9,
+    price: '82,03',
+    amount: '0,15',
+    total: '237,31',
+    currency: 'TRY',
+    type: 2,
+  },
+];
 
+const SellOrders = (): React.JSX.Element => {
+  const [data, setData] = React.useState<IOrder[]>([]);
+  const [menuOpened, setMenuOpened] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
     setData(dataArray);
   }, []);
 
-  const handleMenuOpen = () => {
+  /**
+   * Toggles the state of the menu to open or close.
+   */
+  const handleMenuOpen = (): void => {
     setMenuOpened(!menuOpened);
   };
 
@@ -137,7 +152,7 @@ const SellOrders = memo(() => {
                 </tr>
               </thead>
               <tbody>
-                {data.map((item) => (
+                {data.map((item: IOrder) => (
                   <SellOrdersRow key={item.id.toString()} item={item} />
                 ))}
               </tbody>
@@ -147,6 +162,6 @@ const SellOrders = memo(() => {
       </div>
     </Box>
   );
-});
+};
 
 export default SellOrders;
diff --git a/src/components/Widgets/SellOrders/SellOrdersRow.js b/src/components/Widgets/SellOrders/SellOrdersRow.tsx
similarity index 58%
rename from src/components/Widgets/SellOrders/SellOrdersRow.js
rename to src/components/Widgets/SellOrders/SellOrdersRow.tsx
index 874b6e6..9d72b94 100644
--- a/src/components/Widgets/SellOrders/SellOrdersRow.js
+++ b/src/components/Widgets/SellOrders/SellOrdersRow.tsx
@@ -1,15 +1,20 @@
-import { memo, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const SellOrdersRow = memo(({ item }) => {
-  const [color, setColor] = useState('white');
+// interfaces
+interface IProps {
+  item: any;
+}
 
-  useEffect(() => {
+const SellOrdersRow = ({ item }: IProps): React.JSX.Element => {
+  const [color, setColor] = React.useState<string>('white');
+
+  React.useEffect(() => {
     if (item.type === 1) {
       setColor('green');
     } else if (item.type === 2) {
       setColor('red');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -25,11 +30,6 @@ const SellOrdersRow = memo(({ item }) => {
       </td>
     </tr>
   );
-});
-
-SellOrdersRow.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
 };
 
 export default SellOrdersRow;
diff --git a/src/components/Widgets/TradeHistory/TradeHistory.js b/src/components/Widgets/TradeHistory/TradeHistory.js
deleted file mode 100644
index b34ac31..0000000
--- a/src/components/Widgets/TradeHistory/TradeHistory.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import { memo, useState, useEffect } from 'react';
-
-import { Link } from 'react-router-dom';
-
-import Box from '../../Common/Box';
-import TradeHistoryRow from './TradeHistoryRow';
-
-const TradeHistory = memo(() => {
-  const [data, setData] = useState([]);
-
-  useEffect(() => {
-    const dataArray = [
-      {
-        id: 1,
-        amount: '146,70',
-        currency: 'TRY',
-        weight: 10,
-        time: '06:22:15',
-        type: 1,
-      },
-      {
-        id: 2,
-        amount: '146,70',
-        currency: 'TRY',
-        weight: 10,
-        time: '07:30:30',
-        type: 1,
-      },
-      {
-        id: 3,
-        amount: '146,70',
-        currency: 'TRY',
-        weight: 10,
-        time: '09:15:42',
-        type: 2,
-      },
-      {
-        id: 4,
-        amount: '146,70',
-        currency: 'TRY',
-        weight: 10,
-        time: '11:12:50',
-        type: 2,
-      },
-      {
-        id: 5,
-        amount: '146,70',
-        currency: 'TRY',
-        weight: 10,
-        time: '13:30:01',
-        type: 1,
-      },
-      {
-        id: 6,
-        amount: '146,70',
-        currency: 'TRY',
-        weight: 10,
-        time: '14:20:36',
-        type: 1,
-      },
-      {
-        id: 7,
-        amount: '146,70',
-        currency: 'TRY',
-        weight: 10,
-        time: '17:45:58',
-        type: 1,
-      },
-      {
-        id: 8,
-        amount: '146,70',
-        currency: 'TRY',
-        weight: 10,
-        time: '20:05:54',
-        type: 1,
-      },
-      {
-        id: 9,
-        amount: '146,70',
-        currency: 'TRY',
-        weight: 10,
-        time: '22:30:45',
-        type: 2,
-      },
-    ];
-
-    setData(dataArray);
-  }, []);
-
-  return (
-    <Box>
-      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
-        Piyasa geçmişi
-      </div>
-      <div className='box-content box-content-height'>
-        <div className='trade-history-row'>
-          {data && data.length > 0 && (
-            <table>
-              <thead>
-                <tr>
-                  <th className='left no-select'>Fiyat</th>
-                  <th className='center no-select'>Hacim</th>
-                  <th className='center no-select'>İşlem</th>
-                  <th className='right no-select'>Zaman</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.map((item) => (
-                  <TradeHistoryRow key={item.id.toString()} item={item} />
-                ))}
-              </tbody>
-            </table>
-          )}
-        </div>
-      </div>
-      <div className='box-button box-vertical-padding box-horizontal-padding'>
-        <Link to='/market' className='button button-purple button-medium button-block'>
-          Daha fazla
-          <i className='material-icons button-icon-right'>chevron_right</i>
-        </Link>
-      </div>
-    </Box>
-  );
-});
-
-export default TradeHistory;
diff --git a/src/components/Widgets/TradeHistory/TradeHistory.tsx b/src/components/Widgets/TradeHistory/TradeHistory.tsx
new file mode 100644
index 0000000..902d668
--- /dev/null
+++ b/src/components/Widgets/TradeHistory/TradeHistory.tsx
@@ -0,0 +1,138 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+
+// components
+import Box from '../../Common/Box';
+import TradeHistoryRow from './TradeHistoryRow';
+
+// interfaces
+interface IHistory {
+  id: number;
+  type: number;
+  time: string;
+  weight: number;
+  amount: string;
+  currency: string;
+}
+
+// variables
+const dataArray: IHistory[] = [
+  {
+    id: 1,
+    amount: '146,70',
+    currency: 'TRY',
+    weight: 10,
+    time: '06:22:15',
+    type: 1,
+  },
+  {
+    id: 2,
+    amount: '146,70',
+    currency: 'TRY',
+    weight: 10,
+    time: '07:30:30',
+    type: 1,
+  },
+  {
+    id: 3,
+    amount: '146,70',
+    currency: 'TRY',
+    weight: 10,
+    time: '09:15:42',
+    type: 2,
+  },
+  {
+    id: 4,
+    amount: '146,70',
+    currency: 'TRY',
+    weight: 10,
+    time: '11:12:50',
+    type: 2,
+  },
+  {
+    id: 5,
+    amount: '146,70',
+    currency: 'TRY',
+    weight: 10,
+    time: '13:30:01',
+    type: 1,
+  },
+  {
+    id: 6,
+    amount: '146,70',
+    currency: 'TRY',
+    weight: 10,
+    time: '14:20:36',
+    type: 1,
+  },
+  {
+    id: 7,
+    amount: '146,70',
+    currency: 'TRY',
+    weight: 10,
+    time: '17:45:58',
+    type: 1,
+  },
+  {
+    id: 8,
+    amount: '146,70',
+    currency: 'TRY',
+    weight: 10,
+    time: '20:05:54',
+    type: 1,
+  },
+  {
+    id: 9,
+    amount: '146,70',
+    currency: 'TRY',
+    weight: 10,
+    time: '22:30:45',
+    type: 2,
+  },
+];
+
+const TradeHistory = (): React.JSX.Element => {
+  const [data, setData] = React.useState<IHistory[]>([]);
+
+  React.useEffect(() => {
+    setData(dataArray);
+  }, []);
+
+  return (
+    <Box>
+      <div className='box-title box-vertical-padding box-horizontal-padding no-select'>
+        Piyasa geçmişi
+      </div>
+      <div className='box-content box-content-height'>
+        <div className='trade-history-row'>
+          {data && data.length > 0 && (
+            <table>
+              <thead>
+                <tr>
+                  <th className='left no-select'>Fiyat</th>
+                  <th className='center no-select'>Hacim</th>
+                  <th className='center no-select'>İşlem</th>
+                  <th className='right no-select'>Zaman</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.map((item: IHistory) => (
+                  <TradeHistoryRow key={item.id.toString()} item={item} />
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+      <div className='box-button box-vertical-padding box-horizontal-padding'>
+        <Link to='/market' className='button button-purple button-medium button-block'>
+          Daha fazla
+          <i className='material-icons button-icon-right'>chevron_right</i>
+        </Link>
+      </div>
+    </Box>
+  );
+};
+
+export default TradeHistory;
diff --git a/src/components/Widgets/TradeHistory/TradeHistoryRow.js b/src/components/Widgets/TradeHistory/TradeHistoryRow.tsx
similarity index 57%
rename from src/components/Widgets/TradeHistory/TradeHistoryRow.js
rename to src/components/Widgets/TradeHistory/TradeHistoryRow.tsx
index fd54498..df4d32f 100644
--- a/src/components/Widgets/TradeHistory/TradeHistoryRow.js
+++ b/src/components/Widgets/TradeHistory/TradeHistoryRow.tsx
@@ -1,7 +1,11 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const TradeHistoryRow = memo(({ item }) => (
+// interfaces
+interface IProps {
+  item: any;
+}
+
+const TradeHistoryRow = ({ item }: IProps): React.JSX.Element => (
   <tr className={item.type === 1 ? 'green' : 'red'}>
     <td className='left'>
       {item.amount} {item.currency}
@@ -10,11 +14,6 @@ const TradeHistoryRow = memo(({ item }) => (
     <td className='center'>{item.type === 1 ? 'ALIŞ' : 'SATIŞ'}</td>
     <td className='right'>{item.time}</td>
   </tr>
-));
-
-TradeHistoryRow.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  item: PropTypes.object.isRequired,
-};
+);
 
 export default TradeHistoryRow;
diff --git a/src/index.js b/src/index.tsx
similarity index 83%
rename from src/index.js
rename to src/index.tsx
index bc74684..26f8cd2 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -1,8 +1,12 @@
+import React from 'react';
+
 import ReactDOM from 'react-dom/client';
+
 import { BrowserRouter } from 'react-router-dom';
+
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
   <BrowserRouter>
diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
deleted file mode 100644
index a260094..0000000
--- a/src/layouts/MainLayout.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
-
-const MainLayout = memo(({ children }) => <div>{children}</div>);
-
-MainLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default MainLayout;
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
new file mode 100644
index 0000000..e0039a4
--- /dev/null
+++ b/src/layouts/MainLayout.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+// interfaces
+interface IProps {
+  children: React.ReactNode;
+}
+
+const MainLayout = ({ children }: IProps): React.JSX.Element => <div>{children}</div>;
+
+export default MainLayout;
diff --git a/src/layouts/SiteLayout.js b/src/layouts/SiteLayout.tsx
similarity index 59%
rename from src/layouts/SiteLayout.js
rename to src/layouts/SiteLayout.tsx
index 8b9bace..011df07 100644
--- a/src/layouts/SiteLayout.js
+++ b/src/layouts/SiteLayout.tsx
@@ -1,19 +1,20 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
+// components
 import Navbar from '../components/Navbar/Navbar';
 
-const SiteLayout = memo(({ children }) => (
+// interfaces
+interface IProps {
+  children: React.ReactNode;
+}
+
+const SiteLayout = ({ children }: IProps): React.JSX.Element => (
   <div className='flex'>
     <div className='navbar full-height responsive-hide'>
       <Navbar />
     </div>
     <div className='content full-height flex-1'>{children}</div>
   </div>
-));
-
-SiteLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
+);
 
 export default SiteLayout;
diff --git a/src/navigation/Navigation.js b/src/navigation/Navigation.tsx
similarity index 87%
rename from src/navigation/Navigation.js
rename to src/navigation/Navigation.tsx
index 0c5101c..7f77070 100644
--- a/src/navigation/Navigation.js
+++ b/src/navigation/Navigation.tsx
@@ -1,5 +1,8 @@
+import React from 'react';
+
 import { Routes, Route } from 'react-router-dom';
 
+// pages
 import SigninScreen from '../screens/Members/SigninScreen';
 import SignupScreen from '../screens/Members/SignupScreen';
 import ForgotScreen from '../screens/Members/ForgotScreen';
@@ -9,9 +12,7 @@ import CapitalScreen from '../screens/Capital/CapitalScreen';
 import DashboardScreen from '../screens/Dashboard/DashboardScreen';
 import TransactionsScreen from '../screens/Transactions/TransactionsScreen';
 
-import NotFoundScreen from '../screens/NotFound/NotFoundScreen';
-
-const Navigation = () => (
+const Navigation = (): React.JSX.Element => (
   <Routes>
     <Route path='/' element={<SigninScreen />} />
     <Route path='/market' element={<MarketScreen />} />
@@ -21,7 +22,6 @@ const Navigation = () => (
     <Route path='/transactions' element={<TransactionsScreen />} />
     <Route path='/members/forgot-password' element={<ForgotScreen />} />
     <Route path='/members/signup' element={<SignupScreen />} />
-    <Route path='*' element={<NotFoundScreen />} status={404} />
   </Routes>
 );
 
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/screens/Capital/CapitalScreen.js b/src/screens/Capital/CapitalScreen.js
deleted file mode 100644
index 5227869..0000000
--- a/src/screens/Capital/CapitalScreen.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import SiteLayout from '../../layouts/SiteLayout';
-import Header from '../../components/Header/Header';
-import TopBar from '../../components/Tables/TopBar/TopBar';
-import CapitalRow from '../../components/Tables/Capital/CapitalRow';
-
-const CapitalScreen = () => {
-  const [data, setData] = useState([]);
-  const [keyword, setKeyword] = useState('');
-
-  useEffect(() => {
-    const dataArray = [
-      {
-        id: 1,
-        name: 'Bitcoin',
-        symbol: 'BTC',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
-        amount: '18.783,33',
-        currency: 'TRY',
-        change: '%45',
-        weight: '$220.080.878.451',
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 45],
-        status: 1,
-      },
-      {
-        id: 2,
-        name: 'Etherium',
-        symbol: 'ETH',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png',
-        amount: '3.125,25',
-        currency: 'TRY',
-        change: '-%30',
-        weight: '$220.080.878',
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 10],
-        status: 2,
-      },
-      {
-        id: 3,
-        name: 'Tether',
-        symbol: 'USDT',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Tether-USDT-icon.png',
-        amount: '125,12',
-        currency: 'TRY',
-        change: '%3',
-        weight: '$220.080',
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 43],
-        status: 1,
-      },
-      {
-        id: 4,
-        name: 'Ripple',
-        symbol: 'XRP',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ripple-XRP-icon.png',
-        amount: '10,05',
-        currency: 'TRY',
-        change: '%16',
-        weight: '$220.080.878',
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 44],
-        status: 1,
-      },
-      {
-        id: 5,
-        name: 'Polkadot',
-        symbol: 'DOT',
-        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAgVBMVEUAAAD////u7u6+vr7y8vLQ0NB6enrT09OHh4eXl5dtbW21tbX8/Pz19fUhISFwcHBfX18/Pz+QkJDg4OBRUVHLy8vp6ekmJiY0NDTAwMAtLS22trakpKQQEBDc3NxXV1dkZGRLS0usrKwMDAyNjY1+fn45OTmfn58aGhoXFxdEREQhoCuoAAAM6klEQVR4nN1d6YKqOgwGN9wAFcVlXHHOMPr+D3jBtSktBJIKc7+/5wz2gzZ7E8s2jVbgtLff/eFhuvS8nWVZO8/zpge/P4vbTtAx/vuWwWe3nKg/+TlbeditJv3ICQ2uwhBD14mG13xuIs7XXuQY+pwmGDqz+Q5NTqA5HzgGVsPNMIz8CuTe8EfcO5aV4T4+kOjdcYj3nIviY9gZnRjo3TEf8R1KJobj9YSN3h3H9ZhnaSwMW4MNM78Um7jFsTgGhl2abMmD320Aw8XcGL8UczJHIsP21Ci/FNN2jQzXfNIzD6dFTQy7HMoPhwOBY2WGwfFj/FIMK5s6FRm6s4/ySzFwP8mwvfo4wUQ/VhM5VRi2hjXwSzGsYgJUYBjVxC9F9AGGIbcBWg6T0hKnLMPRpVaClvX7ZZThuFczvxS9ck5HKYaOCReiPDalPOQyDEd1U3uhzE4twfBf3bwE9PE7Fc2wY9ZLKos5OsyBZRgs6+YkYRnwMlzXTSiL3ZqT4VfddJTA2akohoO6uWgQczFsKsHEo+Jh2K+bRw7+cTBsgqGmR4/OsNkEERSLGDZ5i97RpzFsrpB5o0Dc5DP8CwSLlEYuw2Yq+ixGVRk20FTTIC9gnMMwqHvdeFxyzHA9w07TvIk8LPVxRj3DZvmDRZiXZ9gkjx4DrVrUMWxOTAYLnUDVMHTqXm8FaMqN1AzHzQgblsOmDENT5vbv9ej7Pd+fTKuUhRVB7UopGRo4hKtjvAjEEKAbrAdHZoWkPIoqhiFzbuJyHAXq+OZ4H3Gmyi+qtI2KIW926fCVn/ULt3z1DhMcQ9b84AwT1nTYzr0iv5hl2OL6tUSwoHPvLS5PO7tfsgz5UtizMtnMgOc7DosZtll+KMEBG3Z/wmGpr8qEiWWGLlOVxblsqjbBOGb44ZV8MGSGTHUyh2qFkwHDZ5TDNhJDJq8XE4tWwmU4jdLplxge6T+QAJkVUoKuq455DLsM9CyPVohOjw7BklTIkMOEWuXI0LEbBvv9Pgjz9OSCajQe9Aw5gms/OiXYWQyG183dpzhvTsO4q6O5pzoe4JQAhgwG4k4tRN2vefaO0G6oqcen+t8nHUMGZb9TfsGcWve+8tBS5YGo9kWGDMpIFZotqCU+qjgSJepUzXBBe2oKhWkfHgv/qqf48N+0hQjiVGBID5Aqcnk4Q0zhnNNWI4RP3wzpunCVkRshVv34GQHVognU90d8M6TffMmE8xYe+m+zWpQWLHpvpxdDuuObMUZLrfGcEVI0R/W1KV4MycnQjNtS1heSPbsQf8tWgdf7fjIckwN7srm9Lf0E+SuSXvryKRSeDMkGm5z8qZI/lm9x4Y+xAs83/mRIjiBKq9tXecZOKqkkCZunE/Vg2KE8KwW05+1ONf/gBPXNmBRS6QCGZL9TOkNV5eA3fEz5sywgAgypXsUVrqx6EQc0UjuUk3gSGVY6NSKgQdqqvrATfFWkTHQgMKSG8SSvkBLAhu+K9OpjgSE1egGDPyTzyIMfkSJrDm+GIWVJKaA5QitygH4GSeuHL4ZkSQoMNqKFu+Lbpl8vhlS3AooH6qEGimf8S3hS78WQuCSpOPBKfBr0o0lv/8mQ7PsCJUbWPB4QzKQT1H0wJGdjgDlJTyCBbUrKpMweDKkBmiuwJulx85n4OJfypMOdYYcaYgZ5V5fkt94AHTHK+7+4N4bkCi/wzlWHehI5zqiEfwb2BCmY4dwYkgz4FMDQykqG5eNcLdClZCAqRaph2N4YkksTgEWTDeW+1htgjwN4IOkD+DeGVP0Fo4iZ9yVYYViffSs+kFROf00ZtsiiATCURSmoGER6VcAPJuWLEqfHYiglBcdG9qVBwSDSQAF/Q4uROQlDeuIcJFZkcQLEENIa8MW/oSWMooQhvd4KMJRTdGALIzNKjAz7CUN6JSIwSyUFvezk/KMOYJfS8raThOEP6QkpnBwSIMo4RsYY+SSN9WNbdFEKg8GStgCLxVrRQFvQclDnlsVQBQUUtOSorKssFvwR0eQKLIZ7B1EOCyCFsEIN/BHxaotjMRRggJ0I3xiMnGFLIYDlTZSEbYtsd8ve00X/T0i7FMQmx0RJuLWIRQ8ppvp3DmQG9kCAZDI1ZzSzOAqs9YEVIGax8Q0QxaDKib7FUdYNeADhDLgjf2rDGvYZWhzliGAvit6YWJtku8gTBS/3UINIE4ujfBzm1gQHAiwWq3nBjiAFolJMLZarR2BfCQoMaEqkGwRfFzmWu7RI1QBPAKtG2PfAJkeGZWFNB/kqq8fDUFR7QrmWBzI2ONUNbxGS0hb3NVh0wzuF8LGEfBhU3bgnwU9Ir5fkuuj4LqIQ1wQCqbgkpXT7rEGdVa6PYA0wcys4FrCAr1lND/xRdxFB7QWWi/ocULNS62jvMHEh9wFYb4qJeEt71CXLGcu68MhSNYBjgcl9L6XyRga/h0tbqAFSwwipKPfvINszKYwyBOYXoqhCrjFmEaQei12qAbDljoX/XS4v5RGkUxbfQg1QNlLYpWGXKfTmWdnEMje6AXQbKfog88ydC44LpQl8Fh9fDXBPtsCxyHZcJZd0PJ9smWsfj8/kbhRXMrnkw8xi2gxZ/ALllueqzxTX9NgOT8wRL1UDZCz0VdG7nuo+H9/OanPEvNUAjoXuV1ax8jofY6M4hyNvoQbw+5Vp2GVfM0SGs1FcwJF70jxaXDM0T87L1WTQ1vaU4CS461ikKtwc/AD5nwYSN6dhfxAtnH2Y346AVTKsWHLASsAWHPF2Ebi4LuO8wyUmLHl8JbbFXJRgXk6fpRZDiWqjDFvcZnLEUk+jwrnS8Ls1exe1tJ6GXKivxLSYTgYufyfDc8hS16YCog115gMacMZvdW18JqCI0iNvzEyo690YGhE1Jfub7A0NWIp4aoRVKDMLZvxlrFfqvUa4Y8BuO+Hp7b/NjR9KJTpHrb4Cs0JmN3bhum90vtmjVt9E1+7CPkrjoBv5Rjpgihg8GBo4iJrmOm6wiOKZf5gyhOsxcGyme08Z/KgETbidf3rgl20z3V3LwFfwq6H1sv9iyN6RNetYbE052nkYvRiym6ZygH5cz8TE9x1SpgD6CxfJiR9/ZuasDOEeMFcE/Ymr1BrhyPt4LMS73Fwh9Aekbkqfn8p6h3gfn9msgdexWVoVVsDjkt+DIa80hY4F/TJANYwAQ3JvEwBAkKFJWjXA3ib2kfHR8A5oXZNZpf40rHFmUMWMLe5mh9xjiHNWAHAs6hpWs5H7RHGqRJCQyJQ1eb04/mde+rxKXRj7tT2xybu87j0+8N708cz2a+NzMEDNpdQlaP6258xOy3p7N5x9Ex8ApVDQu16JkXCjI91UfRPZ7BrgWET6f7INjlsSUuwCQ66PCBwLkBr9AQRNDmlX9y9lKvCA+h4ITWkEnJmMSQpND1qm5CuIYMDyQikCx1J7qISujzBHL2ip2AsapVJhAr0bpQYn8VfY+3lDZQHtCKl/p7FvCAQaf092cMkCZu6kyWGmSnlyerLzeDpCoE0Sz7+QIUudugJQJ0mzEVhiYi8HuCObnyCraEqUSoNYJIYsv3p5vMR9Nrss1C+4plJq+fMtmKzF4zoIFqog9+9rB3VMFScXzCixXdMz5Xq3PdwxFgMvnDPDW3OlhHeYGCyfL5wVxDnvqQ4g5j1xzuyqAZiZXSZNfuNAzV2rL/5HB3J2nh1+KAfNjl/s/MM/OEj2DuUktM/OITULxQARLcO/OUtWXYf1P5oHrCml0810Zrzx8CHoxhFq53IbjWYaQOm53Pb4j81W1xZD6qfHdwwGbNmx1JeV6xni243WD/mONJJhbam/8sgrhcxj+AFfkQe5U11zGXJXEhlC/tTTfIa1FfuUQcFY1wKG9B4/xqFVhEiGjTfC1eZ2GYYNp1hIEMGw0Ru1aIviGBquKaAAMzsaw7CxSgM1HBvFsKFhDdz4dhxD+pxlflyQ07+RDO2gaZ7GMsfYrsTQbjXLX5yjb+GiGTbL6892e+Fg2CB5g5Mx5RnaTjOCjJtSF1RLMWyGCdcrcz+1NEN7VLfa+C2zQ6swtMN6M1MTbUcUNob15hdLX4KvxNBu1ZUIH+a3feFjaNtto/eTNVhlihAMMrTdz3tUA83dYkMME4lz/Ci/YWkJQ2Zo211zLRdlHDKj5T/C0LbXn7kbeiLwIzJMRI7B6qYHptUEDBfDZK+a9aoOmpZuH2SYcDRnrPpkfiwMExNgYCICsImrKPgMWBja9nh9ZOZ3XJdzIbRgYpigE/FJ1vmoUqswJfgYJghiDhV5iLFBJhRYGSYIv2hyxx9VNl404GaYojs7VPGTz4dBtUZ9+TDBMIHrbP0rvtLhfO1FDt/RAzDE8IaWE/UnP/kl6+fVpB853DtThEmGd7QCp72d9YeT6dLz0s968TxvOvH7s7jtBCwqLxf/AcmDo7T6bo22AAAAAElFTkSuQmCC',
-        amount: '3,05',
-        currency: 'TRY',
-        change: '-%3',
-        weight: '$220.080',
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 30],
-        status: 2,
-      },
-      {
-        id: 6,
-        name: 'Dogecoin',
-        symbol: 'DOGE',
-        icon: 'https://www.kindpng.com/picc/m/202-2028344_dogecoin-doge-icon-metro-symbole-hd-png-download.png',
-        amount: '1,05',
-        currency: 'TRY',
-        change: '-%6',
-        weight: '$220.080.878',
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 40],
-        status: 2,
-      },
-      {
-        id: 7,
-        name: 'Cardano',
-        symbol: 'ADA',
-        icon: 'https://cdn4.iconfinder.com/data/icons/crypto-currency-and-coin-2/256/cardano_ada-512.png',
-        amount: '10,12',
-        currency: 'TRY',
-        change: '%6',
-        weight: '$220.080',
-        lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 40],
-        status: 1,
-      },
-    ];
-
-    setData(dataArray);
-  }, []);
-
-  const handleSearchValue = (e) => {
-    const { value } = e.target;
-
-    setKeyword(value);
-  };
-
-  const handleSearchSubmit = (e) => {
-    e.preventDefault();
-  };
-
-  return (
-    <SiteLayout>
-      <Header icon='sort' title='Piyasa' />
-      <TopBar
-        searchValue={keyword}
-        searchOnChange={handleSearchValue}
-        searchSubmit={handleSearchSubmit}
-      />
-
-      {data && data.length > 0 && (
-        <table className='data-table'>
-          <thead>
-            <tr>
-              <th className='left'>Sıra</th>
-              <th className='left'>Coin</th>
-              <th className='center'>Son fiyat</th>
-              <th className='center'>Değişim (24s)</th>
-              <th className='center responsive-hide2'>Hacim (24s)</th>
-              <th className='left responsive-hide'>Grafik</th>
-              <th aria-label='empty' className='right'>
-                &nbsp;
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((item, index) => (
-              <CapitalRow key={item.id.toString()} item={item} index={index + 1} />
-            ))}
-          </tbody>
-        </table>
-      )}
-    </SiteLayout>
-  );
-};
-
-export default CapitalScreen;
diff --git a/src/screens/Capital/CapitalScreen.tsx b/src/screens/Capital/CapitalScreen.tsx
new file mode 100644
index 0000000..8405d79
--- /dev/null
+++ b/src/screens/Capital/CapitalScreen.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+
+// components
+import SiteLayout from '../../layouts/SiteLayout';
+import Header from '../../components/Header/Header';
+import TopBar from '../../components/Tables/TopBar/TopBar';
+import CapitalRow from '../../components/Tables/Capital/CapitalRow';
+
+// interfaces
+interface ICrypto {
+  id: number;
+  name: string;
+  icon: string;
+  symbol: string;
+  weight: string;
+  amount: string;
+  change: string;
+  status: number;
+  currency: string;
+  lineChartData: number[];
+}
+
+// variables
+const dataArray: ICrypto[] = [
+  {
+    id: 1,
+    name: 'Bitcoin',
+    symbol: 'BTC',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
+    amount: '18.783,33',
+    currency: 'TRY',
+    change: '%45',
+    weight: '$220.080.878.451',
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 45],
+    status: 1,
+  },
+  {
+    id: 2,
+    name: 'Etherium',
+    symbol: 'ETH',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png',
+    amount: '3.125,25',
+    currency: 'TRY',
+    change: '-%30',
+    weight: '$220.080.878',
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 10],
+    status: 2,
+  },
+  {
+    id: 3,
+    name: 'Tether',
+    symbol: 'USDT',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Tether-USDT-icon.png',
+    amount: '125,12',
+    currency: 'TRY',
+    change: '%3',
+    weight: '$220.080',
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 43],
+    status: 1,
+  },
+  {
+    id: 4,
+    name: 'Ripple',
+    symbol: 'XRP',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ripple-XRP-icon.png',
+    amount: '10,05',
+    currency: 'TRY',
+    change: '%16',
+    weight: '$220.080.878',
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 44],
+    status: 1,
+  },
+  {
+    id: 5,
+    name: 'Polkadot',
+    symbol: 'DOT',
+    icon: 'data:image/png;base64,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',
+    amount: '3,05',
+    currency: 'TRY',
+    change: '-%3',
+    weight: '$220.080',
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 30],
+    status: 2,
+  },
+  {
+    id: 6,
+    name: 'Dogecoin',
+    symbol: 'DOGE',
+    icon: 'https://www.kindpng.com/picc/m/202-2028344_dogecoin-doge-icon-metro-symbole-hd-png-download.png',
+    amount: '1,05',
+    currency: 'TRY',
+    change: '-%6',
+    weight: '$220.080.878',
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 40],
+    status: 2,
+  },
+  {
+    id: 7,
+    name: 'Cardano',
+    symbol: 'ADA',
+    icon: 'https://cdn4.iconfinder.com/data/icons/crypto-currency-and-coin-2/256/cardano_ada-512.png',
+    amount: '10,12',
+    currency: 'TRY',
+    change: '%6',
+    weight: '$220.080',
+    lineChartData: [5, 10, 5, 20, 8, 15, 22, 8, 12, 8, 32, 16, 29, 20, 16, 30, 42, 40],
+    status: 1,
+  },
+];
+
+const CapitalScreen = (): React.JSX.Element => {
+  const [data, setData] = React.useState<ICrypto[]>([]);
+  const [keyword, setKeyword] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setData(dataArray);
+  }, []);
+
+  /**
+   * Handles the search input value change.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - The input change event.
+   * @returns {void}
+   */
+  const handleSearchValue = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { value } = e.target;
+
+    setKeyword(value);
+  };
+
+  /**
+   * Handles the search form submission.
+   *
+   * @param {React.FormEvent} e - The form submission event.
+   * @returns {void}
+   */
+  const handleSearchSubmit = (e: React.FormEvent): void => {
+    e.preventDefault();
+  };
+
+  return (
+    <SiteLayout>
+      <Header icon='sort' title='Piyasa' />
+      <TopBar
+        searchValue={keyword}
+        searchSubmit={handleSearchSubmit}
+        searchOnChange={handleSearchValue}
+      />
+
+      {data && data.length > 0 && (
+        <table className='data-table'>
+          <thead>
+            <tr>
+              <th className='left'>Sıra</th>
+              <th className='left'>Coin</th>
+              <th className='center'>Son fiyat</th>
+              <th className='center'>Değişim (24s)</th>
+              <th className='center responsive-hide2'>Hacim (24s)</th>
+              <th className='left responsive-hide'>Grafik</th>
+              <th aria-label='empty' className='right'>
+                &nbsp;
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((item: ICrypto, index: number) => (
+              <CapitalRow key={item.id.toString()} item={item} index={index + 1} />
+            ))}
+          </tbody>
+        </table>
+      )}
+    </SiteLayout>
+  );
+};
+
+export default CapitalScreen;
diff --git a/src/screens/Dashboard/DashboardScreen.js b/src/screens/Dashboard/DashboardScreen.tsx
similarity index 97%
rename from src/screens/Dashboard/DashboardScreen.js
rename to src/screens/Dashboard/DashboardScreen.tsx
index 928fb77..7dc282c 100644
--- a/src/screens/Dashboard/DashboardScreen.js
+++ b/src/screens/Dashboard/DashboardScreen.tsx
@@ -1,11 +1,13 @@
-import SiteLayout from '../../layouts/SiteLayout';
-import Header from '../../components/Header/Header';
+import React from 'react';
 
+// components
 import Box from '../../components/Common/Box';
+import SiteLayout from '../../layouts/SiteLayout';
+import Header from '../../components/Header/Header';
 import BankProcess from '../../components/Widgets/BankProcess/BankProcess';
 import RecentActivity from '../../components/Widgets/RecentActivity/RecentActivity';
 
-const DashboardScreen = () => (
+const DashboardScreen = (): React.JSX.Element => (
   <SiteLayout>
     <Header icon='sort' title='Yatır-çek' />
     <div className='flex flex-destroy flex-space-between'>
diff --git a/src/screens/Market/MarketScreen.js b/src/screens/Market/MarketScreen.tsx
similarity index 59%
rename from src/screens/Market/MarketScreen.js
rename to src/screens/Market/MarketScreen.tsx
index 3ef6401..3040e18 100644
--- a/src/screens/Market/MarketScreen.js
+++ b/src/screens/Market/MarketScreen.tsx
@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react';
+import React from 'react';
 
+// components
 import MainLayout from '../../layouts/MainLayout';
 import Header from '../../components/Header/Header';
-
 import Market from '../../components/Widgets/Market/Market';
 import BuySell from '../../components/Widgets/BuySell/BuySell';
 import BuyOrders from '../../components/Widgets/BuyOrders/BuyOrders';
@@ -12,35 +12,63 @@ import CoinVertical from '../../components/Widgets/Coin/CoinVertical';
 import CoinHorizontal from '../../components/Widgets/Coin/CoinHorizontal';
 import CandleStick from '../../components/Widgets/CandleStick/CandleStick';
 
-const MarketScreen = () => {
-  const [keyword, setKeyword] = useState('');
-  const [coinInfo, setCoinInfo] = useState(null);
+// interfaces
+interface ICrypto {
+  id: number;
+  name: string;
+  icon: string;
+  symbol: string;
+  weight: string;
+  amount: string;
+  change: string;
+  currency: string;
+  exchange: string;
+  description: string;
+  financialRate: string;
+}
+
+// variables
+const coinData: ICrypto = {
+  id: 1,
+  name: 'Bitcoin',
+  symbol: 'BTC',
+  change: '-%3.28',
+  currency: 'TRY',
+  exchange: 'BTC/TRY',
+  weight: '104k',
+  financialRate: '-0.0252%/hr',
+  icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
+  amount: '18.783,33',
+  description: `Bitcoin, Satoshi Nakamoto adını kullanmış bilinmeyen bir kişi veya grup tarafından 2008'de icat edilmiş bir kriptoparadır. 2009'da bir açık kaynak kodlu yazılım olarak piyasaya`,
+};
 
-  useEffect(() => {
-    const coinData = {
-      id: 1,
-      name: 'Bitcoin',
-      symbol: 'BTC',
-      change: '-%3.28',
-      currency: 'TRY',
-      exchange: 'BTC/TRY',
-      weight: '104k',
-      financialRate: '-0.0252%/hr',
-      icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
-      amount: '18.783,33',
-      description: `Bitcoin, Satoshi Nakamoto adını kullanmış bilinmeyen bir kişi veya grup tarafından 2008'de icat edilmiş bir kriptoparadır. 2009'da bir açık kaynak kodlu yazılım olarak piyasaya`,
-    };
+const MarketScreen = (): React.JSX.Element => {
+  const [keyword, setKeyword] = React.useState<string>('');
+  const [coinInfo, setCoinInfo] = React.useState<ICrypto | null>(null);
 
+  React.useEffect(() => {
     setCoinInfo(coinData);
   }, []);
 
-  const handleSearchValue = (e) => {
+  /**
+   * Handles the search input value change.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - The input change event.
+   * @returns {void}
+   */
+  const handleSearchValue = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const { value } = e.target;
 
     setKeyword(value);
   };
 
-  const handleSearchSubmit = (e) => {
+  /**
+   * Handles the search form submission.
+   *
+   * @param {React.FormEvent} e - The form submission event.
+   * @returns {void}
+   */
+  const handleSearchSubmit = (e: React.FormEvent): void => {
     e.preventDefault();
   };
 
@@ -59,8 +87,8 @@ const MarketScreen = () => {
               <CoinHorizontal
                 item={coinInfo}
                 searchValue={keyword}
-                searchOnChange={handleSearchValue}
                 searchSubmit={handleSearchSubmit}
+                searchOnChange={handleSearchValue}
               />
             )}
 
diff --git a/src/screens/Members/ForgotScreen.js b/src/screens/Members/ForgotScreen.tsx
similarity index 80%
rename from src/screens/Members/ForgotScreen.js
rename to src/screens/Members/ForgotScreen.tsx
index ab130ea..8a8d647 100644
--- a/src/screens/Members/ForgotScreen.js
+++ b/src/screens/Members/ForgotScreen.tsx
@@ -1,17 +1,30 @@
-import { useState } from 'react';
+import React from 'react';
+
 import { Link } from 'react-router-dom';
 
+// components
 import MainLayout from '../../layouts/MainLayout';
 import Box from '../../components/Common/Box';
 import FormInput from '../../components/Forms/FormInput';
 import FormButton from '../../components/Forms/FormButton';
 
-const ForgotScreen = () => {
-  const [formValues, setFormValues] = useState({
+// interfaces
+interface IFormProps {
+  phone: string;
+}
+
+const ForgotScreen = (): React.JSX.Element => {
+  const [formValues, setFormValues] = React.useState<IFormProps>({
     phone: '',
   });
 
-  const handleChange = (e) => {
+  /**
+   * Handles input changes in the forgot password form.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - The input change event.
+   * @returns {void}
+   */
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const { name, value } = e.target;
 
     setFormValues({
@@ -20,7 +33,13 @@ const ForgotScreen = () => {
     });
   };
 
-  const handleSubmit = async (e) => {
+  /**
+   * Handles the form submission for the forgot password screen.
+   *
+   * @param {React.FormEvent} e - The form submission event.
+   * @returns {void}
+   */
+  const handleSubmit = (e: React.FormEvent): void => {
     e.preventDefault();
   };
 
@@ -51,9 +70,9 @@ const ForgotScreen = () => {
                         <FormInput
                           type='text'
                           name='phone'
+                          onChange={handleChange}
                           value={formValues.phone}
                           placeholder='Telefon numaranızı girin'
-                          onChange={handleChange}
                         />
                       </div>
                     </div>
diff --git a/src/screens/Members/ProfileScreen.js b/src/screens/Members/ProfileScreen.tsx
similarity index 91%
rename from src/screens/Members/ProfileScreen.js
rename to src/screens/Members/ProfileScreen.tsx
index aad66ae..030d5c0 100644
--- a/src/screens/Members/ProfileScreen.js
+++ b/src/screens/Members/ProfileScreen.tsx
@@ -1,12 +1,14 @@
+import React from 'react';
+
+// components
 import SiteLayout from '../../layouts/SiteLayout';
 import Header from '../../components/Header/Header';
-
 import Limits from '../../components/Widgets/Limits/Limits';
 import Profile from '../../components/Widgets/Profile/Profile';
 import MyAssets from '../../components/Widgets/MyAssets/MyAssets';
 import RecentActivity from '../../components/Widgets/RecentActivity/RecentActivity';
 
-const ProfileScreen = () => (
+const ProfileScreen = (): React.JSX.Element => (
   <SiteLayout>
     <Header icon='sort' title='Profil' />
     <div className='flex flex-destroy'>
diff --git a/src/screens/Members/SigninScreen.js b/src/screens/Members/SigninScreen.tsx
similarity index 83%
rename from src/screens/Members/SigninScreen.js
rename to src/screens/Members/SigninScreen.tsx
index c7fce83..49d4426 100644
--- a/src/screens/Members/SigninScreen.js
+++ b/src/screens/Members/SigninScreen.tsx
@@ -1,20 +1,34 @@
-import { useState } from 'react';
+import React from 'react';
+
 import { Link, useNavigate } from 'react-router-dom';
 
-import MainLayout from '../../layouts/MainLayout';
+// components
 import Box from '../../components/Common/Box';
+import MainLayout from '../../layouts/MainLayout';
 import FormInput from '../../components/Forms/FormInput';
 import FormButton from '../../components/Forms/FormButton';
 
-const SigninScreen = () => {
+// interfaces
+interface IFormProps {
+  phone: string;
+  password: string;
+}
+
+const SigninScreen = (): React.JSX.Element => {
   const navigate = useNavigate();
 
-  const [formValues, setFormValues] = useState({
+  const [formValues, setFormValues] = React.useState<IFormProps>({
     phone: '',
     password: '',
   });
 
-  const handleChange = (e) => {
+  /**
+   * Handles input changes in the sign-in form.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - The input change event.
+   * @returns {void}
+   */
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const { name, value } = e.target;
 
     setFormValues({
@@ -23,7 +37,13 @@ const SigninScreen = () => {
     });
   };
 
-  const handleSubmit = async (e) => {
+  /**
+   * Handles the form submission for the sign-in screen.
+   *
+   * @param {React.FormEvent} e - The form submission event.
+   * @returns {void}
+   */
+  const handleSubmit = (e: React.FormEvent): void => {
     e.preventDefault();
 
     navigate('/market');
@@ -56,9 +76,9 @@ const SigninScreen = () => {
                         <FormInput
                           type='text'
                           name='phone'
+                          onChange={handleChange}
                           value={formValues.phone}
                           placeholder='Telefon numaranızı girin'
-                          onChange={handleChange}
                         />
                       </div>
                     </div>
@@ -68,9 +88,9 @@ const SigninScreen = () => {
                         <FormInput
                           type='password'
                           name='password'
+                          onChange={handleChange}
                           value={formValues.password}
                           placeholder='Şifrenizi girin'
-                          onChange={handleChange}
                         />
                       </div>
                     </div>
diff --git a/src/screens/Members/SignupScreen.js b/src/screens/Members/SignupScreen.tsx
similarity index 89%
rename from src/screens/Members/SignupScreen.js
rename to src/screens/Members/SignupScreen.tsx
index 453bfb8..e044b52 100644
--- a/src/screens/Members/SignupScreen.js
+++ b/src/screens/Members/SignupScreen.tsx
@@ -1,14 +1,37 @@
-import { useState } from 'react';
+import React from 'react';
+
 import { Link } from 'react-router-dom';
 
-import MainLayout from '../../layouts/MainLayout';
+// components
 import Box from '../../components/Common/Box';
+import MainLayout from '../../layouts/MainLayout';
 import FormInput from '../../components/Forms/FormInput';
 import FormButton from '../../components/Forms/FormButton';
 import FormCheckbox from '../../components/Forms/FormCheckbox';
 
-const SignupScreen = () => {
-  const [formValues, setFormValues] = useState({
+// interfaces
+interface IFormProps {
+  email: string;
+  phone: string;
+  password: string;
+  password1: string;
+  name: string;
+  lastname: string;
+  citizenship: boolean;
+  identityType: string;
+  identityNumber: string;
+  day: string;
+  month: string;
+  year: string;
+  country: string;
+  operator: string;
+  agreeToPolicies1: boolean;
+  agreeToPolicies2: boolean;
+  agreeToPolicies3: boolean;
+}
+
+const SignupScreen = (): React.JSX.Element => {
+  const [formValues, setFormValues] = React.useState<IFormProps>({
     email: '',
     phone: '',
     password: '',
@@ -28,7 +51,13 @@ const SignupScreen = () => {
     agreeToPolicies3: false,
   });
 
-  const handleChange = (e) => {
+  /**
+   * Handles input changes in the sign-up form.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - The input change event.
+   * @returns {void}
+   */
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const { name, value } = e.target;
 
     setFormValues({
@@ -37,7 +66,13 @@ const SignupScreen = () => {
     });
   };
 
-  const handleCheckboxChange = (e) => {
+  /**
+   * Handles checkbox changes in the sign-up form.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - The checkbox change event.
+   * @returns {void}
+   */
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const { name, checked } = e.target;
 
     setFormValues({
@@ -46,7 +81,13 @@ const SignupScreen = () => {
     });
   };
 
-  const handleSubmit = async (e) => {
+  /**
+   * Handles the form submission for the sign-up screen.
+   *
+   * @param {React.FormEvent} e - The form submission event.
+   * @returns {void}
+   */
+  const handleSubmit = (e: React.FormEvent): void => {
     e.preventDefault();
   };
 
@@ -77,9 +118,9 @@ const SignupScreen = () => {
                         <FormInput
                           type='email'
                           name='email'
+                          onChange={handleChange}
                           value={formValues.email}
                           placeholder='E-posta adresinizi girin'
-                          onChange={handleChange}
                         />
                       </div>
                     </div>
@@ -89,9 +130,9 @@ const SignupScreen = () => {
                         <FormInput
                           type='password'
                           name='password'
+                          onChange={handleChange}
                           value={formValues.password}
                           placeholder='Şifrenizi girin'
-                          onChange={handleChange}
                         />
                       </div>
                     </div>
@@ -101,9 +142,9 @@ const SignupScreen = () => {
                         <FormInput
                           type='password'
                           name='password1'
+                          onChange={handleChange}
                           value={formValues.password1}
                           placeholder='Şifrenizi tekrar girin'
-                          onChange={handleChange}
                         />
                       </div>
                     </div>
@@ -113,9 +154,9 @@ const SignupScreen = () => {
                         <FormInput
                           type='text'
                           name='name'
+                          onChange={handleChange}
                           value={formValues.name}
                           placeholder='Adınızı girin'
-                          onChange={handleChange}
                         />
                       </div>
                     </div>
@@ -125,9 +166,9 @@ const SignupScreen = () => {
                         <FormInput
                           type='text'
                           name='lastname'
+                          onChange={handleChange}
                           value={formValues.lastname}
                           placeholder='Soyadınızı girin'
-                          onChange={handleChange}
                         />
                       </div>
                     </div>
@@ -136,9 +177,9 @@ const SignupScreen = () => {
                       <div className='full-width'>
                         <FormCheckbox
                           name='citizenship'
+                          onChange={handleCheckboxChange}
                           checked={formValues.citizenship}
                           text='Türkiye Cumhuriyeti vatandaşıyım.'
-                          onChange={handleCheckboxChange}
                         />
                       </div>
                     </div>
@@ -155,9 +196,9 @@ const SignupScreen = () => {
                         <FormInput
                           type='text'
                           name='identityNumber'
+                          onChange={handleChange}
                           value={formValues.identityNumber}
                           placeholder='Kimlik numaranızı girin'
-                          onChange={handleChange}
                         />
                       </div>
                     </div>
@@ -201,9 +242,9 @@ const SignupScreen = () => {
                         <FormInput
                           type='text'
                           name='phone'
+                          onChange={handleChange}
                           value={formValues.phone}
                           placeholder='Telefon numaranızı girin'
-                          onChange={handleChange}
                         />
                       </div>
                     </div>
@@ -212,9 +253,9 @@ const SignupScreen = () => {
                       <div className='full-width'>
                         <FormCheckbox
                           name='agreeToPolicies1'
+                          onChange={handleCheckboxChange}
                           checked={formValues.agreeToPolicies1}
                           text={`KVVK Aydınlatma Metni'ni okudum ve kullanıcı sözleşmesini kabul ediyorum.`}
-                          onChange={handleCheckboxChange}
                         />
                       </div>
                     </div>
@@ -222,9 +263,9 @@ const SignupScreen = () => {
                       <div className='full-width'>
                         <FormCheckbox
                           name='agreeToPolicies2'
+                          onChange={handleCheckboxChange}
                           checked={formValues.agreeToPolicies2}
                           text={`KVVK Açık Rıza Metni'ni okudum, inceledim. Bu metin kapsamında kişisel verilerimin işlenmesi ve aktarılmasını onaylıyorum.`}
-                          onChange={handleCheckboxChange}
                         />
                       </div>
                     </div>
@@ -232,9 +273,9 @@ const SignupScreen = () => {
                       <div className='full-width'>
                         <FormCheckbox
                           name='agreeToPolicies3'
+                          onChange={handleCheckboxChange}
                           checked={formValues.agreeToPolicies3}
                           text='Ürün ve hizmetlerle ilgili KVVK Aydınlatma Metni kapsamında e-posta, telefon ve elektronik iletişim kanalları yoluyla ticari elektronik iletiler almayı kabul ediyorum.'
-                          onChange={handleCheckboxChange}
                         />
                       </div>
                     </div>
diff --git a/src/screens/NotFound/NotFoundScreen.js b/src/screens/NotFound/NotFoundScreen.tsx
similarity index 87%
rename from src/screens/NotFound/NotFoundScreen.js
rename to src/screens/NotFound/NotFoundScreen.tsx
index a5de46c..3bc2d1b 100644
--- a/src/screens/NotFound/NotFoundScreen.js
+++ b/src/screens/NotFound/NotFoundScreen.tsx
@@ -1,6 +1,8 @@
+import React from 'react';
+
 import { Link } from 'react-router-dom';
 
-const NotFoundScreen = () => (
+const NotFoundScreen = (): React.JSX.Element => (
   <div className='full-height flex flex-column flex-center'>
     <img
       src={`${process.env.PUBLIC_URL}/images/logo.png`}
diff --git a/src/screens/Transactions/TransactionsScreen.js b/src/screens/Transactions/TransactionsScreen.js
deleted file mode 100644
index 00dad96..0000000
--- a/src/screens/Transactions/TransactionsScreen.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import SiteLayout from '../../layouts/SiteLayout';
-import Header from '../../components/Header/Header';
-import TopBar from '../../components/Tables/TopBar/TopBar';
-import TransactionRow from '../../components/Tables/Transactions/TransactionRow';
-
-const TransactionsScreen = () => {
-  const [data, setData] = useState([]);
-  const [keyword, setKeyword] = useState('');
-
-  useEffect(() => {
-    const dataArray = [
-      {
-        id: 1,
-        type: 2,
-        transaction: '12415346563475',
-        date: '2/5/2020 06:24:45',
-        from: 'Tarık',
-        to: 'Cenk',
-        toPicture: 'https://www.cenksari.com/content/profile.jpg',
-        coin: 'Bitcoin',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
-        amount: '5.553',
-        status: 1,
-      },
-      {
-        id: 2,
-        type: 2,
-        transaction: '12453465987451',
-        date: '3/5/2020 18:35:12',
-        from: 'Tarık',
-        to: 'Cenk',
-        toPicture: 'https://www.cenksari.com/content/profile.jpg',
-        coin: 'Etherium',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png',
-        amount: '3.000',
-        status: 2,
-      },
-      {
-        id: 3,
-        type: 1,
-        transaction: '24153459987415',
-        date: '4/5/2020 13:42:01',
-        from: 'Cenk',
-        to: 'Tarık',
-        toPicture: '',
-        coin: 'Tether',
-        icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Tether-USDT-icon.png',
-        amount: '158',
-        status: 3,
-      },
-    ];
-
-    setData(dataArray);
-  }, []);
-
-  const handleSearchValue = (e) => {
-    const { value } = e.target;
-
-    setKeyword(value);
-  };
-
-  const handleSearchSubmit = (e) => {
-    e.preventDefault();
-  };
-
-  return (
-    <SiteLayout>
-      <Header icon='sort' title='İşlemler' />
-      <TopBar
-        searchValue={keyword}
-        searchOnChange={handleSearchValue}
-        searchSubmit={handleSearchSubmit}
-      />
-
-      {data && data.length > 0 && (
-        <table className='data-table'>
-          <thead>
-            <tr>
-              <th aria-label='empty' className='left'>
-                &nbsp;
-              </th>
-              <th className='left responsive-hide'>İşlem</th>
-              <th className='left responsive-hide'>Tarih</th>
-              <th className='left'>Kimden</th>
-              <th className='left'>Kime</th>
-              <th className='left'>Coin</th>
-              <th className='center'>Miktar</th>
-              <th className='center'>Durum</th>
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((item) => (
-              <TransactionRow key={item.id.toString()} item={item} />
-            ))}
-          </tbody>
-        </table>
-      )}
-    </SiteLayout>
-  );
-};
-
-export default TransactionsScreen;
diff --git a/src/screens/Transactions/TransactionsScreen.tsx b/src/screens/Transactions/TransactionsScreen.tsx
new file mode 100644
index 0000000..8c592f8
--- /dev/null
+++ b/src/screens/Transactions/TransactionsScreen.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+
+// components
+import SiteLayout from '../../layouts/SiteLayout';
+import Header from '../../components/Header/Header';
+import TopBar from '../../components/Tables/TopBar/TopBar';
+import TransactionRow from '../../components/Tables/Transactions/TransactionRow';
+
+// interfaces
+interface ITransaction {
+  id: number;
+  to: string;
+  type: number;
+  date: string;
+  from: string;
+  coin: string;
+  icon: string;
+  amount: string;
+  status: number;
+  toPicture: string;
+  transaction: string;
+}
+
+// variables
+const dataArray: ITransaction[] = [
+  {
+    id: 1,
+    type: 2,
+    transaction: '12415346563475',
+    date: '2/5/2020 06:24:45',
+    from: 'Tarık',
+    to: 'Cenk',
+    toPicture: 'https://www.cenksari.com/content/profile.jpg',
+    coin: 'Bitcoin',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/256/Bitcoin-BTC-icon.png',
+    amount: '5.553',
+    status: 1,
+  },
+  {
+    id: 2,
+    type: 2,
+    transaction: '12453465987451',
+    date: '3/5/2020 18:35:12',
+    from: 'Tarık',
+    to: 'Cenk',
+    toPicture: 'https://www.cenksari.com/content/profile.jpg',
+    coin: 'Etherium',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png',
+    amount: '3.000',
+    status: 2,
+  },
+  {
+    id: 3,
+    type: 1,
+    transaction: '24153459987415',
+    date: '4/5/2020 13:42:01',
+    from: 'Cenk',
+    to: 'Tarık',
+    toPicture: '',
+    coin: 'Tether',
+    icon: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Tether-USDT-icon.png',
+    amount: '158',
+    status: 3,
+  },
+];
+
+const TransactionsScreen = (): React.JSX.Element => {
+  const [data, setData] = React.useState<ITransaction[]>([]);
+  const [keyword, setKeyword] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setData(dataArray);
+  }, []);
+
+  /**
+   * Handles the search input value change.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - The input change event.
+   * @returns {void}
+   */
+  const handleSearchValue = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { value } = e.target;
+
+    setKeyword(value);
+  };
+
+  /**
+   * Handles the search form submission.
+   *
+   * @param {React.FormEvent} e - The form submission event.
+   * @returns {void}
+   */
+  const handleSearchSubmit = (e: React.FormEvent): void => {
+    e.preventDefault();
+  };
+
+  return (
+    <SiteLayout>
+      <Header icon='sort' title='İşlemler' />
+      <TopBar
+        searchValue={keyword}
+        searchSubmit={handleSearchSubmit}
+        searchOnChange={handleSearchValue}
+      />
+
+      {data && data.length > 0 && (
+        <table className='data-table'>
+          <thead>
+            <tr>
+              <th aria-label='empty' className='left'>
+                &nbsp;
+              </th>
+              <th className='left responsive-hide'>İşlem</th>
+              <th className='left responsive-hide'>Tarih</th>
+              <th className='left'>Kimden</th>
+              <th className='left'>Kime</th>
+              <th className='left'>Coin</th>
+              <th className='center'>Miktar</th>
+              <th className='center'>Durum</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((item: ITransaction) => (
+              <TransactionRow key={item.id.toString()} item={item} />
+            ))}
+          </tbody>
+        </table>
+      )}
+    </SiteLayout>
+  );
+};
+
+export default TransactionsScreen;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0b1798d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.cjs",
+    "**/*.mjs",
+    ".eslintrc.cjs",
+    ".prettierrc.cjs",
+    "declaration.d.ts"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/yarn.lock b/yarn.lock
index cd1a405..f62a36e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -32,10 +32,10 @@
     "@babel/highlight" "^7.24.7"
     picocolors "^1.0.0"
 
-"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.24.8":
-  version "7.24.9"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.9.tgz#53eee4e68f1c1d0282aa0eb05ddb02d033fc43a0"
-  integrity sha512-e701mcfApCJqMMueQI0Fb68Amflj83+dvAvHawoBpAz+GDjCIyGHzNwnefjsWJ3xiYAqqiQFoWbspGYBdb2/ng==
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.24.8", "@babel/compat-data@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.0.tgz#6b226a5da3a686db3c30519750e071dce292ad95"
+  integrity sha512-P4fwKI2mjEb3ZU5cnMJzvRsRKGBUcs8jvxIoRmr6ufAY9Xk2Bz7JubRTTivkw55c7WQJfTECeqYVa+HZ0FzREg==
 
 "@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
   version "7.24.9"
@@ -59,20 +59,20 @@
     semver "^6.3.1"
 
 "@babel/eslint-parser@^7.16.3":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.24.8.tgz#bc655255fa4ded3694cc10ef3dbea6d69639c831"
-  integrity sha512-nYAikI4XTGokU2QX7Jx+v4rxZKhKivaQaREZjuW3mrJrbdWJ5yUfohnoUULge+zEEaKjPYNxhoRgUKktjXtbwA==
+  version "7.25.1"
+  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.25.1.tgz#469cee4bd18a88ff3edbdfbd227bd20e82aa9b82"
+  integrity sha512-Y956ghgTT4j7rKesabkh5WeqgSFZVFwaPR0IWFm7KFHFmmJ4afbG49SmfW4S+GyRPx0Dy5jxEWA5t0rpxfElWg==
   dependencies:
     "@nicolo-ribaudo/eslint-scope-5-internals" "5.1.1-v1"
     eslint-visitor-keys "^2.1.0"
     semver "^6.3.1"
 
-"@babel/generator@^7.24.8", "@babel/generator@^7.24.9", "@babel/generator@^7.7.2":
-  version "7.24.10"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.10.tgz#a4ab681ec2a78bbb9ba22a3941195e28a81d8e76"
-  integrity sha512-o9HBZL1G2129luEUlG1hB4N/nlYNWHnpwlND9eOMclRqqu1YDy2sSYVCFUZwl8I1Gxh+QSRrP2vD7EpUmFVXxg==
+"@babel/generator@^7.24.9", "@babel/generator@^7.25.0", "@babel/generator@^7.7.2":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e"
+  integrity sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==
   dependencies:
-    "@babel/types" "^7.24.9"
+    "@babel/types" "^7.25.0"
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
@@ -103,25 +103,23 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.24.7", "@babel/helper-create-class-features-plugin@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.8.tgz#47f546408d13c200c0867f9d935184eaa0851b09"
-  integrity sha512-4f6Oqnmyp2PP3olgUMmOwC3akxSm5aBYraQ6YDdKy7NcAMkDECHWG0DEnV6M2UAkERgIBhYt8S27rURPg7SxWA==
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.24.7", "@babel/helper-create-class-features-plugin@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.0.tgz#a109bf9c3d58dfed83aaf42e85633c89f43a6253"
+  integrity sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.24.7"
-    "@babel/helper-environment-visitor" "^7.24.7"
-    "@babel/helper-function-name" "^7.24.7"
     "@babel/helper-member-expression-to-functions" "^7.24.8"
     "@babel/helper-optimise-call-expression" "^7.24.7"
-    "@babel/helper-replace-supers" "^7.24.7"
+    "@babel/helper-replace-supers" "^7.25.0"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
-    "@babel/helper-split-export-declaration" "^7.24.7"
+    "@babel/traverse" "^7.25.0"
     semver "^6.3.1"
 
-"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.24.7.tgz#be4f435a80dc2b053c76eeb4b7d16dd22cfc89da"
-  integrity sha512-03TCmXy2FtXJEZfbXDTSqq1fRJArk7lX9DOFC/47VthYcxyIOx+eXQmdo6DOQvrbpIix+KfXwvuXdFDZHxt+rA==
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.24.7", "@babel/helper-create-regexp-features-plugin@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.0.tgz#17afe5d23b3a833a90f0fab9c2ae69fea192de5c"
+  integrity sha512-q0T+dknZS+L5LDazIP+02gEZITG5unzvb6yIjcmj5i0eFrs5ToBV2m2JGH4EsE/gtP8ygEGLGApBgRIZkTm7zg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.24.7"
     regexpu-core "^5.3.1"
@@ -138,29 +136,7 @@
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
 
-"@babel/helper-environment-visitor@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.7.tgz#4b31ba9551d1f90781ba83491dd59cf9b269f7d9"
-  integrity sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==
-  dependencies:
-    "@babel/types" "^7.24.7"
-
-"@babel/helper-function-name@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz#75f1e1725742f39ac6584ee0b16d94513da38dd2"
-  integrity sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==
-  dependencies:
-    "@babel/template" "^7.24.7"
-    "@babel/types" "^7.24.7"
-
-"@babel/helper-hoist-variables@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.7.tgz#b4ede1cde2fd89436397f30dc9376ee06b0f25ee"
-  integrity sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==
-  dependencies:
-    "@babel/types" "^7.24.7"
-
-"@babel/helper-member-expression-to-functions@^7.24.7", "@babel/helper-member-expression-to-functions@^7.24.8":
+"@babel/helper-member-expression-to-functions@^7.24.8":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.8.tgz#6155e079c913357d24a4c20480db7c712a5c3fb6"
   integrity sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==
@@ -176,16 +152,15 @@
     "@babel/traverse" "^7.24.7"
     "@babel/types" "^7.24.7"
 
-"@babel/helper-module-transforms@^7.24.7", "@babel/helper-module-transforms@^7.24.8", "@babel/helper-module-transforms@^7.24.9":
-  version "7.24.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.24.9.tgz#e13d26306b89eea569180868e652e7f514de9d29"
-  integrity sha512-oYbh+rtFKj/HwBQkFlUzvcybzklmVdVV3UU+mN7n2t/q3yGHbuVdNxyFvSBO1tfvjyArpHNcWMAzsSPdyI46hw==
+"@babel/helper-module-transforms@^7.24.7", "@babel/helper-module-transforms@^7.24.8", "@babel/helper-module-transforms@^7.24.9", "@babel/helper-module-transforms@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.25.0.tgz#3ffc23c473a2769a7e40d3274495bd559fdd2ecc"
+  integrity sha512-bIkOa2ZJYn7FHnepzr5iX9Kmz8FjIz4UKzJ9zhX3dnYuVW0xul9RuR3skBfoLu+FPTQw90EHW9rJsSZhyLQ3fQ==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.24.7"
     "@babel/helper-module-imports" "^7.24.7"
     "@babel/helper-simple-access" "^7.24.7"
-    "@babel/helper-split-export-declaration" "^7.24.7"
     "@babel/helper-validator-identifier" "^7.24.7"
+    "@babel/traverse" "^7.25.0"
 
 "@babel/helper-optimise-call-expression@^7.24.7":
   version "7.24.7"
@@ -199,23 +174,23 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
   integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==
 
-"@babel/helper-remap-async-to-generator@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.24.7.tgz#b3f0f203628522713849d49403f1a414468be4c7"
-  integrity sha512-9pKLcTlZ92hNZMQfGCHImUpDOlAgkkpqalWEeftW5FBya75k8Li2ilerxkM/uBEj01iBZXcCIB/bwvDYgWyibA==
+"@babel/helper-remap-async-to-generator@^7.24.7", "@babel/helper-remap-async-to-generator@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.0.tgz#d2f0fbba059a42d68e5e378feaf181ef6055365e"
+  integrity sha512-NhavI2eWEIz/H9dbrG0TuOicDhNexze43i5z7lEqwYm0WEZVTwnPpA0EafUTP7+6/W79HWIP2cTe3Z5NiSTVpw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.24.7"
-    "@babel/helper-environment-visitor" "^7.24.7"
-    "@babel/helper-wrap-function" "^7.24.7"
+    "@babel/helper-wrap-function" "^7.25.0"
+    "@babel/traverse" "^7.25.0"
 
-"@babel/helper-replace-supers@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.24.7.tgz#f933b7eed81a1c0265740edc91491ce51250f765"
-  integrity sha512-qTAxxBM81VEyoAY0TtLrx1oAEJc09ZK67Q9ljQToqCnA+55eNwCORaxlKyu+rNfX86o8OXRUSNUnrtsAZXM9sg==
+"@babel/helper-replace-supers@^7.24.7", "@babel/helper-replace-supers@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.0.tgz#ff44deac1c9f619523fe2ca1fd650773792000a9"
+  integrity sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.24.7"
-    "@babel/helper-member-expression-to-functions" "^7.24.7"
+    "@babel/helper-member-expression-to-functions" "^7.24.8"
     "@babel/helper-optimise-call-expression" "^7.24.7"
+    "@babel/traverse" "^7.25.0"
 
 "@babel/helper-simple-access@^7.24.7":
   version "7.24.7"
@@ -233,13 +208,6 @@
     "@babel/traverse" "^7.24.7"
     "@babel/types" "^7.24.7"
 
-"@babel/helper-split-export-declaration@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz#83949436890e07fa3d6873c61a96e3bbf692d856"
-  integrity sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==
-  dependencies:
-    "@babel/types" "^7.24.7"
-
 "@babel/helper-string-parser@^7.24.8":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
@@ -255,23 +223,22 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz#3725cdeea8b480e86d34df15304806a06975e33d"
   integrity sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==
 
-"@babel/helper-wrap-function@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.24.7.tgz#52d893af7e42edca7c6d2c6764549826336aae1f"
-  integrity sha512-N9JIYk3TD+1vq/wn77YnJOqMtfWhNewNE+DJV4puD2X7Ew9J4JvrzrFDfTfyv5EgEXVy9/Wt8QiOErzEmv5Ifw==
+"@babel/helper-wrap-function@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.0.tgz#dab12f0f593d6ca48c0062c28bcfb14ebe812f81"
+  integrity sha512-s6Q1ebqutSiZnEjaofc/UKDyC4SbzV5n5SrA2Gq8UawLycr3i04f1dX4OzoQVnexm6aOCh37SQNYlJ/8Ku+PMQ==
   dependencies:
-    "@babel/helper-function-name" "^7.24.7"
-    "@babel/template" "^7.24.7"
-    "@babel/traverse" "^7.24.7"
-    "@babel/types" "^7.24.7"
+    "@babel/template" "^7.25.0"
+    "@babel/traverse" "^7.25.0"
+    "@babel/types" "^7.25.0"
 
 "@babel/helpers@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.8.tgz#2820d64d5d6686cca8789dd15b074cd862795873"
-  integrity sha512-gV2265Nkcz7weJJfvDoAEVzC1e2OTDpkGbEsebse8koXUJUXPsCMi7sRo/+SPMuMZ9MtUPnGwITTnQnU5YjyaQ==
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.25.0.tgz#e69beb7841cb93a6505531ede34f34e6a073650a"
+  integrity sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==
   dependencies:
-    "@babel/template" "^7.24.7"
-    "@babel/types" "^7.24.8"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.0"
 
 "@babel/highlight@^7.24.7":
   version "7.24.7"
@@ -283,25 +250,32 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.24.7", "@babel/parser@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.8.tgz#58a4dbbcad7eb1d48930524a3fd93d93e9084c6f"
-  integrity sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.24.8", "@babel/parser@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.0.tgz#9fdc9237504d797b6e7b8f66e78ea7f570d256ad"
+  integrity sha512-CzdIU9jdP0dg7HdyB+bHvDJGagUv+qtzZt5rYCWwW6tITNqV9odjp6Qu41gkG0ca5UfdDUWrKkiAnHHdGRnOrA==
 
-"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.7.tgz#fd059fd27b184ea2b4c7e646868a9a381bbc3055"
-  integrity sha512-TiT1ss81W80eQsN+722OaeQMY/G4yTb4G9JrqeiDADs3N8lbPMGldWi9x8tyqCW5NLx1Jh2AvkE6r6QvEltMMQ==
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.0.tgz#328275f22d809b962978d998c6eba22a233ac8aa"
+  integrity sha512-dG0aApncVQwAUJa8tP1VHTnmU67BeIQvKafd3raEx315H54FfkZSz3B/TT+33ZQAjatGJA79gZqTtqL5QZUKXw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/traverse" "^7.25.0"
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.7.tgz#468096ca44bbcbe8fcc570574e12eb1950e18107"
-  integrity sha512-unaQgZ/iRu/By6tsjMZzpeBZjChYfLYry6HrEXPoz3KmfF0sVBQ1l8zKMQ4xRGLWVsjuvB8nQfjNP/DcfEOCsg==
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.0.tgz#cd0c583e01369ef51676bdb3d7b603e17d2b3f73"
+  integrity sha512-Bm4bH2qsX880b/3ziJ8KD711LT7z4u8CFudmjqle65AZj/HNUFhEf90dqYv6O86buWvSBmeQDjv0Tn2aF/bIBA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.8"
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.0.tgz#749bde80356b295390954643de7635e0dffabe73"
+  integrity sha512-lXwdNZtTmeVOOFtwM/WDe7yg1PL8sYhRk/XH0FzbR2HDQ0xC+EnQ/JHeoMYSavtU115tnUk0q9CDyq8si+LMAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.8"
 
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.24.7":
   version "7.24.7"
@@ -312,13 +286,13 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
     "@babel/plugin-transform-optional-chaining" "^7.24.7"
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.7.tgz#71b21bb0286d5810e63a1538aa901c58e87375ec"
-  integrity sha512-utA4HuR6F4Vvcr+o4DnjL8fCOlgRFGbeeBEGNg3ZTrLFw6VWG5XmUrvcQ0FjIYMU2ST4XcR2Wsp7t9qOAPnxMg==
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.0.tgz#3a82a70e7cb7294ad2559465ebcb871dfbf078fb"
+  integrity sha512-tggFrk1AIShG/RUQbEwt2Tr/E+ObkfwrPjR6BjbRvsx24+PSjK8zrq0GWPNCjo8qpRx4DuJzlcvWJqlm+0h3kw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/traverse" "^7.25.0"
 
 "@babel/plugin-proposal-class-properties@^7.16.0":
   version "7.18.6"
@@ -544,15 +518,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
-"@babel/plugin-transform-async-generator-functions@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.7.tgz#7330a5c50e05181ca52351b8fd01642000c96cfd"
-  integrity sha512-o+iF77e3u7ZS4AoAuJvapz9Fm001PuD2V3Lp6OSE4FYQke+cSewYtnek+THqGRWyQloRCyvWL1OkyfNEl9vr/g==
+"@babel/plugin-transform-async-generator-functions@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.0.tgz#b785cf35d73437f6276b1e30439a57a50747bddf"
+  integrity sha512-uaIi2FdqzjpAMvVqvB51S42oC2JEVgh0LDsGfZVDysWE8LrJtQC2jvKmOqEYThKyB7bDEb7BP1GYWDm7tABA0Q==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/helper-remap-async-to-generator" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-remap-async-to-generator" "^7.25.0"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/traverse" "^7.25.0"
 
 "@babel/plugin-transform-async-to-generator@^7.24.7":
   version "7.24.7"
@@ -570,12 +544,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
-"@babel/plugin-transform-block-scoping@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.7.tgz#42063e4deb850c7bd7c55e626bf4e7ab48e6ce02"
-  integrity sha512-Nd5CvgMbWc+oWzBsuaMcbwjJWAcp5qzrbg69SZdHSP7AMY0AbWFqFO0WTFCA1jxhMCwodRwvRec8k0QUbZk7RQ==
+"@babel/plugin-transform-block-scoping@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.0.tgz#23a6ed92e6b006d26b1869b1c91d1b917c2ea2ac"
+  integrity sha512-yBQjYoOjXlFv9nlXb3f1casSHOZkWr29NX+zChVanLg5Nc157CrbEX9D7hxxtTpuFy7Q0YzmmWfJxzvps4kXrQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.8"
 
 "@babel/plugin-transform-class-properties@^7.24.7":
   version "7.24.7"
@@ -594,18 +568,16 @@
     "@babel/helper-plugin-utils" "^7.24.7"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
-"@babel/plugin-transform-classes@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.8.tgz#ad23301fe5bc153ca4cf7fb572a9bc8b0b711cf7"
-  integrity sha512-VXy91c47uujj758ud9wx+OMgheXm4qJfyhj1P18YvlrQkNOSrwsteHk+EFS3OMGfhMhpZa0A+81eE7G4QC+3CA==
+"@babel/plugin-transform-classes@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.0.tgz#63122366527d88e0ef61b612554fe3f8c793991e"
+  integrity sha512-xyi6qjr/fYU304fiRwFbekzkqVJZ6A7hOjWZd+89FVcBqPV3S9Wuozz82xdpLspckeaafntbzglaW4pqpzvtSw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.24.7"
     "@babel/helper-compilation-targets" "^7.24.8"
-    "@babel/helper-environment-visitor" "^7.24.7"
-    "@babel/helper-function-name" "^7.24.7"
     "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/helper-replace-supers" "^7.24.7"
-    "@babel/helper-split-export-declaration" "^7.24.7"
+    "@babel/helper-replace-supers" "^7.25.0"
+    "@babel/traverse" "^7.25.0"
     globals "^11.1.0"
 
 "@babel/plugin-transform-computed-properties@^7.24.7":
@@ -638,6 +610,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.0.tgz#809af7e3339466b49c034c683964ee8afb3e2604"
+  integrity sha512-YLpb4LlYSc3sCUa35un84poXoraOiQucUTTu8X1j18JV+gNa8E0nyUf/CjZ171IRGr4jEguF+vzJU66QZhn29g==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.0"
+    "@babel/helper-plugin-utils" "^7.24.8"
+
 "@babel/plugin-transform-dynamic-import@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.7.tgz#4d8b95e3bae2b037673091aa09cd33fecd6419f4"
@@ -678,14 +658,14 @@
     "@babel/helper-plugin-utils" "^7.24.7"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
 
-"@babel/plugin-transform-function-name@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.7.tgz#6d8601fbffe665c894440ab4470bc721dd9131d6"
-  integrity sha512-U9FcnA821YoILngSmYkW6FjyQe2TyZD5pHt4EVIhmcTkrJw/3KqcrRSxuOo5tFZJi7TE19iDyI1u+weTI7bn2w==
+"@babel/plugin-transform-function-name@^7.25.0":
+  version "7.25.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.1.tgz#b85e773097526c1a4fc4ba27322748643f26fc37"
+  integrity sha512-TVVJVdW9RKMNgJJlLtHsKDTydjZAbwIsn6ySBPQaEAUU5+gVvlJt/9nRmqVbsV/IBanRjzWoaAQKLoamWVOUuA==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.24.7"
-    "@babel/helper-function-name" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-compilation-targets" "^7.24.8"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/traverse" "^7.25.1"
 
 "@babel/plugin-transform-json-strings@^7.24.7":
   version "7.24.7"
@@ -734,15 +714,15 @@
     "@babel/helper-plugin-utils" "^7.24.8"
     "@babel/helper-simple-access" "^7.24.7"
 
-"@babel/plugin-transform-modules-systemjs@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.7.tgz#f8012316c5098f6e8dee6ecd58e2bc6f003d0ce7"
-  integrity sha512-GYQE0tW7YoaN13qFh3O1NCY4MPkUiAH3fiF7UcV/I3ajmDKEdG3l+UOcbAm4zUE3gnvUU+Eni7XrVKo9eO9auw==
+"@babel/plugin-transform-modules-systemjs@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.0.tgz#8f46cdc5f9e5af74f3bd019485a6cbe59685ea33"
+  integrity sha512-YPJfjQPDXxyQWg/0+jHKj1llnY5f/R6a0p/vP4lPymxLu7Lvl4k2WMitqi08yxwQcCVUUdG9LCUj4TNEgAp3Jw==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.24.7"
-    "@babel/helper-module-transforms" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-module-transforms" "^7.25.0"
+    "@babel/helper-plugin-utils" "^7.24.8"
     "@babel/helper-validator-identifier" "^7.24.7"
+    "@babel/traverse" "^7.25.0"
 
 "@babel/plugin-transform-modules-umd@^7.24.7":
   version "7.24.7"
@@ -851,11 +831,11 @@
     "@babel/helper-plugin-utils" "^7.24.7"
 
 "@babel/plugin-transform-react-constant-elements@^7.12.1":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.24.7.tgz#b85e8f240b14400277f106c9c9b585d9acf608a1"
-  integrity sha512-7LidzZfUXyfZ8/buRW6qIIHBY8wAZ1OrY9c/wTr8YhZ6vMPo+Uc/CVFLYY1spZrEQlD4w5u8wjqk5NQ3OVqQKA==
+  version "7.25.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.25.1.tgz#71a665ed16ce618067d05f4a98130207349d82ae"
+  integrity sha512-SLV/giH/V4SmloZ6Dt40HjTGTAIkxn33TVIHxNGNvo8ezMhrxBkzisj4op1KZYPIOHFLqhv60OHvX+YRu4xbmQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.8"
 
 "@babel/plugin-transform-react-display-name@^7.16.0", "@babel/plugin-transform-react-display-name@^7.24.7":
   version "7.24.7"
@@ -954,13 +934,14 @@
     "@babel/helper-plugin-utils" "^7.24.8"
 
 "@babel/plugin-transform-typescript@^7.24.7":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.8.tgz#c104d6286e04bf7e44b8cba1b686d41bad57eb84"
-  integrity sha512-CgFgtN61BbdOGCP4fLaAMOPkzWUh6yQZNMr5YSt8uz2cZSSiQONCQFWqsE4NeVfOIhqDOlS9CR3WD91FzMeB2Q==
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.0.tgz#56f47fb87b86a97caa9c7770920a1967d40ac86e"
+  integrity sha512-LZicxFzHIw+Sa3pzgMgSz6gdpsdkfiMObHUzhSIrwKF0+/rP/nuR49u79pSS+zIFJ1FeGeqQD2Dq4QGFbOVvSw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.24.7"
-    "@babel/helper-create-class-features-plugin" "^7.24.8"
+    "@babel/helper-create-class-features-plugin" "^7.25.0"
     "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
     "@babel/plugin-syntax-typescript" "^7.24.7"
 
 "@babel/plugin-transform-unicode-escapes@^7.24.7":
@@ -995,18 +976,19 @@
     "@babel/helper-plugin-utils" "^7.24.7"
 
 "@babel/preset-env@^7.11.0", "@babel/preset-env@^7.12.1", "@babel/preset-env@^7.16.4":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.24.8.tgz#e0db94d7f17d6f0e2564e8d29190bc8cdacec2d1"
-  integrity sha512-vObvMZB6hNWuDxhSaEPTKCwcqkAIuDtE+bQGn4XMXne1DSLzFVY8Vmj1bm+mUQXYNN8NmaQEO+r8MMbzPr1jBQ==
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.25.0.tgz#3fe92e470311e91478129efda101816c680f0479"
+  integrity sha512-vYAA8PrCOeZfG4D87hmw1KJ1BPubghXP1e2MacRFwECGNKL76dkA38JEwYllbvQCpf/kLxsTtir0b8MtxKoVCw==
   dependencies:
-    "@babel/compat-data" "^7.24.8"
+    "@babel/compat-data" "^7.25.0"
     "@babel/helper-compilation-targets" "^7.24.8"
     "@babel/helper-plugin-utils" "^7.24.8"
     "@babel/helper-validator-option" "^7.24.8"
-    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.24.7"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.24.7"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.0"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.0"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.25.0"
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.24.7"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.24.7"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.25.0"
     "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
@@ -1027,29 +1009,30 @@
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
     "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
     "@babel/plugin-transform-arrow-functions" "^7.24.7"
-    "@babel/plugin-transform-async-generator-functions" "^7.24.7"
+    "@babel/plugin-transform-async-generator-functions" "^7.25.0"
     "@babel/plugin-transform-async-to-generator" "^7.24.7"
     "@babel/plugin-transform-block-scoped-functions" "^7.24.7"
-    "@babel/plugin-transform-block-scoping" "^7.24.7"
+    "@babel/plugin-transform-block-scoping" "^7.25.0"
     "@babel/plugin-transform-class-properties" "^7.24.7"
     "@babel/plugin-transform-class-static-block" "^7.24.7"
-    "@babel/plugin-transform-classes" "^7.24.8"
+    "@babel/plugin-transform-classes" "^7.25.0"
     "@babel/plugin-transform-computed-properties" "^7.24.7"
     "@babel/plugin-transform-destructuring" "^7.24.8"
     "@babel/plugin-transform-dotall-regex" "^7.24.7"
     "@babel/plugin-transform-duplicate-keys" "^7.24.7"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.0"
     "@babel/plugin-transform-dynamic-import" "^7.24.7"
     "@babel/plugin-transform-exponentiation-operator" "^7.24.7"
     "@babel/plugin-transform-export-namespace-from" "^7.24.7"
     "@babel/plugin-transform-for-of" "^7.24.7"
-    "@babel/plugin-transform-function-name" "^7.24.7"
+    "@babel/plugin-transform-function-name" "^7.25.0"
     "@babel/plugin-transform-json-strings" "^7.24.7"
     "@babel/plugin-transform-literals" "^7.24.7"
     "@babel/plugin-transform-logical-assignment-operators" "^7.24.7"
     "@babel/plugin-transform-member-expression-literals" "^7.24.7"
     "@babel/plugin-transform-modules-amd" "^7.24.7"
     "@babel/plugin-transform-modules-commonjs" "^7.24.8"
-    "@babel/plugin-transform-modules-systemjs" "^7.24.7"
+    "@babel/plugin-transform-modules-systemjs" "^7.25.0"
     "@babel/plugin-transform-modules-umd" "^7.24.7"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.24.7"
     "@babel/plugin-transform-new-target" "^7.24.7"
@@ -1119,41 +1102,38 @@
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
 "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
-  integrity sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
+  integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.24.7", "@babel/template@^7.3.3":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315"
-  integrity sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==
+"@babel/template@^7.24.7", "@babel/template@^7.25.0", "@babel/template@^7.3.3":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
+  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
   dependencies:
     "@babel/code-frame" "^7.24.7"
-    "@babel/parser" "^7.24.7"
-    "@babel/types" "^7.24.7"
+    "@babel/parser" "^7.25.0"
+    "@babel/types" "^7.25.0"
 
-"@babel/traverse@^7.24.7", "@babel/traverse@^7.24.8", "@babel/traverse@^7.7.2":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.8.tgz#6c14ed5232b7549df3371d820fbd9abfcd7dfab7"
-  integrity sha512-t0P1xxAPzEDcEPmjprAQq19NWum4K0EQPjMwZQZbHt+GiZqvjCHjj755Weq1YRPVzBI+3zSfvScfpnuIecVFJQ==
+"@babel/traverse@^7.24.7", "@babel/traverse@^7.24.8", "@babel/traverse@^7.25.0", "@babel/traverse@^7.25.1", "@babel/traverse@^7.7.2":
+  version "7.25.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.1.tgz#64dbc31effc5f3fa3cf10d19df0e6310214743f5"
+  integrity sha512-LrHHoWq08ZpmmFqBAzN+hUdWwy5zt7FGa/hVwMcOqW6OVtwqaoD5utfuGYU87JYxdZgLUvktAsn37j/sYR9siA==
   dependencies:
     "@babel/code-frame" "^7.24.7"
-    "@babel/generator" "^7.24.8"
-    "@babel/helper-environment-visitor" "^7.24.7"
-    "@babel/helper-function-name" "^7.24.7"
-    "@babel/helper-hoist-variables" "^7.24.7"
-    "@babel/helper-split-export-declaration" "^7.24.7"
-    "@babel/parser" "^7.24.8"
-    "@babel/types" "^7.24.8"
+    "@babel/generator" "^7.25.0"
+    "@babel/parser" "^7.25.0"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.0"
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.20.7", "@babel/types@^7.24.7", "@babel/types@^7.24.8", "@babel/types@^7.24.9", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
-  version "7.24.9"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.9.tgz#228ce953d7b0d16646e755acf204f4cf3d08cc73"
-  integrity sha512-xm8XrMKz0IlUdocVbYJe0Z9xEgidU7msskG8BbhnTPK/HZ2z/7FP7ykqPgrUH+C+r414mNfNWam1f2vqOjqjYQ==
+"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.20.7", "@babel/types@^7.24.7", "@babel/types@^7.24.8", "@babel/types@^7.24.9", "@babel/types@^7.25.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.0.tgz#e6e3656c581f28da8452ed4f69e38008ec0ba41b"
+  integrity sha512-LcnxQSsd9aXOIgmmSpvZ/1yo46ra2ESYyqLcryaBZOghxy5qqOBjvCWP5JfkI8yl9rlxRgdLTTMCQQRcN2hdCg==
   dependencies:
     "@babel/helper-string-parser" "^7.24.8"
     "@babel/helper-validator-identifier" "^7.24.7"
@@ -1275,14 +1255,14 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
   integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
 
-"@eslint-community/eslint-utils@^4.2.0":
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
   integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
+"@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
   version "4.11.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.0.tgz#b0ffd0312b4a3fd2d6f77237e7248a5ad3a680ae"
   integrity sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==
@@ -1703,9 +1683,9 @@
     picomatch "^2.2.2"
 
 "@rushstack/eslint-patch@^1.1.0":
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz#391d528054f758f81e53210f1a1eebcf1a8b1d20"
-  integrity sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"
+  integrity sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==
 
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
@@ -1920,10 +1900,18 @@
     "@types/eslint" "*"
     "@types/estree" "*"
 
-"@types/eslint@*", "@types/eslint@^7.29.0 || ^8.4.1":
-  version "8.56.10"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.10.tgz#eb2370a73bf04a901eeba8f22595c7ee0f7eb58d"
-  integrity sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==
+"@types/eslint@*":
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-9.6.0.tgz#51d4fe4d0316da9e9f2c80884f2c20ed5fb022ff"
+  integrity sha512-gi6WQJ7cHRgZxtkQEoyHMppPjq9Kxo5Tjn2prSKDSmZrCz8TZ3jSRCeTJm+WoM+oB0WG37bRqLzaaU3q7JypGg==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/eslint@^7.29.0 || ^8.4.1":
+  version "8.56.11"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.11.tgz#e2ff61510a3b9454b3329fe7731e3b4c6f780041"
+  integrity sha512-sVBpJMf7UPo/wGecYOpk2aQya2VUGeHhe38WG7/mN5FufNSubf5VT9Uh9Uyp8/eLJpu1/tuhJ/qTo4mhSB4V4Q==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
@@ -1965,6 +1953,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/history@^4.7.11":
+  version "4.7.11"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
+  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
+
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -2023,12 +2016,12 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*":
-  version "20.14.11"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.11.tgz#09b300423343460455043ddd4d0ded6ac579b74b"
-  integrity sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==
+"@types/node@*", "@types/node@^22.0.0":
+  version "22.0.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.0.0.tgz#04862a2a71e62264426083abe1e27e87cac05a30"
+  integrity sha512-VT7KSYudcPOzP5Q0wfbowyNLaVR8QWUdw+088uFWwfvpY6uCWaXpqV6ieLAu9WBcnTa7H4Z5RLK8I5t2FuOcqw==
   dependencies:
-    undici-types "~5.26.4"
+    undici-types "~6.11.1"
 
 "@types/parse-json@^4.0.0":
   version "4.0.2"
@@ -2040,6 +2033,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
   integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
 
+"@types/prop-types@*":
+  version "15.7.12"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
+  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
+
 "@types/q@^1.5.1":
   version "1.5.8"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.8.tgz#95f6c6a08f2ad868ba230ead1d2d7f7be3db3837"
@@ -2055,6 +2053,45 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
+"@types/react-dom@^18.3.0":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-router-dom@^5.3.3":
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
+  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
+  dependencies:
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.20"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c"
+  integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==
+  dependencies:
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+
+"@types/react-sparklines@^1.7.5":
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/@types/react-sparklines/-/react-sparklines-1.7.5.tgz#8f96d5112ae3e7b6e4c5b6be57d79909f853ef5e"
+  integrity sha512-rIAmNyRKUqWWnaQMjNrxMNkgEFi5f9PrdczSNxj5DscAa48y4i9P0fRKZ72FmNcFsdg6Jx4o6CXWZtIaC0OJOg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^18.3.3":
+  version "18.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
+  integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -2114,9 +2151,9 @@
   integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
 
 "@types/ws@^8.5.5":
-  version "8.5.11"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.11.tgz#90ad17b3df7719ce3e6bc32f83ff954d38656508"
-  integrity sha512-4+q7P5h3SpJxaBft0Dzpbr6lmMaqh0Jr2tbhJZ/luAwvD7ohSCniYkwz/pLxuT2h0EOa6QADgJj1Ko+TzRfZ+w==
+  version "8.5.12"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.12.tgz#619475fe98f35ccca2a2f6c137702d85ec247b7e"
+  integrity sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==
   dependencies:
     "@types/node" "*"
 
@@ -2139,6 +2176,21 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@typescript-eslint/eslint-plugin@7.17.0", "@typescript-eslint/eslint-plugin@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.17.0.tgz#c8ed1af1ad2928ede5cdd207f7e3090499e1f77b"
+  integrity sha512-pyiDhEuLM3PuANxH7uNYan1AaFs5XE0zw1hq69JBvGvE7gSuEoQl1ydtEe/XQeoC3GQxLXyOVa5kNOATgM638A==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "7.17.0"
+    "@typescript-eslint/type-utils" "7.17.0"
+    "@typescript-eslint/utils" "7.17.0"
+    "@typescript-eslint/visitor-keys" "7.17.0"
+    graphemer "^1.4.0"
+    ignore "^5.3.1"
+    natural-compare "^1.4.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/eslint-plugin@^5.5.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
@@ -2162,6 +2214,17 @@
   dependencies:
     "@typescript-eslint/utils" "5.62.0"
 
+"@typescript-eslint/parser@7.17.0", "@typescript-eslint/parser@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.17.0.tgz#be8e32c159190cd40a305a2121220eadea5a88e7"
+  integrity sha512-puiYfGeg5Ydop8eusb/Hy1k7QmOU6X3nvsqCgzrB2K4qMavK//21+PzNE8qeECgNOIoertJPUC1SpegHDI515A==
+  dependencies:
+    "@typescript-eslint/scope-manager" "7.17.0"
+    "@typescript-eslint/types" "7.17.0"
+    "@typescript-eslint/typescript-estree" "7.17.0"
+    "@typescript-eslint/visitor-keys" "7.17.0"
+    debug "^4.3.4"
+
 "@typescript-eslint/parser@^5.5.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
@@ -2180,6 +2243,14 @@
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
+"@typescript-eslint/scope-manager@7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.17.0.tgz#e072d0f914662a7bfd6c058165e3c2b35ea26b9d"
+  integrity sha512-0P2jTTqyxWp9HiKLu/Vemr2Rg1Xb5B7uHItdVZ6iAenXmPo4SZ86yOPCJwMqpCyaMiEHTNqizHfsbmCFT1x9SA==
+  dependencies:
+    "@typescript-eslint/types" "7.17.0"
+    "@typescript-eslint/visitor-keys" "7.17.0"
+
 "@typescript-eslint/type-utils@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
@@ -2190,11 +2261,26 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
+"@typescript-eslint/type-utils@7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.17.0.tgz#c5da78feb134c9c9978cbe89e2b1a589ed22091a"
+  integrity sha512-XD3aaBt+orgkM/7Cei0XNEm1vwUxQ958AOLALzPlbPqb8C1G8PZK85tND7Jpe69Wualri81PLU+Zc48GVKIMMA==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "7.17.0"
+    "@typescript-eslint/utils" "7.17.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/types@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
   integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
 
+"@typescript-eslint/types@7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.17.0.tgz#7ce8185bdf06bc3494e73d143dbf3293111b9cff"
+  integrity sha512-a29Ir0EbyKTKHnZWbNsrc/gqfIBqYPwj3F2M+jWE/9bqfEHg0AMtXzkbUkOG6QgEScxh2+Pz9OXe11jHDnHR7A==
+
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
@@ -2208,6 +2294,20 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.17.0.tgz#dcab3fea4c07482329dd6107d3c6480e228e4130"
+  integrity sha512-72I3TGq93t2GoSBWI093wmKo0n6/b7O4j9o8U+f65TVD0FS6bI2180X5eGEr8MA8PhKMvYe9myZJquUT2JkCZw==
+  dependencies:
+    "@typescript-eslint/types" "7.17.0"
+    "@typescript-eslint/visitor-keys" "7.17.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/utils@5.62.0", "@typescript-eslint/utils@^5.58.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
@@ -2222,6 +2322,16 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
+"@typescript-eslint/utils@7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.17.0.tgz#815cd85b9001845d41b699b0ce4f92d6dfb84902"
+  integrity sha512-r+JFlm5NdB+JXc7aWWZ3fKSm1gn0pkswEwIYsrGPdsT2GjsRATAKXiNtp3vgAAO1xZhX8alIOEQnNMl3kbTgJw==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "7.17.0"
+    "@typescript-eslint/types" "7.17.0"
+    "@typescript-eslint/typescript-estree" "7.17.0"
+
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
@@ -2230,6 +2340,14 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+"@typescript-eslint/visitor-keys@7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.17.0.tgz#680465c734be30969e564b4647f38d6cdf49bfb0"
+  integrity sha512-RVGC9UhPOCsfCdI9pU++K4nD7to+jTcMIbXTSOcrLqUEW6gF2pU1UUbYJKc9cvcRSK1UDeMJ7pdMxf4bhMpV/A==
+  dependencies:
+    "@typescript-eslint/types" "7.17.0"
+    eslint-visitor-keys "^3.4.3"
+
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
@@ -3062,9 +3180,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001599, caniuse-lite@^1.0.30001640:
-  version "1.0.30001642"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz#6aa6610eb24067c246d30c57f055a9d0a7f8d05f"
-  integrity sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==
+  version "1.0.30001643"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz#9c004caef315de9452ab970c3da71085f8241dbd"
+  integrity sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -3549,6 +3667,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -3598,9 +3721,9 @@ debug@2.6.9, debug@^2.6.0:
     ms "2.0.0"
 
 debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.5.tgz#e83444eceb9fedd4a1da56d671ae2446a01a6e1e"
-  integrity sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b"
+  integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==
   dependencies:
     ms "2.1.2"
 
@@ -3872,9 +3995,9 @@ ejs@^3.1.6:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.820:
-  version "1.4.832"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.832.tgz#d25882ce0a9237577b039bffa124ecef1822003b"
-  integrity sha512-cTen3SB0H2SGU7x467NRe1eVcQgcuS6jckKfWJHia2eo0cHIGOqHoAxevIYZD4eRHcWjkvFzo93bi3vJ9W+1lA==
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.2.tgz#6126ad229ce45e781ec54ca40db0504787f23d19"
+  integrity sha512-kc4r3U3V3WLaaZqThjYz/Y6z8tJe+7K0bbjUVo3i+LWIypVdMx5nXCkwRe6SWbY6ILqLdc1rKcKmr3HoH7wjSQ==
 
 emittery@^0.10.2:
   version "0.10.2"
@@ -3907,9 +4030,9 @@ encodeurl@~1.0.2:
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
 enhanced-resolve@^5.17.0:
-  version "5.17.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz#d037603789dd9555b89aaec7eb78845c49089bc5"
-  integrity sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -4132,6 +4255,13 @@ eslint-config-airbnb-base@^15.0.0:
     object.entries "^1.1.5"
     semver "^6.3.0"
 
+eslint-config-airbnb-typescript@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-18.0.0.tgz#b1646db4134858d704b1d2bee47e1d72c180315f"
+  integrity sha512-oc+Lxzgzsu8FQyFVa4QFaVKiitTYiiW3frB9KYW5OWdPrqFc7FzxgB20hP4cHMlr+MBzGcLl3jnCOVOydL9mIg==
+  dependencies:
+    eslint-config-airbnb-base "^15.0.0"
+
 eslint-config-airbnb@^19.0.4:
   version "19.0.4"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz#84d4c3490ad70a0ffa571138ebcdea6ab085fdc3"
@@ -5160,7 +5290,7 @@ identity-obj-proxy@^3.0.0:
   dependencies:
     harmony-reflect "^1.4.6"
 
-ignore@^5.2.0:
+ignore@^5.2.0, ignore@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
@@ -5179,9 +5309,9 @@ import-fresh@^3.1.0, import-fresh@^3.2.1:
     resolve-from "^4.0.0"
 
 import-local@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4"
-  integrity sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.2.0.tgz#c3d5c745798c02a6f8b897726aba5100186ee260"
+  integrity sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==
   dependencies:
     pkg-dir "^4.2.0"
     resolve-cwd "^3.0.0"
@@ -6604,9 +6734,9 @@ node-int64@^0.4.0:
   integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
 
 node-releases@^2.0.14:
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.17.tgz#d74bc4fec38d839eec5db2a3c9c963d4f33cb366"
-  integrity sha512-Ww6ZlOiEQfPfXM45v17oabk77Z7mg5bOt7AjDyzy7RjK9OrLrLC8dyZQoAPEOtFX9SaNf1Tdvr5gRJWdTJj7GA==
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -7533,9 +7663,9 @@ postcss@^7.0.35:
     source-map "^0.6.1"
 
 postcss@^8.3.5, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.4:
-  version "8.4.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
-  integrity sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==
+  version "8.4.40"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.40.tgz#eb81f2a4dd7668ed869a6db25999e02e9ad909d8"
+  integrity sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==
   dependencies:
     nanoid "^3.3.7"
     picocolors "^1.0.1"
@@ -8222,7 +8352,7 @@ semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4:
+semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0:
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
@@ -8823,9 +8953,9 @@ synckit@^0.9.1:
     tslib "^2.6.2"
 
 tailwindcss@^3.0.2:
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.6.tgz#41faae16607e0916da1eaa4a3b44053457ba70dd"
-  integrity sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.7.tgz#6092f18767f5933f59375b9afe558e592fc77201"
+  integrity sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
@@ -8993,6 +9123,11 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-api-utils@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
+  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
+
 ts-interface-checker@^0.1.9:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
@@ -9118,6 +9253,20 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
+typescript-eslint@^7.17.0:
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-7.17.0.tgz#cc5eddafd38b3c1fe8a52826469d5c78700b7aa7"
+  integrity sha512-spQxsQvPguduCUfyUvLItvKqK3l8KJ/kqs5Pb/URtzQ5AC53Z6us32St37rpmlt2uESG23lOFpV4UErrmy4dZQ==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "7.17.0"
+    "@typescript-eslint/parser" "7.17.0"
+    "@typescript-eslint/utils" "7.17.0"
+
+typescript@^4.9.5:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -9133,10 +9282,10 @@ underscore@1.12.1:
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.12.1.tgz#7bb8cc9b3d397e201cf8553336d262544ead829e"
   integrity sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==
 
-undici-types@~5.26.4:
-  version "5.26.5"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
-  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+undici-types@~6.11.1:
+  version "6.11.1"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.11.1.tgz#432ea6e8efd54a48569705a699e62d8f4981b197"
+  integrity sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
@@ -9773,9 +9922,9 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yaml@^2.3.4:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.5.tgz#60630b206dd6d84df97003d33fc1ddf6296cca5e"
-  integrity sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.0.tgz#c6165a721cf8000e91c36490a41d7be25176cf5d"
+  integrity sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==
 
 yargs-parser@^20.2.2:
   version "20.2.9"