chore: sync submodule state (parent ref update)

Made-with: Cursor

frontend/src/app/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { Card } from '@/components/common/Card'
+import { useCallback, useEffect, useState } from 'react'
+import { Card } from '@/libs/frontend-ui-primitives'
 import Link from 'next/link'
 import { blocksApi } from '@/services/api/blocks'
 
@@ -18,12 +18,7 @@ export default function Home() {
   const [recentBlocks, setRecentBlocks] = useState<any[]>([])
   const chainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '138')
 
-  useEffect(() => {
-    loadStats()
-    loadRecentBlocks()
-  }, [])
-
-  const loadStats = async () => {
+  const loadStats = useCallback(async () => {
     try {
       // This would call analytics API
       // For now, placeholder
@@ -37,9 +32,9 @@ export default function Home() {
     } catch (error) {
       console.error('Failed to load stats:', error)
     }
-  }
+  }, [])
 
-  const loadRecentBlocks = async () => {
+  const loadRecentBlocks = useCallback(async () => {
     try {
       const response = await blocksApi.list({
         chain_id: chainId,
@@ -50,7 +45,12 @@ export default function Home() {
     } catch (error) {
       console.error('Failed to load recent blocks:', error)
     }
-  }
+  }, [chainId])
+
+  useEffect(() => {
+    loadStats()
+    loadRecentBlocks()
+  }, [loadStats, loadRecentBlocks])
 
   return (
     <main className="container mx-auto px-4 py-8">

frontend/src/pages/addresses/[address].tsx

@@ -1,10 +1,8 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
-import { Card } from '@/components/common/Card'
-import { Address } from '@/components/blockchain/Address'
-import { Table } from '@/components/common/Table'
+import { Card, Table, Address } from '@/libs/frontend-ui-primitives'
 import { addressesApi, AddressInfo, TransactionSummary } from '@/services/api/addresses'
 
 export default function AddressDetailPage() {
@@ -16,32 +14,36 @@ export default function AddressDetailPage() {
   const [transactions, setTransactions] = useState<TransactionSummary[]>([])
   const [loading, setLoading] = useState(true)
 
-  useEffect(() => {
-    loadAddressInfo()
-    loadTransactions()
-  }, [address])
-
-  const loadAddressInfo = async () => {
+  const loadAddressInfo = useCallback(async () => {
     try {
-      const response = await addressesApi.get(chainId, address)
-      setAddressInfo(response.data ?? null)
+      const { ok, data } = await addressesApi.getSafe(chainId, address)
+      if (!ok) {
+        setAddressInfo(null)
+        return
+      }
+      setAddressInfo(data ?? null)
     } catch (error) {
       console.error('Failed to load address info:', error)
       setAddressInfo(null)
     }
-  }
+  }, [chainId, address])
 
-  const loadTransactions = async () => {
+  const loadTransactions = useCallback(async () => {
     try {
-      const response = await addressesApi.getTransactions(chainId, address, 1, 20)
-      setTransactions(response.data || [])
+      const { ok, data } = await addressesApi.getTransactionsSafe(chainId, address, 1, 20)
+      setTransactions(ok ? data : [])
     } catch (error) {
       console.error('Failed to load transactions:', error)
       setTransactions([])
     } finally {
       setLoading(false)
     }
-  }
+  }, [chainId, address])
+
+  useEffect(() => {
+    loadAddressInfo()
+    loadTransactions()
+  }, [loadAddressInfo, loadTransactions])
 
   if (loading) {
     return <div className="p-8">Loading address...</div>

frontend/src/pages/blocks/[number].tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
 import { blocksApi, Block } from '@/services/api/blocks'
-import { Card } from '@/components/common/Card'
-import { Address } from '@/components/blockchain/Address'
+import { Card, Address } from '@/libs/frontend-ui-primitives'
 import Link from 'next/link'
 
 export default function BlockDetailPage() {
@@ -17,16 +16,7 @@ export default function BlockDetailPage() {
   const [block, setBlock] = useState<Block | null>(null)
   const [loading, setLoading] = useState(true)
 
-  useEffect(() => {
-    if (!isValidBlock) {
-      setLoading(false)
-      setBlock(null)
-      return
-    }
-    loadBlock()
-  }, [blockNumber, isValidBlock])
-
-  const loadBlock = async () => {
+  const loadBlock = useCallback(async () => {
     setLoading(true)
     try {
       const response = await blocksApi.getByNumber(chainId, blockNumber)
@@ -36,7 +26,16 @@ export default function BlockDetailPage() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [chainId, blockNumber])
+
+  useEffect(() => {
+    if (!isValidBlock) {
+      setLoading(false)
+      setBlock(null)
+      return
+    }
+    loadBlock()
+  }, [isValidBlock, loadBlock])
 
   if (!isValidBlock) {
     return <div className="p-8">Invalid block number. Please use a valid block number from the URL.</div>

frontend/src/pages/blocks/index.tsx

@@ -1,9 +1,8 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { blocksApi, Block } from '@/services/api/blocks'
-import { Card } from '@/components/common/Card'
-import { Address } from '@/components/blockchain/Address'
+import { Card, Address } from '@/libs/frontend-ui-primitives'
 import Link from 'next/link'
 
 export default function BlocksPage() {
@@ -12,11 +11,7 @@ export default function BlocksPage() {
   const [page, setPage] = useState(1)
   const chainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '138')
 
-  useEffect(() => {
-    loadBlocks()
-  }, [page])
-
-  const loadBlocks = async () => {
+  const loadBlocks = useCallback(async () => {
     setLoading(true)
     try {
       const response = await blocksApi.list({
@@ -32,7 +27,11 @@ export default function BlocksPage() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [chainId, page])
+
+  useEffect(() => {
+    loadBlocks()
+  }, [loadBlocks])
 
   if (loading) {
     return <div className="p-8">Loading blocks...</div>

frontend/src/pages/search/index.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Card } from '@/components/common/Card'
-import { Address } from '@/components/blockchain/Address'
+import { Card, Address } from '@/libs/frontend-ui-primitives'
 import Link from 'next/link'
 
 interface SearchResult {

frontend/src/pages/transactions/[hash].tsx

@@ -1,9 +1,8 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
-import { Card } from '@/components/common/Card'
-import { Address } from '@/components/blockchain/Address'
+import { Card, Address } from '@/libs/frontend-ui-primitives'
 import Link from 'next/link'
 import { transactionsApi, Transaction } from '@/services/api/transactions'
 
@@ -15,22 +14,26 @@ export default function TransactionDetailPage() {
   const [transaction, setTransaction] = useState<Transaction | null>(null)
   const [loading, setLoading] = useState(true)
 
-  useEffect(() => {
-    loadTransaction()
-  }, [hash])
-
-  const loadTransaction = async () => {
+  const loadTransaction = useCallback(async () => {
     setLoading(true)
     try {
-      const response = await transactionsApi.get(chainId, hash)
-      setTransaction(response.data ?? null)
+      const { ok, data } = await transactionsApi.getSafe(chainId, hash)
+      if (!ok) {
+        setTransaction(null)
+        return
+      }
+      setTransaction(data ?? null)
     } catch (error) {
       console.error('Failed to load transaction:', error)
       setTransaction(null)
     } finally {
       setLoading(false)
     }
-  }
+  }, [chainId, hash])
+
+  useEffect(() => {
+    loadTransaction()
+  }, [loadTransaction])
 
   if (loading) {
     return <div className="p-8">Loading transaction...</div>

frontend/src/pages/transactions/index.tsx

@@ -1,23 +1,9 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { Table } from '@/components/common/Table'
-import { Address } from '@/components/blockchain/Address'
+import { useCallback, useEffect, useState } from 'react'
+import { Table, Address } from '@/libs/frontend-ui-primitives'
 import Link from 'next/link'
-
-interface Transaction {
-  chain_id: number
-  hash: string
-  block_number: number
-  transaction_index: number
-  from_address: string
-  to_address?: string
-  value: string
-  gas_price?: number
-  gas_used?: number
-  status?: number
-  created_at: string
-}
+import { transactionsApi, Transaction } from '@/services/api/transactions'
 
 export default function TransactionsPage() {
   const [transactions, setTransactions] = useState<Transaction[]>([])
@@ -25,24 +11,22 @@ export default function TransactionsPage() {
   const [page, setPage] = useState(1)
   const chainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '138')
 
-  useEffect(() => {
-    loadTransactions()
-  }, [page])
-
-  const loadTransactions = async () => {
+  const loadTransactions = useCallback(async () => {
     setLoading(true)
     try {
-      const response = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/api/v1/transactions?chain_id=${chainId}&page=${page}&page_size=20`
-      )
-      const data = await response.json()
-      setTransactions(data.data || [])
+      const { ok, data } = await transactionsApi.listSafe(chainId, page, 20)
+      setTransactions(ok ? data : [])
     } catch (error) {
       console.error('Failed to load transactions:', error)
+      setTransactions([])
     } finally {
       setLoading(false)
     }
-  }
+  }, [chainId, page])
+
+  useEffect(() => {
+    loadTransactions()
+  }, [loadTransactions])
 
   const columns = [
     {
@@ -95,7 +79,7 @@ export default function TransactionsPage() {
     <div className="container mx-auto px-4 py-8">
       <h1 className="text-3xl font-bold mb-6">Transactions</h1>
 
-      <Table columns={columns} data={transactions} />
+      <Table columns={columns} data={transactions} keyExtractor={(tx) => tx.hash} />
 
       <div className="mt-6 flex gap-4 justify-center">
         <button

frontend/src/services/api/addresses.ts

@@ -30,6 +30,33 @@ export const addressesApi = {
   get: async (chainId: number, address: string): Promise<ApiResponse<AddressInfo>> => {
     return apiClient.get<AddressInfo>(`/api/v1/addresses/${chainId}/${address}`)
   },
+  /** Use when you need to check response.ok before setting state (avoids treating 4xx/5xx body as data). */
+  getSafe: async (chainId: number, address: string): Promise<{ ok: boolean; data: AddressInfo | null }> => {
+    return apiClient.getSafe<AddressInfo>(`/api/v1/addresses/${chainId}/${address}`)
+  },
+  getTransactionsSafe: async (
+    chainId: number,
+    address: string,
+    page = 1,
+    pageSize = 20
+  ): Promise<{ ok: boolean; data: TransactionSummary[] }> => {
+    try {
+      const params = new URLSearchParams({
+        chain_id: chainId.toString(),
+        from_address: address,
+        page: page.toString(),
+        page_size: pageSize.toString(),
+      })
+      const raw = (await apiClient.get(`/api/v1/transactions?${params.toString()}`)) as unknown as {
+        data?: TransactionSummary[]
+        items?: TransactionSummary[]
+      }
+      const data = Array.isArray(raw?.data) ? raw.data : Array.isArray(raw?.items) ? raw.items : []
+      return { ok: true, data }
+    } catch {
+      return { ok: false, data: [] }
+    }
+  },
 
   getTransactions: async (
     chainId: number,

frontend/src/services/api/client.ts

@@ -1,92 +1,17 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
+// Re-export from reusable lib (frontend/libs/frontend-api-client)
+import { createApiClient, type ApiResponse, type ApiError } from '../../../libs/frontend-api-client'
 
-export interface ApiResponse<T> {
-  data: T
-  meta?: {
-    pagination?: {
-      page: number
-      page_size: number
-      total: number
-      total_pages: number
-    }
+export type { ApiResponse, ApiError }
+
+function getApiKey(): string | null {
+  if (typeof window !== 'undefined') {
+    return localStorage.getItem('api_key')
   }
+  return null
 }
 
-export interface ApiError {
-  error: {
-    code: string
-    message: string
-    details?: unknown
-    request_id?: string
-  }
-}
-
-class ApiClient {
-  private client: AxiosInstance
-
-  constructor(baseURL: string = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080') {
-    this.client = axios.create({
-      baseURL,
-      timeout: 30000,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-
-    // Request interceptor
-    this.client.interceptors.request.use(
-      (config) => {
-        // Add API key if available
-        const apiKey = this.getApiKey()
-        if (apiKey) {
-          config.headers['X-API-Key'] = apiKey
-        }
-        return config
-      },
-      (error) => Promise.reject(error)
-    )
-
-    // Response interceptor
-    this.client.interceptors.response.use(
-      (response) => response,
-      (error) => {
-        // Handle errors
-        if (error.response) {
-          const apiError: ApiError = error.response.data
-          return Promise.reject(apiError)
-        }
-        return Promise.reject(error)
-      }
-    )
-  }
-
-  private getApiKey(): string | null {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('api_key')
-    }
-    return null
-  }
-
-  async get<T>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
-    const response: AxiosResponse<ApiResponse<T>> = await this.client.get(url, config)
-    return response.data
-  }
-
-  async post<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
-    const response: AxiosResponse<ApiResponse<T>> = await this.client.post(url, data, config)
-    return response.data
-  }
-
-  async put<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
-    const response: AxiosResponse<ApiResponse<T>> = await this.client.put(url, data, config)
-    return response.data
-  }
-
-  async delete<T>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
-    const response: AxiosResponse<ApiResponse<T>> = await this.client.delete(url, config)
-    return response.data
-  }
-}
-
-export const apiClient = new ApiClient()
+export const apiClient = createApiClient(
+  process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080',
+  getApiKey
+)
 

frontend/src/services/api/transactions.ts

@@ -24,4 +24,34 @@ export const transactionsApi = {
   get: async (chainId: number, hash: string): Promise<ApiResponse<Transaction>> => {
     return apiClient.get<Transaction>(`/api/v1/transactions/${chainId}/${hash}`)
   },
+  /** Use when you need to check response.ok before setting state (avoids treating 4xx/5xx body as data). */
+  getSafe: async (chainId: number, hash: string): Promise<{ ok: boolean; data: Transaction | null }> => {
+    return apiClient.getSafe<Transaction>(`/api/v1/transactions/${chainId}/${hash}`)
+  },
+  list: async (chainId: number, page: number, pageSize: number): Promise<ApiResponse<Transaction[]>> => {
+    const params = new URLSearchParams({
+      chain_id: chainId.toString(),
+      page: page.toString(),
+      page_size: pageSize.toString(),
+    })
+    const raw = (await apiClient.get(`/api/v1/transactions?${params.toString()}`)) as unknown as { data?: Transaction[]; items?: Transaction[] }
+    const data = Array.isArray(raw?.data) ? raw.data : Array.isArray(raw?.items) ? raw.items : []
+    return { data }
+  },
+  /** Use when you need to check ok before setting state (avoids treating error body as list). */
+  listSafe: async (chainId: number, page: number, pageSize: number): Promise<{ ok: boolean; data: Transaction[] }> => {
+    try {
+      const params = new URLSearchParams({
+        chain_id: chainId.toString(),
+        page: page.toString(),
+        page_size: pageSize.toString(),
+      })
+      const raw = await apiClient.getSafe<Transaction[]>(`/api/v1/transactions?${params.toString()}`)
+      if (!raw.ok) return { ok: false, data: [] }
+      const data = Array.isArray(raw.data) ? raw.data : []
+      return { ok: true, data }
+    } catch {
+      return { ok: false, data: [] }
+    }
+  },
 }