typescript conversion

.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',

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!**
 

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"
   }
 }

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;

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;

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;

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;

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;

src/components/Header/Header.js → 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;

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;

src/components/Header/HeaderRight.js → 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;

src/components/Navbar/Navbar.js → 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;