Skip to content

[Yaci Viewer] - Dark mode is incomplete #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wistkeylab wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Yaci Viewer] - Dark mode is incomplete #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .claude/worktrees/keen-ritchie-2a9a2a
Open in desktop
Submodule keen-ritchie-2a9a2a added at b908c9
2 changes: 1 addition & 1 deletion applications/viewer/src/components/AmountBadges.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
</span>
{/if}
<button
class="text-gray-400 hover:text-gray-600"
class="text-base-content/50 hover:text-base-content/70"
on:click={() => copyToClipboard(amount.asset_name)}
title="Copy asset name"
>
Expand Down
52 changes: 26 additions & 26 deletions applications/viewer/src/components/Contract.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,64 +69,64 @@
{/if}

<!-- Contract Section -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
<div class="bg-base-100 rounded-lg shadow-sm p-4 mb-4">
<div class="flex flex-col">
<div class="text-sm font-medium text-gray-500 mb-2">Contract {index + 1}</div>
<div class="text-sm font-medium text-base-content/60 mb-2">Contract {index + 1}</div>
<div class="flex items-center gap-2">
<a href="/scripts/{contract.script_hash}" class="text-sm text-blue-600 hover:underline break-all">{contract.script_hash}</a>
<span class="text-sm text-gray-500">({contract.type})</span>
<span class="text-sm text-base-content/60">({contract.type})</span>
</div>
</div>
</div>

<!-- Redeemer Section -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
<div class="bg-base-100 rounded-lg shadow-sm p-4 mb-4">
<div class="flex flex-col">
<div class="text-sm font-medium text-gray-500 mb-2">Redeemer</div>
<div class="text-sm font-medium text-base-content/60 mb-2">Redeemer</div>
{#if contract.redeemer && typeof contract.redeemer === 'object'}
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col">
<span class="text-xs text-gray-500">Tag</span>
<span class="text-sm text-gray-900">{contract.redeemer.tag}</span>
<span class="text-xs text-base-content/60">Tag</span>
<span class="text-sm text-base-content">{contract.redeemer.tag}</span>
</div>
<div class="flex flex-col">
<span class="text-xs text-gray-500">Index</span>
<span class="text-sm text-gray-900">{contract.redeemer.index}</span>
<span class="text-xs text-base-content/60">Index</span>
<span class="text-sm text-base-content">{contract.redeemer.index}</span>
</div>
{#if contract.redeemer.data}
<div class="flex flex-col">
<span class="text-xs text-gray-500">Data</span>
<span class="text-sm text-gray-900 break-all">{contract.redeemer.data}</span>
<span class="text-xs text-base-content/60">Data</span>
<span class="text-sm text-base-content break-all">{contract.redeemer.data}</span>
</div>
{/if}
{#if contract.redeemer.ex_units}
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col">
<span class="text-xs text-gray-500">Memory</span>
<span class="text-sm text-gray-900">{contract.redeemer.ex_units.mem.toLocaleString()}</span>
<span class="text-xs text-base-content/60">Memory</span>
<span class="text-sm text-base-content">{contract.redeemer.ex_units.mem.toLocaleString()}</span>
</div>
<div class="flex flex-col">
<span class="text-xs text-gray-500">Steps</span>
<span class="text-sm text-gray-900">{contract.redeemer.ex_units.steps.toLocaleString()}</span>
<span class="text-xs text-base-content/60">Steps</span>
<span class="text-sm text-base-content">{contract.redeemer.ex_units.steps.toLocaleString()}</span>
</div>
</div>
{/if}
</div>
{:else}
<div class="text-sm text-gray-900 break-all">{formatRedeemer(contract.redeemer)}</div>
<div class="text-sm text-base-content break-all">{formatRedeemer(contract.redeemer)}</div>
{/if}
</div>
</div>

<!-- Datum Hash Section -->
{#if contract.datum_hash}
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
<div class="bg-base-100 rounded-lg shadow-sm p-4 mb-4">
<div class="flex flex-col">
<div class="text-sm font-medium text-gray-500 mb-2">Datum Hash</div>
<div class="text-sm font-medium text-base-content/60 mb-2">Datum Hash</div>
<div class="flex items-start gap-2">
<a href="/datums/{contract.datum_hash}" class="text-sm text-blue-600 hover:underline break-all flex-grow">{contract.datum_hash}</a>
<button
class="text-gray-400 hover:text-gray-600 flex-shrink-0"
class="text-base-content/50 hover:text-base-content/70 flex-shrink-0"
on:click={() => copyToClipboard(contract.datum_hash, 'Datum Hash copied to clipboard')}
title="Copy datum hash"
>
Expand All @@ -141,13 +141,13 @@

<!-- Datum Section -->
{#if contract.datum}
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
<div class="bg-base-100 rounded-lg shadow-sm p-4 mb-4">
<div class="flex flex-col">
<div class="text-sm font-medium text-gray-500 mb-2">Datum</div>
<div class="text-sm font-medium text-base-content/60 mb-2">Datum</div>
<div class="flex items-start gap-2">
<div class="text-sm text-gray-900 break-all flex-grow">{contract.datum}</div>
<div class="text-sm text-base-content break-all flex-grow">{contract.datum}</div>
<button
class="text-gray-400 hover:text-gray-600 flex-shrink-0"
class="text-base-content/50 hover:text-base-content/70 flex-shrink-0"
on:click={() => copyToClipboard(contract.datum, 'Datum copied to clipboard')}
title="Copy datum value"
>
Expand All @@ -161,13 +161,13 @@
{/if}

<!-- Contract Body Section -->
<div class="bg-white rounded-lg shadow-sm p-4">
<div class="bg-base-100 rounded-lg shadow-sm p-4">
<div class="flex flex-col">
<div class="text-sm font-medium text-gray-500 mb-2">Contract Body</div>
<div class="text-sm font-medium text-base-content/60 mb-2">Contract Body</div>
<div class="flex items-start gap-2">
<textarea {...textareaprops} value={contract.script_content} class="w-full h-max font-mono text-sm"></textarea>
<button
class="text-gray-400 hover:text-gray-600 flex-shrink-0"
class="text-base-content/50 hover:text-base-content/70 flex-shrink-0"
on:click={() => copyToClipboard(contract.script_content, 'Contract Body copied to clipboard')}
title="Copy contract body"
>
Expand Down
6 changes: 3 additions & 3 deletions applications/viewer/src/components/Nav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@
:global(.dropdown-content) {
position: absolute;
z-index: 50;
background-color: white;
border: 1px solid #e5e7eb;
background-color: oklch(var(--b1));
border: 1px solid oklch(var(--b3));
border-radius: 0.375rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
Expand All @@ -93,7 +93,7 @@
nav {
position: relative;
z-index: 40;
background-color: white;
background-color: oklch(var(--b1));
}

/* Style for mobile menu to ensure it's above everything */
Expand Down
22 changes: 11 additions & 11 deletions applications/viewer/src/components/drep/DRepDetails.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,43 +14,43 @@

{#if show}
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center">
<div class="bg-white p-4 rounded shadow-lg mx-auto flex flex-col items-center">
<div class="bg-base-100 p-4 rounded shadow-lg mx-auto flex flex-col items-center">
<div class="text-right w-full">
<button on:click={close}>
<XIcon class="cursor-pointer"/>
</button>
</div>
<div class="mt-4 text-sm text-gray-700 break-words w-full">
<div class="text-lg font-medium text-gray-700">DRep Id :</div>
<div class="mt-4 text-sm text-base-content/80 break-words w-full">
<div class="text-lg font-medium text-base-content/80">DRep Id :</div>
<div>
{drep.drep_id}
</div>
</div>
<div class="mt-4 text-sm text-gray-700 break-words w-full">
<div class="text-lg font-medium text-gray-700">DRep Hash :</div>
<div class="mt-4 text-sm text-base-content/80 break-words w-full">
<div class="text-lg font-medium text-base-content/80">DRep Hash :</div>
<div>
{drep.drep_hash}
</div>
</div>
{#if drep.deposit}
<div class="mt-4 text-sm text-gray-700 break-words w-full">
<div class="text-lg font-medium text-gray-700">Deposit :</div>
<div class="mt-4 text-sm text-base-content/80 break-words w-full">
<div class="text-lg font-medium text-base-content/80">Deposit :</div>
<div>
{drep.deposit}
</div>
</div>
{/if}
{#if drep.anchor_hash}
<div class="mt-4 text-sm text-gray-700 break-words w-full">
<div class="text-lg font-medium text-gray-700">Anchor Hash :</div>
<div class="mt-4 text-sm text-base-content/80 break-words w-full">
<div class="text-lg font-medium text-base-content/80">Anchor Hash :</div>
<div>
{drep.anchor_hash}
</div>
</div>
{/if}
{#if drep.anchor_url }
<div class="mt-4 text-sm text-gray-700 break-words w-full">
<div class="text-lg font-medium text-gray-700">Anchor URL :</div>
<div class="mt-4 text-sm text-base-content/80 break-words w-full">
<div class="text-lg font-medium text-base-content/80">Anchor URL :</div>
<div>
<a href={drep.anchor_url} target="_blank" class="text-blue-500">{drep.anchor_url}</a>
</div>
Expand Down
6 changes: 3 additions & 3 deletions applications/viewer/src/components/inputoutput/InputOutput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@
export let tx = {};
</script>

<div class="text-gray-600 body-font">
<div class="text-base-content/70 body-font">
<div class="container px-5 py-10 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="p-4 w-full">
<h2 class="text-xl font-semibold text-gray-700">Inputs</h2>
<h2 class="text-xl font-semibold text-base-content/80">Inputs</h2>
<Inputs inputs={tx.inputs}></Inputs>
</div>
<div class="p-4 w-full">
<h2 class="text-xl font-semibold text-gray-700">Outputs</h2>
<h2 class="text-xl font-semibold text-base-content/80">Outputs</h2>
<Outputs outputs={tx.outputs}></Outputs>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions applications/viewer/src/components/inputoutput/Inputs.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<div>
{#each inputs as input}
<div class="mt-4">
<div class="text-sm font-medium text-gray-700 md:ml-2 break-words"><AddressLink address={input.address} maxLength={45} /></div>
<div class="text-xs text-gray-500 break-words"><a href="/transactions/{input.tx_hash}">{input.tx_hash}#{input.output_index}</a></div>
<div class="text-sm font-medium text-base-content/80 md:ml-2 break-words"><AddressLink address={input.address} maxLength={45} /></div>
<div class="text-xs text-base-content/60 break-words"><a href="/transactions/{input.tx_hash}">{input.tx_hash}#{input.output_index}</a></div>
<div class="flex justify-end mt-2">
<div class="space-x-2">
<AmountBadges amounts={input.amount}></AmountBadges>
Expand All @@ -40,7 +40,7 @@
</div>
{/if}
</div>
<hr class="my-4 border-gray-100">
<hr class="my-4 border-base-200">
{/each}
</div>

Expand Down
22 changes: 11 additions & 11 deletions applications/viewer/src/components/inputoutput/OutputDetails.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,35 +22,35 @@

{#if show}
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center z-[9999]">
<div class="bg-white p-4 rounded shadow-lg mx-auto flex flex-col items-center max-w-3xl w-full max-h-[90vh] overflow-y-auto">
<div class="sticky top-0 bg-white w-full text-right z-[9999] py-2">
<button on:click={close} class="hover:bg-gray-100 rounded-full p-1">
<div class="bg-base-100 p-4 rounded shadow-lg mx-auto flex flex-col items-center max-w-3xl w-full max-h-[90vh] overflow-y-auto">
<div class="sticky top-0 bg-base-100 w-full text-right z-[9999] py-2">
<button on:click={close} class="hover:bg-base-200 rounded-full p-1">
<XIcon class="cursor-pointer"/>
</button>
</div>
<div class="w-full">
{#if output.inline_datum}
<div class="mt-4 text-sm text-gray-700 break-words w-full">
<div class="text-lg font-medium text-gray-700">Datum (Cbor) :</div>
<div class="mt-4 text-sm text-base-content/80 break-words w-full">
<div class="text-lg font-medium text-base-content/80">Datum (Cbor) :</div>
<div class="font-mono break-all whitespace-pre-wrap">
{output.inline_datum}
</div>
</div>
<div class="mt-4 text-sm text-gray-700 break-words w-full">
<div class="text-lg font-medium text-gray-700">Datum (Json) :</div>
<div class="mt-4 text-sm text-base-content/80 break-words w-full">
<div class="text-lg font-medium text-base-content/80">Datum (Json) :</div>
<JsonContent text={output.inline_datum_json} rows={20}></JsonContent>
</div>
{/if}

{#if output.script_ref}
<div class="mt-4 text-sm text-gray-700 break-words w-full">
<div class="text-lg font-medium text-gray-700">Reference Script Hash :</div>
<div class="mt-4 text-sm text-base-content/80 break-words w-full">
<div class="text-lg font-medium text-base-content/80">Reference Script Hash :</div>
<div class="font-mono break-all">
{output.reference_script_hash}
</div>
</div>
<div class="mt-4 text-sm text-gray-700 break-words w-full">
<div class="text-lg font-medium text-gray-700">Reference Script :</div>
<div class="mt-4 text-sm text-base-content/80 break-words w-full">
<div class="text-lg font-medium text-base-content/80">Reference Script :</div>
<JsonContent text={output.script_ref} rows={10}></JsonContent>
</div>
{/if}
Expand Down
4 changes: 2 additions & 2 deletions applications/viewer/src/components/inputoutput/Outputs.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<div>
{#each outputs as output}
<div class="mt-4">
<div class="text-sm font-medium text-gray-700 md:ml-2 break-words"><AddressLink address={output.address} maxLength={45} /></div>
<div class="text-sm font-medium text-base-content/80 md:ml-2 break-words"><AddressLink address={output.address} maxLength={45} /></div>
<div class="flex justify-end mt-2">
<div class="space-x-2">
<AmountBadges amounts={output.amount}></AmountBadges>
Expand All @@ -39,7 +39,7 @@
</div>
{/if}
</div>
<hr class="my-4 border-gray-100">
<hr class="my-4 border-base-200">
{/each}
</div>

Expand Down
14 changes: 7 additions & 7 deletions applications/viewer/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@

{#if blocks.length == 0 || (blocks.length > 0 && Object.keys(blocks[0]).length === 0)}
<section class="flex flex-col items-center mt-24">
<div class="card bg-white shadow-xl w-96">
<div class="card bg-base-100 shadow-xl w-96">
<div class="card-body items-center text-center">
<span class="text-xl font-bold mb-2 text-gray-800">Waiting for live data</span>
<span class="loading loading-ring loading-lg text-gray-900"></span>
<span class="text-xl font-bold mb-2 text-base-content">Waiting for live data</span>
<span class="loading loading-ring loading-lg text-base-content"></span>
</div>
</div>
</section>
Expand All @@ -66,26 +66,26 @@
<section class="container mx-auto px-4 py-12">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Recent Blocks -->
<div class="bg-white rounded-lg">
<div class="bg-base-100 rounded-lg">
<div class="p-6">
<div class="flex items-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
<h2 class="text-2xl font-bold text-gray-900">Recent Blocks</h2>
<h2 class="text-2xl font-bold text-base-content">Recent Blocks</h2>
</div>
<Blocks></Blocks>
</div>
</div>

<!-- Recent Transactions -->
<div class="bg-white rounded-lg">
<div class="bg-base-100 rounded-lg">
<div class="p-6">
<div class="flex items-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<h2 class="text-2xl font-bold text-gray-900">Recent Transactions</h2>
<h2 class="text-2xl font-bold text-base-content">Recent Transactions</h2>
</div>
<Transactions></Transactions>
</div>
Expand Down
Loading
Loading