+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/app/components/LoadMorePagination.tsx
+git commit -m "feat(frontend): add LoadMorePagination for cursor-based pagination"
+```
+
+### Task 8: Create EVM Utility Helpers
+
+**Files:**
+- Create: `frontend/app/lib/evmUtils.ts`
+
+- [ ] **Step 1: Create utility functions**
+
+```typescript
+/** Format wei string to human-readable FLOW value */
+export function formatWei(wei: string | null | undefined, decimals = 18, precision = 4): string {
+ if (!wei || wei === '0') return '0';
+ try {
+ const num = BigInt(wei);
+ const divisor = BigInt(10 ** decimals);
+ const whole = num / divisor;
+ const remainder = num % divisor;
+ const fracStr = remainder.toString().padStart(decimals, '0').slice(0, precision);
+ const result = `${whole}.${fracStr}`.replace(/\.?0+$/, '');
+ return result || '0';
+ } catch {
+ return wei;
+ }
+}
+
+/** Format gas number with commas */
+export function formatGas(gas: string | number | null | undefined): string {
+ if (!gas) return '0';
+ return Number(gas).toLocaleString();
+}
+
+/** Truncate hex string: 0xAbCd...1234 */
+export function truncateHash(hash: string, startLen = 6, endLen = 4): string {
+ if (!hash || hash.length <= startLen + endLen + 3) return hash;
+ return `${hash.slice(0, startLen)}...${hash.slice(-endLen)}`;
+}
+
+/** Normalize EVM address to lowercase with 0x prefix */
+export function normalizeEVMAddress(addr: string): string {
+ const clean = addr.toLowerCase().replace(/^0x/, '');
+ return `0x${clean}`;
+}
+
+/** Check if a hex string (without 0x) is a 40-char EVM address */
+export function isEVMAddress(hexOnly: string): boolean {
+ return /^[0-9a-fA-F]{40}$/.test(hexOnly);
+}
+
+/** Map Blockscout tx status to display */
+export function txStatusLabel(status: string): { label: string; color: string } {
+ if (status === 'ok') return { label: 'Success', color: 'text-green-600 dark:text-green-400' };
+ return { label: 'Failed', color: 'text-red-600 dark:text-red-400' };
+}
+
+/** Map internal tx type + call_type to display label */
+export function internalTxTypeLabel(type: string, callType: string | null): string {
+ if (type === 'create') return 'CREATE';
+ if (type === 'selfdestruct') return 'SELFDESTRUCT';
+ if (callType === 'delegatecall') return 'DELEGATECALL';
+ if (callType === 'staticcall') return 'STATICCALL';
+ return 'CALL';
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/app/lib/evmUtils.ts
+git commit -m "feat(frontend): add EVM utility helpers (formatting, normalization)"
+```
+
+---
+
+## Chunk 4: EVM Account Page
+
+### Task 9: Refactor Address Detection in Account Route
+
+**Files:**
+- Modify: `frontend/app/routes/accounts/$address.tsx`
+
+This is the critical routing change. Currently the loader only handles Cadence addresses and COA redirect. We need to add an EVM branch.
+
+- [ ] **Step 1: Update the loader to detect EVM addresses**
+
+In `accounts/$address.tsx`, replace the existing COA detection block (lines ~63-87) with:
+
+```typescript
+loader: async ({ params, search }: any) => {
+ try {
+ const address = params.address;
+ const normalized = address.toLowerCase().startsWith('0x') ? address.toLowerCase() : `0x${address.toLowerCase()}`;
+ const hexOnly = normalized.replace(/^0x/, '');
+
+ // EVM address: 40 hex chars
+ if (hexOnly.length === 40) {
+ const base = await resolveApiBaseUrl();
+ // Check if this is a COA (has linked Flow address)
+ const coaRes = await fetch(`${base}/flow/v1/coa/${normalized}`).catch(() => null);
+ let flowAddress: string | null = null;
+ if (coaRes?.ok) {
+ const json = await coaRes.json().catch(() => null);
+ flowAddress = json?.data?.[0]?.flow_address ?? null;
+ }
+ return {
+ account: null,
+ initialTransactions: [],
+ initialNextCursor: '',
+ isEVM: true,
+ isCOA: !!flowAddress,
+ evmAddress: normalized,
+ flowAddress,
+ };
+ }
+
+ // Cadence address: <= 16 hex chars — existing logic below (unchanged)
+ // ... rest of existing loader code ...
+```
+
+- [ ] **Step 2: Update the component to render EVMAccountPage for EVM addresses**
+
+In the main component function, add a branch at the top:
+
+```typescript
+function AccountPage() {
+ const data = Route.useLoaderData();
+
+ // EVM address → render EVM account page
+ if (data.isEVM) {
+ return (
+
+ {/* Header */}
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/app/components/evm/EVMAccountPage.tsx
+git commit -m "feat(frontend): create EVMAccountPage with header, tabs, and skeleton loading"
+```
+
+### Task 11: Create EVMTransactionList Component
+
+**Files:**
+- Create: `frontend/app/components/evm/EVMTransactionList.tsx`
+
+- [ ] **Step 1: Create component**
+
+```typescript
+import { useState, useEffect, useCallback } from 'react';
+import { Link } from '@tanstack/react-router';
+import { getEVMAddressTransactions } from '@/api/evm';
+import type { BSTransaction, BSPageParams } from '@/types/blockscout';
+import { formatWei, truncateHash, txStatusLabel } from '@/lib/evmUtils';
+import { LoadMorePagination } from '@/components/LoadMorePagination';
+import { formatRelativeTime } from '@/lib/time';
+
+interface EVMTransactionListProps {
+ address: string;
+}
+
+export function EVMTransactionList({ address }: EVMTransactionListProps) {
+ const [txs, setTxs] = useState
+
+
+ {/* Tabs */}
+
+
+
+ + EVM Address +
+ {isCOA && ( + + COA + + )} + {addressInfo?.is_contract && ( + + Contract + + )} +
+ {address}
+
+
+ {/* COA link to Flow address */}
+ {flowAddress && (
+
+ Linked Flow Address:
+
+ {flowAddress}
+
+
+ )}
+
+ {/* Balance & stats */}
+ {loading ? (
+
+
+
+
+ ) : error ? (
+
+ {error}
+
+ ) : addressInfo && (
+
+ Balance: {formatWei(addressInfo.coin_balance)} FLOW
+ Transactions: {addressInfo.transactions_count.toLocaleString()}
+
+ )}
+
+
+
+ {/* Tab content */}
+ {activeTab === 'transactions' &&
+ {tabs.filter(t => t.show !== false).map((tab) => (
+
+ ))}
+
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ))}
+
+ );
+ }
+
+ if (error) {
+ return {error}
;
+ }
+
+ if (txs.length === 0) {
+ return No transactions found.
;
+ }
+
+ return (
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/app/components/evm/EVMTransactionList.tsx
+git commit -m "feat(frontend): create EVMTransactionList with load-more pagination"
+```
+
+### Task 12: Create EVMInternalTxList Component
+
+**Files:**
+- Create: `frontend/app/components/evm/EVMInternalTxList.tsx`
+
+- [ ] **Step 1: Create component**
+
+```typescript
+import { useState, useEffect, useCallback } from 'react';
+import { Link } from '@tanstack/react-router';
+import { getEVMAddressInternalTxs, getEVMTransactionInternalTxs } from '@/api/evm';
+import type { BSInternalTransaction, BSPageParams } from '@/types/blockscout';
+import { formatWei, truncateHash, internalTxTypeLabel } from '@/lib/evmUtils';
+import { LoadMorePagination } from '@/components/LoadMorePagination';
+
+interface EVMInternalTxListProps {
+ address?: string;
+ txHash?: string;
+}
+
+export function EVMInternalTxList({ address, txHash }: EVMInternalTxListProps) {
+ const [items, setItems] = useState
+
+
+
+
+ | Tx Hash | +Method | +Block | +Age | +From | +To | +Value | +Status | +
|---|---|---|---|---|---|---|---|
| + + {truncateHash(tx.hash)} + + | ++ {tx.method ? ( + + {tx.method} + + ) : ( + — + )} + | ++ {tx.block_number} + | ++ {formatRelativeTime(tx.timestamp)} + | ++ + {truncateHash(tx.from.hash)} + + | ++ {tx.to ? ( + + {truncateHash(tx.to.hash)} + + ) : ( + Contract Create + )} + | ++ {formatWei(tx.value)} FLOW + | ++ + {status.label} + + | +
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+ );
+ }
+
+ if (error) return {error}
;
+ if (items.length === 0) return No internal transactions found.
;
+
+ return (
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/app/components/evm/EVMInternalTxList.tsx
+git commit -m "feat(frontend): create EVMInternalTxList component"
+```
+
+### Task 13: Create EVMTokenTransfers + EVMTokenHoldings Components
+
+**Files:**
+- Create: `frontend/app/components/evm/EVMTokenTransfers.tsx`
+- Create: `frontend/app/components/evm/EVMTokenHoldings.tsx`
+
+- [ ] **Step 1: Create EVMTokenTransfers**
+
+```typescript
+import { useState, useEffect, useCallback } from 'react';
+import { Link } from '@tanstack/react-router';
+import { getEVMAddressTokenTransfers, getEVMTransactionTokenTransfers } from '@/api/evm';
+import type { BSTokenTransfer, BSPageParams } from '@/types/blockscout';
+import { formatWei, truncateHash } from '@/lib/evmUtils';
+import { LoadMorePagination } from '@/components/LoadMorePagination';
+import { formatRelativeTime } from '@/lib/time';
+
+interface EVMTokenTransfersProps {
+ address?: string;
+ txHash?: string;
+}
+
+export function EVMTokenTransfers({ address, txHash }: EVMTokenTransfersProps) {
+ const [items, setItems] = useState
+
+
+
+
+ | Type | +From | +To | +Value | +Gas Used | +Result | +
|---|---|---|---|---|---|
| + + {internalTxTypeLabel(itx.type, itx.call_type)} + + | ++ + {truncateHash(itx.from.hash)} + + | ++ {itx.to ? ( + + {truncateHash(itx.to.hash)} + + ) : itx.created_contract ? ( + + {truncateHash(itx.created_contract.hash)} (new) + + ) : ( + — + )} + | +{formatWei(itx.value)} FLOW | +{Number(itx.gas_used).toLocaleString()} | ++ {itx.error ? ( + {itx.error} + ) : ( + Success + )} + | +
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+ );
+ }
+ if (error) return {error}
;
+ if (items.length === 0) return No token transfers found.
;
+
+ return (
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Create EVMTokenHoldings**
+
+```typescript
+import { useState, useEffect } from 'react';
+import { Link } from '@tanstack/react-router';
+import { getEVMAddressTokenBalances } from '@/api/evm';
+import type { BSTokenBalance } from '@/types/blockscout';
+import { formatWei } from '@/lib/evmUtils';
+
+interface EVMTokenHoldingsProps {
+ address: string;
+}
+
+export function EVMTokenHoldings({ address }: EVMTokenHoldingsProps) {
+ const [balances, setBalances] = useState
+
+
+
+
+ | Tx Hash | +Age | +From | +To | +Token | +Amount | +
|---|---|---|---|---|---|
| + + {truncateHash(transfer.tx_hash)} + + | +{formatRelativeTime(transfer.timestamp)} | ++ + {truncateHash(transfer.from.hash)} + + | ++ + {truncateHash(transfer.to.hash)} + + | +
+
+ {transfer.token.icon_url &&
+ |
+ {amount} | +
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+ );
+ }
+ if (error) return {error}
;
+ if (balances.length === 0) return No token holdings found.
;
+
+ return (
+
+
+
+
+
+ );
+}
+```
+
+- [ ] **Step 3: Verify frontend builds**
+
+Run: `cd frontend && npx tsc --noEmit`
+Expected: Pass (or only unrelated errors)
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/app/components/evm/EVMTokenTransfers.tsx frontend/app/components/evm/EVMTokenHoldings.tsx
+git commit -m "feat(frontend): create EVMTokenTransfers and EVMTokenHoldings components"
+```
+
+---
+
+## Chunk 5: EVM Transaction Detail Page
+
+### Task 14: Update TX Route to Detect EVM Hashes
+
+**Files:**
+- Modify: `frontend/app/routes/txs/$txId.tsx`
+
+- [ ] **Step 1: Add parallel EVM lookup to the loader**
+
+In the `txs/$txId.tsx` loader, after the existing Cadence transaction fetch, add a fallback EVM lookup. The existing loader tries to fetch from the local API. If it returns 404 and the hash looks like an EVM hash (`0x` + 64 hex), try the EVM endpoint.
+
+Find where the loader handles a failed/empty Cadence transaction response and add:
+
+```typescript
+// If Cadence lookup failed and this looks like an EVM hash, try Blockscout
+if (!transaction && /^0x[0-9a-fA-F]{64}$/.test(txId)) {
+ try {
+ const baseUrl = await resolveApiBaseUrl();
+ const evmRes = await fetch(`${baseUrl}/flow/evm/transaction/${txId}`);
+ if (evmRes.ok) {
+ const evmTx = await evmRes.json();
+ return { transaction: null, evmTransaction: evmTx, isEVM: true, error: null };
+ }
+ } catch {}
+}
+
+// Note: For better performance, consider firing both Cadence and EVM lookups
+// in parallel with Promise.allSettled when the hash is 0x-prefixed.
+// The sequential approach above is simpler but adds latency for EVM-only txs.
+```
+
+- [ ] **Step 2: Add EVM rendering branch in the component**
+
+At the top of the component function, before existing Cadence rendering:
+
+```typescript
+if (data.isEVM && data.evmTransaction) {
+ return | Token | +Type | +Balance | +
|---|---|---|
|
+
+ {bal.token.icon_url &&
+
+ {bal.token.name ?? 'Unknown'}
+ {bal.token.symbol && ({bal.token.symbol})}
+
+ |
+ + + {bal.token.type} + + | ++ {bal.token.type === 'ERC-20' + ? formatWei(bal.value, decimals, 6) + : bal.value} + | +
+ {/* Header */}
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/app/components/evm/EVMTxDetail.tsx
+git commit -m "feat(frontend): create EVMTxDetail page with overview, decoded input, and sub-tabs"
+```
+
+### Task 16: Create EVMLogsList Component
+
+**Files:**
+- Create: `frontend/app/components/evm/EVMLogsList.tsx`
+
+- [ ] **Step 1: Create component**
+
+```typescript
+import { useState, useEffect, useCallback } from 'react';
+import { Link } from '@tanstack/react-router';
+import { getEVMTransactionLogs } from '@/api/evm';
+import type { BSLog, BSPageParams } from '@/types/blockscout';
+import { truncateHash } from '@/lib/evmUtils';
+import { LoadMorePagination } from '@/components/LoadMorePagination';
+
+interface EVMLogsListProps {
+ txHash: string;
+}
+
+export function EVMLogsList({ txHash }: EVMLogsListProps) {
+ const [logs, setLogs] = useState
+
+
+ {/* Overview */}
+ + EVM Transaction +
+
+ {tx.hash}
+
+
+
+
+ {/* Sub-tabs */}
+
+
+
+ {/* Decoded Input */}
+ {tx.decoded_input && (
+
+ Status:
+ {status.label}
+
+
+ Block:
+ {tx.block_number}
+
+
+ Timestamp:
+ {formatRelativeTime(tx.timestamp)}
+
+
+ Type:
+ {tx.type === 2 ? 'EIP-1559' : tx.type === 1 ? 'Access List' : 'Legacy'}
+
+
+ From:
+
+ {truncateHash(tx.from.hash, 10, 8)}
+
+
+
+ To:
+ {tx.to ? (
+ <>
+
+ {truncateHash(tx.to.hash, 10, 8)}
+
+
+
+ Value:
+ {formatWei(tx.value)} FLOW
+
+
+ Gas:
+ {formatGas(tx.gas_used)} / {formatGas(tx.gas_limit)}
+
+
+ Gas Price:
+ {formatWei(tx.gas_price, 9, 4)} Gwei
+
+
+ Nonce:
+ {tx.nonce}
+
+
+
+ )}
+
+ {/* Raw Input (when not decoded) */}
+ {!tx.decoded_input && tx.raw_input && tx.raw_input !== '0x' && (
+ Input Data (Decoded):
+
+
+ {tx.decoded_input.method_call}
+ {tx.decoded_input.parameters.map((p, i) => (
+
+ {p.name}: {p.value}
+
+ ))}
+
+
+ )}
+
+ {/* Revert Reason */}
+ {tx.revert_reason && (
+ Input Data (Raw):
+
+ {tx.raw_input}
+
+
+
+ )}
+ Revert Reason:
+
+ {tx.revert_reason}
+
+
+
+
+ {activeTab === 'internal' &&
+ {[
+ { key: 'internal' as TxTab, label: 'Internal Transactions' },
+ { key: 'logs' as TxTab, label: 'Logs' },
+ { key: 'token-transfers' as TxTab, label: 'Token Transfers' },
+ ].map((tab) => (
+
+ ))}
+
+
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+ );
+ }
+ if (error) return {error}
;
+ if (logs.length === 0) return No logs found.
;
+
+ return (
+
+ {logs.map((log) => (
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/app/components/evm/EVMLogsList.tsx
+git commit -m "feat(frontend): create EVMLogsList component with decoded event display"
+```
+
+---
+
+## Chunk 6: Search Enhancement
+
+### Task 17: Update Search Hook for EVM
+
+**Files:**
+- Modify: `frontend/app/hooks/useSearch.ts`
+- Modify: `frontend/app/api.ts` (add EVM search types)
+
+- [ ] **Step 1: Add EVM address pattern to useSearch**
+
+In `useSearch.ts`, add a new pattern after the existing `HEX_40`:
+
+```typescript
+const EVM_ADDR = /^0x[0-9a-fA-F]{40}$/; // 0x-prefixed EVM address
+```
+
+Update the `detectPattern` function. Before the existing `HEX_40` check, add:
+
+```typescript
+// EVM address with 0x prefix
+if (EVM_ADDR.test(q)) {
+ return { mode: 'idle', matches: [{ type: 'evm-addr', label: 'EVM Address', value: q, route: `/accounts/${q}` }] };
+}
+```
+
+Update the existing `HEX_40` match to label as "EVM Address" instead of "COA Address":
+
+```typescript
+if (HEX_40.test(q)) {
+ return { mode: 'idle', matches: [{ type: 'evm-addr', label: 'EVM Address', value: q, route: `/accounts/0x${q}` }] };
+}
+```
+
+- [ ] **Step 2: Add parallel EVM search to fuzzy mode**
+
+In the fuzzy search section of `useSearch.ts`, fire both local and EVM searches in parallel:
+
+```typescript
+// Inside the debounced fuzzy search callback:
+const [localResults, evmResults] = await Promise.allSettled([
+ searchAll(q, 3, controller.signal),
+ searchEVM(q, controller.signal),
+]);
+
+const fuzzy = localResults.status === 'fulfilled' ? localResults.value : { contracts: [], tokens: [], nft_collections: [] };
+const evm = evmResults.status === 'fulfilled' ? evmResults.value : { items: [] };
+
+setState({
+ mode: 'fuzzy',
+ fuzzyResults: fuzzy,
+ evmResults: evm.items ?? [],
+ // ...
+});
+```
+
+Add `searchEVM` import: `import { searchEVM } from '@/api/evm';`
+
+- [ ] **Step 3: Update SearchState type to include EVM results**
+
+```typescript
+interface SearchState {
+ mode: 'idle' | 'quick-match' | 'fuzzy';
+ quickMatches: QuickMatchItem[];
+ fuzzyResults: SearchAllResponse | null;
+ evmResults: BSSearchItem[]; // NEW
+ isLoading: boolean;
+ error: string | null;
+}
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/app/hooks/useSearch.ts
+git commit -m "feat(frontend): add EVM address pattern and parallel Blockscout search"
+```
+
+### Task 18: Update SearchDropdown for EVM Results
+
+**Files:**
+- Modify: `frontend/app/components/SearchDropdown.tsx`
+
+- [ ] **Step 1: Add EVM results section to fuzzy mode rendering**
+
+In the fuzzy results rendering section, after the existing sections (Contracts, Tokens, NFT Collections), add:
+
+```typescript
+{/* EVM Results */}
+{state.evmResults && state.evmResults.length > 0 && (
+
+
+ ))}
+
+ Log Index: {log.index}
+
+ Address:{' '}
+
+ {truncateHash(log.address.hash)}
+
+ {log.address.name && ({log.address.name})}
+
+
+
+ {/* Decoded log */}
+ {log.decoded && (
+
+
+ )}
+
+ {/* Topics */}
+ {log.decoded.method_call}
+ {log.decoded.parameters.map((p, i) => (
+
+ {p.name} ({p.type}): {p.value}
+
+ ))}
+
+ Topics:
+ {log.topics.map((topic, i) => (
+
+
+ {/* Data */}
+ {log.data && log.data !== '0x' && (
+
+ [{i}] {topic}
+
+ ))}
+
+ Data:
+
+ )}
+
+ {log.data}
+
+
+
+)}
+```
+
+- [ ] **Step 2: Update Header.tsx for EVM address handling**
+
+In `Header.tsx`, update the search-result navigation logic for the `coa` / `evm-addr` type. Remove the old COA resolution logic and navigate directly:
+
+```typescript
+// Replace the COA resolution block with:
+if (match.type === 'evm-addr') {
+ navigate({ to: '/accounts/$address', params: { address: match.value.startsWith('0x') ? match.value : `0x${match.value}` } });
+ return;
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add frontend/app/components/SearchDropdown.tsx frontend/app/components/Header.tsx
+git commit -m "feat(frontend): display EVM search results with badge and update address navigation"
+```
+
+---
+
+## Chunk 7: COA Account Page (Dual View)
+
+### Task 19: Create COAAccountPage Component
+
+**Files:**
+- Create: `frontend/app/components/evm/COAAccountPage.tsx`
+
+This is the dual-view page for Cadence Owned Accounts — shows both Cadence and EVM tabs.
+
+- [ ] **Step 1: Create component**
+
+```typescript
+import { useState, useEffect } from 'react';
+import { Link } from '@tanstack/react-router';
+import { CopyButton } from '@/components/animate-ui/components/buttons/copy';
+import { EVMTransactionList } from './EVMTransactionList';
+import { EVMInternalTxList } from './EVMInternalTxList';
+import { EVMTokenTransfers } from './EVMTokenTransfers';
+import { EVMTokenHoldings } from './EVMTokenHoldings';
+import { getEVMAddress } from '@/api/evm';
+import type { BSAddress } from '@/types/blockscout';
+import { formatWei } from '@/lib/evmUtils';
+
+// Import existing Cadence tab components
+import { AccountActivityTab } from '@/components/account/AccountActivityTab';
+import { AccountTokensTab } from '@/components/account/AccountTokensTab';
+import { AccountNFTsTab } from '@/components/account/AccountNFTsTab';
+import { AccountContractsTab } from '@/components/account/AccountContractsTab';
+
+type ViewMode = 'cadence' | 'evm';
+type CadenceTab = 'activity' | 'tokens' | 'nfts' | 'contracts';
+type EVMTab = 'transactions' | 'internal' | 'token-transfers' | 'holdings';
+
+interface COAAccountPageProps {
+ evmAddress: string;
+ flowAddress: string;
+ cadenceAccount: any; // existing Cadence account data from loader
+}
+
+export function COAAccountPage({ evmAddress, flowAddress, cadenceAccount }: COAAccountPageProps) {
+ const [viewMode, setViewMode] = useState
+ EVM
+
+ {state.evmResults.map((item, i) => {
+ const route = item.type === 'address'
+ ? `/accounts/${item.address}`
+ : item.type === 'transaction'
+ ? `/txs/${item.address}`
+ : item.url; // fallback to Blockscout URL
+ return (
+
+ {/* Dual Address Header */}
+
+ );
+}
+```
+
+- [ ] **Step 2: Wire COAAccountPage into the account route**
+
+In `accounts/$address.tsx`, update the EVM rendering branch to use COAAccountPage for COA addresses:
+
+```typescript
+if (data.isEVM) {
+ if (data.isCOA && data.flowAddress) {
+ return (
+
+
+
+ {/* View Mode Switcher */}
+
+
+
+ + COA Account +
+ + Cadence Owned Account + +
+
+
+ {evmInfo && (
+
+ Flow:
+
+ {flowAddress}
+
+
+
+ EVM:
+ {evmAddress}
+
+
+ EVM Balance: {formatWei(evmInfo.coin_balance)} FLOW
+
+ )}
+
+
+
+
+
+ {/* Cadence View */}
+ {viewMode === 'cadence' && (
+ <>
+
+
+ {cadenceTab === 'activity' &&
+ {(['activity', 'tokens', 'nfts', 'contracts'] as CadenceTab[]).map((tab) => (
+
+ ))}
+
+
+
+ {evmTab === 'transactions' &&
+ {([
+ { key: 'transactions', label: 'Transactions' },
+ { key: 'internal', label: 'Internal Txs' },
+ { key: 'token-transfers', label: 'Token Transfers' },
+ { key: 'holdings', label: 'Token Holdings' },
+ ] as { key: EVMTab; label: string }[]).map((tab) => (
+
+ ))}
+
+
+ {/* Header */}
+
+ );
+}
+```
+
+- [ ] **Step 2: Verify file exists**
+
+Run: `ls runner/src/interact/InteractPage.tsx`
+
+- [ ] **Step 3: Commit (will not compile yet — dependencies missing)**
+
+```bash
+git add runner/src/interact/InteractPage.tsx
+git commit -m "feat(runner): add InteractPage shell component"
+```
+
+---
+
+### Task 5: Create the ContractLoader component
+
+**Files:**
+- Create: `runner/src/interact/ContractLoader.tsx`
+
+Handles address input, network selector, Blockscout fetch, and manual ABI paste fallback.
+
+- [ ] **Step 1: Create the file**
+
+```tsx
+// runner/src/interact/ContractLoader.tsx
+import { useState, useCallback, useEffect } from 'react';
+import { Loader2, Download, AlertCircle, ChevronDown } from 'lucide-react';
+import type { Abi } from 'viem';
+
+interface ContractLoaderProps {
+ initialAddress: string;
+ network: 'mainnet' | 'testnet';
+ onNetworkChange: (n: 'mainnet' | 'testnet') => void;
+ onContractLoaded: (address: `0x${string}`, name: string, abi: Abi) => void;
+}
+
+const SERVER_BASE = ''; // Same-origin proxy
+
+function validateAbi(json: unknown): json is Abi {
+ if (!Array.isArray(json)) return false;
+ return json.every((item: any) => item && typeof item.type === 'string');
+}
+
+export default function ContractLoader({
+ initialAddress,
+ network,
+ onNetworkChange,
+ onContractLoaded,
+}: ContractLoaderProps) {
+ const [address, setAddress] = useState(initialAddress);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+ const [showManualAbi, setShowManualAbi] = useState(false);
+ const [manualAbi, setManualAbi] = useState('');
+
+ // Auto-fetch if initialAddress is provided
+ useEffect(() => {
+ if (initialAddress) {
+ handleFetch(initialAddress);
+ }
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const handleFetch = useCallback(async (addr?: string) => {
+ const target = (addr || address).trim();
+ if (!target) return;
+
+ // Validate address format (40 hex chars)
+ const clean = target.startsWith('0x') ? target.slice(2) : target;
+ if (clean.length !== 40 || !/^[0-9a-fA-F]+$/.test(clean)) {
+ setError('Invalid EVM address. Must be 40 hex characters.');
+ return;
+ }
+
+ const fullAddr = target.startsWith('0x') ? target : `0x${target}`;
+
+ setLoading(true);
+ setError('');
+ setShowManualAbi(false);
+
+ try {
+ const res = await fetch(`${SERVER_BASE}/api/evm-contracts/${fullAddr}?network=${network}`);
+ if (!res.ok) throw new Error('Server error');
+ const data = await res.json();
+
+ if (data.verified && data.abi) {
+ onContractLoaded(fullAddr as `0x${string}`, data.name || 'Contract', data.abi);
+ } else if (data.verified && !data.abi) {
+ setError('Contract is verified but ABI not available. Paste ABI manually.');
+ setShowManualAbi(true);
+ } else {
+ setError('No verified contract found at this address. You can paste an ABI manually.');
+ setShowManualAbi(true);
+ }
+ } catch (e: unknown) {
+ setError(e instanceof Error ? e.message : 'Failed to fetch contract');
+ } finally {
+ setLoading(false);
+ }
+ }, [address, network, onContractLoaded]);
+
+ const handleManualAbiSubmit = useCallback(() => {
+ try {
+ const parsed = JSON.parse(manualAbi);
+ if (!validateAbi(parsed)) {
+ setError('Invalid ABI format. Paste a valid JSON ABI array.');
+ return;
+ }
+ const fullAddr = address.trim().startsWith('0x') ? address.trim() : `0x${address.trim()}`;
+ onContractLoaded(fullAddr as `0x${string}`, 'Custom Contract', parsed);
+ } catch {
+ setError('Invalid JSON. Please check your ABI.');
+ }
+ }, [manualAbi, address, onContractLoaded]);
+
+ return (
+
+ { e.preventDefault(); window.location.href = '/editor'; }}
+ >
+
+
+ {/* Content */}
+ Contract Interact
+
+
+
+ {/* Contract Loader */}
+
+
+
+ {/* Address input */}
+ setAddress(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && handleFetch()}
+ placeholder="0x... (EVM contract address)"
+ className="flex-1 bg-zinc-800 text-sm text-zinc-200 px-3 py-2.5 rounded-lg border border-zinc-600 focus:border-zinc-500 focus:outline-none placeholder:text-zinc-600 font-mono"
+ autoFocus
+ />
+
+ {/* Network selector */}
+
+
+ {/* Error */}
+ {error && (
+
+
+
+
+ {/* Load button */}
+
+
+
+ )}
+
+ {/* Manual ABI input */}
+ {showManualAbi && (
+
+