Add full monorepo: virtual-banker, backend, frontend, docs, scripts, deployment

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/blockchain/Address.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import clsx from 'clsx'
+
+interface AddressProps {
+  address: string
+  chainId?: number
+  showCopy?: boolean
+  showENS?: boolean
+  truncate?: boolean
+  className?: string
+}
+
+export function Address({
+  address,
+  chainId,
+  showCopy = true,
+  showENS = false,
+  truncate = false,
+  className,
+}: AddressProps) {
+  const [copied, setCopied] = useState(false)
+
+  const displayAddress = truncate
+    ? `${address.slice(0, 6)}...${address.slice(-4)}`
+    : address
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(address)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className={clsx('flex items-center gap-2', className)}>
+      <span className="font-mono text-sm">{displayAddress}</span>
+      {showCopy && (
+        <button
+          onClick={handleCopy}
+          className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+          title="Copy address"
+        >
+          {copied ? '✓' : '📋'}
+        </button>
+      )}
+    </div>
+  )
+}
+

frontend/src/components/common/Button.tsx

@@ -0,0 +1,37 @@
+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>
+  )
+}
+

frontend/src/components/common/Card.tsx

@@ -0,0 +1,27 @@
+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>
+  )
+}
+

frontend/src/components/common/Table.tsx

@@ -0,0 +1,56 @@
+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
+}
+
+export function Table<T>({ columns, data, className }: 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={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>
+  )
+}
+

frontend/src/components/wallet/AddToMetaMask.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { useState } from 'react'
+
+const CHAIN_138 = {
+  chainId: '0x8a',
+  chainName: 'DeFi Oracle Meta Mainnet',
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+  rpcUrls: ['https://rpc-http-pub.d-bis.org', 'https://rpc.d-bis.org', 'https://rpc2.d-bis.org'],
+  blockExplorerUrls: ['https://explorer.d-bis.org'],
+}
+
+const CHAIN_MAINNET = {
+  chainId: '0x1',
+  chainName: 'Ethereum Mainnet',
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+  rpcUrls: ['https://eth.llamarpc.com', 'https://rpc.ankr.com/eth', 'https://ethereum.publicnode.com'],
+  blockExplorerUrls: ['https://etherscan.io'],
+}
+
+const CHAIN_ALL_MAINNET = {
+  chainId: '0x9f2c4',
+  chainName: 'ALL Mainnet',
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+  rpcUrls: ['https://mainnet-rpc.alltra.global'],
+  blockExplorerUrls: ['https://alltra.global'],
+}
+
+export function AddToMetaMask() {
+  const [status, setStatus] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const ethereum = typeof window !== 'undefined' ? (window as unknown as { ethereum?: { request: (args: { method: string; params: unknown[] }) => Promise<unknown> } }).ethereum : undefined
+
+  const addChain = async (chain: typeof CHAIN_138) => {
+    setError(null)
+    setStatus(null)
+    if (!ethereum) {
+      setError('MetaMask or another Web3 wallet is not installed.')
+      return
+    }
+    try {
+      await ethereum.request({
+        method: 'wallet_addEthereumChain',
+        params: [chain],
+      })
+      setStatus(`Added ${chain.chainName}. You can switch to it in your wallet.`)
+    } catch (e) {
+      const err = e as { code?: number; message?: string }
+      if (err.code === 4902) {
+        setStatus(`Added ${chain.chainName}. You can switch to it in your wallet.`)
+      } else {
+        setError(err.message || 'Failed to add network')
+      }
+    }
+  }
+
+  // Production (explorer.d-bis.org): same origin; dev: NEXT_PUBLIC_API_URL or localhost
+  const apiBase =
+    typeof window !== 'undefined'
+      ? process.env.NEXT_PUBLIC_API_URL || window.location.origin
+      : process.env.NEXT_PUBLIC_API_URL || 'https://explorer.d-bis.org'
+  const tokenListUrl = apiBase.replace(/\/$/, '') + '/api/config/token-list'
+
+  return (
+    <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 space-y-4">
+      <h2 className="text-lg font-semibold">Add to MetaMask</h2>
+      <p className="text-sm text-gray-600 dark:text-gray-400">
+        Add Chain 138 (DeFi Oracle Meta Mainnet), Ethereum Mainnet, or ALL Mainnet to your wallet. Then add the token list URL in MetaMask Settings so tokens appear automatically.
+      </p>
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          onClick={() => addChain(CHAIN_138)}
+          className="px-4 py-2 rounded bg-primary-600 text-white hover:bg-primary-700 text-sm font-medium"
+        >
+          Add Chain 138
+        </button>
+        <button
+          type="button"
+          onClick={() => addChain(CHAIN_MAINNET)}
+          className="px-4 py-2 rounded bg-gray-600 text-white hover:bg-gray-700 text-sm font-medium"
+        >
+          Add Ethereum Mainnet
+        </button>
+        <button
+          type="button"
+          onClick={() => addChain(CHAIN_ALL_MAINNET)}
+          className="px-4 py-2 rounded bg-gray-600 text-white hover:bg-gray-700 text-sm font-medium"
+        >
+          Add ALL Mainnet
+        </button>
+      </div>
+      <div className="text-sm">
+        <p className="text-gray-600 dark:text-gray-400 mb-1">Token list URL (add in MetaMask Settings → Token lists):</p>
+        <code className="block p-2 rounded bg-gray-100 dark:bg-gray-900 break-all text-xs">{tokenListUrl}</code>
+      </div>
+      {status && <p className="text-sm text-green-600 dark:text-green-400">{status}</p>}
+      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+    </div>
+  )
+}