fix lint

src/earn/components/DepositBalance.test.tsx

@@ -1,8 +1,8 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { Address } from 'viem';
 import { describe, it, expect, vi } from 'vitest';
 import { DepositBalance } from './DepositBalance';
 import { useEarnContext } from './EarnProvider';
-import type { Address } from 'viem';
 
 vi.mock('./EarnProvider', () => ({
   useEarnContext: vi.fn(),

src/earn/components/EarnBalance.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import { EarnBalance } from './EarnBalance';
 

src/earn/components/EarnBalance.tsx

@@ -1,4 +1,5 @@
 import { background, border, cn, color, text } from '@/styles/theme';
+import { useCallback } from 'react';
 import type { EarnBalanceReact } from '../types';
 
 export function EarnBalance({
@@ -8,12 +9,22 @@ export function EarnBalance({
   subtitle,
   showAction = false,
 }: EarnBalanceReact) {
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onActionPress();
+      }
+    },
+    [onActionPress],
+  );
+
   return (
     <div
       className={cn(
         background.alternate,
         border.radius,
-        'flex p-3 px-4 items-center gap-4 justify-between',
+        'flex items-center justify-between gap-4 p-3 px-4',
         className,
       )}
       data-testid="ockEarnBalance"
@@ -23,9 +34,14 @@ export function EarnBalance({
         <div className={cn(text.label2, color.foregroundMuted)}>{subtitle}</div>
       </div>
       {showAction && (
-        <div onClick={onActionPress} className={cn(text.label2, color.primary)}>
+        <button
+          onClick={onActionPress}
+          className={cn(text.label2, color.primary)}
+          type="button"
+          onKeyDown={handleKeyDown}
+        >
           Use max
-        </div>
+        </button>
       )}
     </div>
   );

src/earn/components/EarnProvider.test.tsx

@@ -1,5 +1,5 @@
-import { renderHook } from '@testing-library/react';
 import { useGetTokenBalance } from '@/wallet/hooks/useGetTokenBalance';
+import { renderHook } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useAccount } from 'wagmi';
 import { EarnProvider, useEarnContext } from './EarnProvider';

src/earn/components/EarnProvider.tsx

@@ -1,9 +1,9 @@
 import { useValue } from '@/core-react/internal/hooks/useValue';
-import { createContext, useContext, useState } from 'react';
-import type { EarnContextType, EarnProviderReact } from '../types';
 import { usdcToken } from '@/token/constants';
 import { useGetTokenBalance } from '@/wallet/hooks/useGetTokenBalance';
+import { createContext, useContext, useState } from 'react';
 import { useAccount } from 'wagmi';
+import type { EarnContextType, EarnProviderReact } from '../types';
 
 const EarnContext = createContext<EarnContextType | undefined>(undefined);
 
@@ -22,8 +22,8 @@ export function EarnProvider({ vaultAddress, children }: EarnProviderReact) {
     setDepositAmount,
     withdrawAmount,
     setWithdrawAmount,
-    // TODO: update when we have deposited logic
-    depositedAmount: '100',
+    // TODO: update when we have logic to fetch deposited amount
+    depositedAmount: '',
   });
 
   return <EarnContext.Provider value={value}>{children}</EarnContext.Provider>;

src/earn/components/WithdrawBalance.test.tsx

@@ -1,8 +1,8 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { Address } from 'viem';
 import { describe, it, expect, vi } from 'vitest';
-import { WithdrawBalance } from './WithdrawBalance';
 import { useEarnContext } from './EarnProvider';
-import type { Address } from 'viem';
+import { WithdrawBalance } from './WithdrawBalance';
 
 vi.mock('./EarnProvider', () => ({
   useEarnContext: vi.fn(),

src/earn/types.ts

@@ -1,4 +1,4 @@
-import { Address } from 'viem';
+import type { Address } from 'viem';
 
 export type EarnProviderReact = {
   children: React.ReactNode;
@@ -29,4 +29,4 @@ export type DepositBalanceReact = {
 
 export type WithdrawBalanceReact = {
   className?: string;
-};
+};