fix: address UI issues and improve functionality

cryptoflops · cryptoflops · commit 71f1812e7242 · 2025-12-06T03:00:45.000+02:00
- Changed hero text to 'Sign Once. Transact Freely.'
- Fixed Lenis touchpad scrolling with syncTouch option
- Made Connect Wallet buttons clickable with useAppKit hook
- Added Network switch button in navbar when connected
- Updated AppKit theme for better visibility (cyan accent)
- Sidebar only shows when wallet is connected
- Both CTA buttons on landing page now open wallet modal
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
@@ -1,10 +1,16 @@
 import React from 'react';
 import { Shield, Zap, Lock, Clock, ArrowRight, CheckCircle2, Layers, Fingerprint } from 'lucide-react';
-import { AppKitButton } from "@reown/appkit/react";
+import { useAppKit } from "@reown/appkit/react";
 import { Card } from './ui/Card';
 import { Button } from './ui/Button';
 
 export function LandingPage() {
+    const { open } = useAppKit();
+
+    const handleConnectWallet = () => {
+        open();
+    };
+
     return (
         <div className="flex flex-col items-center min-h-[90vh]">
             {/* Hero Section */}
@@ -25,11 +31,9 @@ export function LandingPage() {
 
                 {/* Headline */}
                 <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold font-display tracking-tight mb-6 animate-slide-up">
-                    <span className="text-text-primary">Secure </span>
-                    <span className="gradient-text">Sessions</span>
+                    <span className="text-text-primary">Sign Once.</span>
                     <br />
-                    <span className="text-text-primary">Zero </span>
-                    <span className="gradient-text-primary">Friction</span>
+                    <span className="gradient-text">Transact Freely.</span>
                 </h1>
 
                 {/* Subheadline */}
@@ -41,7 +45,9 @@ export function LandingPage() {
 
                 {/* CTA */}
                 <div className="flex flex-col sm:flex-row gap-4 items-center animate-slide-up animation-delay-200">
-                    <AppKitButton />
+                    <Button onClick={handleConnectWallet} size="lg" className="text-lg px-8">
+                        Connect Wallet
+                    </Button>
                     <a
                         href="https://github.com/cryptoflops/smart-session-dapp"
                         target="_blank"
@@ -213,7 +219,9 @@ export function LandingPage() {
                 <p className="text-text-secondary text-lg mb-8">
                     Connect your wallet and experience frictionless Web3
                 </p>
-                <AppKitButton />
+                <Button onClick={handleConnectWallet} size="lg" className="text-lg px-8">
+                    Connect Wallet
+                </Button>
             </section>
         </div>
     );
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useAccount } from 'wagmi';
 import { Navbar } from './Navbar';
 import { Sidebar } from './Sidebar';
 
@@ -12,20 +13,24 @@ interface LayoutProps {
 
 export function Layout({ children, onNavigate, currentView = 'dashboard' }: LayoutProps) {
     const [sidebarOpen, setSidebarOpen] = useState(false);
+    const { isConnected } = useAccount();
 
     return (
         <div className="min-h-screen bg-background text-text-primary">
             <Navbar onMenuClick={() => setSidebarOpen(true)} />
 
             <div className="flex h-[calc(100vh-4rem)]">
-                <Sidebar
-                    isOpen={sidebarOpen}
-                    onClose={() => setSidebarOpen(false)}
-                    onNavigate={onNavigate}
-                    currentView={currentView}
-                />
+                {/* Only show sidebar when connected */}
+                {isConnected && (
+                    <Sidebar
+                        isOpen={sidebarOpen}
+                        onClose={() => setSidebarOpen(false)}
+                        onNavigate={onNavigate}
+                        currentView={currentView}
+                    />
+                )}
 
-                <main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
+                <main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8" data-lenis-prevent>
                     <div className="mx-auto max-w-6xl animate-fade-in">
                         {children}
                     </div>
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
@@ -1,20 +1,24 @@
 import React from 'react';
 import { Shield, Menu } from 'lucide-react';
-import { AppKitButton } from "@reown/appkit/react";
+import { useAppKit } from "@reown/appkit/react";
+import { useAccount } from 'wagmi';
 import { Button } from '../ui/Button';
 
 interface NavbarProps {
     onMenuClick?: () => void;
 }
 
 export function Navbar({ onMenuClick }: NavbarProps) {
+    const { open } = useAppKit();
+    const { isConnected } = useAccount();
+
     return (
         <header className="sticky top-0 z-40 w-full border-b border-white/10 bg-background/80 backdrop-blur-md">
             <div className="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
                 <div className="flex items-center gap-4">
                     <button
                         onClick={onMenuClick}
-                        className="lg:hidden text-text-secondary hover:text-text-primary"
+                        className="lg:hidden text-text-secondary hover:text-text-primary transition-colors"
                     >
                         <Menu className="h-6 w-6" />
                     </button>
@@ -23,14 +27,34 @@ export function Navbar({ onMenuClick }: NavbarProps) {
                         <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
                             <Shield className="h-5 w-5" />
                         </div>
-                        <span className="text-lg font-bold tracking-tight text-text-primary">
+                        <span className="text-lg font-bold tracking-tight text-text-primary font-display">
                             Smart Session
                         </span>
                     </div>
                 </div>
 
-                <div className="flex items-center gap-4">
-                    <AppKitButton />
+                <div className="flex items-center gap-3">
+                    {/* Network Switch Button */}
+                    {isConnected && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => open({ view: 'Networks' })}
+                            className="hidden sm:flex items-center gap-2"
+                        >
+                            <span className="h-2 w-2 rounded-full bg-success animate-pulse" />
+                            <span className="text-sm">Network</span>
+                        </Button>
+                    )}
+
+                    {/* Wallet Connect Button */}
+                    <Button
+                        onClick={() => open()}
+                        variant={isConnected ? 'secondary' : 'primary'}
+                        size="sm"
+                    >
+                        {isConnected ? 'Account' : 'Connect Wallet'}
+                    </Button>
                 </div>
             </div>
         </header>
diff --git a/src/hooks/useLenis.tsx b/src/hooks/useLenis.tsx
@@ -14,6 +14,16 @@ interface UseLenisOptions {
     touchMultiplier?: number;
     /** Enable infinite scroll (default: false) */
     infinite?: boolean;
+    /** Gesture orientation (default: vertical) */
+    orientation?: 'vertical' | 'horizontal';
+    /** Gesture direction (default: 1) */
+    gestureOrientation?: 'vertical' | 'horizontal' | 'both';
+    /** Smooth touch (default: false for better touchpad support) */
+    smoothTouch?: boolean;
+    /** Sync touch lerp (default: 0.1) */
+    syncTouch?: boolean;
+    /** Sync touch lerp value */
+    syncTouchLerp?: number;
 }
 
 // Premium easing function - easeOutExpo
@@ -28,7 +38,12 @@ export function useLenis(options: UseLenisOptions = {}) {
         const lenis = new Lenis({
             duration: options.duration ?? 1.2,
             easing: options.easing ?? easeOutExpo,
+            orientation: options.orientation ?? 'vertical',
+            gestureOrientation: options.gestureOrientation ?? 'vertical',
             smoothWheel: options.smoothWheel ?? true,
+            smoothTouch: options.smoothTouch ?? false,
+            syncTouch: options.syncTouch ?? true,
+            syncTouchLerp: options.syncTouchLerp ?? 0.075,
             wheelMultiplier: options.wheelMultiplier ?? 1,
             touchMultiplier: options.touchMultiplier ?? 2,
             infinite: options.infinite ?? false,
@@ -49,18 +64,33 @@ export function useLenis(options: UseLenisOptions = {}) {
             lenis.destroy();
             lenisRef.current = null;
         };
-    }, [options.duration, options.easing, options.smoothWheel, options.wheelMultiplier, options.touchMultiplier, options.infinite]);
+    }, [
+        options.duration,
+        options.easing,
+        options.smoothWheel,
+        options.wheelMultiplier,
+        options.touchMultiplier,
+        options.infinite,
+        options.orientation,
+        options.gestureOrientation,
+        options.smoothTouch,
+        options.syncTouch,
+        options.syncTouchLerp
+    ]);
 
     return lenisRef;
 }
 
 // Provider component for app-wide Lenis
 export function LenisProvider({ children }: { children: React.ReactNode }) {
     useLenis({
-        duration: 1.2,
+        duration: 1.0,
         smoothWheel: true,
+        smoothTouch: false,
+        syncTouch: true,
+        syncTouchLerp: 0.075,
         wheelMultiplier: 1,
-        touchMultiplier: 2,
+        touchMultiplier: 1.5,
     });
 
     return <>{children}</>;
diff --git a/src/lib/appkit.ts b/src/lib/appkit.ts
@@ -3,7 +3,7 @@ import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { base, optimism, celo } from "wagmi/chains";
 
 const projectId = import.meta.env.VITE_REOWN_PROJECT_ID as string | undefined;
-const appName = import.meta.env.VITE_APP_NAME || "Smart Session Playground";
+const appName = import.meta.env.VITE_APP_NAME || "Smart Session Dapp";
 const appUrl = import.meta.env.VITE_APP_URL || "http://localhost:5173";
 const appIcon = import.meta.env.VITE_APP_ICON_URL || appUrl + "/favicon.ico";
 
@@ -31,20 +31,21 @@ export const appKit = createAppKit({
   metadata: {
     name: appName,
     description:
-      "Multichain smart-session playground on Base, Optimism, and Celo.",
+      "Secure, temporary, revocable on-chain session permissions for Web3.",
     url: appUrl,
     icons: [appIcon],
   },
   features: {
     email: true,
     socials: ["google", "x", "github"],
-    // Smart Sessions are enabled at the wallet UX level,
-    // but this demo executes via a backend signer.
     smartSessions: true,
   },
+  themeMode: 'dark',
   themeVariables: {
-    "--w3m-accent": "#4f46e5",
-    "--w3m-border-radius-master": "16px",
-    "--w3m-font-size-master": "14px",
+    '--w3m-accent': '#00F0FF',
+    '--w3m-color-mix': '#0B0C15',
+    '--w3m-color-mix-strength': 40,
+    '--w3m-border-radius-master': '1px',
+    '--w3m-font-size-master': '10px',
   },
 });
