Loyal Desktop

Highlights

Phantom SDK integration

We migrated from Solana wallet adapter to the official Phantom SDK, providing a more streamlined wallet experience:

• Complete wallet SDK migration from @solana/wallet-adapter-* to @phantom/react-sdk. (dc34d72)

• Phantom ConnectButton for wallet management with built-in disconnect modal. (cb77eb9)

• OAuth providers (Google, Apple) restored for alternative authentication flows. (a4bc1a7)

• Smart auth prompting: wallet modal opens on first keystroke for seamless mobile deeplink flows. (7a7b643)

This matters because Phantom SDK provides a unified, mobile-friendly wallet experience with OAuth fallbacks, reducing friction for users connecting wallets especially on mobile devices.

Chat UI redesign (Figma alignment)

Major visual overhaul of the chat experience to match Figma designs:

• Chat input: glass background (rgba(38,38,38,0.7)), 48px blur, 32px radius, multiline support with 368px max height, and three-state submit button (disabled/enabled/stop). (daf6e04)

• User message bubbles: subtle white background (rgba(255,255,255,0.12)), asymmetric border-radius, right-aligned footer actions (copy, more). (e1cdbaf)

• Assistant messages: full-width plain markdown (no bubble), footer actions (copy, refresh, more) on completion, gradient shimmer "Thinking" indicator. (7de89e0, e1cdbaf)

• LLM markdown styling: code blocks with semi-transparent black background, 16px radius, language label header with copy button, Geist Mono fonts. Tables with minimal clean styling and header separators. (7fa44a3)

• Table styles: 14px Geist font, 500-weight headers, 36px row height, transparent backgrounds. (9c6ef43)

This matters because the chat interface now matches the design spec with proper typography, spacing, and visual hierarchy, providing a polished conversational experience.

Animated sidebar & layout

New sidebar system with smooth animations and improved wallet placement:

• CSS-animated sidebar: 0.3s opacity and translateX transitions for open/close, pointer-events disabled when hidden. (3afdeaa)

• Chat layout: messages top-aligned, sidebar pushes chat content (not overlays), conversation title displayed in sidebar with glass highlight. (6986f22)

• Wallet button placement: header when not connected, sidebar when in chat mode and connected. (0202d8f)

• Multiple animation fixes for landing-to-chat transitions. (b4e5bbd, dc27199, e3960a0)

This matters because smooth animations and predictable layouts reduce visual jank and cognitive load during navigation and mode transitions.

Roadmap & landing page polish

Visual improvements to the landing page and roadmap section:

• Roadmap cards: glassmorphism styling (rgba(38,38,38,0.5)), blur, borders, and animated red dot indicator on active card. (1196f4f)

• Sticky input: chat input moves to bottom when hero is scrolled past, stays above footer. (4edffdf)

• Mobile roadmap navigation: chevron arrows inside carousel fade overlays. (4edffdf)

• Subtle parallax effect on landing input (15% scroll offset). (b55772e)

• Askloyal logo placed above hero input for branding. (3e424b4)

• Hero cleanup: removed background image and inline logo. (0c3e386)

This matters because these changes modernize the landing page visuals, improve mobile navigation, and keep the input accessible during scrolling.

Security & performance

• Security patch: Upgraded Next.js 15.4.6→15.4.10 and React 19.1.0→19.1.2 to address CVE-2025-66478 and related vulnerabilities. (d571936)

• Performance: Unmount desktop nav in chat mode to eliminate expensive backdrop-filter blur from the DOM. (3895820)

Fixes & reliability improvements

• Fix landing-to-chat transition: use marginLeft instead of animating left to prevent elements flying from the left. (dc27199, b4e5bbd)

• Fix sidebar animation syntax error from refactor. (e3960a0)

• Constrain chat input width (768px) and fix bottom positioning with proper padding. (5d3f981)

• Wrap nav items in group to remove unintended gaps between buttons. (1d11d5c)

• Center landing input with 0.5s animation transition. (9c6ef43)

• Simplify wallet disconnect: auto-open Phantom modal via useEffect when disconnected in chat mode. (9c6ef43)

What this means for users

• Wallet flows are streamlined: Phantom SDK handles wallet management with OAuth fallbacks, and auth prompts appear immediately on mobile for seamless deeplink flows.

• Chat looks polished: Messages, inputs, code blocks, and tables now match the Figma design system with proper typography, spacing, and interactions.

• Navigation is smoother: Sidebar opens/closes with animations, transitions between landing and chat are instant without visual glitches.

• Mobile UX improved: Sticky input stays accessible, roadmap has navigation arrows, and wallet connection works reliably on mobile browsers.

Where to look

• Phantom SDK integration: src/components/solana/phantom-provider.tsx, header/page updates. (dc34d72, cb77eb9, 7a7b643)

• Chat UI redesign: Input, message, and markdown component styling. (daf6e04, e1cdbaf, 7de89e0, 7fa44a3)

• Sidebar animation: Sidebar transitions and layout push behavior. (3afdeaa, 6986f22, 0202d8f)

• Roadmap/landing: Roadmap card styling, sticky input, parallax. (1196f4f, 4edffdf, b55772e)

• Security: Next.js/React upgrades. (d571936)
  

(✪‿✪)ノ

Loyal Telegram App

Highlights

Telegram Mini App UX improvements

We focused on making the Telegram Mini App feel faster and more polished with caching, loading states, and navigation persistence:

• Avatar caching & proxy: Added server-side proxy for Telegram avatars to bypass CORS restrictions, with caching in Telegram Cloud Storage for instant loads on return visits. (df5ae3c)

• Skeleton loading states: Profile page now shows skeleton loaders while avatars load, eliminating layout shift and perceived lag. (df5ae3c)

• Page persistence: The app now remembers your last visited page and restores it on launch — no more always landing on the home screen. (df5ae3c)

• Not spam button: Added a "Not spam" action button in the spam chat header so users can quickly mark messages as legitimate without swiping. (2f7253a)

• Console noise suppression: Suppressed noisy Telegram SDK console errors for a cleaner development experience. (df5ae3c)

This matters because these changes make the Mini App feel native — avatars load instantly from cache, screens don't jump around during load, and users return to where they left off.

Nillion SecretVault integration

Significant progress on integrating Nillion's SecretVault for secure, decentralized data storage:

• EIP-712 adapter: Created an EIP-712 signing adapter to authenticate with Nillion's infrastructure using Ethereum-style typed data signatures. (842569c)

• Code architecture improvements: Decoupled collections logic from builder code and reorganized constants/helpers for cleaner separation of concerns. (e1cc0c9, c5bea58)

• Environment handling: Fixed environment variable handling to be more robust and less coupled to specific deployment contexts. (c5bea58)

This matters because Nillion integration enables private, encrypted storage for sensitive user data (like chat summaries and preferences) without relying on centralized databases.

Telegram Bot inline mode & commands

New bot capabilities for interacting with users directly in any Telegram chat:

• CA command handler: The bot now processes /ca (contract address) commands, allowing users to look up token information directly in chat. (bfa450d, 37635b7)

• Inline query support: Added inline query handler that surfaces a wallet button when users invoke the bot with @botname in any chat — enabling wallet actions without opening the Mini App. (23ce992)

• Error logging: Added proper error logging to bot command handlers for easier debugging. (77042f5)

This matters because inline mode lets users access wallet features from any conversation without context-switching to the Mini App, reducing friction for quick actions.

What this means for users

• Faster Mini App experience — avatars cache locally, pages remember where you were, and loading states prevent jarring layout shifts.

• Bot works in any chat — use inline queries (@loyalbot) to access wallet features without opening the app, and /ca to look up tokens on the fly.

• Foundation for private storage — Nillion integration sets the stage for encrypted, user-controlled data storage.

Where to look

• Mini App UX: TelegramProvider.tsx, profile/page.tsx, proxy-image/route.ts (df5ae3c)

• Spam handling: summaries/direct/page.tsx (2f7253a)

• Nillion: lib/nillion/core/ — adapters, collections, helpers (842569c, e1cc0c9, c5bea58)

• Bot commands: lib/telegram/bot-api/commands.ts, inline.ts (bfa450d–23ce992)