From 5ffed633e8b0e73a294674b8c0e216b6357c2274 Mon Sep 17 00:00:00 2001 From: cor Date: Thu, 30 May 2024 19:37:49 +0200 Subject: [PATCH 1/7] feat(app): voyager queue page --- .../lib/graphql/documents/voyager-queue.ts | 13 +++++++++++ .../routes/explorer/(components)/menu.svelte | 2 +- app/src/routes/explorer/+layout.svelte | 6 ++--- app/src/routes/explorer/+layout.ts | 4 +++- app/src/routes/explorer/blocks/+page.svelte | 2 +- .../explorer/voyager-queue/+page.svelte | 23 +++++++++++++++++++ app/src/routes/faucet/+page.svelte | 13 +++++++++-- app/src/routes/transfer/+page.svelte | 3 --- 8 files changed, 55 insertions(+), 11 deletions(-) create mode 100644 app/src/lib/graphql/documents/voyager-queue.ts create mode 100644 app/src/routes/explorer/voyager-queue/+page.svelte diff --git a/app/src/lib/graphql/documents/voyager-queue.ts b/app/src/lib/graphql/documents/voyager-queue.ts new file mode 100644 index 0000000000..78be6207a7 --- /dev/null +++ b/app/src/lib/graphql/documents/voyager-queue.ts @@ -0,0 +1,13 @@ +import { graphql } from "gql.tada" + +export const voyagerQueueQuery = graphql(/* GraphQL */ ` + query VoyagerQueue($limit: Int = 10) { + queue(order_by: {id: desc}, limit: $limit, where: {status: {_eq: "ready"}}) { + id + item + message + parent + } + } +`) + diff --git a/app/src/routes/explorer/(components)/menu.svelte b/app/src/routes/explorer/(components)/menu.svelte index c1d81508ee..cffec5153b 100644 --- a/app/src/routes/explorer/(components)/menu.svelte +++ b/app/src/routes/explorer/(components)/menu.svelte @@ -61,7 +61,7 @@ let alwaysCollapsed = innerWidth <= alwaysCollapsedWidth )} > - {route} +
{route.replaceAll('-', ' ')}
{/if} {/each} diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte index 1840a2dbf7..5fc654f79b 100644 --- a/app/src/routes/explorer/+layout.svelte +++ b/app/src/routes/explorer/+layout.svelte @@ -50,7 +50,7 @@ const onExpand: Resizable.PaneProps["onExpand"] = () => { { - - + + diff --git a/app/src/routes/explorer/+layout.ts b/app/src/routes/explorer/+layout.ts index 02853b088d..41e2ca3096 100644 --- a/app/src/routes/explorer/+layout.ts +++ b/app/src/routes/explorer/+layout.ts @@ -6,6 +6,7 @@ import TvIcon from "virtual:icons/lucide/tv" import BlocksIcon from "virtual:icons/lucide/blocks" import ConnectionIcon from "virtual:icons/mdi/connection" import SendHorizontalIcon from "virtual:icons/lucide/send-horizontal" +import RocketIcon from "virtual:icons/lucide/rocket" const tables = ["blocks", "packets", "channels", "connections"] as const @@ -23,7 +24,8 @@ export const load = (loadEvent => { { route: "blocks", icon: BlocksIcon }, { route: "channels", icon: TvIcon }, { route: "packets", icon: SendHorizontalIcon }, - { route: "connections", icon: ConnectionIcon } + { route: "connections", icon: ConnectionIcon }, + { route: "voyager-queue", icon: RocketIcon } ] as Array } }) satisfies LayoutLoad diff --git a/app/src/routes/explorer/blocks/+page.svelte b/app/src/routes/explorer/blocks/+page.svelte index b594c21f0c..d33ba22627 100644 --- a/app/src/routes/explorer/blocks/+page.svelte +++ b/app/src/routes/explorer/blocks/+page.svelte @@ -59,7 +59,7 @@ const defaultColumns: Array> = [ variant: "short", minUnits: DurationUnits.Second, start: new Date(info.getValue() as string), - class: "pl-2 after:content-['_ago'] sm:after:content-[''] text-clip" + class: "pl-2 text-clip" }) }, { diff --git a/app/src/routes/explorer/voyager-queue/+page.svelte b/app/src/routes/explorer/voyager-queue/+page.svelte new file mode 100644 index 0000000000..a1e5b30048 --- /dev/null +++ b/app/src/routes/explorer/voyager-queue/+page.svelte @@ -0,0 +1,23 @@ + + +

Voyager Queue

+ +{#if $voyagerQueue?.data?.queue } +
+  {JSON.stringify($voyagerQueue.data.queue, null, 2)}
+
+{/if} diff --git a/app/src/routes/faucet/+page.svelte b/app/src/routes/faucet/+page.svelte index 601a71ddfe..59ee00b3d6 100644 --- a/app/src/routes/faucet/+page.svelte +++ b/app/src/routes/faucet/+page.svelte @@ -18,6 +18,7 @@ import ExternalLinkIcon from "virtual:icons/lucide/external-link" import { faucetFormSchema, unionAddressRegex } from "./schema.ts" import { Separator } from "$lib/components/ui/separator/index.ts" import { isValidCosmosAddress } from "$/lib/wallet/utilities/validate.ts" +import * as Card from "$lib/components/ui/card/index.ts" const debounceDelay = 3_500 let submissionStatus: "idle" | "submitting" | "submitted" | "error" = "idle" @@ -112,8 +113,14 @@ $: newTransfers = Union | Faucet -
-

Faucet

+
+ + + Faucet + +
+ +
diff --git a/app/src/routes/explorer/(components)/cell-text.svelte b/app/src/routes/explorer/(components)/cell-plain-text.svelte similarity index 100% rename from app/src/routes/explorer/(components)/cell-text.svelte rename to app/src/routes/explorer/(components)/cell-plain-text.svelte diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte index 5fc654f79b..ff13528955 100644 --- a/app/src/routes/explorer/+layout.svelte +++ b/app/src/routes/explorer/+layout.svelte @@ -28,7 +28,12 @@ let isCollapsed = false let leftPane: Resizable.PaneAPI $: [leftSize, rightSize] = [12, 88] -$: if (windowSize.width < 900) leftPane.collapse() +$: if (windowSize?.width < 900) { + try { + leftPane.collapse() + // biome-ignore lint/suspicious/noEmptyBlockStatements: + } catch {} +} const onLayoutChange: Resizable.PaneGroupProps["onLayoutChange"] = sizes => { document.cookie = `PaneForge:layout=${JSON.stringify(sizes)}` @@ -45,7 +50,7 @@ const onExpand: Resizable.PaneProps["onExpand"] = () => { } -
+
> = [ { accessorKey: "time", - size: 105, - maxSize: 105, + size: 90, + maxSize: 90, + minSize: 90, meta: { class: "ml-1.5 justify-start" }, header: info => "Time", cell: info => - flexRender(Duration, { + flexRender(CellDurationText, { totalUnits: 3, variant: "short", + class: "pl-2 text-clip", minUnits: DurationUnits.Second, - start: new Date(info.getValue() as string), - class: "pl-2 text-clip" + start: new Date(info.getValue() as string) }) }, { @@ -152,12 +154,14 @@ $: virtualizer = createVirtualizer({ }) -
+ + union - explorer + + +
-import { voyagerQueueQuery} from "$lib/graphql/documents/voyager-queue.ts" +import { voyagerQueueQuery } from "$lib/graphql/documents/voyager-queue.ts" import { createQuery } from "@tanstack/svelte-query" import request from "graphql-request" import { URLS } from "$lib/constants" @@ -10,8 +10,6 @@ $: voyagerQueue = createQuery({ // enabled: false, queryFn: async () => request(URLS.GRAPHQL, voyagerQueueQuery, { limit: 10 }) }) - -

Voyager Queue

From 4342b8452f708b5b7c6bd35fde8d144844dc5308 Mon Sep 17 00:00:00 2001 From: cor Date: Thu, 30 May 2024 23:59:48 +0200 Subject: [PATCH 4/7] feat(app): explorer titles --- app/src/routes/explorer/+layout.svelte | 21 +++++++++++++------ app/src/routes/explorer/blocks/+page.svelte | 6 ++---- app/src/routes/explorer/channels/+page.svelte | 3 --- .../routes/explorer/connections/+page.svelte | 6 ------ app/src/routes/explorer/packets/+page.svelte | 4 ---- .../explorer/voyager-queue/+page.svelte | 1 - 6 files changed, 17 insertions(+), 24 deletions(-) diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte index ff13528955..e127738b9b 100644 --- a/app/src/routes/explorer/+layout.svelte +++ b/app/src/routes/explorer/+layout.svelte @@ -6,6 +6,9 @@ import { cn } from "$lib/utilities/shadcn.ts" import * as Resizable from "$lib/components/ui/resizable" import GripVerticalIcon from "virtual:icons/tabler/grip-vertical" import { ScrollArea } from "$lib/components/ui/scroll-area/index.ts" +import { page } from "$app/stores"; +import { derived } from "svelte/store"; + import { onNavigate } from "$app/navigation"; export let data: LayoutData @@ -26,7 +29,7 @@ onMount(() => { let isCollapsed = false let leftPane: Resizable.PaneAPI -$: [leftSize, rightSize] = [12, 88] +$: [leftSize, rightSize] = [14, 88] $: if (windowSize?.width < 900) { try { @@ -48,6 +51,10 @@ const onExpand: Resizable.PaneProps["onExpand"] = () => { isCollapsed = false document.cookie = `PaneForge:collapsed=${false}` } + +// const explorerPage = derived(page, ($page) => $page.route.id?.split("/").at(-1)); +let explorerPage = $page.route.id?.split("/").at(-1).replaceAll('-', ' '); +onNavigate(navigation => {explorerPage = navigation.to?.route.id?.split("/").at(-1)?.replaceAll('-', ' ')});
@@ -55,14 +62,14 @@ const onExpand: Resizable.PaneProps["onExpand"] = () => { @@ -77,8 +84,10 @@ const onExpand: Resizable.PaneProps["onExpand"] = () => {
- - + +

{explorerPage}

+

Lorem ipsum description

+ diff --git a/app/src/routes/explorer/blocks/+page.svelte b/app/src/routes/explorer/blocks/+page.svelte index a88671c3f3..bbdaf1fc68 100644 --- a/app/src/routes/explorer/blocks/+page.svelte +++ b/app/src/routes/explorer/blocks/+page.svelte @@ -155,13 +155,12 @@ $: virtualizer = createVirtualizer({ - union - explorer + Union - Explorer -
({
-
diff --git a/app/src/routes/explorer/blocks/+page.svelte b/app/src/routes/explorer/blocks/+page.svelte index bbdaf1fc68..7aeac99cda 100644 --- a/app/src/routes/explorer/blocks/+page.svelte +++ b/app/src/routes/explorer/blocks/+page.svelte @@ -48,9 +48,7 @@ $: if (blockData) { const defaultColumns: Array> = [ { accessorKey: "time", - size: 90, - maxSize: 90, - minSize: 90, + size: 100, meta: { class: "ml-1.5 justify-start" }, @@ -68,7 +66,6 @@ const defaultColumns: Array> = [ accessorKey: "height", header: info => "Height", size: 100, - maxSize: 100, meta: { class: "w-full justify-start" }, @@ -100,11 +97,10 @@ const defaultColumns: Array> = [ { accessorKey: "hash", meta: { - class: "w-full justify-end" + class: "w-full justify-start ml-1.5" }, - header: info => flexRender(CellText, { value: "Hash", class: "text-right pr-3" }), - size: 400, - maxSize: 400, + header: info => flexRender(CellText, { value: "Hash", class: "text-left" }), + size: 1000, cell: info => flexRender(Button, { class: "py-0 px-2.5 max-w-[600px]", @@ -180,7 +176,7 @@ $: virtualizer = createVirtualizer({ on:click={header.column.getToggleSortingHandler()} class={cn( header.column.columnDef.meta?.class, - 'cursor-pointer select-none capitalize px-0 hover:bg-transparent font-mono text-md', + 'cursor-pointer select-none capitalize px-0 hover:bg-transparent text-md', )} > ({