manawenuz/mortgagefi-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): apply dark theme for better readability

Browse Source
This commit is contained in:
Siavash Sameni
2025-08-25 17:09:14 +04:00
parent 6e51b31ee9
commit c954cac947
3 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/dapp/page.tsx
View File

@@ -661,18 +661,18 @@ export default function DappPage() {
<p className="text-sm text-gray-100">Connect wallet, detect your NFTs, and fetch debt details.</p>
{!isConnected && (
<div className="rounded border p-4 bg-yellow-50">Please connect your wallet using the Connect Wallet button in the navbar.</div>
<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="grid gap-4 md:grid-cols-2">
<div className="rounded border p-4 bg-white space-y-3">
<div className="font-medium text-gray-900">Inputs</div>
<label className="block text-sm text-gray-900">
<span className="text-gray-900">Network</span>
<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>
<select
value={selectedChainId}
onChange={(e) => setSelectedChainId(Number(e.target.value))}
className="mt-1 w-full border rounded px-2 py-1"
className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700"
>
<option value={base.id}>Base</option>
<option value={arbitrum.id}>Arbitrum</option>
@@ -680,10 +680,10 @@ export default function DappPage() {
</label>
{/* Preset selector for pair addresses */}
<label className="block text-sm text-gray-900">
<span className="text-gray-900">Preset</span>
<label className="block text-sm text-gray-200">
<span className="text-gray-300">Preset</span>
<select
className="mt-1 w-full border rounded px-2 py-1"
className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700"
value={presetKey}
onChange={(e) => {
const key = e.target.value;
@@ -701,56 +701,56 @@ export default function DappPage() {
))}
</select>
</label>
<label className="block text-sm text-gray-900">
<span className="text-gray-900">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" />
<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>
<label className="block text-sm text-gray-900">
<span className="text-gray-900">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" />
<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>
<div className="flex items-center gap-2">
<button
type="button"
onClick={() => loadChainDefaults(selectedChainId)}
className="px-3 py-1.5 bg-gray-200 text-gray-900 rounded"
className="px-3 py-1.5 bg-gray-700 text-gray-100 rounded hover:bg-gray-600"
>
Load defaults for selected network
</button>
</div>
<label className="block text-sm text-gray-900">
<span className="text-gray-900">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" />
<span className="text-xs text-gray-900">If set, scans and reads will use this address instead of the connected one.</span>
<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>
<label className="block text-sm text-gray-900">
<span className="text-gray-900">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" />
<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>
<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">
{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-200 text-gray-900 rounded">
<button onClick={resetScan} disabled={!effectiveWallet || scanBusy || !nftAddress} className="px-3 py-1.5 bg-gray-700 text-gray-100 rounded hover:bg-gray-600">
Reset
</button>
<button onClick={deleteLocalCache} disabled={scanBusy || !nftAddress} className="px-3 py-1.5 bg-gray-200 text-gray-900 rounded">
<button onClick={deleteLocalCache} disabled={scanBusy || !nftAddress} className="px-3 py-1.5 bg-gray-700 text-gray-100 rounded hover:bg-gray-600">
Delete Local Cache
</button>
</div>
{scanComplete && (
<div className="text-xs text-green-700 bg-green-50 border border-green-200 rounded p-2 mt-2">
<div className="text-xs text-green-200 bg-green-900/30 border border-green-700 rounded p-2 mt-2">
Owner scan completed (gap limit reached). Reset or delete cache to rescan.
</div>
)}
<div className="text-xs text-gray-900">
<div className="text-xs text-gray-300">
Cached IDs: {detectedTokenIds.length ? detectedTokenIds.map((id) => id.toString()).join(', ') : '—'}
</div>
</div>
<div className="rounded border p-4 bg-white">
<div className="font-medium text-gray-900">About</div>
<p className="text-sm text-gray-900 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-900 mt-2">Base network is required. The app will attempt to detect your token IDs via on-chain queries.</p>
<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">Base network is required. The app will attempt to detect your token IDs via on-chain queries.</p>
</div>
</div>