Skip to content

Commit e71a29c

Browse files
onmaxonmax
committed
feat(rpc): improve method descriptions and layout
1 parent 015f7ba commit e71a29c

File tree

3 files changed

+94
-61
lines changed

3 files changed

+94
-61
lines changed

‎app/components/RpcMethod.vue‎

Lines changed: 63 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -72,64 +72,18 @@ async function callRpc() {
7272
<h1 class="text-4xl font-semibold tracking-tight text-highlighted">
7373
{{ props.method.humanReadableName }}
7474
</h1>
75-
<p v-if="props.method.description" class="max-w-3xl text-base leading-7 text-muted">
75+
<p class="max-w-3xl text-base leading-7 text-muted">
7676
{{ props.method.description }}
7777
</p>
78-
</section>
79-
80-
<UCard class="border-0">
81-
<template #header>
82-
<div class="flex items-center justify-between gap-3">
83-
<div>
84-
<h2 class="text-lg font-semibold text-highlighted">
85-
Interactive playground
86-
</h2>
87-
<p class="text-sm text-muted">
88-
Try the method against a public RPC endpoint.
89-
</p>
90-
</div>
91-
</div>
92-
</template>
93-
94-
<div class="space-y-4">
95-
<UFormField label="RPC endpoint" name="server">
96-
<UInput v-model="serverUrl" icon="i-tabler:server" />
97-
</UFormField>
98-
99-
<div
100-
v-if="props.method.input.length"
101-
class="grid gap-4 md:grid-cols-2"
102-
>
103-
<UFormField
104-
v-for="input in props.method.input"
105-
:key="input.key"
106-
:label="input.label || input.key"
107-
:name="input.key"
108-
>
109-
<USwitch
110-
v-if="input.type === 'boolean'"
111-
v-model="booleanParams[input.key]"
112-
/>
113-
<UInput
114-
v-else
115-
v-model="textParams[input.key]"
116-
:placeholder="input.type"
117-
/>
118-
</UFormField>
119-
</div>
120-
121-
<div class="flex justify-end">
122-
<UButton
123-
:loading="loading"
124-
label="Call method"
125-
trailing-icon="i-tabler:player-play"
126-
color="primary"
127-
class="rounded-full"
128-
@click="callRpc"
129-
/>
130-
</div>
78+
<div class="flex flex-wrap items-center gap-2">
79+
<UBadge color="neutral" variant="soft">
80+
{{ props.method.name }}
81+
</UBadge>
82+
<UBadge :color="props.method.popular ? 'primary' : 'secondary'" variant="soft">
83+
{{ props.method.popular ? 'popular method' : 'rpc method' }}
84+
</UBadge>
13185
</div>
132-
</UCard>
86+
</section>
13387

13488
<div class="grid gap-6 lg:grid-cols-2">
13589
<UCard class="border-0">
@@ -192,6 +146,60 @@ async function callRpc() {
192146
</UCard>
193147
</div>
194148

149+
<UCard class="border-0">
150+
<template #header>
151+
<div class="flex items-center justify-between gap-3">
152+
<div>
153+
<h2 class="text-lg font-semibold text-highlighted">
154+
Interactive playground
155+
</h2>
156+
<p class="text-sm text-muted">
157+
Try the method against a public RPC endpoint.
158+
</p>
159+
</div>
160+
</div>
161+
</template>
162+
163+
<div class="space-y-4">
164+
<UFormField label="RPC endpoint" name="server">
165+
<UInput v-model="serverUrl" icon="i-tabler:server" />
166+
</UFormField>
167+
168+
<div
169+
v-if="props.method.input.length"
170+
class="grid gap-4 md:grid-cols-2"
171+
>
172+
<UFormField
173+
v-for="input in props.method.input"
174+
:key="input.key"
175+
:label="input.label || input.key"
176+
:name="input.key"
177+
>
178+
<USwitch
179+
v-if="input.type === 'boolean'"
180+
v-model="booleanParams[input.key]"
181+
/>
182+
<UInput
183+
v-else
184+
v-model="textParams[input.key]"
185+
:placeholder="input.type"
186+
/>
187+
</UFormField>
188+
</div>
189+
190+
<div class="flex justify-end">
191+
<UButton
192+
:loading="loading"
193+
label="Call method"
194+
trailing-icon="i-tabler:player-play"
195+
color="primary"
196+
class="rounded-full"
197+
@click="callRpc"
198+
/>
199+
</div>
200+
</div>
201+
</UCard>
202+
195203
<UAlert
196204
v-if="error"
197205
color="error"

‎app/components/RpcMethodsGrid.vue‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,27 @@ const { data: groups } = await useAsyncData('rpc-method-groups', () => loadMetho
1616
{{ group.text }}
1717
</h2>
1818
</div>
19-
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
20-
<UButton
21-
v-for="method in group.methods" :key="method.name"
22-
:to="method.link" :label="method.name"
23-
variant="soft" color="neutral" class="justify-start rounded-xl font-mono text-sm"
24-
/>
19+
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
20+
<NuxtLink
21+
v-for="method in group.methods"
22+
:key="method.name"
23+
:to="method.link"
24+
class="group block rounded-2xl border border-default bg-default p-5 transition hover:border-primary/40 hover:bg-elevated"
25+
>
26+
<div class="space-y-3">
27+
<div class="space-y-1">
28+
<p class="font-mono text-sm text-muted">
29+
{{ method.name }}
30+
</p>
31+
<h3 class="text-base font-semibold text-highlighted group-hover:text-primary">
32+
{{ method.humanReadableName }}
33+
</h3>
34+
</div>
35+
<p class="line-clamp-3 text-sm leading-6 text-toned">
36+
{{ method.description }}
37+
</p>
38+
</div>
39+
</NuxtLink>
2540
</div>
2641
</section>
2742
</div>

‎app/utils/rpc.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export async function loadMethods(openRpcJson: OpenrpcDocument): Promise<NimiqRp
9999
...method,
100100
method: slugify(method.name),
101101
humanReadableName: toHumanReadable(method.name),
102+
description: normalizeMethodDescription(method.description, toHumanReadable(method.name)),
102103
input: parseInput(method.params),
103104
output: parseOutput(method.result),
104105
link: `/rpc/methods/${slugify(method.name)}`,
@@ -124,6 +125,15 @@ export async function loadMethods(openRpcJson: OpenrpcDocument): Promise<NimiqRp
124125
return result
125126
}
126127

128+
function normalizeMethodDescription(description: string | undefined, humanReadableName: string) {
129+
const normalized = description?.trim()
130+
if (normalized) {
131+
return normalized
132+
}
133+
134+
return `Reference for the ${humanReadableName} RPC method.`
135+
}
136+
127137
function getTypeString(schema: any): string {
128138
if (schema.oneOf) {
129139
// Handle union types like ValidityStartHeight

0 commit comments

Comments
 (0)