d-bis/explorer-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: explorer API, wallet, CCIP scripts, and config refresh

Browse Source 
- Backend REST/gateway/track routes, analytics, Blockscout proxy paths.
- Frontend wallet and liquidity surfaces; MetaMask token list alignment.
- Deployment docs, verification scripts, address inventory updates.

Check: go build ./... under backend/ (pass).
Made-with: Cursor
This commit is contained in:
defiQUG
2026-04-07 23:22:12 -07:00
parent d931be8e19
commit 6eef6b07f6
224 changed files with 19671 additions and 3291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/common/Button.tsx
View File

@@ -1,37 +1 @@
import { ButtonHTMLAttributes, ReactNode } from 'react'
import clsx from 'clsx'
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'danger'
size?: 'sm' | 'md' | 'lg'
children: ReactNode
}
export function Button({
variant = 'primary',
size = 'md',
className,
children,
...props
}: ButtonProps) {
return (
<button
className={clsx(
'font-medium rounded-lg transition-colors',
{
'bg-primary-600 text-white hover:bg-primary-700': variant === 'primary',
'bg-gray-200 text-gray-900 hover:bg-gray-300': variant === 'secondary',
'bg-red-600 text-white hover:bg-red-700': variant === 'danger',
'px-3 py-1.5 text-sm': size === 'sm',
'px-4 py-2 text-base': size === 'md',
'px-6 py-3 text-lg': size === 'lg',
},
className
)}
{...props}
>
{children}
</button>
)
}
export { Button } from '@/libs/frontend-ui-primitives/Button'

28
frontend/src/components/common/Card.tsx
View File

@@ -1,27 +1 @@
import { ReactNode } from 'react'
import clsx from 'clsx'
interface CardProps {
children: ReactNode
className?: string
title?: string
}
export function Card({ children, className, title }: CardProps) {
return (
<div
className={clsx(
'bg-white dark:bg-gray-800 rounded-lg shadow-md p-6',
className
)}
>
{title && (
<h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
{title}
</h3>
)}
{children}
</div>
)
}
export { Card } from '@/libs/frontend-ui-primitives/Card'

34
frontend/src/components/common/DetailRow.tsx Normal file
View File

@@ -0,0 +1,34 @@
import type { ReactNode } from 'react'
import clsx from 'clsx'
interface DetailRowProps {
label: string
children: ReactNode
className?: string
labelClassName?: string
valueClassName?: string
}
export function DetailRow({
label,
children,
className,
labelClassName,
valueClassName,
}: DetailRowProps) {
return (
<div className={clsx('flex flex-col gap-1.5 sm:flex-row sm:items-start sm:gap-4', className)}>
<dt
className={clsx(
'text-sm font-semibold text-gray-700 dark:text-gray-300 sm:w-36 sm:shrink-0',
labelClassName,
)}
>
{label}
</dt>
<dd className={clsx('min-w-0 text-sm text-gray-900 dark:text-gray-100', valueClassName)}>
{children}
</dd>
</div>
)
}

13
frontend/src/components/common/ExplorerChrome.tsx Normal file
View File

@@ -0,0 +1,13 @@
import type { ReactNode } from 'react'
import Navbar from './Navbar'
import Footer from './Footer'
export default function ExplorerChrome({ children }: { children: ReactNode }) {
return (
<div className="flex min-h-screen flex-col bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<Navbar />
<div className="flex-1">{children}</div>
<Footer />
</div>
)
}

21
frontend/src/components/common/Footer.tsx
View File

@@ -8,10 +8,10 @@ export default function Footer() {
return (
<footer className="mt-auto border-t border-gray-200 dark:border-gray-700 bg-white/90 dark:bg-gray-900/90 backdrop-blur">
<div className="container mx-auto px-4 py-8">
<div className="grid gap-6 md:grid-cols-[1.5fr_1fr_1fr]">
<div className="space-y-3">
<div className="text-lg font-semibold text-gray-900 dark:text-white">
<div className="container mx-auto px-4 py-6 sm:py-8">
<div className="grid gap-4 sm:gap-6 md:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)_minmax(0,1fr)]">
<div className="space-y-3 rounded-xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-800 dark:bg-gray-900/40 md:border-0 md:bg-transparent md:p-0">
<div className="text-base font-semibold text-gray-900 dark:text-white sm:text-lg">
SolaceScanScout
</div>
<p className="max-w-xl text-sm leading-6 text-gray-600 dark:text-gray-400">
@@ -24,13 +24,16 @@ export default function Footer() {
</p>
</div>
<div>
<div className="rounded-xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-800 dark:bg-gray-900/40 md:border-0 md:bg-transparent md:p-0">
<div className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
Resources
</div>
<ul className="space-y-2 text-sm">
<li><a className={footerLinkClass} href="/docs.html">Documentation</a></li>
<li><Link className={footerLinkClass} href="/bridge">Bridge Monitoring</Link></li>
<li><Link className={footerLinkClass} href="/liquidity">Liquidity Access</Link></li>
<li><Link className={footerLinkClass} href="/routes">Routes</Link></li>
<li><Link className={footerLinkClass} href="/more">More Tools</Link></li>
<li><Link className={footerLinkClass} href="/addresses">Addresses</Link></li>
<li><Link className={footerLinkClass} href="/watchlist">Watchlist</Link></li>
<li><a className={footerLinkClass} href="/privacy.html">Privacy Policy</a></li>
@@ -39,7 +42,7 @@ export default function Footer() {
</ul>
</div>
<div>
<div className="rounded-xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-800 dark:bg-gray-900/40 md:border-0 md:bg-transparent md:p-0">
<div className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
Contact
</div>
@@ -56,6 +59,12 @@ export default function Footer() {
explorer.d-bis.org/snap/
</a>
</p>
<p>
Command center:{' '}
<a className={footerLinkClass} href="/chain138-command-center.html" target="_blank" rel="noopener noreferrer">
Chain 138 visual map
</a>
</p>
<p className="text-xs leading-5 text-gray-500 dark:text-gray-500">
Questions about the explorer, chain metadata, route discovery, or liquidity access
can be sent to the support mailbox above.

50
frontend/src/components/common/Navbar.tsx
View File

@@ -86,26 +86,42 @@ export default function Navbar() {
const [exploreOpen, setExploreOpen] = useState(false)
const [toolsOpen, setToolsOpen] = useState(false)
const toggleMobileMenu = () => {
setMobileMenuOpen((open) => {
const nextOpen = !open
if (!nextOpen) {
setExploreOpen(false)
setToolsOpen(false)
}
return nextOpen
})
}
return (
<nav className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
<div className="container mx-auto px-4">
<div className="flex items-center justify-between h-16">
<div className="flex items-center gap-4 md:gap-8">
<div className="flex h-14 items-center justify-between sm:h-16">
<div className="flex min-w-0 items-center gap-3 md:gap-8">
<Link
href="/"
className="group inline-flex flex-col rounded-xl px-3 py-2 text-xl font-bold text-primary-600 transition-colors hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-gray-700/70"
className="group inline-flex max-w-[calc(100vw-5rem)] flex-col rounded-xl px-2 py-1.5 text-base font-bold text-primary-600 transition-colors hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-gray-700/70 sm:max-w-none sm:px-3 sm:py-2 sm:text-xl"
onClick={() => setMobileMenuOpen(false)}
aria-label="Go to explorer home"
>
<span className="flex items-center gap-2">
<span className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-primary-600 text-white shadow-sm transition-transform group-hover:-translate-y-0.5 dark:bg-primary-500">
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
<span className="flex min-w-0 items-center gap-2">
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary-600 text-white shadow-sm transition-transform group-hover:-translate-y-0.5 dark:bg-primary-500 sm:h-8 sm:w-8">
<svg className="h-3.5 w-3.5 sm:h-4 sm:w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
<path d="M12 2.5 3.5 6.5v11l8.5 4 8.5-4v-11L12 2.5Zm0 2.24 6.44 3.03L12 10.8 5.56 7.77 12 4.74Zm-7 4.63L11 13.1v6.07L5 16.4V9.37Zm9 9.8v-6.07l6-2.92v6.03l-6 2.96Z" />
</svg>
</span>
<span>SolaceScanScout</span>
<span className="min-w-0 truncate">
<span className="sm:hidden">SolaceScan</span>
<span className="hidden sm:inline">SolaceScanScout</span>
</span>
</span>
<span className="mt-0.5 hidden text-xs font-normal text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 sm:block">
The Defi Oracle Meta Explorer
</span>
<span className="mt-0.5 text-xs font-normal text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200">The Defi Oracle Meta Explorer</span>
</Link>
<div className="hidden md:flex items-center gap-1">
<NavDropdown
@@ -117,6 +133,12 @@ export default function Navbar() {
<DropdownItem href="/transactions" icon={<span className="text-gray-400">⇄</span>}>Transactions</DropdownItem>
<DropdownItem href="/addresses" icon={<span className="text-gray-400">⌗</span>}>Addresses</DropdownItem>
</NavDropdown>
<Link
href="/wallet"
className={`hidden md:inline-flex items-center px-3 py-2 rounded-md ${pathname.startsWith('/wallet') ? navLinkActive : navLink}`}
>
Wallet
</Link>
<NavDropdown
label="Tools"
icon={<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>}
@@ -127,6 +149,10 @@ export default function Navbar() {
<DropdownItem href="/watchlist">Watchlist</DropdownItem>
<DropdownItem href="/wallet">Wallet</DropdownItem>
<DropdownItem href="/liquidity">Liquidity</DropdownItem>
<DropdownItem href="/bridge">Bridge</DropdownItem>
<DropdownItem href="/routes">Routes</DropdownItem>
<DropdownItem href="/more">More</DropdownItem>
<DropdownItem href="/chain138-command-center.html" external>Command Center</DropdownItem>
</NavDropdown>
</div>
</div>
@@ -134,7 +160,7 @@ export default function Navbar() {
<button
type="button"
className="p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
onClick={() => setMobileMenuOpen((o) => !o)}
onClick={toggleMobileMenu}
aria-expanded={mobileMenuOpen}
aria-label="Toggle menu"
>
@@ -147,7 +173,7 @@ export default function Navbar() {
</div>
</div>
{mobileMenuOpen && (
<div className="md:hidden py-3 border-t border-gray-200 dark:border-gray-700">
<div className="border-t border-gray-200 py-2 pb-3 dark:border-gray-700 md:hidden">
<div className="flex flex-col gap-1">
<Link href="/" className={`px-3 py-2.5 rounded-md ${pathname === '/' ? navLinkActive : navLink}`} onClick={() => setMobileMenuOpen(false)}>Home</Link>
<div className="relative">
@@ -176,6 +202,10 @@ export default function Navbar() {
<li><Link href="/watchlist" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Watchlist</Link></li>
<li><Link href="/wallet" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Wallet</Link></li>
<li><Link href="/liquidity" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Liquidity</Link></li>
<li><Link href="/bridge" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Bridge</Link></li>
<li><Link href="/routes" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Routes</Link></li>
<li><Link href="/more" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>More</Link></li>
<li><a href="/chain138-command-center.html" className={`block px-3 py-2 rounded-md ${navLink}`} target="_blank" rel="noopener noreferrer" onClick={() => setMobileMenuOpen(false)}>Command Center</a></li>
</ul>
)}
</div>

59
frontend/src/components/common/Table.tsx
View File

@@ -1,58 +1 @@
import { ReactNode } from 'react'
import clsx from 'clsx'
interface Column<T> {
header: string
accessor: (row: T) => ReactNode
className?: string
}
interface TableProps<T> {
columns: Column<T>[]
data: T[]
className?: string
/** Stable key for each row (e.g. row => row.id or row => row.hash). Falls back to index if not provided. */
keyExtractor?: (row: T) => string | number
}
export function Table<T>({ columns, data, className, keyExtractor }: TableProps<T>) {
return (
<div className={clsx('overflow-x-auto', className)}>
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="bg-gray-50 dark:bg-gray-800">
<tr>
{columns.map((column, index) => (
<th
key={index}
className={clsx(
'px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider',
column.className
)}
>
{column.header}
</th>
))}
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
{data.map((row, rowIndex) => (
<tr key={keyExtractor ? keyExtractor(row) : rowIndex} className="hover:bg-gray-50 dark:hover:bg-gray-800">
{columns.map((column, colIndex) => (
<td
key={colIndex}
className={clsx(
'px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100',
column.className
)}
>
{column.accessor(row)}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
)
}
export { Table } from '@/libs/frontend-ui-primitives/Table'