@luxfi/core 5.3.7 → 10.0.1

package/commerce/ui/store.ts

@@ -1,290 +0,0 @@
-import { 
-  action,
-  autorun,
-  computed, 
-  makeObservable, 
-  observable,
-  reaction,
-  type IReactionDisposer, 
-} from 'mobx'
-
-import type { CommerceService } from '@hanzo/commerce/types'
-
-const LOG = false ////////////////////
-const log = (s: string) => {
-  if (LOG) {
-    console.log('COMMERCE_UI ' + s)
-  }
-}
-
-type SnapPoint = number | string
-
-type SnapPoints = {
-  full: SnapPoint
-  micro: SnapPoint
-}
-  
-type SnapPointsConfig = {
-  mb: SnapPoints
-  dt: SnapPoints
-}
-
-type DrawerState = 'closed' | 'micro' | 'full' 
-
-interface SelectAndBuy {
-  showVariants: (skuPath: string) => void
-  showRecentVariants: () => void
-  hideVariants: () => void
-  get currentSkuPath(): string | undefined
-  newRoute: () => void
-}
-
-interface CommerceDrawer {
-
-  get open(): boolean
-  get state(): DrawerState 
-  get closedByUser(): boolean
-  setClosedByUser(b: boolean): void
-  get modal(): boolean
-  get points(): SnapPoint[] 
-  get activePoint(): SnapPoint | null
-    // Called by UI Gesture
-  onActivePointChanged: (p: SnapPoint | null) => void
-  get showCheckout(): boolean
-  get showRecent(): boolean
-  get showBuy(): boolean
-
-  get microHeight(): SnapPoint
-  get isMobile(): boolean
-  get snapPointPx(): number
-}
-
-class CommerceUIStore implements 
-  SelectAndBuy,
-  CommerceDrawer
-{
-  _vHeight: number = 0
-  _routeChangedTime = 0
-
-  _currentSkuPath: string | undefined = undefined
-  _closedByUser: boolean = false
-  _checkingOut: boolean | undefined = undefined
-  _ignoreStateChange: boolean = false
-  _activePoint: SnapPoint | null = null 
-  
-  _reactionDisposers: IReactionDisposer[] = []
-  _service: CommerceService
-  _pointsConfig: SnapPointsConfig 
-  _points: SnapPoints  // points to either this._pointsConfig.md or this._pointsConfig.dt 
-
-  constructor(s: CommerceService, conf: SnapPointsConfig) {
-    this._service = s
-    this._pointsConfig = conf
-    this._points = this._pointsConfig.dt
-
-    makeObservable(this, {
-      _currentSkuPath: observable,
-      _closedByUser: observable,
-      _checkingOut: observable,
-      _activePoint: observable,
-      _points: observable.ref, 
-      _vHeight: observable,
-      _routeChangedTime: observable,
-
-      showVariants: action,
-      showRecentVariants: action,
-      hideVariants: action,
-      setClosedByUser: action,
-      setCheckingOut: action,
-      setActivePoint: action,
-      setMobile: action,
-      setViewportHeight: action,
-      setRouteChangedTime: action,
-      
-      activePoint: computed,
-      checkingOut: computed,
-      closedByUser: computed,
-      currentSkuPath: computed,
-      microHeight: computed,
-      modal: computed,
-      points: computed,
-      showRecent: computed,
-      showBuy: computed,
-      showCheckout: computed,
-      snapPointPx: computed,
-      state: computed,
-      open: computed
-    })
-  }
-
-  initialize = (): void => {
-
-    this._reactionDisposers.push(reaction(
-      () => ( this.state ),
-      (s) => {
-        if (this.ignoreStateChange) {
-          log(`STATE CHANGE to "${s}" (IGNORED)`) // ===========
-          this.setIgnoreStateChange(false)
-          return
-        }
-        else {
-          log(`STATE CHANGE to "${s}" (UI REACTED)`) // ===========
-          this._syncUIToState(s)
-        }
-      }
-    ))
-    /*
-    this._reactionDisposers.push(autorun(() => {
-      log('AUTORUN: OPEN: ' + this.open)
-      log('AUTORUN:' + // ===============
-        '[showCheckout: '  + this.showCheckout + 
-        '], [showRecent: ' + this.showRecent + 
-        '], [showBuy: ' + this.showBuy + 
-        '], [closedByUser: ' + this._closedByUser + 
-        '], [checkingOut: ' + this._checkingOut + ']'
-      ) // ===========
-    }))
-    */
-  }
-
-  newRoute = () => {
-    this.setRouteChangedTime(new Date().getTime())
-    this.hideVariants()
-    this.setClosedByUser(false)
-    // DO NOT reset _checkingOut!
-  }
-
-  onActivePointChanged = (newPoint: SnapPoint | null): void => { 
-    log("ON onActivePointChanged: " +  newPoint) // ===========
-    if (newPoint === this._points.micro && this.activePoint === this._points.full) {
-      this.setIgnoreStateChange(true)
-      this.hideVariants()  
-    }
-    else if (newPoint === this._points.full && this.activePoint === this._points.micro) {
-      this.setIgnoreStateChange(true)
-      this.showRecentVariants()
-    }
-    this.setActivePoint(newPoint)  
-  }
-
-  showVariants = (skuPath: string): void => {
-    this._service.setCurrentItem(undefined)
-    this._currentSkuPath = skuPath
-    this._closedByUser = false
-  } 
-
-  showRecentVariants = (): void => {
-    const recentItemInfo = this._service.recentItem
-    if (recentItemInfo) {
-      this._service.setCurrentItem(undefined)
-      this._currentSkuPath = recentItemInfo.item.sku
-      this._closedByUser = false
-    }
-  } 
-
-  hideVariants = (): void => { this._currentSkuPath = undefined }
-  get currentSkuPath(): string | undefined { return this._currentSkuPath } 
-
-  get closedByUser(): boolean { return this._closedByUser }
-  setClosedByUser = (b: boolean): void => { this._closedByUser = b}
-
-  get ignoreStateChange(): boolean { return this._ignoreStateChange }
-  setIgnoreStateChange = (b: boolean): void => { this._ignoreStateChange = b}
-
-  get checkingOut(): boolean | undefined { return this._checkingOut }
-  setCheckingOut = (b: boolean): void => { this._checkingOut = b }
-
-  get activePoint(): SnapPoint | null { return this._activePoint }
-  setActivePoint = (pt: SnapPoint | null): void => { this._activePoint = pt}
-   
-  setRouteChangedTime = (t: number): void => {this._routeChangedTime = t}
-
-  get points(): SnapPoint[] { 
-    return [this._points.micro, this._points.full]
-  }
-
-  _syncUIToState = (s: DrawerState) => {
-    log("_syncUIToState: " +  s) // ===========
-    if (s === 'micro') {
-      this.setActivePoint(this.points[0])
-    }
-    else if (s === 'full') {
-      this.setActivePoint(this.points[this.points.length - 1])
-    } 
-  }
-
-  get open(): boolean {
-
-    log('open():' + // ===============
-      ' showCheckout: '  + this.showCheckout + 
-      ' showRecent: ' + this.showRecent + 
-      ' showBuy: ' + this.showBuy
-    ) // ===========
-
-    return ( 
-      this._checkingOut !== undefined
-      &&
-      !this._checkingOut 
-      &&
-      !this.closedByUser
-      && 
-      (this.showCheckout || this.showRecent || this.showBuy)
-    )
-  }
-
-  get state(): DrawerState {
-    if (!this.closedByUser && !this._checkingOut) {
-      if (this.showBuy) {
-        return 'full'
-      }
-      else if (this.showRecent || this.showCheckout) {
-        return 'micro'
-      }
-    }
-    return 'closed'
-  }
-
-  get showRecent(): boolean {
-
-    const recentInfo = this._service.recentItem
-    return !!recentInfo && recentInfo.modified > this._routeChangedTime
-  }
-
-  get showBuy(): boolean {return !!this.currentSkuPath}
-  get showCheckout(): boolean { return !this._service.cartEmpty}
-  get modal(): boolean { return this.state !== 'micro'}
-
-  get microHeight(): SnapPoint {
-    return this._points.micro
-  }
-
-  get isMobile(): boolean { return this._pointsConfig.mb === this._points }
-  setMobile = (b: boolean): void => { 
-    log("setMobile: " +  b) // ===========
-    this._points = b ? this._pointsConfig.mb : this._pointsConfig.dt
-  }
-
-  setViewportHeight = (v: number) => {this._vHeight = v}
-  get snapPointPx(): number {
-    if (!this._activePoint || this._vHeight === 0) return 0
-
-    if (typeof this._activePoint === 'string') {
-      return parseInt(this._activePoint)
-    }
-
-    return this._vHeight * this._activePoint as number
-  }
-
-  dispose = () => {
-    this._reactionDisposers.forEach((d) => {d()})
-  }
-}
-
-export {
-  CommerceUIStore,
-  type CommerceDrawer,
-  type SelectAndBuy,
-  type SnapPointsConfig,
-  type SnapPoints,
-  type SnapPoint
-}

package/components/access-code-input.tsx

@@ -1,71 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-const AccessCodeInput: React.FC<{
-  onSuccess?: () => void
-  onFail?: () => void
-  validCodes?: string[]
-  className?: string
-}> = ({
-  onSuccess,
-  onFail,
-  validCodes,
-  className
-}) => {
-  const [status, setStatus] = useState<'valid' | 'invalid' | 'checking' | undefined>()
-
-  const checkAccessCode = (code: string) => {
-    setStatus(undefined)
-    if (code.length === 6) {
-      setStatus('checking')
-      setTimeout(() => {
-        if (validCodes?.includes(code) && onSuccess) {
-          setStatus('valid')
-          onSuccess()
-        }
-        else {
-          setStatus('invalid')
-          onFail && onFail()
-        }
-      }, 1000)
-    }
-  }
-
-  return (
-    <div className={cn('flex flex-col gap-2 mx-auto w-full text-center items-center', className)}>
-      <InputOTP
-        className='mx-auto'
-        maxLength={6}
-        onInput={(event) => checkAccessCode((event.target as HTMLInputElement).value)}
-        render={({ slots }) => (
-          <>
-            <InputOTPGroup>
-              {slots.slice(0, 3).map((slot, index) => (
-                <InputOTPSlot key={index} {...slot} />
-              ))}{" "}
-            </InputOTPGroup>
-            <InputOTPSeparator />
-            <InputOTPGroup>
-              {slots.slice(3).map((slot, index) => (
-                <InputOTPSlot key={index + 3} {...slot} />
-              ))}
-            </InputOTPGroup>
-          </>
-        )}
-      />
-      <p className='h-[3rem]'>
-        {
-          status === 'checking' ? 'Checking access code...' :
-          status === 'invalid' ? <span className='text-destructive'>Invalid access code!</span> :
-          status === 'valid' ? <span>Access code is valid! Redirecting...</span> :
-          null
-        }
-      </p>
-    </div>
-  )
-}
-
-export default AccessCodeInput

package/components/auth/auth-listener.tsx

@@ -1,29 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useAuth } from '@hanzo/auth/service'
-import { getCookie } from 'cookies-next'
-
-const AuthListener = () => {
-  const auth = useAuth()
-
-  useEffect(() => {
-    fetch(`${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}/api/auth/get-auth-token`, {
-      method: 'GET',
-      credentials: 'include',
-    })
-    .then(response => response.json())
-    .then((data: any) => {
-      const token = getCookie('auth-token')
-      console.log(data)
-      console.log(token)
-      if (!!token) {
-        auth.loginWithCustomToken(token)
-      }
-    })
-  }, [auth])
-
-  return ( <></> )
-}
-
-export default AuthListener

package/components/auth/auth-token/clear-auth-token.tsx

@@ -1,12 +0,0 @@
-import domains from '../common-auth-domains'
-
-const ClearAuthToken = () => {
-  return (<>
-    {domains.map(({url}) => (
-      /* Clear auth-token cookie across all Lux domains */
-      <img src={`${url}/api/auth/clear-auth-token`} className='absolute hidden'/>
-    ))}
-  </>)
-}
-
-export default ClearAuthToken

package/components/auth/auth-token/set-auth-token.tsx

@@ -1,16 +0,0 @@
-import domains from '../common-auth-domains'
-
-const SetAuthToken: React.FC<{
-  authToken: string
-}> = ({
-  authToken,
-}) => {
-  return (<>
-    {!!authToken && domains.map(({url}) => (
-      /* Set auth-token cookie across all Lux domains */
-      <img src={`${url}/api/auth/set-auth-token?token=${authToken}`} className='absolute hidden'/>
-    ))}
-  </>)
-}
-
-export default SetAuthToken

package/components/auth/common-auth-domains.ts

@@ -1,16 +0,0 @@
-const domains = [
-  { id: 'lux.market', url: 'https://lux.market' },
-  { id: 'lux.shop', url: 'https://lux.shop' },
-  { id: 'lux.credit', url: 'https://lux.credit' },
-  { id: 'lux.network', url: 'https://lux.network' },
-  { id: 'wallet.lux.network', url: 'https://wallet.lux.network' },
-  { id: 'safe.lux.network', url: 'https://safe.lux.network' },
-  { id: 'lux.finance', url: 'https://lux.finance' },
-  { id: 'lux.exchange', url: 'https://lux.exchange' },
-  { id: 'lux.quest', url: 'https://lux.quest' },
-  { id: 'lux.id', url: 'https://lux.id' },
-]
-
-export {
-  domains as default
-}

package/components/auth/login-panel.tsx

@@ -1,107 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-
-import { setCookie } from 'cookies-next'
-
-import { cn } from '@hanzo/ui/util'
-import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
-import { LoginPanel as Login } from '@hanzo/auth/components'
-
-import Logo from '../logo'
-import { EmblaAutoplay } from '..'
-import LuxLogo from '../icons/lux-logo'
-import { legal } from '../../site-def/footer'
-
-const LoginPanel: React.FC<{
-  close: () => void
-  getStartedUrl?: string
-  redirectUrl?: string
-  className?: string
-  reviews: { text: string, author: string, href: string }[]
-}> = ({
-  close,
-  getStartedUrl='/',
-  redirectUrl,
-  className='',
-  reviews
-}) => {
-  const router = useRouter()
-
-  const termsOfServiceUrl = legal.find(({title}) => title === 'Terms and Conditions')?.href || ''
-  const privacyPolicyUrl = legal.find(({title}) => title === 'Privacy Policy')?.href || ''
-
-    // TODO :aa shouldn't this happen in @hanzo/auth: components/LoginPanel ??
-    // Otherwise, the functionality is split across modules! (and client/fw!) 
-    // (This was never my intent w the onLoginChanged callback.)
-  const onLogin = (token: string) => {
-    setCookie('auth-token', token, {
-      domain: 'lux.id',
-      path: '/',
-      sameSite: 'none',
-      secure: true,
-      httpOnly: false,
-      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
-    })
-
-    redirectUrl && router.push(redirectUrl)
-  }
-
-  return (
-    <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
-      <div className='hidden md:flex w-full h-full bg-level-1 flex-row items-end justify-end overflow-y-auto min-h-screen'>
-        <div className='h-full w-full max-w-[750px] px-8 pt-0'>
-          <div className='h-full w-full max-w-[550px] mx-auto flex flex-col justify-between min-h-screen py-10'>
-            <Button
-              variant='ghost'
-              onClick={close}
-              className='w-fit !min-w-0 p-2'
-            >
-              <Logo size='md' textClx='!cursor-pointer' variant='text-only'/>
-            </Button>
-            <Carousel
-              options={{ align: 'center', loop: true }}
-              className='w-full'
-              plugins={[EmblaAutoplay({ delay: 5000, stopOnInteraction: true })]}
-            >
-              <CarouselContent>
-                {reviews.map(({text, author, href}, index) => (
-                  <CarouselItem key={index}>
-                    <Link href={href} className='flex flex-col gap-3 cursor-pointer'>
-                      <p>“{text}“</p>
-                      <p className='text-sm'>{author}</p>
-                    </Link>
-                  </CarouselItem>
-                ))}
-              </CarouselContent>
-            </Carousel>
-          </div>
-        </div>
-      </div>
-      <div className='w-full h-full bg-background flex flex-row items-center'>
-        <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0 text-center'>
-          <div className='relative h-full w-full max-w-[400px] mx-auto flex flex-col gap-4 items-center py-10'>
-            <Button
-              variant='ghost'
-              onClick={close}
-              className='block md:hidden absolute rounded-full p-2 left-0 h-auto hover:bg-background'
-            >
-              <LuxLogo className='w-5 h-5'/>
-            </Button>
-            <Login
-              getStartedUrl={getStartedUrl}
-              redirectUrl={redirectUrl}
-              className='w-full max-w-sm'
-              termsOfServiceUrl={termsOfServiceUrl}
-              privacyPolicyUrl={privacyPolicyUrl}
-              onLoginChanged={onLogin}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default LoginPanel

package/components/back-button.tsx

@@ -1,49 +0,0 @@
-'use client'
-import React from 'react'
-import { useRouter } from 'next/navigation'
-
-import { ChevronLeft } from 'lucide-react'
-
-
-import { 
-  Button, 
-  buttonVariants, 
-} from '@hanzo/ui/primitives'
-
-import type { VariantProps } from '@hanzo/ui/util'
-
-const BackButton: React.FC<{
-  variant?: VariantProps<typeof buttonVariants>['variant']
-  size?: VariantProps<typeof buttonVariants>['size']
-  onBack?: () => void
-  clx?: string
-  iconClx?: string
-}> = ({
-  variant='ghost',
-  size='default',
-  clx='',
-  iconClx='',
-  onBack
-}) => {
-
-  const router = useRouter()
-  const back = () => {
-    if (onBack) {
-      onBack()
-    }
-    router.back()
-  }
-
-  return (
-    <Button
-      variant={variant}
-      size={size}
-      onClick={back}
-      className={clx}
-    >
-      <ChevronLeft className={iconClx}/>
-    </Button> 
-  )
-}
-
-export default BackButton

package/components/chat-widget.tsx

@@ -1,85 +0,0 @@
-'use client'
-import React from 'react'
-
-import { Button, Card } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import LuxLogo from './icons/lux-logo'
-import type { ChatbotSuggestedQuestion } from '../types'
-
-const ChatWidget: React.FC<{
-  title: string
-  chatbotUrl: string
-  subtitle?: string
-  question?: string
-  buttonClx?: string
-  /* 
-    ChatBotSuggestQuestion.icon
-    Currently supports these icons from remix icons (https://remixicon.com/):
-      GlobalLineIcon,
-      ShieldFlashLineIcon,
-      BankCardLineIcon,
-      GroupLineIcon,
-      QuestionnaireLineIcon
-  */
-  suggestedQuestions?: ChatbotSuggestedQuestion[]
-}> = ({
-  title,
-  chatbotUrl,
-  subtitle,
-  question,
-  suggestedQuestions,
-  buttonClx=''
-}) => {
-
-  const [showChatbot, setShowChatbot] = React.useState<boolean>(false)
-
-  const onClick = () => { setShowChatbot(!showChatbot) }
-
-  const searchParams = new URLSearchParams()
-  if (question) {
-    searchParams.append('question', question)
-  }
-  if (suggestedQuestions) {
-    searchParams.append('sQuestions', suggestedQuestions.map(({ message }) => message).join(','))
-    searchParams.append('sHeadings', suggestedQuestions.map(({ heading }) => heading).join(','))
-    searchParams.append('sIcons', suggestedQuestions.map(({ icon }) => icon).join(','))
-  }
-
-  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`
-
-  return (<>
-    <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 ' +
-      (showChatbot ? 'flex' : 'hidden')
-    }>
-      <Card className='flex flex-col h-full w-full'>
-        <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
-          <h1 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h1>
-          <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
-            <LuxLogo width={24} height={24}/>
-          </Button>
-        </div>
-        <iframe src={iframeSrc} className='h-full' />
-      </Card>
-    </div>
-
-    <LuxLogo
-      width={28}
-      height={28}
-      onClick={onClick}
-      className={cn(
-          // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
-        'fixed bottom-5 right-[24px] md:z-floating z-16 cursor-pointer',
-        'hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]',
-        'transition-transform', 
-        showChatbot ? 'rotate-180' : '',
-        buttonClx
-      )}
-      strokeWidth={1}
-    />
-  </>)
-}
-
-export default ChatWidget

package/components/commerce/_to_deprecate_checkout-widget/const.ts

@@ -1,13 +0,0 @@
-export default {
-  itemImgConstraint: { w: 40, h: 24 },
-  animDurationMs: 400,
-  animTimingFn: 'cubic-bezier(0.4, 0, 0.2, 1)',
-  compWidthClx: {
-    checkout: 'w-pr-40',
-    itemInfo: 'w-pr-60'
-  },
-  shadowStyle: {
-    border: '1px solid rgb(100 100 100)',
-    boxShadow: '2px 4px 4px -3px rgb(125 125 125 / 0.7), 4px -4px 8px -4px rgb(125 125 125 / 0.7)'
-  }
-}