@luxfi/core 5.3.7 → 10.0.1

package/components/commerce/drawer/index.tsx

@@ -1,88 +0,0 @@
-'use client'
-import React from 'react'
-import { useRouter } from 'next/navigation'
-import { observer } from 'mobx-react-lite'
-
-import { CarouselBuyCard } from '@hanzo/commerce'
-
-import { 
-  useSelectAndBuy, 
-  useCommerceDrawer, 
-} from '../../../commerce/ui/context'
-
-import CommerceDrawer from './shell'
-import CheckoutButton from '../checkout-button'
-import Micro from './micro'
-
-const CommerceUIComponent: React.FC = observer(() => {
-
-  const buy = useSelectAndBuy()
-  const drawer = useCommerceDrawer()
-  const router = useRouter()
-
-  const handleCheckout = (): void => {
-    router.push('/checkout')
-  }
-
-  const handleHandleClicked = (): void => {
-
-    if (drawer.state === 'full') {
-      buy.hideVariants()
-    }
-    else if (drawer.state === 'micro') {
-      buy.showRecentVariants()
-    }
-  }
-
-  const handleItemClicked = () => {
-    buy.showRecentVariants()
-  }
-
-  const handleCloseGesture = (): boolean => {
-    if (drawer.state === 'full') {
-      buy.hideVariants()
-      return true // "handled!"
-    }
-    return false
-  }
-
-  return (
-    <CommerceDrawer 
-      handleHandleClicked={handleHandleClicked}
-      handleCloseGesture={handleCloseGesture}
-      drawerClx='flex flex-col'
-    >
-      {drawer.state === 'full' && (
-        /* The actual drawer is larger than the visible area (due to awkward
-        vaul impl.  So we have to ask the drawer for its currect snappoint 
-        and constrain layout to that.  
-        */
-        <div style={{height: drawer.snapPointPx - 24 /* fudge factor for handle area */}} >
-          <CarouselBuyCard 
-            skuPath={buy.currentSkuPath!} 
-            checkoutButton={
-              <CheckoutButton 
-                handleCheckout={handleCheckout} 
-                className='w-full min-w-[160px] sm:max-w-[320px]'
-              />
-            }
-            clx='justify-between h-full pb-3 gap-8'
-            addBtnClx='w-full min-w-[160px] sm:max-w-[320px]' 
-            buttonsAreaClx='grow-0 shrink-0 mt-0'
-            selectorClx='max-w-[475px] justify-between grow'
-            
-          />
-        </div>
-      )}
-      {drawer.state === 'micro' && (
-        <Micro 
-          handleCheckout={handleCheckout}
-          handleItemClicked={handleItemClicked}
-          clx='w-full px-2 sm:w-[460px] sm:mx-auto md:w-[550px]'
-        />
-      )}
-    </CommerceDrawer>
-  )
-})
-
-export default CommerceUIComponent

package/components/commerce/drawer/micro.tsx

@@ -1,145 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { Button, Image } from '@hanzo/ui/primitives'
-import { cn,  } from '@hanzo/ui/util'
-import type { LineItem } from '@hanzo/commerce/types'
-import { useCommerce, formatCurrencyValue } from '@hanzo/commerce'
-
-import CheckoutButton from '../checkout-button'
-import { useCommerceDrawer } from '../../../commerce/ui/context'
-
-const CN = {
-    // h: mind padding!
-  mobile: { w: 36, h: 32 },
-  sm:  { w: 60, h: 34 },
-  desktop: { w: 60, h: 32 },
-}
-
-const Info: React.FC<{
-  item: LineItem
-  clx?: string
-}> = ({
-  item,
-  clx=''
-}) => {
-
-  const cmmc = useCommerce()
-  const family = cmmc.getFamilyById(item.familyId)
-
-  let topLine = family!.title
-  if (item.sku.startsWith('LXM-AG') || item.sku.startsWith('LXM-AU')) {
-    topLine = family!.parentTitle + ', ' + family!.title   
-  }
-
-  const optionLabel = item.optionLabelShort ?? item.optionLabel
-  const priceStr = formatCurrencyValue(item.price)
-
-  return (<>
-    <div className={cn('sm:hidden flex flex-col !text-muted items-stretch whitespace-nowrap text-ellipsis ', clx)}>
-      <p className='text-left text-xs'>{topLine}</p>
-      <div className='flex justify-between text-xxs'>
-        <div>{optionLabel}</div>
-        <div className='pl-2.5'>{priceStr}</div>
-      </div>
-    </div>
-    <div className={cn('hidden sm:flex !text-muted  flex-col items-stretch whitespace-nowrap text-ellipsis text-xs', clx)}>
-      <p className='text-left'>{topLine}</p>
-      <div className='flex justify-between'>
-        <div>{optionLabel}</div>
-        <div className='pl-2.5'>{priceStr}</div>
-      </div>
-    </div>
-  </>)
-}
-
-const PROMPT_COMMON_CLX = 'block absolute top-0 left-0 bg-transparent duration-400 transition-opacity' 
-
-const Micro: React.FC<{
-  clx?: string
-  handleCheckout: () => void
-  handleItemClicked: () => void 
-}> = observer(({
-  clx='',
-  handleCheckout,
-  handleItemClicked 
-}) => {
-
-  const drawer = useCommerceDrawer()
-  const cmmc = useCommerce()
-
-  return (        
-    <div className={cn(
-      (drawer.showRecent ? 'grid grid-cols-2' : 'flex justify-center items-center '),
-      (drawer.showRecent ? ((drawer.isMobile) ? '-mt-3' : '-mt-3') : ''),
-      'gap-2 md:gap-3 relative',
-      clx
-    )}>
-    {drawer.showRecent && (
-      <div className={'flex flex-col items-stretch ' + (drawer.isMobile ? 'justify-start' : 'group')}>
-        <p className={'relative text-muted text-xxs md:text-xs leading-none pl-1 self-start ' + (drawer.isMobile ? 'top-[3px]' : 'top-[1px]')}>
-          <span className='invisible'>scrictly for layout</span>
-          {drawer.isMobile ? (
-            <span className={PROMPT_COMMON_CLX}>tap for options:</span>
-          ) : (<>
-            <span className={PROMPT_COMMON_CLX + ' group-hover:opacity-0'}>recent item:</span>
-            <span className={PROMPT_COMMON_CLX + ' opacity-0 group-hover:opacity-100'}>view options:</span>
-          </>)}
-        </p>
-        <Button 
-          variant='ghost'
-          rounded={drawer.isMobile ? 'md' : 'lg'}
-          size={drawer.isMobile ? 'sm' : 'default'}
-          onClick={handleItemClicked}
-          className={cn(
-            'box-content',
-            'flex flex-row justify-between items-center gap-1',
-            '-ml-1.5',
-            'overflow-hidden ', 
-            'px-1 md:px-2 py-[2px]',
-            'border border-transparent group-hover:border-muted-3',
-            'group-hover:!bg-transparent',
-            '!min-w-0'
-          )}
-        >
-          {cmmc.recentItem?.item.img && (<>
-            <Image def={cmmc.recentItem.item.img} constrainTo={CN.mobile} preload className='sm:hidden grow-0 shrink-0'/>
-            <Image def={cmmc.recentItem.item.img} constrainTo={CN.sm} preload className='hidden sm:block md:hidden grow-0 shrink-0'/>
-            <Image def={cmmc.recentItem.item.img} constrainTo={CN.desktop} preload className='hidden md:block grow-0 shrink-0'/>
-          </>)} 
-          {cmmc.recentItem && (
-            <div className='grow w-full'>
-              <Info item={cmmc.recentItem.item} clx='w-full'/>
-            </div>
-          )}
-        </Button>
-      </div>
-    )}
-    {drawer.showCheckout && (
-      <div className={cn(
-        'flex flex-col w-full', 
-        (drawer.showRecent ? 'items-stretch' : 'items-center' ),
-        (drawer.isMobile ? 'justify-start' : 'justify-center')
-      )}>
-        {drawer.showRecent && <p className='invisible text-muted text-xxs md:text-xs leading-none pl-1 self-start'>for layout</p>}
-        <CheckoutButton 
-          handleCheckout={handleCheckout} 
-          variant='primary' 
-          size={drawer.isMobile ? 'xs' : 'lg'}
-          rounded={drawer.isMobile ? 'md' : 'lg'}
-          centerText={drawer.isMobile ? !drawer.showRecent : true}
-          className={cn(drawer.isMobile ? 
-            (drawer.showRecent ? 'pl-3.5 pr-2.5' : 'min-w-[320px]')
-            :
-            (drawer.showRecent ? '' : 'w-[320px]'),
-            'text-sm font-semibold'
-          )} 
-        />
-      </div>
-    )}
-    </div>
-  )
-})
-
-export default Micro

package/components/commerce/drawer/shell.tsx

@@ -1,85 +0,0 @@
-'use client'
-import React, {type PropsWithChildren } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { 
-  Drawer, 
-  DrawerContent, 
-  DrawerHandle,
-  type DrawerProps,
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import '../../../style/drawer-handle-overrides.css'
-import { useCommerceDrawer } from '../../../commerce/ui/context'
-
-const CommerceDrawer: React.FC<PropsWithChildren & 
-  Omit<DrawerProps, 
-    'onOpenChange' | 
-    'open' | 
-    'snapPoints' | 
-    'modal' |
-    'setActiveSnapPoint' | 
-    'activeSnapPoint' 
-  > & 
-  {
-    handleHandleClicked: () => void
-    drawerClx?: string
-  }
-> = observer(({
-  children,
-  handleHandleClicked,
-  drawerClx='',
-  ...rest
-}) => {
-  
-  const drawer = useCommerceDrawer()
-
-  return (
-    <Drawer 
-      open={drawer.open} 
-      onOpenChange={() => {}} 
-      modal={drawer.modal} 
-      snapPoints={drawer.points}
-      activeSnapPoint={drawer.activePoint}
-      setActiveSnapPoint={drawer.onActivePointChanged.bind(drawer)}
-      fastDragSkipsToEnd={false}
-      dragHandleOnly={true}
-      handleHandleClicked={handleHandleClicked}
-      extendHandleDragRegion={false}
-  //    debugOutput
-      {...rest}
-    >
-      <DrawerContent 
-        defaultHandle={false} 
-        className={cn(
-          'border-0',
-          drawer.isMobile ? 'pt-5' : 'pt-6',
-          'w-full h-full',
-        )}
-        // https://github.com/radix-ui/primitives/discussions/935
-        onOpenAutoFocus={(e) => {e.preventDefault()}}
-      >
-        <DrawerHandle 
-          className={cn(
-            'absolute top-0 left-0 right-0 mx-auto z-10',
-            'flex justify-center items-start',
-            'border-t rounded-t-lg border-muted-3',
-            drawer.isMobile ? 'h-5 touch-pan-y' : 'h-6',
-          )} 
-        >
-          <div className={cn(
-              // pseudo-handle
-            'rounded-[3px] bg-level-3',
-            drawer.isMobile ? 'w-[155px] mt-[5px] h-1.5' : 'w-[180px] mt-[3px] h-2.5 hover:bg-level-4',
-            !drawer.isMobile ? 'cursor-grab active:cursor-grabbing' : '',
-          )} />
-        </DrawerHandle>
-        {children}
-      </DrawerContent>
-    </Drawer>
-  )
-})
-
-
-export default CommerceDrawer

package/components/commerce/mobile-bag-drawer.tsx

@@ -1,51 +0,0 @@
-'use client'
-import React from 'react'
-
-import { Drawer, DrawerContent} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { CartPanel } from '@hanzo/commerce'
-
-import BagButton from './bag-button'
-
-const MobileBagDrawer: React.FC<{
-  open: boolean,
-  setOpen: (b: boolean) => void
-  handleCheckout: () => void
-  className?: string
-}> = ({
-  open,
-  setOpen,
-  handleCheckout,
-  className='',
-}) => {
-  
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerContent className={cn('rounded-t-xl mt-6 pb-12 h-auto', className)} >
-        <CartPanel 
-          handleCheckout={handleCheckout} 
-          className='mt-4 mb-4 border-none py-0 px-4 w-full '
-          listClx='rounded-sm pr-3'
-          scrollAfter={5}
-          itemClx='mt-2'
-          totalClx='sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-background'
-          buttonClx='max-w-[220px] flex-none'
-        >
-          <div className='flex flex-row items-center flex-none justify-center '>
-            <BagButton 
-              animateOnHover={false} 
-              showIfEmpty 
-              className=
-              'mr-2 relative w-6 h-7'
-              iconClx='fill-foreground '
-            />
-            <p className='font-heading text-foreground text-default'>Your Bag</p>
-          </div>
-          <div className='h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none'/>
-        </CartPanel>
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-export default MobileBagDrawer

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

@@ -1,108 +0,0 @@
-'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-1 px-1 gap-1">
-                    <Button
-                        variant='primary'
-                        className='text-base font-semibold !min-w-0 self-center flex-1'
-                        onClick={handleLogin}
-                    >
-                        Sign Up
-                    </Button>
-                    <Button
-                        variant='outline'
-                        className=' text-base font-semibold !min-w-0 self-center flex-1'
-                        onClick={handleLogin}
-                    >
-                        Log In
-                    </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 +0,0 @@
-'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,51 +0,0 @@
-'use client'
-import React, { useState } from 'react'
-import { ArrowRight, Plus } from 'lucide-react'
-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  text-2xl cursor-pointer">
-                <div className='flex justify-between'>
-                    <Logo variant='text-only' size='md' outerClx={'p-6 h-full'} />
-                    <Plus width={28} height={28} className={
-                        'block h-full aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75 text-foreground will-change-transform transition-transform transition-scale transition-duration-[1500] mt-6 mr-6 ' +
-                        (!open ? 'rotate-none' : 'rotate-[135deg] scale-110')
-                    } onClick={() => setMenuOpen(false)} />
-                </div>
-                <div className="flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-full bg-muted-4 mx-6">
-                    <div className="text-muted-1 font-bold flex-1 flex justify-between min-h-12 items-center px-2" 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 +0,0 @@
-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