refactor: migrate to eslint flat config and format codebase with prettier

- Remove legacy .eslintrc.cjs and .eslintignore
- Add eslint.config.js with flat config, security rules (no-eval, no-implied-eval, no-new-func, no-script-url)
- Add .prettierrc and .prettierignore
- Format entire codebase with prettier

src/components/InsufficientBalancePrompt.tsx

@@ -1,20 +1,20 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useQuery } from '@tanstack/react-query'
-import { balanceApi } from '../api/balance'
-import { useCurrency } from '../hooks/useCurrency'
-import TopUpModal from './TopUpModal'
-import type { PaymentMethod } from '../types'
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { balanceApi } from '../api/balance';
+import { useCurrency } from '../hooks/useCurrency';
+import TopUpModal from './TopUpModal';
+import type { PaymentMethod } from '../types';
 
 interface InsufficientBalancePromptProps {
   /** Amount missing in kopeks */
-  missingAmountKopeks: number
+  missingAmountKopeks: number;
   /** Optional custom message */
-  message?: string
+  message?: string;
   /** Compact mode for inline use */
-  compact?: boolean
+  compact?: boolean;
   /** Additional className */
-  className?: string
+  className?: string;
 }
 
 export default function InsufficientBalancePrompt({
@@ -23,40 +23,55 @@ export default function InsufficientBalancePrompt({
   compact = false,
   className = '',
 }: InsufficientBalancePromptProps) {
-  const { t } = useTranslation()
-  const { formatAmount, currencySymbol } = useCurrency()
-  const [showMethodSelect, setShowMethodSelect] = useState(false)
-  const [selectedMethod, setSelectedMethod] = useState<PaymentMethod | null>(null)
+  const { t } = useTranslation();
+  const { formatAmount, currencySymbol } = useCurrency();
+  const [showMethodSelect, setShowMethodSelect] = useState(false);
+  const [selectedMethod, setSelectedMethod] = useState<PaymentMethod | null>(null);
 
   const { data: paymentMethods } = useQuery({
     queryKey: ['payment-methods'],
     queryFn: balanceApi.getPaymentMethods,
     enabled: showMethodSelect,
-  })
+  });
 
-  const missingRubles = missingAmountKopeks / 100
-  const displayAmount = formatAmount(missingRubles)
+  const missingRubles = missingAmountKopeks / 100;
+  const displayAmount = formatAmount(missingRubles);
 
   const handleMethodSelect = (method: PaymentMethod) => {
-    setSelectedMethod(method)
-    setShowMethodSelect(false)
-  }
+    setSelectedMethod(method);
+    setShowMethodSelect(false);
+  };
 
   if (compact) {
     return (
       <>
-        <div className={`flex items-center justify-between gap-3 p-3 bg-error-500/10 border border-error-500/30 rounded-xl ${className}`}>
+        <div
+          className={`flex items-center justify-between gap-3 rounded-xl border border-error-500/30 bg-error-500/10 p-3 ${className}`}
+        >
           <div className="flex items-center gap-2 text-sm text-error-400">
-            <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+            <svg
+              className="h-4 w-4 flex-shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+              />
             </svg>
             <span>
-              {message || t('balance.insufficientFunds')}: <span className="font-semibold">{displayAmount} {currencySymbol}</span>
+              {message || t('balance.insufficientFunds')}:{' '}
+              <span className="font-semibold">
+                {displayAmount} {currencySymbol}
+              </span>
             </span>
           </div>
           <button
             onClick={() => setShowMethodSelect(true)}
-            className="btn-primary text-xs py-1.5 px-3 whitespace-nowrap"
+            className="btn-primary whitespace-nowrap px-3 py-1.5 text-xs"
           >
             {t('balance.topUp')}
           </button>
@@ -78,37 +93,54 @@ export default function InsufficientBalancePrompt({
           />
         )}
       </>
-    )
+    );
   }
 
   return (
     <>
-      <div className={`p-4 bg-gradient-to-br from-error-500/10 to-warning-500/5 border border-error-500/30 rounded-xl ${className}`}>
+      <div
+        className={`rounded-xl border border-error-500/30 bg-gradient-to-br from-error-500/10 to-warning-500/5 p-4 ${className}`}
+      >
         <div className="flex items-start gap-3">
-          <div className="w-10 h-10 rounded-xl bg-error-500/20 flex items-center justify-center flex-shrink-0">
-            <svg className="w-5 h-5 text-error-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
+          <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-error-500/20">
+            <svg
+              className="h-5 w-5 text-error-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
+              />
             </svg>
           </div>
-          <div className="flex-1 min-w-0">
-            <div className="text-error-400 font-medium mb-1">
-              {t('balance.insufficientFunds')}
-            </div>
-            <div className="text-dark-300 text-sm">
-              {message || t('balance.topUpToComplete')}
-            </div>
+          <div className="min-w-0 flex-1">
+            <div className="mb-1 font-medium text-error-400">{t('balance.insufficientFunds')}</div>
+            <div className="text-sm text-dark-300">{message || t('balance.topUpToComplete')}</div>
             <div className="mt-3 flex items-center gap-3">
               <div className="text-lg font-bold text-dark-100">
-                {t('balance.missing')}: <span className="text-error-400">{displayAmount} {currencySymbol}</span>
+                {t('balance.missing')}:{' '}
+                <span className="text-error-400">
+                  {displayAmount} {currencySymbol}
+                </span>
               </div>
             </div>
           </div>
         </div>
         <button
           onClick={() => setShowMethodSelect(true)}
-          className="btn-primary w-full mt-4 py-2.5 flex items-center justify-center gap-2"
+          className="btn-primary mt-4 flex w-full items-center justify-center gap-2 py-2.5"
         >
-          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <svg
+            className="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
             <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
           </svg>
           {t('balance.topUpBalance')}
@@ -131,80 +163,115 @@ export default function InsufficientBalancePrompt({
         />
       )}
     </>
-  )
+  );
 }
 
 interface PaymentMethodModalProps {
-  paymentMethods: PaymentMethod[] | undefined
-  onSelect: (method: PaymentMethod) => void
-  onClose: () => void
+  paymentMethods: PaymentMethod[] | undefined;
+  onSelect: (method: PaymentMethod) => void;
+  onClose: () => void;
 }
 
 function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethodModalProps) {
-  const { t } = useTranslation()
-  const { formatAmount, currencySymbol } = useCurrency()
+  const { t } = useTranslation();
+  const { formatAmount, currencySymbol } = useCurrency();
 
   return (
-    <div className="fixed inset-0 bg-black/70 backdrop-blur-sm z-[60] flex items-center justify-center px-4 pt-14 pb-28 sm:pt-0 sm:pb-0">
+    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 px-4 pb-28 pt-14 backdrop-blur-sm sm:pb-0 sm:pt-0">
       <div className="absolute inset-0" onClick={onClose} />
 
-      <div className="relative w-full max-w-sm bg-dark-900/95 backdrop-blur-xl rounded-3xl border border-dark-700/50 shadow-2xl overflow-hidden max-h-full flex flex-col">
+      <div className="relative flex max-h-full w-full max-w-sm flex-col overflow-hidden rounded-3xl border border-dark-700/50 bg-dark-900/95 shadow-2xl backdrop-blur-xl">
         {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 bg-dark-800/50">
+        <div className="flex items-center justify-between bg-dark-800/50 px-4 py-3">
           <span className="font-semibold text-dark-100">{t('balance.selectPaymentMethod')}</span>
-          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-dark-700 text-dark-400" aria-label="Close">
-            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-1.5 text-dark-400 hover:bg-dark-700"
+            aria-label="Close"
+          >
+            <svg
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto p-3 space-y-2">
+        <div className="flex-1 space-y-2 overflow-y-auto p-3">
           {!paymentMethods ? (
             <div className="flex items-center justify-center py-8">
-              <div className="w-6 h-6 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
+              <div className="h-6 w-6 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
             </div>
           ) : paymentMethods.length === 0 ? (
-            <div className="text-center py-6 text-dark-400 text-sm">
+            <div className="py-6 text-center text-sm text-dark-400">
               {t('balance.noPaymentMethods')}
             </div>
           ) : (
             paymentMethods.map((method) => {
-              const methodKey = method.id.toLowerCase().replace(/-/g, '_')
-              const translatedName = t(`balance.paymentMethods.${methodKey}.name`, { defaultValue: '' })
+              const methodKey = method.id.toLowerCase().replace(/-/g, '_');
+              const translatedName = t(`balance.paymentMethods.${methodKey}.name`, {
+                defaultValue: '',
+              });
 
               return (
                 <button
                   key={method.id}
                   disabled={!method.is_available}
                   onClick={() => method.is_available && onSelect(method)}
-                  className={`w-full p-3 rounded-xl text-left flex items-center gap-3 ${
+                  className={`flex w-full items-center gap-3 rounded-xl p-3 text-left ${
                     method.is_available
                       ? 'bg-dark-800 hover:bg-dark-700 active:bg-dark-600'
                       : 'bg-dark-800/50 opacity-50'
                   }`}
                 >
-                  <div className="w-9 h-9 rounded-lg bg-accent-500/20 flex items-center justify-center flex-shrink-0">
-                    <svg className="w-4 h-4 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
+                  <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-accent-500/20">
+                    <svg
+                      className="h-4 w-4 text-accent-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
+                      />
                     </svg>
                   </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium text-dark-100 text-sm">{translatedName || method.name}</div>
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm font-medium text-dark-100">
+                      {translatedName || method.name}
+                    </div>
                     <div className="text-xs text-dark-500">
-                      {formatAmount(method.min_amount_kopeks / 100, 0)} – {formatAmount(method.max_amount_kopeks / 100, 0)} {currencySymbol}
+                      {formatAmount(method.min_amount_kopeks / 100, 0)} –{' '}
+                      {formatAmount(method.max_amount_kopeks / 100, 0)} {currencySymbol}
                     </div>
                   </div>
-                  <svg className="w-4 h-4 text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                  <svg
+                    className="h-4 w-4 text-dark-500"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                    />
                   </svg>
                 </button>
-              )
+              );
             })
           )}
         </div>
       </div>
     </div>
-  )
+  );
 }