@luxfi/core 5.2.8 → 5.2.9

package/components/commerce/mobile-login-button.tsx

@@ -1,102 +1,102 @@
-'use client'
-import React from "react"
-import { observer } from "mobx-react-lite"
-
-import {
-    Button,
-    LinkElement,
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-    Separator
-} from '@hanzo/ui/primitives'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-
-import { useAuth } from "@hanzo/auth/service"
-
-import { Ethereum } from "@hanzo/auth/icons"
-import { Icons } from ".."
-
-const MobileAuthWidget: React.FC<{
-    noLogin?: boolean
-    className?: string
-    handleLogin?: () => void
-}> = observer(({
-    noLogin = false,
-    className
-}) => {
-    const auth = useAuth()
-    const handleLogin = () => {
-        window.location.href = "https://lux.id";
-      };
-
-    if (!auth) {
-        return null
-    }
-    if (!auth.loggedIn && typeof window !== 'undefined') {
-        return (noLogin ? null : (
-            (handleLogin) ? (
-                <div className="flex items-center py-3 px-5 gap-4">
-                    <Icons.Avatar className='self-center w-6 h-6' />
-                    <Button
-                        variant='link'
-                        className='text-2xl !min-w-0 self-center'
-                        onClick={handleLogin}
-                    >
-                        Log In / Sign Up
-                    </Button>
-                </div>
-            ) : (
-                <LinkElement
-                    def={{
-                        href: `${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}?redirectUrl=${window.location.href}`,
-                        title: 'Login',
-                        variant: 'primary',
-                        newTab: false
-                    } satisfies LinkDef}
-                    className='h-8 w-fit !min-w-0'
-                />
-            )
-        ))
-    }
-
-    return (
-        <Popover>
-            <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    size='icon'
-                    className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
-                >{auth.user?.email[0]}</Button>
-            </PopoverTrigger>
-            <PopoverContent className='bg-level-0'>
-                <div className="grid gap-4">
-                    <div className="space-y-2 truncate">
-                        {auth.user?.displayName ? (
-                            <>
-                                <h4 className="font-medium leading-none truncate">{auth.user.displayName}</h4>
-                                <p className="text-sm opacity-50 truncate">{auth.user.email}</p>
-                            </>
-                        ) : (
-                            <h4 className="font-medium leading-none truncate">{auth.user?.email}</h4>
-                        )}
-                        {auth.user?.walletAddress ? (
-                            <p className="text-sm opacity-50 truncate">{auth.user.walletAddress}</p>
-                        ) : (
-                            <Button variant="outline" className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
-                                <Ethereum height={20} />Connect your wallet
-                            </Button>
-                        )}
-                    </div>
-                    <Separator />
-                    <Button variant="outline" onClick={auth.logout.bind(auth)}>Logout</Button>
-                </div>
-            </PopoverContent>
-        </Popover>
-    )
-
-})
-
+'use client'
+import React from "react"
+import { observer } from "mobx-react-lite"
+
+import {
+    Button,
+    LinkElement,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+    Separator
+} from '@hanzo/ui/primitives'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { cn } from '@hanzo/ui/util'
+
+import { useAuth } from "@hanzo/auth/service"
+
+import { Ethereum } from "@hanzo/auth/icons"
+import { Icons } from ".."
+
+const MobileAuthWidget: React.FC<{
+    noLogin?: boolean
+    className?: string
+    handleLogin?: () => void
+}> = observer(({
+    noLogin = false,
+    className
+}) => {
+    const auth = useAuth()
+    const handleLogin = () => {
+        window.location.href = "https://lux.id";
+      };
+
+    if (!auth) {
+        return null
+    }
+    if (!auth.loggedIn && typeof window !== 'undefined') {
+        return (noLogin ? null : (
+            (handleLogin) ? (
+                <div className="flex items-center py-3 px-5 gap-4">
+                    <Icons.Avatar className='self-center w-6 h-6' />
+                    <Button
+                        variant='link'
+                        className='text-2xl !min-w-0 self-center'
+                        onClick={handleLogin}
+                    >
+                        Log In / Sign Up
+                    </Button>
+                </div>
+            ) : (
+                <LinkElement
+                    def={{
+                        href: `${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}?redirectUrl=${window.location.href}`,
+                        title: 'Login',
+                        variant: 'primary',
+                        newTab: false
+                    } satisfies LinkDef}
+                    className='h-8 w-fit !min-w-0'
+                />
+            )
+        ))
+    }
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    size='icon'
+                    className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
+                >{auth.user?.email[0]}</Button>
+            </PopoverTrigger>
+            <PopoverContent className='bg-level-0'>
+                <div className="grid gap-4">
+                    <div className="space-y-2 truncate">
+                        {auth.user?.displayName ? (
+                            <>
+                                <h4 className="font-medium leading-none truncate">{auth.user.displayName}</h4>
+                                <p className="text-sm opacity-50 truncate">{auth.user.email}</p>
+                            </>
+                        ) : (
+                            <h4 className="font-medium leading-none truncate">{auth.user?.email}</h4>
+                        )}
+                        {auth.user?.walletAddress ? (
+                            <p className="text-sm opacity-50 truncate">{auth.user.walletAddress}</p>
+                        ) : (
+                            <Button variant="outline" className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
+                                <Ethereum height={20} />Connect your wallet
+                            </Button>
+                        )}
+                    </div>
+                    <Separator />
+                    <Button variant="outline" onClick={auth.logout.bind(auth)}>Logout</Button>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+
+})
+
 export default MobileAuthWidget

package/components/commerce/mobile-menu-toggle-button.tsx

@@ -1,35 +1,35 @@
-'use client'
-import React, { useState } from 'react'
-
-import { Plus } from 'lucide-react'
-
-import { Button } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-const MobileMenuToggleButton: React.FC<{
-  open: boolean
-  setOpen: (b: boolean) => void
-  className?: string
-}> = ({
-  open,
-  setOpen,
-  className=''
-}) => {
-
-  return (
-    <Button 
-      variant='ghost' 
-      size='default' 
-      rounded='full' 
-      onClick={() => {setOpen(!open)}} 
-      className={cn('p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75', className)}
-    >
-      <Plus width={28} height={28} className={
-        'block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] ' + 
-        (open ? 'rotate-[135deg] scale-110' : 'rotate-none')
-      } />
-    </Button>
-  )
-}
-
-export default MobileMenuToggleButton
+'use client'
+import React, { useState } from 'react'
+
+import { Plus } from 'lucide-react'
+
+import { Button } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+const MobileMenuToggleButton: React.FC<{
+  open: boolean
+  setOpen: (b: boolean) => void
+  className?: string
+}> = ({
+  open,
+  setOpen,
+  className=''
+}) => {
+
+  return (
+    <Button 
+      variant='ghost' 
+      size='default' 
+      rounded='full' 
+      onClick={() => {setOpen(!open)}} 
+      className={cn('p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75', className)}
+    >
+      <Plus width={28} height={28} className={
+        'block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] ' + 
+        (open ? 'rotate-[135deg] scale-110' : 'rotate-none')
+      } />
+    </Button>
+  )
+}
+
+export default MobileMenuToggleButton

package/components/commerce/mobile-nav-menu-ai.tsx

@@ -1,43 +1,49 @@
-'use client'
-import React, { useState } from 'react'
-import { Plus } from 'lucide-react'
-import { Search } from '../icons'
-import { Button, Card } from '@hanzo/ui/primitives'
-
-interface MobileNavMenuAIProps {
-    setMenuOpen: (open: boolean) => void
-}
-
-const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
-    const [isOpen, setIsOpen] = useState<boolean>(false)
-
-    return (
-        <>
-            <div className="w-full px-5 py-4 text-2xl bg-[#202020] cursor-pointer">
-                <div className="flex items-center gap-5 border-b border-[#3A3A3A]">
-                    <Search className='w-6 h-6 flex-none' />
-                    <div className="text-white font-bold flex-1" onClick={() => setIsOpen(true)}>Ask AI Chat...</div>
-                    <Plus className='w-6 h-6 flex-none rotate-45 transition-transform' onClick={() => setMenuOpen(false)} />
-                </div>
-            </div>
-            <div className={
-                'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
-                'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
-                (isOpen ? 'flex' : 'hidden')
-            }>
-                <Card className='flex flex-col h-full w-full'>
-                    <div className='flex px-4 py-2 h-16 bg-level-0 items-center justify-between'>
-                        <h3 className='font-semibold font-heading'>LUX<span className='opacity-60'>AI</span></h3>
-                        <Button onClick={() => setIsOpen(false)} variant='link' size='icon' className='w-fit sm:hidden'>
-                        <Plus className='w-6 h-6 flex-none mr-1 rotate-45 transition-transform'/>
-                        </Button>
-                    </div>
-                    <iframe src="https://lux.chat/iframe" className='h-full' />
-                </Card>
-            </div>
-
-        </>
-    )
-};
-
+'use client'
+import React, { useState } from 'react'
+import { ArrowRight, Plus } from 'lucide-react'
+import { Search } from '../icons'
+import { Button, Card } from '@hanzo/ui/primitives'
+import { Logo } from '..'
+
+interface MobileNavMenuAIProps {
+    setMenuOpen: (open: boolean) => void
+}
+
+const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false)
+
+    return (
+        <>
+            <div className="w-full px-[10.8px] py-4 text-2xl cursor-pointer">
+                <div className='flex justify-between'>
+                    <Logo variant='text-only' />
+                    <Plus className='w-[17.7px] h-[17.7px] flex-none rotate-45 transition-transform' onClick={() => setMenuOpen(false)} />
+                </div>
+                <div className="flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-2xl bg-muted-4">
+                    <div className="text-muted-1 font-bold flex-1 flex justify-between h-9 items-center" onClick={() => setIsOpen(true)}>
+                        <span className='text-base pl-2 font-light'>Ask AI a question</span>
+                        <ArrowRight />
+                    </div>                    
+                </div>
+            </div>
+            <div className={
+                'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
+                'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
+                (isOpen ? 'flex' : 'hidden')
+            }>
+                <Card className='flex flex-col h-full w-full'>
+                    <div className='flex px-4 py-2 h-16 bg-level-0 items-center justify-between'>
+                        <h3 className='font-semibold font-heading'>LUX<span className='opacity-60'>AI</span></h3>
+                        <Button onClick={() => setIsOpen(false)} variant='link' size='icon' className='w-fit sm:hidden'>
+                        <Plus className='w-6 h-6 flex-none mr-1 rotate-45 transition-transform'/>
+                        </Button>
+                    </div>
+                    <iframe src="https://lux.chat/iframe" className='h-full' />
+                </Card>
+            </div>
+
+        </>
+    )
+};
+
 export default MobileNavMenuAI;

package/components/commerce/mobile-nav-menu-item.tsx

@@ -1,50 +1,50 @@
-import React, { useState } from 'react'
-import type { LinkDefExtended } from '../../site-def/main-nav'
-import { RightArrow } from '../icons'
-import LeftArrow from '../icons/left-arrow'
-import Link from 'next/link'
-import MobileNavMenuAI from './mobile-nav-menu-ai'
-
-interface MobileNavMenuItemProps {
-    link: LinkDefExtended,
-    setMenuOpen: (open: boolean) => void
-
-}
-
-const MobileNavMenuItem: React.FC<MobileNavMenuItemProps> = ({
-    link,
-    setMenuOpen
-}) => {
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-
-    return (
-        <>
-            <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl cursor-pointer" onClick={() => setIsOpen(true)}>
-                <span className='block w-[18px] h-[22px] items-center'>{link.icon}</span>
-                <span className='flex-1'>{link.title}</span>
-                <RightArrow className='' />
-            </div>
-            <div className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
-                <MobileNavMenuAI setMenuOpen={setMenuOpen} />
-                <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl font-bold" onClick={() => setIsOpen(false)}>
-                    <LeftArrow />
-                    <span className="text-white">{link.title}</span>
-                </div>
-                <div className="flex flex-col">
-                    {link.childMenu?.map((menu, index) => {
-                        return (
-                            <Link href={menu.href}>
-                                <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
-                                    <span className='w-[18px] h-[22px] self-center flex items-center justify-center'>{menu.icon}</span>
-                                    <span className='flex-1'>{menu.title}</span>
-                                </div>
-                            </Link>
-                        )
-                    })}
-                </div>
-            </div>
-        </>
-    )
-}
-
+import React, { useState } from 'react'
+import type { LinkDefExtended } from '../../site-def/main-nav'
+import { RightArrow } from '../icons'
+import LeftArrow from '../icons/left-arrow'
+import Link from 'next/link'
+import MobileNavMenuAI from './mobile-nav-menu-ai'
+
+interface MobileNavMenuItemProps {
+    link: LinkDefExtended,
+    setMenuOpen: (open: boolean) => void
+
+}
+
+const MobileNavMenuItem: React.FC<MobileNavMenuItemProps> = ({
+    link,
+    setMenuOpen
+}) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    return (
+        <>
+            <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl cursor-pointer" onClick={() => setIsOpen(true)}>
+                <span className='block w-[18px] h-[22px] items-center'>{link.icon}</span>
+                <span className='flex-1'>{link.title}</span>
+                <RightArrow className='' />
+            </div>
+            <div className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
+                <MobileNavMenuAI setMenuOpen={setMenuOpen} />
+                <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl font-bold" onClick={() => setIsOpen(false)}>
+                    <LeftArrow />
+                    <span className="text-white">{link.title}</span>
+                </div>
+                <div className="flex flex-col">
+                    {link.childMenu?.map((menu, index) => {
+                        return (
+                            <Link href={menu.href}>
+                                <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
+                                    <span className='w-[18px] h-[22px] self-center flex items-center justify-center'>{menu.icon}</span>
+                                    <span className='flex-1'>{menu.title}</span>
+                                </div>
+                            </Link>
+                        )
+                    })}
+                </div>
+            </div>
+        </>
+    )
+}
+
 export default MobileNavMenuItem

package/components/commerce/mobile-nav-menu.tsx

@@ -1,68 +1,102 @@
-'use client'
-import React from 'react'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-import type { LinkDefExtended } from '../../site-def/main-nav'
-import MobileNavMenuAI from './mobile-nav-menu-ai'
-import MobileNavMenuItem from './mobile-nav-menu-item'
-import MobileAuthWidget from './mobile-login-button'
-
-const MobileNav: React.FC<{
-  currentAs: string | undefined
-  links: LinkDefExtended[]
-  className?: string
-  commonItemClx?: string | ((def: LinkDef) => string)
-  setChatbotOpen: (open: boolean) => void
-  setMenuOpen: (open: boolean) => void
-  /**
-   * This is called *in addition* to the link's actual navigation 
-   * action.  eg, I link is clicked, and the modal menu is closes
-   */
-  // TODO :aa shouldn't be so aware of parent context! 
-  setMenuState: (arg: 'closed' | 'nav' | 'login' | 'bag') => void
-}> = ({
-  currentAs,
-  links,
-  setMenuState,
-  className = '',
-  commonItemClx,
-  setChatbotOpen,
-  setMenuOpen
-}) => (
-    links.length > 0 ? (
-
-      <div className={cn('flex flex-col h-full', className)} >
-        <MobileNavMenuAI setMenuOpen={setMenuOpen} />
-        <div className="flex flex-col flex-1">
-          {links.map((el, index) => {
-            const variant = el.variant ?? 'link'
-            let internalClx = ''
-            // note that linkFG (or any other variant of 'link') 
-            // will not get assigned these classes,
-            // and will remain styles is 'foreground' (hence the name)
-            if (variant === 'link') {
-              internalClx += ' text-muted hover:text-foreground active:text-accent rounded-none'
-              if (currentAs && currentAs === el.href) {
-                internalClx += ' text-accent '
-              }
-            }
-            else {
-              internalClx += ' min-w-0'
-            }
-            if (currentAs && currentAs === el.href) {
-              internalClx += ' pointer-events-none'
-            }
-            const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : ''
-
-            if (!el.isAIMenu) {
-              return <MobileNavMenuItem link={el} setMenuOpen={setMenuOpen}/>
-            }
-          })}
-        </div>
-        <MobileAuthWidget className=' text-2xl' handleLogin={() => { setMenuState('login') }} />
-      </div>
-    ) : null
-  )
-
-export default MobileNav
+'use client'
+import React from 'react'
+import type { LinkDef } from '@hanzo/ui/types'
+import { cn } from '@hanzo/ui/util'
+import type { LinkDefExtended, ChildMenu } from '../../site-def/main-nav'
+import MobileNavMenuAI from './mobile-nav-menu-ai'
+import MobileNavMenuItem from './mobile-nav-menu-item'
+import MobileAuthWidget from './mobile-login-button'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hanzo/ui/primitives'
+import { ChevronDown } from 'lucide-react'
+import Link from 'next/link'
+
+const MobileNav: React.FC<{
+  currentAs: string | undefined
+  links: LinkDefExtended[]
+  className?: string
+  commonItemClx?: string | ((def: LinkDef) => string)
+  setChatbotOpen: (open: boolean) => void
+  setMenuOpen: (open: boolean) => void
+  setMenuState: (arg: 'closed' | 'nav' | 'login' | 'bag') => void
+}> = ({
+  currentAs,
+  links,
+  setMenuState,
+  className = '',
+  commonItemClx,
+  setChatbotOpen,
+  setMenuOpen
+}) => (
+    links.length > 0 ? (
+      <div className={cn('flex flex-col h-full', className)}>
+        <MobileNavMenuAI setMenuOpen={setMenuOpen} />
+        <div className="flex flex-col flex-1 overflow-auto">
+          <Accordion type="single" collapsible className='w-full h-full'>
+            {links.map((el, index) => {
+              const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : ''
+              const variant = el.variant ?? 'link'
+              let internalClx = variant === 'link'
+                ? ' text-muted hover:text-foreground active:text-accent rounded-none'
+                : ' min-w-0'
+
+              if (currentAs && currentAs === el.href) {
+                internalClx += ' pointer-events-none'
+                if (variant === 'link') {
+                  internalClx += ' text-accent'
+                }
+              }
+
+              if (!el.isAIMenu) {
+                return (
+                  <AccordionItem key={index} value={el.title ? el.title : ""} className='!no-underline !border-0'>
+                    <AccordionTrigger className={cn(internalClx, itemClx, '')}>
+                      <div className={cn(internalClx, itemClx, 'flex items-center justify-between w-full pl-3 text-base font-normal leading-6')}>
+                        {el.title}
+                      </div>
+                      <ChevronDown className="w-4 h-4 mr-3" />
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      {el.childMenu && (
+                        <div className="px-4">
+                          {Object.entries(el.childMenu.reduce((acc, child) => {
+                            const group = acc[child.groupName ? child.groupName : ""] || []
+                            group.push(child)
+                            acc[child.groupName ? child.groupName : ""] = group
+                            return acc
+                          }, {} as { [key: string]: ChildMenu[] })).map(([groupName, children]) => (
+                            <div key={groupName}>
+                              <div className="mt-4 mb-4 font-light text-muted-1">{groupName}</div>
+                              {children.map((child, childIndex) => (
+                                <div key={childIndex} className="m-2">
+                                  <div className="flex items-center py-1">
+                                    <span>
+                                      {child.icon && child.icon}
+                                    </span>
+                                    <Link
+                                      href={child.href}
+                                      className="text-muted-2 hover:underline ml-5 hover:text-primary"
+                                      target={child.newTab ? '_blank' : '_self'}
+                                      rel="noopener noreferrer"
+                                    >
+                                      {child.title}
+                                    </Link>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </AccordionContent>
+                  </AccordionItem>
+                )
+              }
+            })}
+          </Accordion>
+        </div>
+        <MobileAuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
+      </div>
+    ) : null
+  );
+
+export default MobileNav;