test: address review feedback on Tier 5 demo smoke tests

- home/index.test.tsx: use renderWithProviders from test-utils
- TransactionButton demo: use createMockWeb3Status for complete hook shape
- TokenInput demo: fix useTokenInput mock to match the real hook return
  (amount/setAmount/amountError/balance/isLoadingBalance/selectedToken/setTokenSelected)
  and use renderWithProviders + createMockWeb3Status helpers

Author: gabitoesmiapodo

src/components/pageComponents/home/Examples/demos/TokenInput/index.test.tsx

@@ -1,15 +1,11 @@
-import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { createMockWeb3Status, renderWithProviders } from '@/src/test-utils'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import tokenInput from './index'
 
-const system = createSystem(defaultConfig)
-
 vi.mock('@/src/hooks/useWeb3Status', () => ({
-  useWeb3Status: vi.fn(() => ({
-    isWalletConnected: false,
-  })),
+  useWeb3Status: vi.fn(() => createMockWeb3Status()),
 }))
 
 vi.mock('@/src/hooks/useTokenLists', () => ({
@@ -29,21 +25,23 @@ vi.mock('@/src/hooks/useTokenSearch', () => ({
 
 vi.mock('@/src/components/sharedComponents/TokenInput/useTokenInput', () => ({
   useTokenInput: vi.fn(() => ({
-    value: '',
-    token: undefined,
-    error: undefined,
-    onChange: vi.fn(),
-    onTokenSelect: vi.fn(),
+    amount: 0n,
+    setAmount: vi.fn(),
+    amountError: null,
+    setAmountError: vi.fn(),
+    balance: 0n,
+    balanceError: null,
+    isLoadingBalance: false,
+    selectedToken: undefined,
+    setTokenSelected: vi.fn(),
   })),
 }))
 
 describe('TokenInput demo', () => {
   it('renders the token input container', () => {
     const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
-    render(
-      <QueryClientProvider client={queryClient}>
-        <ChakraProvider value={system}>{tokenInput.demo}</ChakraProvider>
-      </QueryClientProvider>,
+    renderWithProviders(
+      <QueryClientProvider client={queryClient}>{tokenInput.demo}</QueryClientProvider>,
     )
     // The mode dropdown should be visible
     expect(screen.getByText('Single token')).toBeDefined()

src/components/pageComponents/home/Examples/demos/TransactionButton/index.test.tsx

@@ -1,18 +1,10 @@
-import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
-import { render, screen } from '@testing-library/react'
+import { createMockWeb3Status, renderWithProviders } from '@/src/test-utils'
+import { screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import transactionButton from './index'
 
-const system = createSystem(defaultConfig)
-
 vi.mock('@/src/hooks/useWeb3Status', () => ({
-  useWeb3Status: vi.fn(() => ({
-    isWalletConnected: false,
-    isWalletSynced: false,
-    walletChainId: undefined,
-    appChainId: 11155420,
-    switchChain: vi.fn(),
-  })),
+  useWeb3Status: vi.fn(() => createMockWeb3Status({ appChainId: 11155420 })),
 }))
 
 vi.mock('@/src/providers/Web3Provider', () => ({
@@ -21,7 +13,7 @@ vi.mock('@/src/providers/Web3Provider', () => ({
 
 describe('TransactionButton demo', () => {
   it('renders connect wallet fallback when wallet not connected', () => {
-    render(<ChakraProvider value={system}>{transactionButton.demo}</ChakraProvider>)
+    renderWithProviders(transactionButton.demo)
     expect(screen.getByRole('button', { name: 'Connect Wallet' })).toBeDefined()
   })
 })

src/components/pageComponents/home/index.test.tsx

@@ -1,10 +1,8 @@
-import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
-import { render, screen } from '@testing-library/react'
+import { renderWithProviders } from '@/src/test-utils'
+import { screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import { Home } from './index'
 
-const system = createSystem(defaultConfig)
-
 // Mock sub-components that pull in Web3 dependencies to keep this a pure structural test
 vi.mock('@/src/components/pageComponents/home/Examples', () => ({
   default: () => <section data-testid="examples">Examples</section>,
@@ -16,11 +14,7 @@ vi.mock('@/src/components/pageComponents/home/Welcome', () => ({
 
 describe('Home', () => {
   it('renders Welcome and Examples sections', () => {
-    render(
-      <ChakraProvider value={system}>
-        <Home />
-      </ChakraProvider>,
-    )
+    renderWithProviders(<Home />)
     expect(screen.getByTestId('welcome')).toBeDefined()
     expect(screen.getByTestId('examples')).toBeDefined()
   })