@luxfi/ui 5.5.3 → 5.5.5

package/components/index.ts

@@ -10,7 +10,8 @@ export { default as Main } from './main'
 export { default as MiniChart } from './mini-chart'
 export { default as NotFound } from './not-found'
 
-export { default as AuthListener } from './auth/auth-listener'
+export { default as Auth } from './auth/provider'
+export { default as Login } from './auth/login'
 export { default as BackButton } from './back-button'
 export { default as BuyDrawer } from './commerce/drawer'
 export { default as DrawerMargin } from './drawer-margin'
@@ -18,7 +19,6 @@ export { default as BuyButton } from './commerce/buy-button'
 export { default as CheckoutButton } from './commerce/checkout-button'
 export { default as CheckoutPanel } from './commerce/checkout-panel'
 export { default as LoginPanel } from './auth/login-panel'
-export { default as SignupPanel } from './auth/signup-panel'
 export { default as Analytics } from './analytics'
 export { default as Tooltip } from './tooltip'
 

package/components/logo.tsx

@@ -1,13 +1,30 @@
 import React from 'react'
 import Link from 'next/link'
 
-import { type TShirtSize  } from '@hanzo/ui/types'
+import { type TShirtSize } from '@hanzo/ui/types'
+import { Logo as Mark, Wordmark } from '@luxfi/logo'
 
-import { LuxLogo } from './icons'
-
-const TEXT = 'LUX'
-type LogoVariant = 'text-only' | 'logo-only' | 'full'
+/**
+ * mark     — the triangle alone
+ * wordmark — the LUX letterforms alone
+ * full     — the mark beside the wordmark
+ *
+ * Both halves come from @luxfi/logo, which is the one home for Lux brand art.
+ * This file used to draw its own triangle and set the letters "LUX" in the body
+ * font, so every Lux site wore typed text where the wordmark belongs — and no
+ * variant could fix it, because neither the mark nor the wordmark was here to
+ * ask for. Art lives in the brand package; this composes it.
+ */
+type LogoVariant = 'mark' | 'wordmark' | 'full'
 
+/** Mark height in px, and the wordmark height that stands with it. */
+const SIZE: Record<string, { mark: number, word: number, gap: string }> = {
+  xl: { mark: 40, word: 22, gap: 'gap-4' },
+  lg: { mark: 40, word: 22, gap: 'gap-4' },
+  md: { mark: 32, word: 18, gap: 'gap-3' },
+  sm: { mark: 24, word: 13, gap: 'gap-2' },
+  xs: { mark: 16, word: 9, gap: 'gap-1.5' },
+}
 
 const Logo: React.FC<{
   size?: TShirtSize
@@ -15,74 +32,29 @@ const Logo: React.FC<{
   onClick?: () => void
   href?: string
   outerClx?: string
-  textClx?: string
 }> = ({
-  size,
+  size = 'md',
   href, // no default please!
-  outerClx='',
-  textClx='',
-  variant='full',
+  outerClx = '',
+  variant = 'full',
   onClick,
 }) => {
-  let classes: any = {}
-  const toAdd = (variant === 'logo-only') ? 
-    {
-      span: 'hidden',
-      icon: ''
-    }  
-    :
-    (variant === 'text-only') ? 
-      {
-        span: '',
-        icon: 'hidden'
-      } 
-      : 
-      {
-        span: '',
-        icon: ''
-      }
-
-  if (size === 'lg' || size === 'xl' ) { // for safety
-    classes.icon = 'h-10 w-10 mr-4 color-inherit ' 
-    classes.span = 'text-3xl ' 
-  }
-    // match lux.network
-  else if (size === 'md') {
-    classes.icon = 'h-[32px] w-[32px] mr-[12px] color-inherit '
-    classes.span = 'text-[1.8rem]/[1.8rem] tracking-tighter '
-  }
-  else if (size === 'sm' ) {
-    classes.icon = 'h-6 w-6 mr-2 color-inherit ' 
-    classes.span = 'text-lg '
-  }
-    // xs
-  else {
-    classes.icon = 'h-4 w-4 mr-1 color-inherit '
-    classes.span = 'text-base '
-  }
-
-  classes.icon += toAdd.icon
-  classes.span += toAdd.span
-
+  const s = SIZE[size as string] ?? SIZE.md
+  const clx = 'flex flex-row items-center ' + s.gap + ' '
+    + (href ? 'hover:opacity-80 cursor-pointer ' : 'cursor-default ')
+    + outerClx
 
-  const outerClasses = 'flex flex-row items-center ' + outerClx
-  const spanClasses = 'inline-block font-bold font-heading ' 
-    + textClx
-    + (href ? ' hover:text-accent cursor-pointer ' : ' cursor-default ') 
-    + classes.span 
+  // White on both counts: the Lux ground is black and the brand's accent is
+  // white, so the mark and the letters carry the same value.
+  const art = (<>
+    {variant !== 'wordmark' && <Mark variant='white' size={s.mark} />}
+    {variant !== 'mark' && <Wordmark height={s.word} />}
+  </>)
 
-  return (
-    href ? (
-      <Link href={href} className={outerClasses} onClick={onClick} >
-        <LuxLogo className={classes.icon} />
-        <span className={spanClasses}>{TEXT}</span>
-      </Link>
-    ) : (
-      <span className={outerClasses} onClick={onClick}>
-        <LuxLogo className={classes.icon} />
-        <span className={spanClasses}>{TEXT}</span>
-      </span>
-    )
+  return href ? (
+    <Link href={href} className={clx} onClick={onClick}>{art}</Link>
+  ) : (
+    <span className={clx} onClick={onClick}>{art}</span>
   )
 }
 

package/components/security/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { ApplyTypography } from '@hanzo/ui/primitives'
+
+import type { SiteDef } from '../../site-def'
+import Footer from '../footer'
+import Header from '../header'
+import Main from '../main'
+
+const Security: React.FC<{
+  contact: string
+  header?: boolean
+  siteDef: SiteDef
+}> = ({
+  contact,
+  header = false,
+  siteDef
+}) => (<>
+  {header && <Header siteDef={siteDef} />}
+  <Main className='px-8 sm:px-10 pb-16'>
+    <ApplyTypography className='w-full max-w-[46rem] mx-auto flex flex-col gap-6 pt-12'>
+      <h1>Reporting a security problem</h1>
+      <p>
+        Email <a href={`mailto:${contact}`}>{contact}</a>. Tell us what you found and how to
+        reproduce it. Send it to us before you tell anyone else, and do not open a public issue.
+      </p>
+      <p>
+        A real report from a stranger is worth more than another internal review. We read every one.
+      </p>
+      <h2>What happens next</h2>
+      <p>
+        Someone will read your report and reply. If we can reproduce the problem we will tell you
+        what we are doing about it, and tell you again once it is fixed. If we cannot reproduce it
+        we will say so and ask you for what we are missing.
+      </p>
+      <h2>While you are looking</h2>
+      <p>
+        Test against accounts and data that are your own. Do not read, change, or keep data that
+        belongs to someone else. If you reach it by accident, stop, and say so in your report.
+      </p>
+      <p>
+        Do not run anything that degrades the service for other people. No load testing, no denial
+        of service, no mass automated scanning, and no social engineering of our staff or our users.
+      </p>
+      <h2>For scanners</h2>
+      <p>
+        This page is the policy named by{' '}
+        <a href='/.well-known/security.txt'>/.well-known/security.txt</a>, per RFC 9116.
+      </p>
+    </ApplyTypography>
+  </Main>
+  <Footer siteDef={siteDef} />
+</>)
+
+export default Security

package/next/analytics/fpixel.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
+export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID || ''
 
 export const pageview = () => {
   window.fbq('track', 'PageView')

package/next/middleware/determine-device-mw.ts

@@ -1,6 +1,5 @@
 import { NextRequest, NextResponse, userAgent } from 'next/server'
 import { getSelectorsByUserAgent } from 'react-device-detect'
-import { setCookie } from 'cookies-next'
 
 // writed this way so they can be chained :)
 const determineDeviceMW = async (request: NextRequest) => {
@@ -10,18 +9,6 @@ const determineDeviceMW = async (request: NextRequest) => {
   const agent = isMobileOnly ? 'phone' : (isTablet ? 'tablet' : (isDesktop ? 'desktop' : 'unknown'))
   const { nextUrl: url } = request
   //console.log(`\n=== from ${url.href} on a *${agent && agent.toUpperCase()}* device. ===\n`)
-  const auth_token = url.searchParams.get('auth-token')
-  if (auth_token) {
-    setCookie('auth-token', auth_token, {
-      domain: url.hostname,
-      path: '/',
-      sameSite: 'none',
-      secure: true,
-      httpOnly: false,
-      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
-    })
-    url.searchParams.delete('auth-token')
-  }
   url.searchParams.set('agent', agent)
   return NextResponse.rewrite(url)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "5.5.3",
+  "version": "5.5.5",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -18,29 +18,25 @@
     "hanzo",
     "luxdefi"
   ],
-  "scripts": {
-    "lat": "npm show @luxfi/ui version",
-    "pub": "npm publish",
-    "build": "tsc",
-    "tc": "tsc",
-    "clean": "rm -rf node_modules"
-  },
   "exports": {
     ".": "./components/index.ts",
+    "./auth-callback": "./components/auth/callback.tsx",
+    "./security": "./components/security/index.tsx",
     "./commerce": "./commerce/ui/context.tsx",
     "./root-layout": "./root-layout/index.tsx",
     "./next": "./next/index.ts",
     "./style/": "./style/",
     "./site-def": "./site-def/index.ts",
-    "./tailwind": "./tailwind/index.ts"
+    "./tailwind": "./tailwind/index.ts",
+    "./util": "./util/index.ts"
   },
   "dependencies": {
-    "@next/third-parties": "^14.1.0",
-    "cookies-next": "^4.1.1",
+    "@luxfi/logo": "^1.0.10",
+    "@next/third-parties": "^16.1.0",
     "date-fns": "^3.6.0",
     "embla-carousel-autoplay": "^8.1.6",
-    "firebase": "10.12.0",
     "framer-motion": "^11.2.12",
+    "markdown-to-jsx": "^7.4.7",
     "react-device-detect": "^2.2.3",
     "react-social-icons": "^6.4.0",
     "react-tooltip": "^5.26.4",
@@ -48,19 +44,19 @@
     "usehooks-ts": "^3.1.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "catalog:",
-    "@hanzo/commerce": "catalog:",
-    "@hanzo/ui": "catalog:",
-    "@luxfi/menu-icons": "1.0.2",
+    "@hanzo/iam": "0.21.9",
+    "@hanzo/commerce": "7.6.4",
+    "@hanzo/ui": "5.3.34",
+    "@luxfi/menu-icons": "^1.0.2",
     "@hookform/resolvers": "^3.3.2",
-    "lucide-react": "catalog:",
+    "lucide-react": "0.470.0",
     "mobx": "^6.12.3",
     "mobx-react-lite": "^4.0.7",
-    "next": "catalog:",
-    "next-themes": "^0.2.1",
-    "react": "catalog:",
-    "react-dom": "catalog:",
-    "react-hook-form": "catalog:",
+    "next": "16.1.0",
+    "next-themes": "^0.4.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "7.54.2",
     "validator": "^13.11.0",
     "zod": "3.23.8"
   },
@@ -71,11 +67,18 @@
     "@types/facebook-pixel": "^0.0.30",
     "@types/gtag.js": "^0.0.19",
     "@types/mdx": "^2.0.9",
-    "@types/node": "catalog:",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
+    "@types/node": "22.10.6",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
     "@types/validator": "^13.12.1",
-    "tailwindcss": "catalog:",
-    "typescript": "catalog:"
+    "tailwindcss": "3.4.17",
+    "typescript": "5.7.3"
+  },
+  "scripts": {
+    "lat": "npm show @luxfi/ui version",
+    "pub": "npm publish",
+    "build": "tsc",
+    "tc": "tsc",
+    "clean": "rm -rf node_modules"
   }
-}
+}

package/root-layout/index.tsx

@@ -2,15 +2,13 @@ import React, { type PropsWithChildren } from 'react'
 import type { Viewport } from 'next'
 
 import { Toaster } from '@hanzo/ui/primitives'
-import { AuthServiceProvider } from '@hanzo/auth/service'
-import type { AuthServiceConf } from '@hanzo/auth/types'
 import { CommerceProvider } from '@hanzo/commerce'
 
 import getAppRouterBodyFontClasses from '../next/font/get-app-router-font-classes'
 import { FacebookPixelHead } from '../next/analytics/pixel-analytics'
 
 import { CommerceUIProvider } from '../commerce/ui/context'
-import { AuthListener, ChatWidget, Header, Analytics } from '../components'
+import { Auth, ChatWidget, Header, Analytics } from '../components'
 
 import CommerceDrawer from '../components/commerce/drawer'
 
@@ -57,10 +55,6 @@ function RootLayout({
   chatbot?: boolean
 } & PropsWithChildren) {
 
-  // For static export, we don't have server-side auth
-  // User auth will be handled client-side via AuthListener
-  const currentUser = null
-
   const Guts: React.FC = () => (<>
     {showHeader && <Header siteDef={siteDef}/>}
     {children}
@@ -87,7 +81,7 @@ function RootLayout({
         display: 'none', // see analytics.tsx
       }}>
         <Analytics/>
-        <AuthServiceProvider user={currentUser} conf={{} as AuthServiceConf}>
+        <Auth app={siteDef.app}>
         {siteDef?.commerce ? (
           <CommerceProvider config={siteDef.commerce!} >
             <CommerceUIProvider >
@@ -98,8 +92,7 @@ function RootLayout({
         ) : (
           <Guts />
         )}
-          <AuthListener/>
-        </AuthServiceProvider>
+        </Auth>
         <Toaster position='top-center' duration={3000}/>
       </body>
     </html>

package/site-def/footer/community.tsx

@@ -2,9 +2,6 @@ import type { LinkDef } from '@hanzo/ui/types'
 
 import { SocialIcon } from '../../components/icons'
 
-  // @ts-ignore (will build in project that has @svgr support)
-import SVG_warp_logo from './svg/warpcast-logo.svg'
-
 const SOC_ICON_SIZE = 18
 
 export default   [
@@ -16,7 +13,7 @@ export default   [
   {
     title: 'Lux Channel',
     href: 'https://warpcast.com/~/channel/lux',
-    icon: <SVG_warp_logo width={SOC_ICON_SIZE} height={SOC_ICON_SIZE} /> //<SocialIcon network='warpcast' size={SOC_ICON_SIZE} />
+    icon: <SocialIcon network='x' size={SOC_ICON_SIZE} />
   },
   {
     title: 'Lux Discussions',

package/site-def/footer/network.ts

@@ -23,8 +23,8 @@ export default [
     href: "https://safe.lux.network/",
   },
   {
-    title: 'Lux Validator',
-    href: "https://lux.network/validator",
+    title: 'Lux Build',
+    href: "https://lux.build",
   },
   {
     title: 'Lux Coin',

package/site-def/main-nav.tsx

@@ -153,7 +153,7 @@ export default [
         title: "More benefits",
         icon: <MoreBenefits  width={25} height={25} />,
         icon_act: <MoreBenefitsAct width={27} height={27} />,
-        href: "#",
+        href: "https://lux.credit/compare",
         newTab: false,
         contents:"See what's truly unique"
       },
@@ -225,7 +225,7 @@ export default [
         title: "Shop",
         icon: <Shop  width={25} height={25} />,
         icon_act: <ShopAct width={27} height={27}/>,
-        href: "https://lux.market",
+        href: "https://lux.shop",
         newTab: false,
         contents:"Find any Lux product for sale"
       },
@@ -279,7 +279,7 @@ export default [
         title: "Explorer",
         icon: <Explorer width={25} height={25} />,
         icon_act: <ExplorerAct width={27} height={27}/>,
-        href: "https://explorer.lux.network/",
+        href: "https://explore.lux.network/",
         newTab: false,
         contents:"All transactions"
       },
@@ -324,16 +324,16 @@ export default [
         title: "Validators",
         icon: <Validators width={25} height={25} />,
         icon_act: <ValidatorsAct width={27} height={27}/>,
-        href: "https://lux.market/validator",
+        href: "https://lux.build",
         newTab: false,
-        contents:"Own a part of the network"
+        contents:"Stake, delegate, and manage"
       },
       {
         groupName:'Get Access',
         title: "Developer docs",
         icon: <DeveloperDocs width={25} height={25} />,
         icon_act: <DeveloperDocsAct width={27} height={27}/>,
-        href: "#",
+        href: "https://docs.lux.network",
         newTab: false,
         contents:"Software explained"
       },
@@ -342,7 +342,7 @@ export default [
         title: "Open Source",
         icon: <OpenSource width={25} height={25} />,
         icon_act: <OpenSourceAct width={27} height={27}/>,
-        href: "#",
+        href: "https://github.com/luxfi",
         newTab: false,
         contents:"Accessible for everyone"
       },
@@ -351,7 +351,7 @@ export default [
         title: "Lux Pass",
         icon: <LuxPass width={25} height={25} />,
         icon_act: <LuxPassAct width={27} height={27}/>,
-        href: "#",
+        href: "https://lux.market/pass",
         newTab: false,
         contents:"All access pass to network"
       },
@@ -360,7 +360,7 @@ export default [
   {
     title: "Resources",
     icon: '',
-    href: "",
+    href: "https://docs.lux.network",
     newTab: false,
     details: "",
     childMenu: [
@@ -369,7 +369,7 @@ export default [
         title: "Resource Center",
         icon: <AIChat  width={25} height={25} />,
         icon_act: <AIChatAct width={27} height={27}/>,
-        href: "#",
+        href: "https://docs.lux.network",
         newTab: false,
         contents:"Dynamic solutions"
       },
@@ -378,7 +378,7 @@ export default [
         title: "Integrations",
         icon: <Integration  width={25} height={25} />,
         icon_act: <IntegrationAct width={27} height={27}/>,
-        href: "#",
+        href: "https://docs.lux.network/integrations",
         newTab: false,
         contents:"Simplified onboarding"
       },
@@ -387,7 +387,7 @@ export default [
         title: "Templates",
         icon: <Templates  width={25} height={25} />,
         icon_act: <TemplatesAct width={27} height={27}/>,
-        href: "#",
+        href: "https://docs.lux.network/templates",
         newTab: false,
         contents:"Speedy app development"
       },
@@ -396,7 +396,7 @@ export default [
         title: "Guides",
         icon: <Guides  width={25} height={25} />,
         icon_act: <GuidesAct width={27} height={27}/>,
-        href: "#",
+        href: "https://docs.lux.network/guides",
         newTab: false,
         contents:"Find help quickly"
       },
@@ -405,7 +405,7 @@ export default [
         title: "Customers",
         icon: <Customers  width={25} height={25} />,
         icon_act: <CustomersAct width={27} height={27}/>,
-        href: "#",
+        href: "https://lux.partners",
         newTab: false,
         contents:"Trusted by the best teams"
       },
@@ -414,7 +414,7 @@ export default [
         title: "Blog",
         icon: <Blog  width={25} height={25} />,
         icon_act: <BlogAct width={27} height={27}/>,
-        href: "#",
+        href: "https://blog.lux.network",
         newTab: false,
         contents:"Latest posts and changes"
       },
@@ -423,7 +423,7 @@ export default [
         title: "Changelog",
         icon: <ChangeLog  width={25} height={25} />,
         icon_act: <ChangeLogAct width={27} height={27} />,
-        href: "#",
+        href: "https://docs.lux.network/changelog",
         newTab: false,
         contents:"Manage deployments"
       },
@@ -432,7 +432,7 @@ export default [
         title: "Developer docs",
         icon: <DeveloperDocs  width={25} height={25} />,
         icon_act: <DeveloperDocsAct width={25}  height={25}/>,
-        href: "#",
+        href: "https://docs.lux.network",
         newTab: false,
         contents:"Software explained"
       },
@@ -441,7 +441,7 @@ export default [
         title: "Customer Support",
         icon: <CustomerSupport  width={25} height={25} />,
         icon_act: <CustomerSupportAct width={27} height={27}/>,
-        href: "#",
+        href: "mailto:support@lux.network",
         newTab: false,
         contents:"Dedicated help, 24/7"
       },
@@ -450,7 +450,7 @@ export default [
         title: "FAQs",
         icon: <FAQs  width={25} height={25} />,
         icon_act: <FAQsAct width={27} height={27}/>,
-        href: "#",
+        href: "https://docs.lux.network/faq",
         newTab: false,
         contents:"Common queries"
       }

package/style/lux-global.css

@@ -18,6 +18,55 @@ div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
   @apply uppercase;
 }
 
+/* Hanzo IAM's sign-in views ship structure, not skin. This is the one place
+ * that markup meets the Lux surface -- colours come from lux-colors so the
+ * form follows the theme like everything else.
+ */
+.hanzo-iam-card,
+.hanzo-iam-form {
+  @apply flex flex-col gap-3 w-full;
+}
+
+.hanzo-iam-form input {
+  @apply w-full rounded-sm px-3 py-2 text-base;
+  background-color: var(--hz-ui-bg-1);
+  color: var(--hz-ui-fg-body);
+  border: 1px solid var(--hz-ui-bg-2);
+}
+
+.hanzo-iam-form input::placeholder {
+  color: var(--hz-ui-fg-3);
+}
+
+.hanzo-iam-form input:focus {
+  outline: none;
+  border-color: var(--hz-ui-fg-body);
+}
+
+.hanzo-iam-btn {
+  @apply w-full rounded-sm px-3 py-2 text-base font-semibold cursor-pointer;
+  background-color: var(--hz-ui-bg-inverted);
+  color: var(--hz-ui-fg-inverted);
+}
+
+.hanzo-iam-btn:hover {
+  background-color: var(--hz-ui-bg-inverted-hover);
+}
+
+.hanzo-iam-btn:disabled {
+  @apply opacity-50 cursor-default;
+}
+
+.hanzo-iam-divider {
+  @apply text-sm uppercase;
+  color: var(--hz-ui-fg-3);
+}
+
+.hanzo-iam-error {
+  @apply text-sm;
+  color: hsl(0 70% 60%);
+}
+
 /* Specific style fixes for react-square-web-payments-sdk -
  * reduce gap between card input and pay button
  */

package/types/site-def.ts

@@ -7,6 +7,13 @@ import type ChatbotConfig from './chatbot-config'
 
 interface SiteDef {
 
+    /**
+     * Short name of this site, which with the org names the IAM application it
+     * signs in as: 'quest' is the client `lux-quest` on lux.id. Required, so a
+     * site cannot ship a login button that belongs to no one.
+     */
+  app: string
+
     /** url of this site.  All nav links in the system will show it in 'current' state */
   currentAs?: string
 

package/util/index.ts

@@ -0,0 +1,11 @@
+import { compiler } from 'markdown-to-jsx'
+
+  // Compiles markdown to JSX. `wrapper: null` yields the bare nodes rather than
+  // a wrapping element, so callers can drop the result straight into a
+  // ReactNode-typed field. Inline HTML (<br/>, <cite>) is parsed natively.
+export const markdown = (s: string, options?: any) => (
+  compiler(s, {
+    wrapper: null,
+    ...options
+  })
+)