@luxfi/ui 5.3.7

package/commerce/ui/conf.ts

@@ -0,0 +1,13 @@
+import type { SnapPointsConfig } from './store'
+
+export default {
+  mb: {
+    micro: '62px',
+    full: '550px' 
+  },
+
+  dt: {
+    micro: '74px',
+    full: '575px' 
+  }
+} satisfies SnapPointsConfig

package/commerce/ui/context.tsx

@@ -0,0 +1,123 @@
+'use client'
+import React, { 
+  createContext, 
+  useContext, 
+  useRef, 
+  type PropsWithChildren, 
+  useEffect,
+  useLayoutEffect
+} from 'react'
+import { enableStaticRendering } from 'mobx-react-lite'
+import { usePathname } from 'next/navigation'
+import { useDebounceCallback } from 'usehooks-ts'
+
+
+import { preset as twConfig } from '@hanzo/ui/tailwind'
+import { useCommerce } from '@hanzo/commerce'
+
+import type { CommerceDrawer, SelectAndBuy } from './store'
+import { CommerceUIStore } from './store'
+import conf from './conf'
+
+const LOG = false ////////////////////
+const log = (s: string) => {
+  if (LOG) {
+    console.log('CMMC UI CONTEXT ' + s)
+  }
+}
+
+// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
+enableStaticRendering(typeof window === "undefined")
+
+const CommerceUIContext = createContext<CommerceUIStore | undefined>(undefined)
+
+const useCommerceDrawer = (): CommerceDrawer => {
+  return useContext(CommerceUIContext) as CommerceDrawer
+}
+
+const useSelectAndBuy = (): SelectAndBuy => {
+  return useContext(CommerceUIContext) as SelectAndBuy
+}
+
+const CommerceUIProvider: React.FC<PropsWithChildren> = ({ 
+  children,
+}) => {
+
+  const cmmc = useCommerce()
+  const pathname = usePathname()
+  const storeRef = useRef<CommerceUIStore>(new CommerceUIStore(cmmc, conf))
+  const prevPathRef = useRef<string>('initial')
+
+  const onResize = () => { 
+    const width = window.innerWidth 
+    let desktopMin = 0
+    if (twConfig.theme?.screens) {
+        // expected form: { md: '768px' }
+      if ('md' in twConfig.theme?.screens && typeof twConfig.theme?.screens.md === 'string') {
+        desktopMin = parseInt(twConfig.theme?.screens.md)
+      }
+      if (width < desktopMin) {
+        if (!storeRef.current.isMobile) {
+          storeRef.current.setMobile(true)
+        }
+      }
+      else if (storeRef.current.isMobile) {
+        storeRef.current.setMobile(false)
+      }
+    }
+    storeRef.current.setViewportHeight(window.innerHeight)
+  }
+
+  const onResize_debounced = useDebounceCallback(onResize, 500)
+
+  useLayoutEffect(() => {
+    storeRef.current.initialize()
+    onResize()
+    window.addEventListener('resize', onResize_debounced);
+
+    return () => {
+      window.removeEventListener('resize', onResize_debounced)
+      storeRef.current.dispose() 
+    }
+  }, [])
+
+  useEffect(() => {
+    const checkingOut = (pathname === '/checkout')
+
+    /////////////////////////////////////
+    log("useEffect: pathname: " + pathname)
+    log("useEffect: prev pathname: " + prevPathRef.current)
+    
+    if (storeRef.current.checkingOut === undefined || storeRef.current._checkingOut!== checkingOut) {
+      log("useEffect: setting checkingOut to: " + checkingOut) /////////////////////////////////////
+      storeRef.current.setCheckingOut(checkingOut)
+    }
+    if ( prevPathRef.current === 'initial') {
+      prevPathRef.current = pathname
+      storeRef.current.newRoute()
+    }
+    else if (
+      !checkingOut
+      &&
+      prevPathRef.current !== pathname
+    ) {
+      storeRef.current.newRoute()
+      prevPathRef.current = pathname
+      log("ROUTE CHANGE: " + pathname + ": " + storeRef.current._routeChangedTime)
+    }  
+  }, [pathname])
+
+
+  return (
+    <CommerceUIContext.Provider value={storeRef.current}>
+      {children}
+    </CommerceUIContext.Provider>
+  )
+}
+
+export {
+  useCommerceDrawer, 
+  useSelectAndBuy,
+  CommerceUIProvider
+}
+

package/commerce/ui/store.ts

@@ -0,0 +1,290 @@
+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

@@ -0,0 +1,71 @@
+'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

@@ -0,0 +1,29 @@
+'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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,107 @@
+'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