chore: improvements in rpc-client

Author: onmax

.vitepress/data/nimiq-utils.data.ts

@@ -104,7 +104,7 @@ type ModuleContentMap = Record<string, ModuleContent>
 // Module content data
 const moduleContent: ModuleContentMap = {
   'address-book': {
-    title: 'AddressBook',
+    title: 'Address Book',
     description: 'Provides mapping of addresses to their corresponding labels for mainnet pools, services, and exchanges.',
     usageExamples: [
       {
@@ -188,7 +188,7 @@ console.log(\`Block \${blockNumber} is in epoch \${currentEpoch}, batch \${batch
     ],
   },
   'browser-detection': {
-    title: 'BrowserDetection',
+    title: 'Browser Detection',
     description: 'Utility for detecting browser details including type, version, private mode, and device information.',
     usageExamples: [
       {
@@ -341,7 +341,7 @@ console.log(theme) // 'dark'
     ],
   },
   'currency-info': {
-    title: 'CurrencyInfo',
+    title: 'Currency Info',
     description: 'Provides currency information including code, symbol, name, and decimal precision.',
     usageExamples: [
       {
@@ -453,7 +453,7 @@ console.log(historic) // Array of daily rates
     ],
   },
   'formattable-number': {
-    title: 'FormattableNumber',
+    title: 'Formattable Number',
     description: 'Formats and converts numbers without precision loss with customizable formatting options.',
     usageExamples: [
       {
@@ -535,7 +535,7 @@ console.log(price.toString()) // '123.46'
     ],
   },
   'rate-limit-scheduler': {
-    title: 'RateLimitScheduler',
+    title: 'Rate Limit Scheduler',
     description: 'Controls and limits task execution based on defined rate limits and parallel task limits.',
     usageExamples: [
       {
@@ -718,7 +718,7 @@ tween.start()
     ],
   },
   'utf8-tools': {
-    title: 'Utf8Tools',
+    title: 'Utf8 Tools',
     description: 'Utility class for UTF-8 string and byte array conversions, validation, and truncation.',
     usageExamples: [
       {
@@ -752,7 +752,7 @@ console.log(string) // 'Hello, 世界!'
     ],
   },
   'validation-utils': {
-    title: 'ValidationUtils',
+    title: 'Validation Utils',
     description: 'Utility class for validating, normalizing, and checking Nimiq addresses and hashes.',
     usageExamples: [
       {

.vitepress/theme.config.ts

@@ -159,14 +159,16 @@ export const themeConfig = {
           items: [
             { text: 'Overview', link: '/rpc-client/', icon: 'i-tabler:layout-grid' },
             { text: 'Open RPC Servers', link: '/rpc-client/open-servers', icon: 'i-tabler:server' },
-            { text: 'Integrations', icon: 'i-tabler:chart-funnel', items: [
-              { text: 'Raw Requests', link: '/rpc-client/integrations/raw', icon: 'i-tabler:terminal-2' },
-              { text: 'ARPL CLI Tool', link: '/rpc-client/integrations/arpl', icon: 'i-tabler:terminal' },
-              { text: 'TypeScript Client', link: '/rpc-client/integrations/typescript', icon: 'i-logos:typescript-icon' },
-              { text: 'JavaScript Native', link: '/rpc-client/integrations/javascript', icon: 'i-logos:javascript' },
-              { text: 'MCP Server (AI)', link: '/rpc-client/integrations/mcp', icon: 'i-tabler:robot' },
-
-            ] },
+          ],
+        },
+        {
+          label: 'Integrations',
+          items: [
+            { text: 'Raw Requests', link: '/rpc-client/integrations/raw', icon: 'i-tabler:terminal-2' },
+            { text: 'ARPL CLI Tool', link: '/rpc-client/integrations/arpl', icon: 'i-tabler:terminal' },
+            { text: 'TypeScript Client', link: '/rpc-client/integrations/typescript', icon: 'i-logos:typescript-icon' },
+            { text: 'JavaScript Native', link: '/rpc-client/integrations/javascript', icon: 'i-logos:javascript' },
+            { text: 'MCP Server (AI)', link: '/rpc-client/integrations/mcp', icon: 'i-local:mcp' },
           ],
         },
         {

.vitepress/theme/components/Banner.vue

@@ -9,36 +9,33 @@ defineProps<{
 </script>
 
 <template>
-  <section relative z-10 style="--pt: 0; --pb:0; --px: 0">
-    <div
-      class="nq-raw"
-      outline="solid 1.5 offset--1.5 white/20"
-      mx-auto bg-gradient-green w-full shadow relative of-hidden f-p-lg f-rounded-md
-    >
-      <div f-size="200/400" pointer-events-none absolute bottom="-10 lg:-0.2775em" right="-0.2em lg:-0.25em">
-        <div text-transparent i-nimiq:logos-nimiq-mono>
-          <div size-full bg-linear="to-bl from-transparent via-transparent to-neutral/20" />
-        </div>
+  <div
+    class="nq-raw" outline="solid 1.5 offset--1.5 white/20" mx-auto bg-gradient-green w-full shadow relative
+    of-hidden f-p-lg f-rounded-md
+  >
+    <div f-size="200/400" pointer-events-none absolute bottom="-10 lg:-0.2775em" right="-0.2em lg:-0.25em">
+      <div text-transparent i-nimiq:logos-nimiq-mono>
+        <div size-full bg-linear="to-bl from-transparent via-transparent to-neutral/20" />
       </div>
+    </div>
 
-      <div flex="~ wrap justify-between items-end" max-w-full w-full relative z-10>
-        <div max-w-60ch>
-          <p v-if="label" nq-label text="12 white/80!">
-            {{ label }}
-          </p>
-          <h3 text-white font-semibold f-text-2xl mt-4="!">
-            {{ headline }}
-          </h3>
-          <p v-if="subline" text="white/80" mt-8>
-            {{ subline }}
-          </p>
-        </div>
-        <a v-if="linkHref && linkLabel" :href="linkHref" un-text-blue nq-arrow nq-pill-lg nq-pill-tertiary>
-          {{ linkLabel }}
-        </a>
+    <div flex="~ wrap justify-between items-end" max-w-full w-full relative z-10>
+      <div max-w-60ch>
+        <p v-if="label" nq-label text="12 white/80!">
+          {{ label }}
+        </p>
+        <h3 text-white font-semibold f-text-2xl mt-4="!">
+          {{ headline }}
+        </h3>
+        <p v-if="subline" text="white/80" mt-8>
+          {{ subline }}
+        </p>
       </div>
+      <a v-if="linkHref && linkLabel" :href="linkHref" un-text-blue nq-arrow nq-pill-lg nq-pill-tertiary>
+        {{ linkLabel }}
+      </a>
     </div>
-  </section>
+  </div>
 </template>
 
 <style scoped>

.vitepress/theme/components/CategoryGrid.vue

@@ -18,7 +18,7 @@ defineProps<{
 </script>
 
 <template>
-  <div v-for="({ text, items }) in groups" :key="text" flex="~ col gap-12" nq-raw>
+  <div v-for="({ text, items }) in groups" :key="text" flex="~ col gap-16" nq-raw f-mt-md>
     <h2 f-text-2xs="!" mx-0 nq-label mb-0="!">
       {{ text }}
     </h2>

.vitepress/theme/components/Hero.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useSlots } from 'vue'
 import HexagonsBackground from './HexagonsBackground.vue'
 
 interface Card {
@@ -21,25 +22,29 @@ interface Props {
 }
 
 defineProps<Props>()
+
+const slots = useSlots()
 </script>
 
 <template>
   <section relative of-x-clip>
-    <NqHeadline :title :description :align mt-0 h1 z-100 />
+    <NqHeadline :title :description :align mt-0 :class="{ 'f-mb-sm': !!slots.default }" h1 z-100 />
     <div max-w-none="!" class="nq-raw" op-30 w-screen :class="cards ? 'bottom-32' : 'bottom--32'" absolute of-hidden>
       <ClientOnly>
-        <HexagonsBackground :class="!cards ? 'op-50' : ''" />
+        <HexagonsBackground pointer-events-none :class="!cards ? 'op-50' : ''" />
       </ClientOnly>
     </div>
 
-    <div v-if="cards" grid="~ cols-1 md:cols-2 md:rows-[auto_auto_auto] gap-32" z-100 f-min-h-3xl>
-      <NqCard
-        v-for="card in cards" :key="card.title" v-bind="card" :class="{ '[&_p]:z-10': card.bgColor }"
-        :icon-class="!card.bgColor ? 'absolute size-32 right-12 top-12 hocus:text-white/80' : 'absolute size-200 op-60 md:op-100 right--12 bottom--24'"
-        :style="card.hoverColor ? `--from:var(--colors-${card.hoverColor}-gradient-from); --to:var(--colors-${card.hoverColor}-gradient-to)` : undefined"
-        :hover="card.hoverColor ? '[--nq-gradient-from:var(--from)] [--nq-gradient-to:var(--to)] text-white' : ''"
-      />
-    </div>
+    <slot name="default">
+      <div v-if="cards" grid="~ cols-1 md:cols-2 md:rows-[auto_auto_auto] gap-32" z-100 f-min-h-3xl>
+        <NqCard
+          v-for="card in cards" :key="card.title" v-bind="card" :class="{ '[&_p]:z-10': card.bgColor }"
+          :icon-class="!card.bgColor ? 'absolute size-32 right-12 top-12 hocus:text-white/80' : 'absolute size-200 op-60 md:op-100 right--12 bottom--24'"
+          :style="card.hoverColor ? `--from:var(--colors-${card.hoverColor}-gradient-from); --to:var(--colors-${card.hoverColor}-gradient-to)` : undefined"
+          :hover="card.hoverColor ? '[--nq-gradient-from:var(--from)] [--nq-gradient-to:var(--to)] text-white' : ''"
+        />
+      </div>
+    </slot>
   </section>
 </template>
 

.vitepress/theme/components/Links.vue

@@ -52,7 +52,7 @@ function getErrorStatusCode(error: any): string | null {
         <p v-if="props.input.length === 0" font-italic>
           It does not require any parameters.
         </p>
-        <fieldset v-else flex="~ col gap-sm">
+        <fieldset v-else flex="~ col gap-16">
           <Input v-for="field in props.input" v-bind="field" :key="field.key" v-model="widget.userParams[field.key]" :label="field.key" />
         </fieldset>
         <div flex="~ items-center justify-end gap-6" f-mt-xs>

.vitepress/theme/components/Rpc/RpcPlayground.vue

@@ -50,11 +50,11 @@ const moduleGroups = nimiqUtilsModules.filter(group =>
 )
 </script>
 
-<Hero bg-neutral-0 v-bind="$frontmatter.hero" />
+<Hero v-bind="$frontmatter.hero" />
 
-<NimiqFeatures bg-neutral-0 v-bind="$frontmatter.nimiqUtilsFeatures" />
+<NimiqFeatures v-bind="$frontmatter.nimiqUtilsFeatures" />
 
-<section bg-neutral-0>
+<section>
 
 <NqHeadline title="Quick Examples" description="See Nimiq Utils in action with real-world code snippets" f-mb-sm />
 
@@ -124,7 +124,7 @@ const supplyAtBlock = posSupplyAt(1000000)
 
 </section>
 
-<section bg-neutral-0>
+<section>
 
 <NqHeadline title="All Modules" description="Browse all available utility modules by category" f-mb-sm />
 

nimiq-utils/index.md

@@ -56,8 +56,8 @@
     "eslint": "^9.35.0",
     "lint-staged": "^16.1.6",
     "markdown-it-mathjax3": "^4.3.2",
-    "nimiq-css": "^1.0.0-beta.94",
-    "nimiq-vitepress-theme": "^1.0.0-beta.94",
+    "nimiq-css": "^1.0.0-beta.99",
+    "nimiq-vitepress-theme": "^1.0.0-beta.99",
     "ofetch": "^1.4.1",
     "pathe": "^2.0.3",
     "pkg-types": "^2.3.0",