perf: refactor for better react-doctor score

src/components/Avatar/Avatar.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import Image from 'next/image';
 import type { Address } from 'viem';
 
@@ -9,20 +8,16 @@ type AvatarProps = {
 };
 
 export function Avatar({ address, size = 30, rounded = true }: AvatarProps) {
-  const [effigyErrorAddress, setEffigyErrorAddress] = useState<Address | null>(null);
-  const effigyActive = effigyErrorAddress !== address;
-  const effigyUrl = `https://effigy.im/a/${address}.svg`;
   const dicebearUrl = `https://api.dicebear.com/7.x/pixel-art/png?seed=${address}`;
 
   return (
     <div style={{ width: size, height: size }}>
       <Image
-        src={effigyActive ? effigyUrl : dicebearUrl}
+        src={dicebearUrl}
         alt={`Avatar for ${address}`}
         width={size}
         height={size}
         style={{ borderRadius: rounded ? '50%' : '5px' }}
-        onError={() => setEffigyErrorAddress(address)}
       />
     </div>
   );

src/features/autovault/components/vault-detail/settings/EditMetadata.tsx

@@ -45,8 +45,8 @@ export function EditMetadata({
   const [metadataError, setMetadataError] = useState<string | null>(null);
 
   // Compute values during render - use default if not edited, otherwise use stored value
-  const computedNameInput = nameEdited.current ? nameInput : (previousName !== '' ? previousName : defaultName);
-  const computedSymbolInput = symbolEdited.current ? symbolInput : (previousSymbol !== '' ? previousSymbol : defaultSymbol);
+  const computedNameInput = nameEdited.current ? nameInput : previousName !== '' ? previousName : defaultName;
+  const computedSymbolInput = symbolEdited.current ? symbolInput : previousSymbol !== '' ? previousSymbol : defaultSymbol;
 
   const handleNameChange = useCallback((value: string) => {
     nameEdited.current = true;

src/features/market-detail/components/charts/borrowers-pie-chart.tsx

@@ -257,7 +257,14 @@ export function BorrowersPieChart({ chainId, market, oraclePrice }: BorrowersPie
                 />
               ))}
             </Pie>
-            <Tooltip content={<BorrowersPieTooltip expandedOther={expandedOther} market={market} />} />
+            <Tooltip
+              content={
+                <BorrowersPieTooltip
+                  expandedOther={expandedOther}
+                  market={market}
+                />
+              }
+            />
             <Legend
               layout="vertical"
               align="right"

src/features/market-detail/components/charts/concentration-chart.tsx

@@ -23,13 +23,7 @@ type ConcentrationChartProps = {
 const MIN_PERCENT_THRESHOLD = 0.1;
 
 // Custom tooltip at module scope
-function ConcentrationTooltip({
-  active,
-  payload,
-}: {
-  active?: boolean;
-  payload?: { payload: ConcentrationDataPoint }[];
-}) {
+function ConcentrationTooltip({ active, payload }: { active?: boolean; payload?: { payload: ConcentrationDataPoint }[] }) {
   if (!active || !payload?.[0]) return null;
   const data = payload[0].payload;
 

src/features/market-detail/components/charts/supplier-positions-chart.tsx

@@ -268,7 +268,12 @@ export function SupplierPositionsChart({ marketId, chainId, market }: SupplierPo
             />
             <Tooltip
               cursor={chartTooltipCursor}
-              content={<SupplierPositionsTooltip getDisplayName={getDisplayName} formatValue={formatValue} />}
+              content={
+                <SupplierPositionsTooltip
+                  getDisplayName={getDisplayName}
+                  formatValue={formatValue}
+                />
+              }
             />
             {topSuppliers.map((supplier, index) => (
               <Line

src/features/market-detail/components/charts/suppliers-pie-chart.tsx

@@ -6,7 +6,6 @@ import { formatUnits } from 'viem';
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
 import { Card } from '@/components/ui/card';
 import { Spinner } from '@/components/ui/spinner';
-import { TokenIcon } from '@/components/shared/token-icon';
 import { useChartColors } from '@/constants/chartColors';
 import { useVaultRegistry } from '@/contexts/VaultRegistryContext';
 import { useAllMarketSuppliers } from '@/hooks/useAllMarketPositions';

src/modals/borrow/borrow-modal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { LuArrowRightLeft } from 'react-icons/lu';
 import { useConnection, useReadContract, useBalance } from 'wagmi';
 import { erc20Abi } from 'viem';
@@ -31,13 +31,7 @@ export function BorrowModal({
   defaultMode = 'borrow',
   liquiditySourcing,
 }: BorrowModalProps): JSX.Element {
-  const [mode, setMode] = useState<'borrow' | 'repay'>(defaultMode);
-
-  // Sync mode with defaultMode when it changes
-  useEffect(() => {
-    setMode(defaultMode);
-  }, [defaultMode]);
-
+  const [mode, setMode] = useState<'borrow' | 'repay'>(() => defaultMode);
   const { address: account } = useConnection();
 
   // Get token balances