Update react 19.

declaration.d.ts

@@ -0,0 +1 @@
+declare module 'react-sparklines';

package.json

@@ -3,11 +3,11 @@
   "version": "0.1.10",
   "private": true,
   "dependencies": {
-    "apexcharts": "^4.1.0",
-    "react": "^18.3.1",
-    "react-apexcharts": "^1.6.0",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^7.0.1",
+    "apexcharts": "^4.2.0",
+    "react": "^19.0.0",
+    "react-apexcharts": "^1.7.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.2",
     "react-scripts": "^5.0.1",
     "react-sparklines": "^1.7.0",
     "typescript": "^5.6.3"
@@ -37,22 +37,22 @@
     ]
   },
   "devDependencies": {
-    "@types/node": "^22.10.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@types/react-sparklines": "^1.7.5",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
-    "eslint": "^9.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "prettier": "^3.4.1",
-    "typescript-eslint": "^8.16.0"
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "prettier": "^3.4.2",
+    "typescript-eslint": "^8.18.1"
   }
 }

src/App.tsx

@@ -1,5 +1,5 @@
 import Navigation from './navigation/Navigation';
 
-const App = (): JSX.Element => <Navigation />;
+const App: React.FC = () => <Navigation />;
 
 export default App;

src/components/Common/Box.tsx

@@ -3,6 +3,6 @@ interface IProps {
   children: React.ReactNode;
 }
 
-const Box = ({ children }: IProps): JSX.Element => <div className='box'>{children}</div>;
+const Box: React.FC<IProps> = ({ children }) => <div className='box'>{children}</div>;
 
 export default Box;

src/components/Forms/FormButton.tsx

@@ -5,7 +5,7 @@ interface IProps {
   onClick: (e: React.FormEvent) => void;
 }
 
-const FormButton = ({ type, text, onClick }: IProps): JSX.Element => (
+const FormButton: React.FC<IProps> = ({ type, text, onClick }) => (
   <button
     onClick={onClick}
     type={type === 'submit' ? 'submit' : 'button'}

src/components/Forms/FormCheckbox.tsx

@@ -6,7 +6,7 @@ interface IProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const FormCheckbox = ({ name, text, onChange, checked }: IProps): JSX.Element => (
+const FormCheckbox: React.FC<IProps> = ({ name, text, onChange, checked }) => (
   <label className='checkbox-container'>
     {text}
     <input

src/components/Forms/FormInput.tsx

@@ -8,14 +8,7 @@ interface IProps {
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
-const FormInput = ({
-  type,
-  name,
-  value,
-  placeholder,
-  onChange,
-  onKeyDown,
-}: IProps): JSX.Element => (
+const FormInput: React.FC<IProps> = ({ type, name, value, placeholder, onChange, onKeyDown }) => (
   <input
     id={name}
     name={name}

src/components/Header/Header.tsx

@@ -8,7 +8,7 @@ interface IProps {
   title: string;
 }
 
-const Header = ({ icon, title }: IProps): JSX.Element => (
+const Header: React.FC<IProps> = ({ icon, title }) => (
   <header className='flex flex-center flex-space-between'>
     <HeaderLeft icon={icon} title={title} />
     <HeaderRight />

src/components/Header/HeaderLeft.tsx

@@ -4,7 +4,7 @@ interface IProps {
   title: string;
 }
 
-const HeaderLeft = ({ icon, title }: IProps): JSX.Element => (
+const HeaderLeft: React.FC<IProps> = ({ icon, title }) => (
   <div className='header-left nowrap no-select'>
     {icon && (
       <button type='button' className='pointer'>

src/components/Header/HeaderRight.tsx

@@ -1,6 +1,6 @@
 import { Link, useLocation } from 'react-router-dom';
 
-const HeaderRight = (): JSX.Element => {
+const HeaderRight: React.FC = () => {
   const location = useLocation();
 
   return (

src/components/Navbar/Navbar.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 // components
 import NavbarButton from './NavbarButton';
 
-const Navbar = (): JSX.Element => (
+const Navbar: React.FC = () => (
   <nav className='navbar-inner no-select'>
     <div className='logo'>
       <Link to='/market'>

src/components/Navbar/NavbarButton.tsx

@@ -7,7 +7,7 @@ interface IProps {
   title: string;
 }
 
-const NavbarButton = ({ url, icon, title }: IProps): JSX.Element => {
+const NavbarButton: React.FC<IProps> = ({ url, icon, title }) => {
   const location = useLocation();
 
   return (

src/components/Tables/Capital/CapitalRow.tsx

@@ -11,7 +11,7 @@ interface IProps {
   index: number;
 }
 
-const CapitalRow = ({ item, index }: IProps): JSX.Element => {
+const CapitalRow: React.FC<IProps> = ({ item, index }) => {
   const ref = useRef<any>(null);
 
   const [color, setColor] = useState<string>('');

src/components/Tables/TopBar/TopBar.tsx

@@ -5,7 +5,7 @@ interface IProps {
   searchOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const TopBar = ({ searchValue, searchOnChange, searchSubmit }: IProps): JSX.Element => (
+const TopBar: React.FC<IProps> = ({ searchValue, searchOnChange, searchSubmit }) => (
   <div className='top-buttons flex flex-destroy flex-center flex-space-between'>
     <div>
       <div className='top-search no-select nowrap'>

src/components/Tables/Transactions/Amount.tsx

@@ -4,7 +4,7 @@ interface IProps {
   amount: string;
 }
 
-const Amount = ({ type, amount }: IProps): JSX.Element => {
+const Amount: React.FC<IProps> = ({ type, amount }) => {
   if (type === 1) {
     return <strong className='red'>{amount}</strong>;
   }

src/components/Tables/Transactions/Icon.tsx

@@ -3,7 +3,7 @@ interface IProps {
   type: number;
 }
 
-const Icon = ({ type }: IProps): JSX.Element => {
+const Icon: React.FC<IProps> = ({ type }) => {
   if (type === 1) {
     return (
       <div className='operation red'>

src/components/Tables/Transactions/Status.tsx

@@ -3,7 +3,7 @@ interface IProps {
   status: number;
 }
 
-const Status = ({ status }: IProps): JSX.Element => {
+const Status: React.FC<IProps> = ({ status }) => {
   if (status === 1) {
     return <span className='status green'>BİTMİŞ</span>;
   }

src/components/Tables/Transactions/TransactionRow.tsx

@@ -8,7 +8,7 @@ interface IProps {
   item: any;
 }
 
-const TransactionRow = ({ item }: IProps): JSX.Element => (
+const TransactionRow: React.FC<IProps> = ({ item }) => (
   <tr>
     <td aria-label='type'>
       <Icon type={item.type} />

src/components/Widgets/BankProcess/BankProcess.tsx

@@ -37,7 +37,7 @@ const dataArray: IBankDetails[] = [
   },
 ];
 
-const BankProcess = (): JSX.Element => {
+const BankProcess: React.FC = () => {
   const [tab, setTab] = useState<number>(0);
   const [bankDetails, setBankDetails] = useState<IBankDetails[]>([]);
   const [selectedBank, setSelectedBank] = useState<IBankDetails | null>(null);

src/components/Widgets/BuyOrders/BuyOrders.tsx

@@ -93,7 +93,7 @@ const dataArray: IPriceList[] = [
   },
 ];
 
-const BuyOrders = (): JSX.Element => {
+const BuyOrders: React.FC = () => {
   const ref = useRef<any>(null);
 
   const [data, setData] = useState<IPriceList[]>([]);

src/components/Widgets/BuyOrders/BuyOrdersRow.tsx

@@ -5,7 +5,7 @@ interface IProps {
   item: any;
 }
 
-const BuyOrdersRow = ({ item }: IProps): JSX.Element => {
+const BuyOrdersRow: React.FC<IProps> = ({ item }) => {
   const [color, setColor] = useState<string>('white');
 
   useEffect(() => {

src/components/Widgets/BuySell/BuySell.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 // components
 import Box from '../../Common/Box';
 
-const BuySell = (): JSX.Element => {
+const BuySell: React.FC = () => {
   const [primaryTab, setPrimaryTab] = useState<number>(0);
   const [secondaryTab, setSecondaryTab] = useState<number>(0);
 

src/components/Widgets/CandleStick/CandleStick.tsx

@@ -278,7 +278,7 @@ const data: ISeries = {
   },
 };
 
-const CandleStick = (): JSX.Element => {
+const CandleStick: React.FC = () => {
   const [state, setState] = useState<ISeries | null>(null);
 
   useEffect(() => {

src/components/Widgets/Coin/CoinHorizontal.tsx

@@ -9,12 +9,7 @@ interface IProps {
   searchOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const CoinHorizontal = ({
-  item,
-  searchValue,
-  searchOnChange,
-  searchSubmit,
-}: IProps): JSX.Element => (
+const CoinHorizontal: React.FC<IProps> = ({ item, searchValue, searchOnChange, searchSubmit }) => (
   <Box>
     <div className='box-content box-vertical-padding box-horizontal-padding'>
       <div className='widget-coin-horizontal flex flex-center flex-space-around nowrap'>

src/components/Widgets/Coin/CoinVertical.tsx

@@ -11,7 +11,7 @@ interface IProps {
   item: any;
 }
 
-const CoinVertical = ({ item }: IProps): JSX.Element => {
+const CoinVertical: React.FC<IProps> = ({ item }) => {
   const ref = useRef<any>(null);
 
   const [showMore, setShowMore] = useState<boolean>(false);

src/components/Widgets/Limits/Limits.tsx

@@ -58,7 +58,7 @@ const dataArray: ICrypto[] = [
   },
 ];
 
-const Limits = (): JSX.Element => {
+const Limits: React.FC = () => {
   const [data, setData] = useState<ICrypto[]>([]);
 
   useEffect(() => {

src/components/Widgets/Limits/LimitsRow.tsx

@@ -6,7 +6,7 @@ interface IProps {
   item: any;
 }
 
-const LimitsRow = ({ item }: IProps): JSX.Element => (
+const LimitsRow: React.FC<IProps> = ({ item }) => (
   <div className='limits-row flex flex-center flex-space-between no-select'>
     <div className='flex flex-v-center'>
       <div className='icon cover' style={{ backgroundImage: `url('${item.icon}')` }} />

src/components/Widgets/Limits/StatusName.tsx

@@ -3,7 +3,7 @@ interface IProps {
   status: number;
 }
 
-const StatusName = ({ status }: IProps): JSX.Element => {
+const StatusName: React.FC<IProps> = ({ status }) => {
   if (status === 1) {
     return <span className='green'>Limit uygun</span>;
   }

src/components/Widgets/Market/Market.tsx

@@ -100,7 +100,7 @@ const dataArray: ICrypto[] = [
   },
 ];
 
-const Market = (): JSX.Element => {
+const Market: React.FC = () => {
   const [data, setData] = useState<ICrypto[]>([]);
 
   useEffect(() => {

src/components/Widgets/Market/MarketRow.tsx

@@ -7,7 +7,7 @@ interface IProps {
   item: any;
 }
 
-const MarketRow = ({ item }: IProps): JSX.Element => {
+const MarketRow: React.FC<IProps> = ({ item }) => {
   const [color, setColor] = useState<string>('');
 
   useEffect(() => {

src/components/Widgets/MyAssets/MyAssets.tsx

@@ -119,7 +119,7 @@ const dataArray: ICrypto[] = [
   },
 ];
 
-const MyAssets = (): JSX.Element => {
+const MyAssets: React.FC = () => {
   const ref = useRef<any>(null);
 
   const [data, setData] = useState<ICrypto[]>([]);

src/components/Widgets/MyAssets/MyAssetsRow.tsx

@@ -8,7 +8,7 @@ interface IProps {
   item: any;
 }
 
-const MyAssetsRow = ({ item }: IProps): JSX.Element => {
+const MyAssetsRow: React.FC<IProps> = ({ item }) => {
   const [color, setColor] = useState<string>('');
 
   useEffect(() => {

src/components/Widgets/Profile/Profile.tsx

@@ -8,7 +8,7 @@ import useClickOutside from '../../../hooks/useClickOutside';
 // components
 import Box from '../../Common/Box';
 
-const Profile = (): JSX.Element => {
+const Profile: React.FC = () => {
   const ref = useRef<any>(null);
 
   const [menuOpened, setMenuOpened] = useState<boolean>(false);

src/components/Widgets/RecentActivity/ProcessType.tsx

@@ -3,7 +3,7 @@ interface IProps {
   type: number;
 }
 
-const ProcessType = ({ type }: IProps): JSX.Element => {
+const ProcessType: React.FC<IProps> = ({ type }) => {
   if (type === 1) {
     return (
       <div className='nowrap'>

src/components/Widgets/RecentActivity/RecentActivity.tsx

@@ -66,7 +66,7 @@ const dataArray: IActivity[] = [
   },
 ];
 
-const RecentActivity = (): JSX.Element => {
+const RecentActivity: React.FC = () => {
   const [data, setData] = useState<IActivity[]>([]);
 
   useEffect(() => {

src/components/Widgets/RecentActivity/RecentActivityRow.tsx

@@ -7,7 +7,7 @@ interface IProps {
   item: any;
 }
 
-const RecentActivityRow = ({ item }: IProps): JSX.Element => (
+const RecentActivityRow: React.FC<IProps> = ({ item }) => (
   <div className='activity-row flex flex-center flex-space-between no-select'>
     <ProcessType type={item.type} />
     <div className='center'>

src/components/Widgets/RecentActivity/StatusName.tsx

@@ -3,7 +3,7 @@ interface IProps {
   status: number;
 }
 
-const StatusName = ({ status }: IProps): JSX.Element => {
+const StatusName: React.FC<IProps> = ({ status }) => {
   if (status === 1) {
     return <span className='green'>Bitmiş</span>;
   }

src/components/Widgets/SellOrders/SellOrders.tsx

@@ -93,7 +93,7 @@ const dataArray: IOrder[] = [
   },
 ];
 
-const SellOrders = (): JSX.Element => {
+const SellOrders: React.FC = () => {
   const ref = useRef<any>(null);
 
   const [data, setData] = useState<IOrder[]>([]);

src/components/Widgets/SellOrders/SellOrdersRow.tsx

@@ -5,7 +5,7 @@ interface IProps {
   item: any;
 }
 
-const SellOrdersRow = ({ item }: IProps): JSX.Element => {
+const SellOrdersRow: React.FC<IProps> = ({ item }) => {
   const [color, setColor] = useState<string>('white');
 
   useEffect(() => {