feat(ui): Ghibli/Miyazaki reskin + Obsidian docs vault + project audit
UI: warm daylight design system (Tailwind v4 @theme palette, gh-* component classes, watercolor grain, Zen Maru Gothic + Klee One fonts), animated SSR-safe GhibliBackground (drifting clouds, meadow hills, soot sprites), and a full reskin of navbar, connect button, dapp page, loan cards, settings modal, and readme. Fixes the bg-white-on-dark loan-card inconsistency. Web3/business logic untouched. Docs: converted docs/ into an Obsidian vault (frontmatter, [[wikilinks]], callouts, Home MOC, folders Architecture/Operations/Audits) and added a full-project audit note (Project Audit 2026-06). Redacted a real leaked Schedy key value from the security audit example (rotate it at Schedy). Also commits the previously-untracked server layer: app/api (cron + tasks routes) and lib (redis, ssrf-guard, task-store). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Siavash Sameni
83
app/api/cron/route.ts
Normal file
83
app/api/cron/route.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { listDueTasks, deleteTask } from '@/lib/task-store';
|
||||
import { sanitizeHeaders } from '@/lib/ssrf-guard';
|
||||
|
||||
const CRON_SECRET = process.env.CRON_SECRET;
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
// Protect cron endpoint: require Authorization header with CRON_SECRET
|
||||
const auth = request.headers.get('authorization') || '';
|
||||
const expected = CRON_SECRET ? `Bearer ${CRON_SECRET}` : '';
|
||||
if (!CRON_SECRET || auth !== expected) {
|
||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
}
|
||||
|
||||
const nowSec = Math.floor(Date.now() / 1000);
|
||||
let tasks: Awaited<ReturnType<typeof listDueTasks>>;
|
||||
try {
|
||||
tasks = await listDueTasks(nowSec);
|
||||
} catch (e: any) {
|
||||
return NextResponse.json({ error: e?.message || 'Failed to fetch tasks' }, { status: 500 });
|
||||
}
|
||||
|
||||
const results: Array<{ id: string; ok: boolean; error?: string }> = [];
|
||||
|
||||
for (const task of tasks) {
|
||||
let ok = false;
|
||||
let lastError: string | undefined;
|
||||
|
||||
for (let attempt = 0; attempt <= task.retries; attempt++) {
|
||||
if (attempt > 0) {
|
||||
await sleep(task.retryInterval);
|
||||
}
|
||||
|
||||
try {
|
||||
const bodyBytes = encodePayload(task.payload);
|
||||
const res = await fetch(task.url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
...sanitizeHeaders(task.headers),
|
||||
'content-type': guessContentType(task.payload),
|
||||
},
|
||||
body: bodyBytes,
|
||||
signal: AbortSignal.timeout(15000),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
ok = true;
|
||||
break;
|
||||
}
|
||||
lastError = `HTTP ${res.status}`;
|
||||
} catch (e: any) {
|
||||
lastError = e?.message || 'Network error';
|
||||
}
|
||||
}
|
||||
|
||||
if (ok) {
|
||||
try {
|
||||
await deleteTask(task.id);
|
||||
} catch {
|
||||
// best-effort cleanup
|
||||
}
|
||||
}
|
||||
|
||||
results.push({ id: task.id, ok, error: ok ? undefined : lastError });
|
||||
}
|
||||
|
||||
return NextResponse.json({ executed: results.length, results });
|
||||
}
|
||||
|
||||
function encodePayload(payload: any): string {
|
||||
if (payload === null || payload === undefined) return '';
|
||||
if (typeof payload === 'string') return payload;
|
||||
return JSON.stringify(payload);
|
||||
}
|
||||
|
||||
function guessContentType(payload: any): string {
|
||||
if (typeof payload === 'string') return 'text/plain';
|
||||
return 'application/json';
|
||||
}
|
||||
|
||||
function sleep(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
19
app/api/tasks/[id]/route.ts
Normal file
19
app/api/tasks/[id]/route.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { deleteTask } from '@/lib/task-store';
|
||||
|
||||
export async function DELETE(
|
||||
_request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
const { id } = await params;
|
||||
if (!id || !id.startsWith('task_')) {
|
||||
return NextResponse.json({ error: 'Invalid task id' }, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteTask(id);
|
||||
return new NextResponse(null, { status: 204 });
|
||||
} catch (e: any) {
|
||||
return NextResponse.json({ error: e?.message || 'Failed to delete task' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
72
app/api/tasks/route.ts
Normal file
72
app/api/tasks/route.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { saveTask, listAllTasks, checkRateLimit } from '@/lib/task-store';
|
||||
import { isAllowedUrl, sanitizeHeaders } from '@/lib/ssrf-guard';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
const ip = request.headers.get('x-forwarded-for')?.split(',')[0]?.trim()
|
||||
?? request.headers.get('x-real-ip')
|
||||
?? 'unknown';
|
||||
const allowed = await checkRateLimit(ip, 30, 3600); // 30 tasks/hour per IP
|
||||
if (!allowed) {
|
||||
return NextResponse.json({ error: 'Rate limit exceeded' }, { status: 429 });
|
||||
}
|
||||
|
||||
let body: any;
|
||||
try {
|
||||
body = await request.json();
|
||||
} catch {
|
||||
return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 });
|
||||
}
|
||||
|
||||
const url = typeof body.url === 'string' ? body.url : '';
|
||||
const executeAt = typeof body.execute_at === 'number' ? body.execute_at : 0;
|
||||
const headers = typeof body.headers === 'object' && body.headers !== null ? body.headers : {};
|
||||
const payload = body.payload ?? null;
|
||||
const retries = typeof body.retries === 'number' ? Math.max(0, Math.min(body.retries, 10)) : 3;
|
||||
const retryInterval = typeof body.retry_interval === 'number' ? Math.max(1000, body.retry_interval) : 5000;
|
||||
|
||||
if (!url) {
|
||||
return NextResponse.json({ error: 'Missing url' }, { status: 400 });
|
||||
}
|
||||
|
||||
const urlCheck = isAllowedUrl(url);
|
||||
if (!urlCheck.ok) {
|
||||
return NextResponse.json({ error: `Blocked URL: ${urlCheck.reason}` }, { status: 400 });
|
||||
}
|
||||
|
||||
const nowSec = Math.floor(Date.now() / 1000);
|
||||
if (executeAt <= nowSec) {
|
||||
return NextResponse.json({ error: 'execute_at must be in the future' }, { status: 400 });
|
||||
}
|
||||
if (executeAt > nowSec + 86400 * 365 * 2) {
|
||||
return NextResponse.json({ error: 'execute_at too far in the future (max 2 years)' }, { status: 400 });
|
||||
}
|
||||
|
||||
const id = `task_${crypto.randomUUID()}`;
|
||||
const task = {
|
||||
id,
|
||||
url,
|
||||
executeAt,
|
||||
headers: sanitizeHeaders(headers),
|
||||
payload,
|
||||
retries,
|
||||
retryInterval,
|
||||
createdAt: nowSec,
|
||||
};
|
||||
|
||||
try {
|
||||
await saveTask(task);
|
||||
return NextResponse.json(task, { status: 201 });
|
||||
} catch (e: any) {
|
||||
return NextResponse.json({ error: e?.message || 'Failed to save task' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const tasks = await listAllTasks();
|
||||
return NextResponse.json(tasks);
|
||||
} catch (e: any) {
|
||||
return NextResponse.json({ error: e?.message || 'Failed to list tasks' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useAccount, useChainId, useReadContract, useReadContracts, useSwitchChain, usePublicClient, useWriteContract, useSendTransaction } from 'wagmi';
|
||||
import { useAccount, useChainId, useReadContract, useReadContracts, useSwitchChain, usePublicClient, useWriteContract } from 'wagmi';
|
||||
import { base, arbitrum, mainnet } from 'wagmi/chains';
|
||||
import { Abi, parseUnits } from 'viem';
|
||||
import debtAbi from '@/ABIs/mortgagefiusdccbbtcupgraded.json';
|
||||
@@ -76,7 +76,7 @@ export default function DappPage() {
|
||||
const [payInputs, setPayInputs] = useState<Record<string, string>>({});
|
||||
const publicClient = usePublicClient({ chainId: selectedChainId });
|
||||
const { writeContractAsync, isPending: writePending } = useWriteContract();
|
||||
const { sendTransactionAsync, isPending: txPending } = useSendTransaction();
|
||||
const [compoundPending, setCompoundPending] = useState(false);
|
||||
|
||||
// NFTCache settings (from localStorage; defaults to env or '/nftcache')
|
||||
const [nftcacheEnabled, setNftcacheEnabled] = useState<boolean>(false);
|
||||
@@ -101,22 +101,13 @@ export default function DappPage() {
|
||||
useEffect(() => {
|
||||
if (searchParams?.get('settings') === '1') setSettingsOpen(true);
|
||||
}, [searchParams]);
|
||||
const ENV_NTFY = (process.env.NEXT_PUBLIC_NTFY_URL || process.env.NTFY_URL || 'https://ntfy.sh').replace(/\/$/, '');
|
||||
const ENV_SCHEDY = (process.env.NEXT_PUBLIC_SCHEDY_URL || process.env.SCHEDY_URL || 'http://localhost:8080').replace(/\/$/, '');
|
||||
const ENV_SCHEDY_API_KEY = (process.env.NEXT_PUBLIC_SCHEDY_API_KEY || process.env.SCHEDY_API_KEY || '').trim();
|
||||
const ENV_NTFY = (process.env.NEXT_PUBLIC_NTFY_URL || '/ntfy').replace(/\/$/, '');
|
||||
const [notifSettings, setNotifSettings] = useLocalStorage<NotificationSettings>('notif:settings', {
|
||||
provider: '',
|
||||
scheduler: 'schedy',
|
||||
ntfyServer: ENV_NTFY,
|
||||
ntfyTopic: '',
|
||||
gotifyServer: '',
|
||||
gotifyToken: '',
|
||||
snsRegion: '',
|
||||
snsTopicArn: '',
|
||||
snsAccessKeyId: '',
|
||||
snsSecretAccessKey: '',
|
||||
schedyBaseUrl: ENV_SCHEDY,
|
||||
schedyApiKey: ENV_SCHEDY_API_KEY,
|
||||
email: '',
|
||||
backupEmail: '',
|
||||
backupDelayDays: 1,
|
||||
@@ -140,27 +131,25 @@ export default function DappPage() {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// One-time migration: legacy scheduler providers -> schedy; remove legacy fields
|
||||
// One-time migration: remove legacy and removed fields
|
||||
useEffect(() => {
|
||||
const s: any = notifSettings as any;
|
||||
if (!s) return;
|
||||
let changed = false;
|
||||
const next: any = { ...notifSettings };
|
||||
// Normalize scheduler
|
||||
if (!s.scheduler || s.scheduler !== 'schedy') {
|
||||
next.scheduler = 'schedy';
|
||||
changed = true;
|
||||
}
|
||||
// Remove legacy keys if present
|
||||
const legacyKeys = ['cronhostApiKey', 'kronosBaseUrl', 'schedifyBaseUrl', 'schedifyApiKey', 'schedifyWebhookId'];
|
||||
for (const k of legacyKeys) {
|
||||
const removedKeys = [
|
||||
'scheduler', 'schedyBaseUrl', 'schedyApiKey',
|
||||
'snsRegion', 'snsTopicArn', 'snsAccessKeyId', 'snsSecretAccessKey',
|
||||
'cronhostApiKey', 'kronosBaseUrl', 'schedifyBaseUrl', 'schedifyApiKey', 'schedifyWebhookId'
|
||||
];
|
||||
for (const k of removedKeys) {
|
||||
if (k in next) {
|
||||
delete next[k];
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
if (changed) {
|
||||
console.log('[Settings] Migrating legacy scheduler -> schedy and pruning legacy fields');
|
||||
console.log('[Settings] Migrating and pruning legacy/removed fields');
|
||||
setNotifSettings(next as NotificationSettings);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@@ -773,24 +762,16 @@ export default function DappPage() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
};
|
||||
}
|
||||
if (provider === 'sns') {
|
||||
// Note: Direct SNS publish requires AWS SigV4; recommend server-side relay. Here we simply target a placeholder you control.
|
||||
// User should set up a relay endpoint that publishes to SNS.
|
||||
const relay = '/api/sns-relay';
|
||||
return {
|
||||
url: relay,
|
||||
method: 'POST' as const,
|
||||
body: { topicArn: notifSettings.snsTopicArn, region: notifSettings.snsRegion, message, email: notifSettings.email },
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
};
|
||||
}
|
||||
throw new Error('Unsupported provider');
|
||||
};
|
||||
|
||||
// Single schedule at configured lead time (or 1 day by default)
|
||||
const scheduleNotification = async (row: { tokenId: bigint; secondsTillLiq?: bigint }) => {
|
||||
const seconds = Number(row.secondsTillLiq ?? 0);
|
||||
if (!Number.isFinite(seconds) || seconds <= 0) throw new Error('Invalid liquidation timer');
|
||||
const MAX_SECONDS = 86400 * 365 * 5; // 5 years max
|
||||
if (!Number.isFinite(seconds) || seconds <= 0 || seconds > MAX_SECONDS) {
|
||||
throw new Error('Invalid liquidation timer');
|
||||
}
|
||||
const nowSec = Math.floor(Date.now() / 1000);
|
||||
const leadSecsCfg = Math.max(0, Math.floor(Number(notifSettings.daysBefore ?? 0) * 86400));
|
||||
const offset = leadSecsCfg > 0 ? leadSecsCfg : 86400; // default to 1 day
|
||||
@@ -842,7 +823,7 @@ export default function DappPage() {
|
||||
if (runAt1 <= nowSec) throw new Error('Computed run time is in the past');
|
||||
// Primary job (to main email)
|
||||
const req1 = buildNotificationRequest(row, msg);
|
||||
const res1 = await scheduleJob(notifSettings, { runAtEpoch: runAt1, method: req1.method, url: req1.url, body: req1.body, headers: req1.headers });
|
||||
const res1 = await scheduleJob({ runAtEpoch: runAt1, method: req1.method, url: req1.url, body: req1.body, headers: req1.headers });
|
||||
|
||||
// Optional backup job
|
||||
const jobs: Array<{ id: string; at: number; label: 'lead' | 'half' | 'last' }> = [
|
||||
@@ -861,7 +842,7 @@ export default function DappPage() {
|
||||
const msgBackupCore = `Your position ${row.tokenId.toString()} is approaching liquidation in ~${humanLeftBackup}. ${payClause} Collateral at risk: ${collateralStr ?? 'unknown'} ${collateralSym}. Pay link: ${positionUrl}. Visit ${dappUrl} or https://markets.mortgagefi.app/dashboard.`;
|
||||
const backupMsg = `${prefix}\n\n${msgBackupCore}`;
|
||||
const req2 = buildNotificationRequest(row, backupMsg, { email: bEmail });
|
||||
const res2 = await scheduleJob(notifSettings, { runAtEpoch: runAt2, method: req2.method, url: req2.url, body: req2.body, headers: req2.headers });
|
||||
const res2 = await scheduleJob({ runAtEpoch: runAt2, method: req2.method, url: req2.url, body: req2.body, headers: req2.headers });
|
||||
jobs.push({ id: res2.jobId, at: runAt2, label: 'last' });
|
||||
}
|
||||
}
|
||||
@@ -873,12 +854,12 @@ export default function DappPage() {
|
||||
// Cancel new multi-jobs first
|
||||
if (p.jobs && p.jobs.length) {
|
||||
for (const j of p.jobs) {
|
||||
try { await cancelScheduledJob(notifSettings, j.id); } catch (e) { console.warn('[scheduler] cancel failed', e); }
|
||||
try { await cancelScheduledJob(j.id); } catch (e) { console.warn('[scheduler] cancel failed', e); }
|
||||
}
|
||||
}
|
||||
// Back-compat: single jobId
|
||||
if (p.jobId) {
|
||||
try { await cancelScheduledJob(notifSettings, p.jobId); } catch (e) { console.warn('[scheduler] cancel failed', e); }
|
||||
try { await cancelScheduledJob(p.jobId); } catch (e) { console.warn('[scheduler] cancel failed', e); }
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1032,37 +1013,55 @@ export default function DappPage() {
|
||||
};
|
||||
|
||||
// Compound action: raw tx to debt token contract with provided data
|
||||
// Only allowed against known preset addresses to prevent arbitrary contract calls
|
||||
const handleCompound = async () => {
|
||||
try {
|
||||
if (!debtAddress) return;
|
||||
await sendTransactionAsync({
|
||||
to: debtAddress as `0x${string}`,
|
||||
data: '0x4e71d92d',
|
||||
const isKnownPreset = Object.values(PRESETS).some(
|
||||
(list) => list?.some((p) => p.debt.toLowerCase() === debtAddress.toLowerCase())
|
||||
);
|
||||
if (!isKnownPreset) {
|
||||
console.warn('[Compound] Rejected: debt address is not a known preset');
|
||||
return;
|
||||
}
|
||||
setCompoundPending(true);
|
||||
await writeContractAsync({
|
||||
abi: debtAbi as Abi,
|
||||
address: debtAddress as `0x${string}`,
|
||||
functionName: 'compound',
|
||||
chainId: selectedChainId,
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('[Compound] Failed', e);
|
||||
} finally {
|
||||
setCompoundPending(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-6 space-y-6">
|
||||
<h1 className="text-2xl font-semibold text-gray-100">MortgageFi DApp</h1>
|
||||
<p className="text-sm text-gray-100">Connect wallet, detect your NFTs, and fetch debt details.</p>
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 py-8 space-y-6">
|
||||
<header className="space-y-1">
|
||||
<p className="gh-eyebrow text-sm">🌾 your quiet little vault</p>
|
||||
<h1 className="font-display text-3xl sm:text-4xl font-semibold text-forest-deep">MortgageFi DApp</h1>
|
||||
<p className="text-sm text-ink-soft">Connect your wallet, find your NFTs, and tend to your debt — gently.</p>
|
||||
</header>
|
||||
|
||||
{!isConnected && (
|
||||
<div className="rounded border p-4 bg-amber-900/40 border-amber-700 text-amber-200">Please connect your wallet using the Connect Wallet button in the navbar.</div>
|
||||
<div className="gh-note gh-note-warn flex items-center gap-2">
|
||||
<span aria-hidden>🪧</span>
|
||||
Please connect your wallet using the Connect Wallet button in the navbar.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="rounded border p-4 bg-gray-800 border-gray-700 space-y-3">
|
||||
<div className="font-medium text-gray-100">Inputs</div>
|
||||
<label className="block text-sm text-gray-200">
|
||||
<span className="text-gray-300">Network</span>
|
||||
<div className="gh-card gh-card-hover p-5 space-y-3">
|
||||
<div className="gh-eyebrow text-lg flex items-center gap-2"><span aria-hidden>🌱</span>Inputs</div>
|
||||
<label className="gh-label">
|
||||
<span className="text-earth">Network</span>
|
||||
<select
|
||||
value={selectedChainId}
|
||||
onChange={(e) => setSelectedChainId(Number(e.target.value))}
|
||||
className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700"
|
||||
className="gh-input"
|
||||
>
|
||||
<option value={base.id}>Base</option>
|
||||
<option value={arbitrum.id}>Arbitrum</option>
|
||||
@@ -1070,10 +1069,10 @@ export default function DappPage() {
|
||||
</label>
|
||||
|
||||
{/* Preset selector for pair addresses */}
|
||||
<label className="block text-sm text-gray-200">
|
||||
<span className="text-gray-300">Preset</span>
|
||||
<label className="gh-label">
|
||||
<span className="text-earth">Preset</span>
|
||||
<select
|
||||
className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700"
|
||||
className="gh-input"
|
||||
value={presetKey}
|
||||
onChange={(e) => {
|
||||
const key = e.target.value;
|
||||
@@ -1091,63 +1090,63 @@ export default function DappPage() {
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="block text-sm text-gray-200">
|
||||
<span className="text-gray-300">ERC-721 Address</span>
|
||||
<input value={nftAddress} onChange={(e) => setNftAddress(e.target.value)} placeholder={DEFAULTS[selectedChainId as keyof typeof DEFAULTS]?.nft} className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700 placeholder-gray-400" />
|
||||
<label className="gh-label">
|
||||
<span className="text-earth">ERC-721 Address</span>
|
||||
<input value={nftAddress} onChange={(e) => setNftAddress(e.target.value)} placeholder={DEFAULTS[selectedChainId as keyof typeof DEFAULTS]?.nft} className="gh-input" />
|
||||
</label>
|
||||
<label className="block text-sm text-gray-200">
|
||||
<span className="text-gray-300">Debt Contract</span>
|
||||
<input value={debtAddress} onChange={(e) => setDebtAddress(e.target.value)} placeholder={DEFAULTS[selectedChainId as keyof typeof DEFAULTS]?.debt} className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700 placeholder-gray-400" />
|
||||
<label className="gh-label">
|
||||
<span className="text-earth">Debt Contract</span>
|
||||
<input value={debtAddress} onChange={(e) => setDebtAddress(e.target.value)} placeholder={DEFAULTS[selectedChainId as keyof typeof DEFAULTS]?.debt} className="gh-input" />
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => loadChainDefaults(selectedChainId)}
|
||||
className="px-3 py-1.5 bg-gray-700 text-gray-100 rounded hover:bg-gray-600"
|
||||
className="gh-btn gh-btn-ghost"
|
||||
>
|
||||
Load defaults for selected network
|
||||
</button>
|
||||
</div>
|
||||
<label className="block text-sm text-gray-200">
|
||||
<span className="text-gray-300">Manual Wallet (optional)</span>
|
||||
<input value={manualWallet} onChange={(e) => setManualWallet(e.target.value)} placeholder="0xYourWallet" className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700 placeholder-gray-400" />
|
||||
<span className="text-xs text-gray-400">If set, scans and reads will use this address instead of the connected one.</span>
|
||||
<label className="gh-label">
|
||||
<span className="text-earth">Manual Wallet (optional)</span>
|
||||
<input value={manualWallet} onChange={(e) => setManualWallet(e.target.value)} placeholder="0xYourWallet" className="gh-input" />
|
||||
<span className="text-xs text-earth">If set, scans and reads will use this address instead of the connected one.</span>
|
||||
</label>
|
||||
<label className="block text-sm text-gray-200">
|
||||
<span className="text-gray-300">Manual Token ID (optional)</span>
|
||||
<input value={manualTokenId} onChange={(e) => setManualTokenId(e.target.value)} placeholder="e.g., 103" className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700 placeholder-gray-400" />
|
||||
<label className="gh-label">
|
||||
<span className="text-earth">Manual Token ID (optional)</span>
|
||||
<input value={manualTokenId} onChange={(e) => setManualTokenId(e.target.value)} placeholder="e.g., 103" className="gh-input" />
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={scanMore} disabled={!effectiveWallet || scanBusy || !nftAddress || scanComplete} className="px-3 py-1.5 bg-indigo-600 text-white rounded disabled:opacity-50">
|
||||
<button onClick={scanMore} disabled={!effectiveWallet || scanBusy || !nftAddress || scanComplete} className="gh-btn gh-btn-primary">
|
||||
{scanBusy ? 'Scanning…' : scanComplete ? 'Scan Complete' : 'Scan 12 more (ownerOf)'}
|
||||
</button>
|
||||
<button onClick={resetScan} disabled={!effectiveWallet || scanBusy || !nftAddress} className="px-3 py-1.5 bg-gray-700 text-gray-100 rounded hover:bg-gray-600">
|
||||
<button onClick={resetScan} disabled={!effectiveWallet || scanBusy || !nftAddress} className="gh-btn gh-btn-ghost">
|
||||
Reset
|
||||
</button>
|
||||
<button onClick={deleteLocalCache} disabled={scanBusy || !nftAddress} className="px-3 py-1.5 bg-gray-700 text-gray-100 rounded hover:bg-gray-600">
|
||||
<button onClick={deleteLocalCache} disabled={scanBusy || !nftAddress} className="gh-btn gh-btn-ghost">
|
||||
Delete Local Cache
|
||||
</button>
|
||||
</div>
|
||||
{scanComplete && (
|
||||
<div className="text-xs text-green-200 bg-green-900/30 border border-green-700 rounded p-2 mt-2">
|
||||
<div className="mt-2 rounded-xl border border-forest/40 bg-forest/10 p-2 text-xs text-forest-deep">
|
||||
Owner scan completed (gap limit reached). Reset or delete cache to rescan.
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs text-gray-300">
|
||||
<div className="text-xs text-ink-soft">
|
||||
Cached IDs: {detectedTokenIds.length ? detectedTokenIds.map((id) => id.toString()).join(', ') : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded border p-4 bg-gray-800 border-gray-700">
|
||||
<div className="font-medium text-gray-100">About</div>
|
||||
<p className="text-sm text-gray-300 mt-1">Enter your NFT contract and token ID(s), then fetch debt details from the mortgage contract.</p>
|
||||
<p className="text-xs text-gray-400 mt-2">{selectedChainId === base.id ? 'Base' : selectedChainId === arbitrum.id ? 'Arbitrum' : 'Selected'} network is required. The app will attempt to detect your token IDs via on-chain queries when supported.</p>
|
||||
<div className="gh-card gh-card-hover p-5">
|
||||
<div className="gh-eyebrow text-lg flex items-center gap-2"><span aria-hidden>🍃</span>About</div>
|
||||
<p className="text-sm text-ink-soft mt-1">Enter your NFT contract and token ID(s), then fetch debt details from the mortgage contract.</p>
|
||||
<p className="text-xs text-earth mt-2">{selectedChainId === base.id ? 'Base' : selectedChainId === arbitrum.id ? 'Arbitrum' : 'Selected'} network is required. The app will attempt to detect your token IDs via on-chain queries when supported.</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border p-4 bg-gray-800 border-gray-700 space-y-3">
|
||||
<div className="gh-card gh-card-hover p-5 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="font-medium text-gray-100">Scheduled notifications</div>
|
||||
<div className="gh-eyebrow text-lg flex items-center gap-2"><span aria-hidden>🔔</span>Scheduled notifications</div>
|
||||
<button
|
||||
className="text-xs px-2 py-1 border border-red-700 text-red-300 hover:bg-red-900/40 rounded"
|
||||
className="gh-btn gh-btn-danger text-xs"
|
||||
onClick={async () => {
|
||||
// Purge remotely from Schedy by ntfy topic URL
|
||||
try { await purgeNtfyTopicSchedules(notifSettings); } catch (e) { console.warn('[schedy] purge failed', e); }
|
||||
@@ -1163,20 +1162,20 @@ export default function DappPage() {
|
||||
</button>
|
||||
</div>
|
||||
{scheduledList.length === 0 ? (
|
||||
<div className="text-sm text-gray-400">No schedules yet.</div>
|
||||
<div className="text-sm text-ink-soft">No schedules yet.</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-gray-700">
|
||||
<ul className="divide-y divide-line">
|
||||
{scheduledList.map((it) => (
|
||||
<li key={it.key} className="py-2 flex items-center justify-between text-sm">
|
||||
<div className="space-y-0.5">
|
||||
<div className="text-gray-200">Token #{it.tokenId}</div>
|
||||
<div className="text-gray-400">
|
||||
<div className="text-ink font-medium">Token #{it.tokenId}</div>
|
||||
<div className="text-ink-soft">
|
||||
{it.scheduledAt ? `Runs at ${new Date(it.scheduledAt * 1000).toLocaleString()}` : 'Scheduled'}
|
||||
{it.jobId ? ` · Job ${it.jobId}` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="px-2 py-1 border border-gray-600 hover:bg-gray-700 rounded text-gray-200"
|
||||
className="gh-btn gh-btn-ghost text-xs"
|
||||
onClick={() => deleteSchedule(it.key)}
|
||||
>
|
||||
Delete
|
||||
@@ -1188,8 +1187,8 @@ export default function DappPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 text-gray-100">
|
||||
<button onClick={() => refetch()} disabled={!tokenIds.length} className="px-4 py-2 bg-indigo-600 text-white rounded disabled:opacity-50">Fetch Debt Data</button>
|
||||
<div className="gh-panel p-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-ink-soft">
|
||||
<button onClick={() => refetch()} disabled={!tokenIds.length} className="gh-btn gh-btn-primary">🌾 Fetch Debt Data</button>
|
||||
<span className="text-sm">Chain: {selectedChainId === base.id ? 'Base' : selectedChainId === arbitrum.id ? 'Arbitrum' : 'Other'}</span>
|
||||
<span className="text-sm">{String(coinSymbol ?? '')} Balance: {fmt(contractCoinBalance as bigint | undefined, Number(coinDecimals ?? 8), 8)} {String(coinSymbol ?? '')}</span>
|
||||
<span className="text-sm">Stable Balance: {fmt(stableBalance as bigint | undefined, Number(stableDecimals ?? 6), 6)} {String(stableSymbol ?? '')}</span>
|
||||
@@ -1202,25 +1201,25 @@ export default function DappPage() {
|
||||
const oneToken = BigInt(10) ** BigInt(dec);
|
||||
const hasOnePlus = bal !== undefined && bal > oneToken;
|
||||
const manualSet = Boolean(manualWallet?.trim());
|
||||
const canCompound = !!address && !manualSet && !!debtAddress && hasOnePlus && !txPending;
|
||||
const canCompound = !!address && !manualSet && !!debtAddress && hasOnePlus && !compoundPending;
|
||||
return (
|
||||
<button
|
||||
className="px-2 py-1 bg-emerald-600 text-white rounded disabled:opacity-50 text-xs"
|
||||
className="gh-btn gh-btn-sun text-xs"
|
||||
disabled={!canCompound}
|
||||
onClick={handleCompound}
|
||||
title={manualSet ? 'Compound disabled when Manual Wallet is set' : (!hasOnePlus ? 'Requires > 1 token balance' : undefined)}
|
||||
>
|
||||
{txPending ? 'Compounding…' : 'Compound'}
|
||||
{compoundPending ? 'Compounding…' : 'Compound'}
|
||||
</button>
|
||||
);
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{debtError && <div className="rounded border border-red-300 bg-red-50 p-3 text-sm text-red-800">{String(debtError?.message || debtError)}</div>}
|
||||
{debtError && <div className="gh-note gh-note-warn">{String(debtError?.message || debtError)}</div>}
|
||||
|
||||
<div className="space-y-3">
|
||||
{debtLoading && <div>Loading...</div>}
|
||||
<div className="space-y-4">
|
||||
{debtLoading && <div className="text-ink-soft animate-breathe">🌙 Loading…</div>}
|
||||
{!debtLoading && parsed.map((row) => {
|
||||
const stableDec = Number(stableDecimals ?? 6);
|
||||
const coinDec = Number(coinDecimals ?? 8);
|
||||
@@ -1247,54 +1246,54 @@ export default function DappPage() {
|
||||
: undefined;
|
||||
const isClosed = row.coinSize !== undefined && row.coinSize === BigInt(0);
|
||||
return (
|
||||
<div key={row.tokenId.toString()} className={`rounded border p-4 shadow-sm ${isClosed ? 'bg-gray-50 border-gray-200' : 'bg-white'}`}>
|
||||
<div key={row.tokenId.toString()} className={`gh-card gh-card-hover p-5 border-l-4 ${isClosed ? 'border-l-earth/40 opacity-80' : 'border-l-forest'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="font-semibold text-gray-900">Loan Details for {String(stableSymbol ?? 'USDC')}-{String(coinSymbol ?? 'cbBTC')} - ID: {row.tokenId.toString()}</div>
|
||||
<div className="font-display text-lg font-semibold text-forest-deep">🏡 {String(stableSymbol ?? 'USDC')}-{String(coinSymbol ?? 'cbBTC')} · #{row.tokenId.toString()}</div>
|
||||
{isClosed && (
|
||||
<span className="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-800 border border-yellow-200">
|
||||
<span className="gh-badge gh-badge-warn">
|
||||
Closed/Defaulted
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm mt-2">
|
||||
<div className="text-gray-800">Loan Collateral</div>
|
||||
<div className={`text-gray-900 ${isClosed ? 'line-through' : ''}`}>{fmt(row.coinSize, coinDec, 8)} {String(coinSymbol ?? '')}</div>
|
||||
<div className="text-earth">Loan Collateral</div>
|
||||
<div className={`text-ink font-medium ${isClosed ? 'line-through' : ''}`}>{fmt(row.coinSize, coinDec, 8)} {String(coinSymbol ?? '')}</div>
|
||||
|
||||
<div className="text-gray-800">Interest Rate</div>
|
||||
<div className="text-gray-900">{aprDisplay}</div>
|
||||
<div className="text-earth">Interest Rate</div>
|
||||
<div className="text-ink font-medium">{aprDisplay}</div>
|
||||
|
||||
<div className="text-gray-800">Loan Dollar Value</div>
|
||||
<div className="text-gray-900">{fmt(row.baseSize, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
<div className="text-earth">Loan Dollar Value</div>
|
||||
<div className="text-ink font-medium">{fmt(row.baseSize, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
|
||||
<div className="text-gray-800">Cost to close Loan</div>
|
||||
<div className="text-gray-900">{fmt(costToClose2pct, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
<div className="text-earth">Cost to close Loan</div>
|
||||
<div className="text-ink font-medium">{fmt(costToClose2pct, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
|
||||
<div className="text-gray-800">Total Cost to Close</div>
|
||||
<div className="text-gray-900">{fmt(totalCostToClose102pct, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
<div className="text-earth">Total Cost to Close</div>
|
||||
<div className="text-ink font-medium">{fmt(totalCostToClose102pct, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
|
||||
<div className="text-gray-800">Total Interest to pay over Length of Loan</div>
|
||||
<div className="text-gray-900">{fmt(row.feeSize, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
<div className="text-earth">Total Interest to pay over Length of Loan</div>
|
||||
<div className="text-ink font-medium">{fmt(row.feeSize, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
|
||||
<div className="text-gray-800">Total Repaid</div>
|
||||
<div className="text-gray-900">{fmt(row.amountPaid, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
<div className="text-earth">Total Repaid</div>
|
||||
<div className="text-ink font-medium">{fmt(row.amountPaid, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
|
||||
<div className="text-gray-800">Debt Remaining</div>
|
||||
<div className="text-gray-900">{fmt(row.debtAtThisSize, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
<div className="text-earth">Debt Remaining</div>
|
||||
<div className="text-ink font-medium">{fmt(row.debtAtThisSize, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
|
||||
<div className="text-gray-800">Amount to reset timer</div>
|
||||
<div className="text-gray-900">{fmt(row.currentPaymentPending, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
<div className="text-earth">Amount to reset timer</div>
|
||||
<div className="text-ink font-medium">{fmt(row.currentPaymentPending, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
|
||||
<div className="text-gray-800">Monthly Payment Size</div>
|
||||
<div className="text-gray-900">{fmt(monthlyPaymentFixed, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
<div className="text-earth">Monthly Payment Size</div>
|
||||
<div className="text-ink font-medium">{fmt(monthlyPaymentFixed, stableDec, 6)} {String(stableSymbol ?? '')}</div>
|
||||
|
||||
<div className="text-gray-800">Loan Term</div>
|
||||
<div className="text-gray-900">{loanTermDisplay}</div>
|
||||
<div className="text-earth">Loan Term</div>
|
||||
<div className="text-ink font-medium">{loanTermDisplay}</div>
|
||||
|
||||
<div className="text-gray-800">Start Date</div>
|
||||
<div className="text-gray-900">{row.startDate ? new Date(Number(row.startDate) * 1000).toLocaleDateString() : '-'}</div>
|
||||
<div className="text-earth">Start Date</div>
|
||||
<div className="text-ink font-medium">{row.startDate ? new Date(Number(row.startDate) * 1000).toLocaleDateString() : '-'}</div>
|
||||
|
||||
<div className="text-gray-800">Seconds Till Liquidation</div>
|
||||
<div className="text-gray-900 flex items-center gap-3">
|
||||
<div className="text-earth">Seconds Till Liquidation</div>
|
||||
<div className="text-ink font-medium flex items-center gap-3">
|
||||
<span>{fmtDuration(row.secondsTillLiq)}</span>
|
||||
{!isClosed && (
|
||||
(() => {
|
||||
@@ -1308,15 +1307,9 @@ export default function DappPage() {
|
||||
if (!notifSettings.provider) return false;
|
||||
if (notifSettings.provider === 'ntfy') return Boolean(notifSettings.ntfyServer && notifSettings.ntfyTopic);
|
||||
if (notifSettings.provider === 'gotify') return Boolean(notifSettings.gotifyServer && notifSettings.gotifyToken);
|
||||
if (notifSettings.provider === 'sns') return Boolean(notifSettings.snsRegion && notifSettings.snsTopicArn && notifSettings.snsAccessKeyId && notifSettings.snsSecretAccessKey);
|
||||
return false;
|
||||
})();
|
||||
const haveScheduler = (() => {
|
||||
const s = notifSettings.scheduler || 'schedy';
|
||||
if (s !== 'schedy') return false;
|
||||
return Boolean(notifSettings.schedyBaseUrl && notifSettings.schedyApiKey);
|
||||
})();
|
||||
const haveSettings = Boolean(haveProvider && haveScheduler && notifSettings.email);
|
||||
const haveSettings = Boolean(haveProvider && notifSettings.email);
|
||||
if (next && !haveSettings) { setSettingsOpen(true); return; }
|
||||
if (!next) {
|
||||
// disable and cancel
|
||||
@@ -1335,7 +1328,7 @@ export default function DappPage() {
|
||||
}
|
||||
};
|
||||
return (
|
||||
<label className="inline-flex items-center gap-1 text-xs text-gray-700">
|
||||
<label className="inline-flex items-center gap-1 text-xs text-earth">
|
||||
<input type="checkbox" className="h-4 w-4" disabled={disabled} checked={checked} onChange={(e) => onToggle(e.target.checked)} />
|
||||
Enable alert
|
||||
</label>
|
||||
@@ -1347,8 +1340,8 @@ export default function DappPage() {
|
||||
|
||||
{/* Pay controls (hidden for Closed/Defaulted loans) */}
|
||||
{!isClosed && (
|
||||
<div className="mt-3 border-t pt-3">
|
||||
<div className="text-sm font-medium text-gray-900 mb-2">Make a Payment</div>
|
||||
<div className="mt-4 border-t border-line pt-4">
|
||||
<div className="gh-eyebrow text-sm mb-2 flex items-center gap-1"><span aria-hidden>💧</span>Make a Payment</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{(() => {
|
||||
const key = row.tokenId.toString();
|
||||
@@ -1365,13 +1358,13 @@ export default function DappPage() {
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
placeholder={`Amount in ${String(stableSymbol ?? '')}`}
|
||||
className="border rounded px-2 py-1 text-sm w-40 text-gray-900 placeholder-gray-500"
|
||||
className="rounded-xl border border-line bg-cloud px-3 py-2 text-sm w-40 text-ink placeholder-earth/50 focus:outline-none focus:border-sky-deep"
|
||||
value={inputVal}
|
||||
onChange={(e) => setPaymentAmount(row.tokenId, e.target.value)}
|
||||
/>
|
||||
{!hasAllowance ? (
|
||||
<button
|
||||
className="px-3 py-1.5 bg-gray-200 text-gray-900 rounded"
|
||||
className="gh-btn gh-btn-ghost"
|
||||
onClick={() => handleApprove(row.tokenId)}
|
||||
disabled={disableAll || amount === null || amount === BigInt(0)}
|
||||
>
|
||||
@@ -1379,7 +1372,7 @@ export default function DappPage() {
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
className="px-3 py-1.5 bg-indigo-600 text-white rounded disabled:opacity-50"
|
||||
className="gh-btn gh-btn-primary"
|
||||
onClick={() => handlePay(row.tokenId)}
|
||||
disabled={disableAll || amount === null || amount === BigInt(0) || !hasAllowance || !hasBalance}
|
||||
title={!hasAllowance ? 'Approve the stablecoin first' : (!hasBalance ? 'Insufficient balance' : undefined)}
|
||||
@@ -1387,7 +1380,7 @@ export default function DappPage() {
|
||||
Pay
|
||||
</button>
|
||||
{!hasBalance && amount !== null && (
|
||||
<span className="text-xs text-red-600">Insufficient balance</span>
|
||||
<span className="text-xs text-danger">Insufficient balance</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
281
app/globals.css
281
app/globals.css
@@ -1,26 +1,275 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
/* =====================================================================
|
||||
MortgageFi — "Studio Ghibli" daylight theme
|
||||
A warm, painterly design system: meadow greens, sky blues, parchment
|
||||
creams, sunset apricot. Soft rounded shapes, gentle motion, no harsh
|
||||
edges. Inspired by Miyazaki landscapes.
|
||||
===================================================================== */
|
||||
|
||||
@theme {
|
||||
/* Palette ---------------------------------------------------------- */
|
||||
--color-sky: #a9d8ef; /* clear daylight sky */
|
||||
--color-sky-deep: #6fb2d6; /* deeper sky / water */
|
||||
--color-cloud: #fbf6ea; /* warm parchment / cloud white */
|
||||
--color-cloud-soft: #f3e8cf; /* aged paper */
|
||||
--color-forest: #6f9a5a; /* Totoro meadow green */
|
||||
--color-forest-deep: #466a3a; /* deep forest */
|
||||
--color-moss: #9cb87f; /* soft moss */
|
||||
--color-sunset: #e89a5e; /* warm apricot sun */
|
||||
--color-sunset-soft: #f4c89a; /* hazy sunset glow */
|
||||
--color-earth: #8a6d52; /* warm bark brown */
|
||||
--color-ink: #3b352a; /* warm charcoal text */
|
||||
--color-ink-soft: #6b6051; /* muted text */
|
||||
--color-petal: #e7a39b; /* soft sakura pink */
|
||||
--color-sun: #f4d27a; /* sunflower yellow */
|
||||
--color-line: #e3d4b3; /* hairline on parchment */
|
||||
--color-line-soft: #efe6cf; /* faint divider */
|
||||
--color-danger: #c2622f; /* terracotta warning */
|
||||
--color-danger-soft: #f6e3d2;
|
||||
|
||||
/* Typography ------------------------------------------------------- */
|
||||
--font-sans: var(--font-zen), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-display: var(--font-klee), var(--font-zen), serif;
|
||||
|
||||
/* Soft shadows ----------------------------------------------------- */
|
||||
--shadow-soft: 0 10px 30px -12px rgba(58, 51, 38, 0.35);
|
||||
--shadow-float: 0 18px 40px -16px rgba(58, 51, 38, 0.45);
|
||||
|
||||
/* Named animations (usable as `animate-drift`, etc.) ---------------- */
|
||||
--animate-drift: drift 60s linear infinite;
|
||||
--animate-sway: sway 7s ease-in-out infinite;
|
||||
--animate-rise: rise 14s ease-in-out infinite;
|
||||
--animate-breathe: breathe 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
@keyframes drift {
|
||||
from { transform: translateX(-12vw); }
|
||||
to { transform: translateX(112vw); }
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
@keyframes sway {
|
||||
0%, 100% { transform: translateY(0) rotate(-1.5deg); }
|
||||
50% { transform: translateY(-8px) rotate(1.5deg); }
|
||||
}
|
||||
|
||||
/* soot-sprite float: rise upward while swaying side to side, then fade */
|
||||
@keyframes rise {
|
||||
0% { transform: translate(0, 0) scale(0.9); opacity: 0; }
|
||||
10% { opacity: 0.7; }
|
||||
50% { transform: translate(14px, -42vh) scale(1); opacity: 0.55; }
|
||||
90% { opacity: 0.4; }
|
||||
100% { transform: translate(-10px, -82vh) scale(0.85); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% { transform: scale(1); opacity: 0.9; }
|
||||
50% { transform: scale(1.04); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
Base
|
||||
------------------------------------------------------------------- */
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
color: var(--color-ink);
|
||||
/* layered daylight sky: warm horizon glow rising into clear blue */
|
||||
background:
|
||||
radial-gradient(120% 80% at 50% 118%, var(--color-sunset-soft) 0%, transparent 42%),
|
||||
linear-gradient(180deg, #bfe6f5 0%, #cfeaf2 38%, #e8f1e0 72%, #f3ecd6 100%);
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* faint watercolor-paper grain over everything */
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.05;
|
||||
mix-blend-mode: multiply;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--color-sun);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
/* gentle, rounded scrollbar to match the soft theme */
|
||||
* {
|
||||
scrollbar-color: var(--color-moss) transparent;
|
||||
}
|
||||
*::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: var(--color-moss);
|
||||
border-radius: 9999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
Component layer — reusable Ghibli primitives
|
||||
------------------------------------------------------------------- */
|
||||
@layer components {
|
||||
/* Parchment card: the workhorse surface */
|
||||
.gh-card {
|
||||
border-radius: 1.5rem;
|
||||
border: 1px solid var(--color-line);
|
||||
background: color-mix(in srgb, var(--color-cloud) 88%, transparent);
|
||||
box-shadow: var(--shadow-soft);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.gh-card-hover {
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
.gh-card-hover:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-float);
|
||||
}
|
||||
|
||||
/* A softer inner panel (for nested groups, details) */
|
||||
.gh-panel {
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--color-line-soft);
|
||||
background: color-mix(in srgb, var(--color-cloud-soft) 70%, transparent);
|
||||
}
|
||||
|
||||
/* Section heading eyebrow */
|
||||
.gh-eyebrow {
|
||||
font-family: var(--font-display);
|
||||
color: var(--color-forest-deep);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Buttons --------------------------------------------------------- */
|
||||
.gh-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem 1.1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gh-btn:active { transform: translateY(1px) scale(0.99); }
|
||||
.gh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.gh-btn-primary {
|
||||
background: var(--color-forest);
|
||||
color: var(--color-cloud);
|
||||
box-shadow: 0 6px 16px -8px rgba(70, 106, 58, 0.9);
|
||||
}
|
||||
.gh-btn-primary:not(:disabled):hover { background: var(--color-forest-deep); }
|
||||
|
||||
.gh-btn-sun {
|
||||
background: var(--color-sunset);
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 16px -8px rgba(232, 154, 94, 0.9);
|
||||
}
|
||||
.gh-btn-sun:not(:disabled):hover { filter: brightness(1.05); }
|
||||
|
||||
.gh-btn-sky {
|
||||
background: var(--color-sky-deep);
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 16px -8px rgba(111, 178, 214, 0.9);
|
||||
}
|
||||
.gh-btn-sky:not(:disabled):hover { filter: brightness(1.05); }
|
||||
|
||||
.gh-btn-ghost {
|
||||
background: color-mix(in srgb, var(--color-cloud) 85%, transparent);
|
||||
color: var(--color-ink);
|
||||
border: 1px solid var(--color-line);
|
||||
}
|
||||
.gh-btn-ghost:not(:disabled):hover { background: color-mix(in srgb, var(--color-sun) 28%, var(--color-cloud)); }
|
||||
|
||||
.gh-btn-danger {
|
||||
background: transparent;
|
||||
color: var(--color-danger);
|
||||
border: 1px solid color-mix(in srgb, var(--color-danger) 45%, transparent);
|
||||
}
|
||||
.gh-btn-danger:not(:disabled):hover { background: var(--color-danger-soft); }
|
||||
|
||||
/* Form controls --------------------------------------------------- */
|
||||
.gh-input,
|
||||
.gh-select {
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid var(--color-line);
|
||||
background: color-mix(in srgb, var(--color-cloud) 92%, #fff);
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: var(--color-ink);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.gh-input::placeholder { color: color-mix(in srgb, var(--color-earth) 55%, transparent); }
|
||||
.gh-input:focus,
|
||||
.gh-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-sky-deep);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sky) 55%, transparent);
|
||||
}
|
||||
|
||||
.gh-label { display: block; font-size: 0.875rem; color: var(--color-ink-soft); }
|
||||
|
||||
/* Pills / badges -------------------------------------------------- */
|
||||
.gh-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
border-radius: 9999px;
|
||||
padding: 0.1rem 0.6rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.gh-badge-warn {
|
||||
background: var(--color-danger-soft);
|
||||
color: var(--color-danger);
|
||||
border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
|
||||
}
|
||||
.gh-badge-ok {
|
||||
background: color-mix(in srgb, var(--color-forest) 18%, var(--color-cloud));
|
||||
color: var(--color-forest-deep);
|
||||
border: 1px solid color-mix(in srgb, var(--color-forest) 35%, transparent);
|
||||
}
|
||||
|
||||
/* Notes / callouts ------------------------------------------------ */
|
||||
.gh-note {
|
||||
border-radius: 0.9rem;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
border: 1px solid var(--color-line);
|
||||
background: color-mix(in srgb, var(--color-sun) 16%, var(--color-cloud));
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.gh-note-warn {
|
||||
border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
|
||||
background: var(--color-danger-soft);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
/* Decorative soot sprite used by the background */
|
||||
.gh-soot {
|
||||
position: absolute;
|
||||
bottom: 8vh;
|
||||
border-radius: 9999px;
|
||||
background: radial-gradient(circle at 35% 30%, #5a5247, #2c2722 70%);
|
||||
box-shadow: 0 0 0 3px rgba(44, 39, 34, 0.08);
|
||||
filter: blur(0.3px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Respect reduced-motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.gh-anim,
|
||||
[class*="animate-"] { animation: none !important; }
|
||||
}
|
||||
|
||||
@@ -1,14 +1,29 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Zen_Maru_Gothic, Klee_One } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import GhibliBackground from "@/components/GhibliBackground";
|
||||
import { Web3Provider } from "@/providers/Web3Provider";
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
// Soft, rounded Japanese sans for body text…
|
||||
const zen = Zen_Maru_Gothic({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "700"],
|
||||
variable: "--font-zen",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
// …and a handwritten storybook face for headings & brand.
|
||||
const klee = Klee_One({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "600"],
|
||||
variable: "--font-klee",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'MortgageFi - Decentralized Mortgage Lending',
|
||||
description: 'Secure, flexible, and innovative solutions for your digital assets',
|
||||
title: "MortgageFi — Decentralized Mortgage Lending",
|
||||
description: "Secure, flexible, and gentle solutions for your digital assets",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -17,17 +32,17 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${inter.className} bg-gray-900 text-gray-100 min-h-screen`}>
|
||||
<html lang="en" className={`${zen.variable} ${klee.variable}`}>
|
||||
<body className="min-h-screen text-ink antialiased">
|
||||
<GhibliBackground />
|
||||
<Web3Provider>
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<Navbar />
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
<footer className="bg-gray-900 border-t border-gray-800 py-6">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<p className="text-center text-gray-400 text-sm">
|
||||
<main className="flex-1">{children}</main>
|
||||
<footer className="mt-10 border-t border-line/60 py-6">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center gap-1">
|
||||
<span className="gh-eyebrow text-sm">🌿 made with care</span>
|
||||
<p className="text-center text-ink-soft text-sm">
|
||||
© {new Date().getFullYear()} MortgageFi. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -12,9 +12,9 @@ export default async function ReadmePage() {
|
||||
content = 'README not found.';
|
||||
}
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
<h1 className="text-2xl font-semibold mb-4">README</h1>
|
||||
<pre className="whitespace-pre-wrap text-sm leading-6 bg-white rounded border p-4">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 py-8">
|
||||
<h1 className="font-display text-3xl font-semibold text-forest-deep mb-4">📖 README</h1>
|
||||
<pre className="gh-card whitespace-pre-wrap text-sm leading-6 text-ink p-5">
|
||||
{content}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user