eslint-errors.json

[{"filePath":"/home/theophilus/Desktop/Tech/Web3Dev/Web3Bridge/Capstone/YieldSaveContribution/ys-frontend/app/app/page.tsx","messages":[{"ruleId":"react-hooks/set-state-in-effect","severity":2,"message":"Error: Calling setState synchronously within an effect can trigger cascading renders\n\nEffects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).\n\n/home/theophilus/Desktop/Tech/Web3Dev/Web3Bridge/Capstone/YieldSaveContribution/ys-frontend/app/app/page.tsx:78:5\n  76 |\n  77 |   useEffect(() => {\n> 78 |     refreshData();\n     |     ^^^^^^^^^^^ Avoid calling setState() directly within an effect\n  79 |   }, [refreshData]);\n  80 |\n  81 |   const fmt = (val: bigint | null) =>","line":78,"column":5,"nodeType":null,"endLine":78,"endColumn":16}],"suppressedMessages":[],"errorCount":1,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":"\"use client\";\nimport { useState, useEffect, useCallback } from \"react\";\nimport { useAppKitAccount, useAppKit } from \"@reown/appkit/react\";\nimport { formatUnits, parseUnits } from \"ethers\";\n\n// Hooks\nimport { useUsdcBalance } from \"../../hooks/useUsdcBalance\";\nimport { useUserShares } from \"../../hooks/useUserShares\";\nimport { useUserBalance } from \"../../hooks/useUserBalance\";\nimport { useUserDeposits } from \"../../hooks/useUserDeposits\";\nimport { useVaultBalance } from \"../../hooks/useVaultBalance\";\nimport { usePreviewDeposit } from \"../../hooks/usePreviewDeposit\";\n\n// Components\nimport { AppNavbar } from \"../../components/ui/AppNavbar\";\nimport { Sidebar, Tab } from \"../../components/ui/Sidebar\";\nimport { Logo } from \"../../components/ui/Icons\";\nimport { Menu } from \"lucide-react\";\nimport { DepositForm } from \"../../components/Deposit/DepositForm\";\nimport { WithdrawForm } from \"../../components/Withdraw/WithdrawForm\";\n\nconst USDC_DECIMALS = 6;\n\nexport default function AppPage() {\n  const [tab, setTab] = useState<Tab>(\"deposit\");\n  const [isSidebarOpen, setIsSidebarOpen] = useState(false);\n\n  const [usdcBalance, setUsdcBalance] = useState<bigint | null>(null);\n  const [userShares, setUserShares] = useState<bigint | null>(null);\n  const [userBalance, setUserBalance] = useState<bigint | null>(null);\n  const [userDeposits, setUserDeposits] = useState<bigint | null>(null);\n  const [vaultBalance, setVaultBalance] = useState<bigint | null>(null);\n  const [exchangeRate, setExchangeRate] = useState<number>(0.9921);\n\n  const { address, isConnected } = useAppKitAccount();\n  const { open } = useAppKit();\n\n  const { refetchUsdcBalance, isLoadingUsdcBalance } = useUsdcBalance();\n  const { refetchUserShares, isLoadingUserShares } = useUserShares();\n  const { refetchUserBalance, isLoadingUserBalance } = useUserBalance();\n  const { refetchUserDeposits } = useUserDeposits();\n  const { refetchVaultBalance, isLoadingVaultBalance } = useVaultBalance();\n  const { previewByAssets } = usePreviewDeposit();\n\n  const refreshData = useCallback(async () => {\n    if (!isConnected) return;\n    const [bal, shares, ub, ud, vb, rateShares] = await Promise.all([\n      refetchUsdcBalance(),\n      refetchUserShares(),\n      refetchUserBalance(),\n      refetchUserDeposits(),\n      refetchVaultBalance(),\n      previewByAssets(parseUnits(\"1\", USDC_DECIMALS)),\n    ]);\n    setUsdcBalance(bal);\n    setUserShares(shares);\n    setUserBalance(ub);\n    setUserDeposits(ud);\n    setVaultBalance(vb);\n    if (rateShares)\n      setExchangeRate(parseFloat(formatUnits(rateShares, USDC_DECIMALS)));\n  }, [\n    isConnected,\n    refetchUsdcBalance,\n    refetchUserShares,\n    refetchUserBalance,\n    refetchUserDeposits,\n    refetchVaultBalance,\n    previewByAssets,\n  ]);\n\n  const handleRefresh = useCallback(async () => {\n    await new Promise((resolve) => setTimeout(resolve, 2000));\n    await refreshData();\n  }, [refreshData]);\n\n  useEffect(() => {\n    refreshData();\n  }, [refreshData]);\n\n  const fmt = (val: bigint | null) =>\n    val\n      ? parseFloat(formatUnits(val, USDC_DECIMALS)).toLocaleString(undefined, {\n          minimumFractionDigits: 2,\n          maximumFractionDigits: 2,\n        })\n      : \"0.00\";\n\n  // Dummy analytics data based on Figma\n  const totalYield = userBalance && userDeposits ? userBalance - userDeposits : null;\n\n  if (!isConnected) {\n    return (\n      <div className=\"min-h-screen bg-background\">\n        <AppNavbar\n          isConnected={isConnected}\n          address={address}\n          open={open}\n        />\n        <div className=\"pt-32 flex items-center justify-center p-6 min-h-screen relative overflow-hidden\">\n          <div className=\"fintech-grid\" />\n          <div className=\"premium-card text-center max-w-md w-full shadow-lg relative z-10\">\n            <h1 className=\"text-2xl font-bold mb-3\">Ready to Earn?</h1>\n            <p className=\"text-muted-foreground mb-8\">\n              Connect your wallet to access your non-custodial yield dashboard.\n            </p>\n            <button\n              className=\"btn-primary w-full\"\n              onClick={() => open()}\n            >\n              Connect Wallet\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex h-screen bg-background overflow-hidden\">\n      <Sidebar tab={tab} setTab={(t) => { setTab(t); setIsSidebarOpen(false); }} isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />\n\n      <main className=\"flex-1 overflow-y-auto relative flex flex-col\">\n        <div className=\"fintech-grid\" />\n        \n        {/* Mobile Header */}\n        <div className=\"lg:hidden flex items-center justify-between p-4 border-b border-border bg-background/80 backdrop-blur-xl sticky top-0 z-40\">\n           <div className=\"flex items-center gap-3\">\n             <Logo />\n             <span className=\"font-bold text-lg tracking-tight text-foreground\">YieldSave</span>\n           </div>\n           <button onClick={() => setIsSidebarOpen(true)} className=\"p-2 text-muted-foreground hover:text-foreground\">\n             <Menu className=\"w-6 h-6\" />\n           </button>\n        </div>\n\n        <div className=\"p-4 sm:p-8 lg:p-12 flex-1 relative z-10\">\n        {tab === \"deposit\" ? (\n          <div className=\"max-w-6xl mx-auto space-y-8\">\n            {/* Top Stats Section */}\n            <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n              {/* Main Balance Card */}\n              <div className=\"lg:col-span-2 premium-card flex flex-col justify-between\">\n                <div>\n                  <div className=\"flex justify-between items-start mb-6\">\n                    <p className=\"text-sm font-semibold text-muted-foreground uppercase tracking-wider\">\n                      Total Portfolio Balance\n                    </p>\n                    <div className=\"bg-success/10 text-success text-xs font-bold px-3 py-1 rounded-md flex items-center gap-1\">\n                      <span>+14.2% APY</span>\n                    </div>\n                  </div>\n                  <h2 className=\"text-5xl font-bold text-foreground\">\n                    ${fmt(userBalance)}\n                  </h2>\n                </div>\n                <div className=\"mt-8 flex justify-between items-end\">\n                  <div>\n                    <p className=\"text-sm text-muted-foreground mb-1\">Total Yield Earned</p>\n                    <p className=\"text-2xl font-bold text-success\">\n                      +${totalYield !== null && totalYield > 0 ? fmt(totalYield) : \"0.00\"}\n                    </p>\n                  </div>\n                  {/* Mock Chart Area */}\n                  <div className=\"w-1/2 h-16 flex items-end gap-1 opacity-80\">\n                    {[30, 45, 25, 60, 40, 75, 50, 90].map((h, i) => (\n                      <div key={i} className=\"flex-1 bg-primary rounded-t-sm\" style={{ height: `${h}%` }}></div>\n                    ))}\n                  </div>\n                </div>\n              </div>\n\n              {/* Analytics Overview */}\n              <div className=\"premium-card flex flex-col\">\n                <h3 className=\"text-lg font-bold text-foreground mb-6\">Analytics Overview</h3>\n                <div className=\"space-y-6 flex-1\">\n                  <div>\n                    <p className=\"text-sm text-muted-foreground mb-1\">Current APY</p>\n                    <div className=\"flex items-center justify-between\">\n                      <p className=\"text-2xl font-bold text-foreground\">14.2%</p>\n                      <div className=\"w-16 h-8 flex items-end gap-1\">\n                        <div className=\"flex-1 bg-success rounded-t-sm h-[40%]\"></div>\n                        <div className=\"flex-1 bg-success rounded-t-sm h-[70%]\"></div>\n                        <div className=\"flex-1 bg-success rounded-t-sm h-[100%]\"></div>\n                      </div>\n                    </div>\n                  </div>\n                  <div className=\"h-px bg-border\"></div>\n                  <div>\n                    <p className=\"text-sm text-muted-foreground mb-1\">Vault TVL</p>\n                    <p className=\"text-2xl font-bold text-foreground\">${fmt(vaultBalance)}</p>\n                  </div>\n                  <div className=\"h-px bg-border\"></div>\n                  <div>\n                    <p className=\"text-sm text-muted-foreground mb-1\">Earnings This Month</p>\n                    <p className=\"text-2xl font-bold text-success\">+$0.00</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            {/* Deposit & Withdraw Side by Side */}\n            <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n              <div className=\"premium-card p-0 overflow-hidden\">\n                <div className=\"p-6 border-b border-border\">\n                  <h3 className=\"text-lg font-bold\">Deposit</h3>\n                </div>\n                <div className=\"p-6\">\n                  <DepositForm\n                    usdcBalance={usdcBalance}\n                    exchangeRate={exchangeRate}\n                    onSuccess={handleRefresh}\n                    isConnected={isConnected}\n                  />\n                </div>\n              </div>\n              <div className=\"premium-card p-0 overflow-hidden\">\n                <div className=\"p-6 border-b border-border\">\n                  <h3 className=\"text-lg font-bold\">Withdraw</h3>\n                </div>\n                <div className=\"p-6\">\n                  <WithdrawForm\n                    userShares={userShares}\n                    userDeposits={userDeposits}\n                    onSuccess={handleRefresh}\n                    isConnected={isConnected}\n                  />\n                </div>\n              </div>\n            </div>\n\n            {/* Recent Activity */}\n            <div className=\"premium-card\">\n              <div className=\"flex justify-between items-center mb-6\">\n                <h3 className=\"text-lg font-bold\">Recent Activity</h3>\n                <button className=\"text-primary text-sm font-semibold hover:underline\">View All</button>\n              </div>\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center justify-between p-4 bg-muted/50 rounded-lg\">\n                  <div className=\"flex items-center gap-4\">\n                    <div className=\"w-10 h-10 rounded-lg bg-success/20 text-success flex items-center justify-center\">\n                      ↓\n                    </div>\n                    <div>\n                      <p className=\"font-bold text-foreground\">Deposit to Vault</p>\n                      <p className=\"text-xs text-muted-foreground\">Today, 14:30</p>\n                    </div>\n                  </div>\n                  <div className=\"text-right\">\n                    <p className=\"font-bold text-foreground\">+50,000 USDC</p>\n                    <p className=\"text-xs text-muted-foreground\">Confirmed</p>\n                  </div>\n                </div>\n                <div className=\"flex items-center justify-between p-4 bg-muted/50 rounded-lg\">\n                  <div className=\"flex items-center gap-4\">\n                    <div className=\"w-10 h-10 rounded-lg bg-primary/20 text-primary flex items-center justify-center\">\n                      ◈\n                    </div>\n                    <div>\n                      <p className=\"font-bold text-foreground\">Yield Distribution</p>\n                      <p className=\"text-xs text-muted-foreground\">Yesterday</p>\n                    </div>\n                  </div>\n                  <div className=\"text-right\">\n                    <p className=\"font-bold text-success\">+$142.50</p>\n                    <p className=\"text-xs text-muted-foreground\">Added</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center h-full text-muted-foreground\">\n            <p>Section Under Construction</p>\n          </div>\n        )}\n        </div>\n      </main>\n    </div>\n  );\n}\n","usedDeprecatedRules":[]},{"filePath":"/home/theophilus/Desktop/Tech/Web3Dev/Web3Bridge/Capstone/YieldSaveContribution/ys-frontend/components/ui/ThemeToggle.tsx","messages":[{"ruleId":"react-hooks/set-state-in-effect","severity":2,"message":"Error: Calling setState synchronously within an effect can trigger cascading renders\n\nEffects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).\n\n/home/theophilus/Desktop/Tech/Web3Dev/Web3Bridge/Capstone/YieldSaveContribution/ys-frontend/components/ui/ThemeToggle.tsx:13:5\n  11 |   // useEffect only runs on the client, so now we can safely show the UI\n  12 |   useEffect(() => {\n> 13 |     setMounted(true);\n     |     ^^^^^^^^^^ Avoid calling setState() directly within an effect\n  14 |   }, []);\n  15 |\n  16 |   if (!mounted) {","line":13,"column":5,"nodeType":null,"endLine":13,"endColumn":15}],"suppressedMessages":[],"errorCount":1,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":"\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport { Moon, Sun } from \"lucide-react\";\n\nexport function ThemeToggle() {\n  const [mounted, setMounted] = useState(false);\n  const { setTheme, resolvedTheme } = useTheme();\n\n  // useEffect only runs on the client, so now we can safely show the UI\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return <div className=\"w-10 h-10 rounded-full bg-muted animate-pulse\"></div>;\n  }\n\n  return (\n    <button\n      onClick={() => setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\")}\n      className=\"p-2 rounded-full hover:bg-muted transition-colors flex items-center justify-center text-foreground\"\n      aria-label=\"Toggle Dark Mode\"\n    >\n      {resolvedTheme === \"dark\" ? (\n        <Sun className=\"h-5 w-5\" />\n      ) : (\n        <Moon className=\"h-5 w-5\" />\n      )}\n    </button>\n  );\n}\n","usedDeprecatedRules":[]}]