Merge branch 'main' into feat/lightclient-commit-status

Author: 0xumutkk

Cargo.lock

@@ -45,6 +45,7 @@ members = [
   "lib/arbitrum-types",
   "lib/arbitrum-client",
   "lib/bob-types",
+  "lib/base-client",
   "lib/bob-client",
   "lib/serde-utils",
   "lib/ssz",
@@ -192,7 +193,7 @@ members = [
   "voyager/modules/finality/trusted-evm",
   "voyager/modules/finality/sui",
 
-  # "voyager/plugins/client-update/base",
+  "voyager/plugins/client-update/base",
   "voyager/plugins/client-update/bob",
   "voyager/plugins/client-update/arbitrum",
   "voyager/plugins/client-update/berachain",
@@ -328,20 +329,20 @@ parlia-light-client-types = { path = "lib/parlia-light-client-types", default-fe
 parlia-types              = { path = "lib/parlia-types", default-features = false }
 parlia-verifier           = { path = "lib/parlia-verifier", default-features = false }
 
+base-client             = { path = "lib/base-client", default-features = false }
 base-light-client-types = { path = "lib/base-light-client-types", default-features = false }
 base-verifier           = { path = "lib/base-verifier", default-features = false }
 
+bob-client             = { path = "lib/bob-client", default-features = false }
 bob-light-client-types = { path = "lib/bob-light-client-types", default-features = false }
+bob-types              = { path = "lib/bob-types", default-features = false }
 bob-verifier           = { path = "lib/bob-verifier", default-features = false }
 
 arbitrum-client             = { path = "lib/arbitrum-client", default-features = false }
 arbitrum-light-client-types = { path = "lib/arbitrum-light-client-types", default-features = false }
 arbitrum-types              = { path = "lib/arbitrum-types", default-features = false }
 arbitrum-verifier           = { path = "lib/arbitrum-verifier", default-features = false }
 
-bob-client = { path = "lib/bob-client", default-features = false }
-bob-types  = { path = "lib/bob-types", default-features = false }
-
 cometbls-groth16-verifier   = { path = "lib/cometbls-groth16-verifier", default-features = false }
 cometbls-light-client       = { path = "cosmwasm/ibc-union/lightclient/cometbls", default-features = false }
 cometbls-light-client-types = { path = "lib/cometbls-light-client-types", default-features = false }

Cargo.toml

@@ -22,6 +22,7 @@
   --color-zinc-925: oklch(0.1755 0.0055 285.854);
   --color-babylon-orange: oklch(62.55% 0.149 43.92);
   --color-union: oklch(72.2% 0.099 205.4);
+  --color-yaps: oklch(84.979% 0.1738 86.555);
   --color-accent: var(--color-babylon-orange);
   --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
     Consolas, "Liberation Mono", "Courier New", monospace;

app2/src/app.css

@@ -5,6 +5,7 @@ import { uiStore } from "$lib/stores/ui.svelte"
 import { cn } from "$lib/utils"
 import { onMount } from "svelte"
 import { navigation } from "./Sidebar/navigation"
+import YapAd from "./YapAd.svelte"
 
 interface Props {
   onItemClick?: () => void
@@ -18,8 +19,8 @@ const {
   variant = "static",
 }: Props = $props()
 
-let highlightElement: HTMLElement
-let navigationContainer: HTMLDivElement
+let highlightElement: HTMLElement | undefined
+let navigationContainer: HTMLDivElement | undefined
 
 const updateHighlightPosition = () => {
   if (variant === "animated" && $page.url.pathname && highlightElement && navigationContainer) {
@@ -150,6 +151,7 @@ let isMoreUnionFirst = $derived(
       {#if section.title === "More Union"}
         <!-- Spacer to push social icons to bottom -->
         <div class="flex-1"></div>
+        <YapAd />
         <!-- Special rendering for More Union section - just icons in a row -->
         <section class="px-4 py-4 flex flex-col justify-end {!isMoreUnionFirst && index > 0 ? 'border-t border-zinc-800/50' : ''}">
           <div class="flex items-center justify-center gap-4">

app2/src/lib/components/layout/Navigation.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+</script>
+
+<div class="relative overflow-hidden border-t border-zinc-800/50">
+  <div class="absolute inset-0 bg-gradient-to-br from-orange-500/20 to-transparent"></div>
+  <a
+    href="/yaps"
+    class="relative flex gap-4 px-4 py-4 hover:bg-zinc-900/30 transition-all duration-200 group"
+  >
+    <!-- Mad Yaps Image -->
+    <div class="w-16 h-16 overflow-hidden flex-shrink-0 group-hover:border-orange-500/30 transition-colors">
+      <img
+        src="/yaps/mad-yaos-square.png"
+        alt="Mad Yaps"
+        class="w-full h-full object-cover"
+      />
+    </div>
+
+    <!-- Content -->
+    <div class="flex flex-col justify-center flex-1 min-w-0">
+      <div class="flex flex-col gap-1">
+        <p class="text-xs text-zinc-300 leading-tight">
+          Join the Yapocalypse and climb the leaderboard.
+        </p>
+      </div>
+
+      <div class="flex items-end justify-between mt-2">
+        <span
+          class="group-hover:text-accent text-xs inline-flex items-center gap-1.5 text-orange-400 transition-all duration-300 font-medium tracking-wide"
+        >
+          <span>Start Yapping</span>
+          <svg
+            class="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-0.5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M13 7l5 5m0 0l-5 5m5-5H6"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </a>
+</div>

app2/src/lib/components/layout/YapAd.svelte

@@ -1,45 +1,75 @@
 <script lang="ts">
 import { cn } from "$lib/utils"
 import type { Snippet } from "svelte"
-import type { HTMLButtonAttributes } from "svelte/elements"
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements"
 
-type Props = HTMLButtonAttributes & {
-  variant?: "primary" | "secondary" | "danger" | "outline" | "icon" | "inline"
+type BaseProps = {
+  variant?: "primary" | "secondary" | "danger" | "outline" | "text" | "icon" | "inline"
   selected?: boolean | undefined
   class?: string
   children: Snippet
 }
 
+type ButtonProps = BaseProps & HTMLButtonAttributes & {
+  href?: never
+}
+
+type AnchorProps = BaseProps & HTMLAnchorAttributes & {
+  href: string
+  type?: never
+  disabled?: never
+}
+
+type Props = ButtonProps | AnchorProps
+
+const props = $props()
+
 const {
   variant = "primary",
   disabled = false,
   selected = false,
-  type = "button",
   class: className = "",
   children,
+  type,
+  href,
   ...rest
-}: Props = $props()
+} = props
+
+const isLink = href !== undefined
 
 const classes = cn(
   // Base styles
   "inline-flex cursor-pointer items-center gap-2 justify-center rounded-md text-sm font-medium transition-colors",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-  "disabled:pointer-events-none disabled:opacity-50",
+  // Disabled styles (only for buttons)
+  !isLink && "disabled:pointer-events-none disabled:opacity-50",
+  // Disabled styles for links (using aria-disabled)
+  isLink && disabled && "pointer-events-none opacity-50",
   // Variants
   variant === "primary" && [
     "bg-sky-600 border-sky-600 border text-white hover:bg-sky-700",
     "dark:bg-white dark:border-zinc-100 dark:hover:bg-zinc-100 dark:text-black font-bold",
     "focus-visible:ring-accent",
   ],
   variant === "secondary" && [
-    "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900",
+    "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 font-bold",
     "dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
     "focus-visible:ring-zinc-400",
   ],
   variant === "danger" && [
-    "bg-red-500 border-red-400 border text-white hover:bg-red-700",
+    "bg-red-500 border-red-400 border text-white hover:bg-red-700 font-bold",
     "focus-visible:ring-red-500",
   ],
+  variant === "outline" && [
+    "border border-zinc-200 bg-transparent text-zinc-900 hover:bg-zinc-100 font-bold",
+    "dark:border-zinc-700 dark:text-zinc-100 dark:hover:bg-zinc-800",
+    "focus-visible:ring-zinc-400",
+  ],
+  variant === "text" && [
+    "bg-transparent text-zinc-900 hover:bg-zinc-100 font-bold",
+    "dark:text-zinc-100 dark:hover:bg-zinc-800",
+    "focus-visible:ring-zinc-400",
+  ],
   variant === "icon" && [
     "w-9 h-9 p-0 hover:bg-zinc-800 text-gray-400 hover:text-zinc-50",
     "focus-visible:ring-zinc-400",
@@ -54,11 +84,22 @@ const classes = cn(
 )
 </script>
 
-<button
-  {type}
-  class={classes}
-  {disabled}
-  {...rest}
->
-  {@render children()}
-</button>
+{#if isLink}
+  <a
+    {href}
+    class={classes}
+    aria-disabled={disabled}
+    {...rest}
+  >
+    {@render children()}
+  </a>
+{:else}
+  <button
+    type={type || "button"}
+    class={classes}
+    {disabled}
+    {...rest}
+  >
+    {@render children()}
+  </button>
+{/if}