@luxfi/core 5.1.2 → 5.1.4

package/components/commerce/checkout-widget/index.tsx

@@ -1,86 +1,86 @@
-'use client'
-import React from 'react'
-import { createPortal } from 'react-dom'
-import { usePathname, useRouter } from 'next/navigation'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-import { Image } from '@hanzo/ui/primitives'
-
-import { useCommerceUI } from '@hanzo/commerce'
-
-import CheckoutButton from '../checkout-button'
-import useAnimationClxSet from './use-anim-clx-set'
-import useLaggingItemRef from './use-lagging-item-ref'
-import CONST from './const'
-
-const CheckoutWidget: React.FC<{
-  clx?: string
-}> = observer(({
-  clx=''
-}) => {
-
-  const router = useRouter()
-
-  const isCheckout = usePathname() === '/checkout'
-  const clxSet = useAnimationClxSet(isCheckout)
-
-  const itemRef = useCommerceUI()
-  const laggingRef = useLaggingItemRef(itemRef, CONST.animDurationMs)
-
-  const handleCheckout = () => { router.push('/checkout')}
-
-  return globalThis?.document?.body && createPortal(
-    (<div 
-      className={cn(
-        'min-w-[160px] sm:max-w-[320px] w-[calc(100%-72px)] ml-2 !h-10',
-        'z-below-modal-2 fixed bottom-[20px] left-0 right-0',
-        'rounded-lg bg-background',
-        'flex',
-        itemRef.item ? 'gap-2' : '',
-        clxSet.asArray.join(' ')
-      )}
-      style={laggingRef.item ? {} : CONST.shadowStyle}
-    >
-      <div 
-        className={cn(
-          'flex flex-row justify-between items-center', 
-          itemRef.item ? CONST.compWidthClx.itemInfo : 'w-0',
-          laggingRef.item ? 'px-3 border rounded-lg border-muted-3' : '' 
-        )}
-        style={{
-          transitionProperty: 'width',
-          transitionTimingFunction: CONST.animTimingFn,
-          transitionDuration: `${CONST.animDurationMs}ms`
-        }}
-      >
-        {laggingRef.item?.img ? (
-          <Image def={laggingRef.item.img} constrainTo={CONST.itemImgConstraint} preload className='grow-0 shrink-0'/>
-        ) : ( // placeholder so things align
-          <div style={{height: CONST.itemImgConstraint.h, width: CONST.itemImgConstraint.w}} className='bg-level-3 grow-0 shrink-0'/>
-        )}
-
-        <div className='text-muted grow ml-1'>
-          {laggingRef.item && (<>
-            <p className='whitespace-nowrap text-sm'>{laggingRef.item.title}</p>
-            <p className='whitespace-nowrap text-xxs' >recently added...</p>
-          </>)}
-        </div>
-      </div>
-      <CheckoutButton 
-        handleCheckout={handleCheckout} 
-        centerText={!!!itemRef.item}
-        variant='primary' rounded='lg' 
-        className={cn(itemRef.item ? CONST.compWidthClx.checkout : 'w-full')} 
-        style={{
-          transitionProperty: 'width',
-          transitionTimingFunction: CONST.animTimingFn,
-          transitionDuration: `${CONST.animDurationMs}ms`
-        }}
-      />        
-    </div>),
-    globalThis?.document?.body
-  )
-})
-
-export default CheckoutWidget
+'use client'
+import React from 'react'
+import { createPortal } from 'react-dom'
+import { usePathname, useRouter } from 'next/navigation'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import { Image } from '@hanzo/ui/primitives'
+
+import { useCommerceUI } from '@hanzo/commerce'
+
+import CheckoutButton from '../checkout-button'
+import useAnimationClxSet from './use-anim-clx-set'
+import useLaggingItemRef from './use-lagging-item-ref'
+import CONST from './const'
+
+const CheckoutWidget: React.FC<{
+  clx?: string
+}> = observer(({
+  clx=''
+}) => {
+
+  const router = useRouter()
+
+  const isCheckout = usePathname() === '/checkout'
+  const clxSet = useAnimationClxSet(isCheckout)
+
+  const itemRef = useCommerceUI()
+  const laggingRef = useLaggingItemRef(itemRef, CONST.animDurationMs)
+
+  const handleCheckout = () => { router.push('/checkout')}
+
+  return globalThis?.document?.body && createPortal(
+    (<div 
+      className={cn(
+        'min-w-[160px] sm:max-w-[320px] w-[calc(100%-72px)] ml-2 !h-10',
+        'z-below-modal-2 fixed bottom-[20px] left-0 right-0',
+        'rounded-lg bg-background',
+        'flex',
+        itemRef.item ? 'gap-2' : '',
+        clxSet.asArray.join(' ')
+      )}
+      style={laggingRef.item ? {} : CONST.shadowStyle}
+    >
+      <div 
+        className={cn(
+          'flex flex-row justify-between items-center', 
+          itemRef.item ? CONST.compWidthClx.itemInfo : 'w-0',
+          laggingRef.item ? 'px-3 border rounded-lg border-muted-3' : '' 
+        )}
+        style={{
+          transitionProperty: 'width',
+          transitionTimingFunction: CONST.animTimingFn,
+          transitionDuration: `${CONST.animDurationMs}ms`
+        }}
+      >
+        {laggingRef.item?.img ? (
+          <Image def={laggingRef.item.img} constrainTo={CONST.itemImgConstraint} preload className='grow-0 shrink-0'/>
+        ) : ( // placeholder so things align
+          <div style={{height: CONST.itemImgConstraint.h, width: CONST.itemImgConstraint.w}} className='bg-level-3 grow-0 shrink-0'/>
+        )}
+
+        <div className='text-muted grow ml-1'>
+          {laggingRef.item && (<>
+            <p className='whitespace-nowrap text-sm'>{laggingRef.item.title}</p>
+            <p className='whitespace-nowrap text-xxs' >recently added...</p>
+          </>)}
+        </div>
+      </div>
+      <CheckoutButton 
+        handleCheckout={handleCheckout} 
+        centerText={!!!itemRef.item}
+        variant='primary' rounded='lg' 
+        className={cn(itemRef.item ? CONST.compWidthClx.checkout : 'w-full')} 
+        style={{
+          transitionProperty: 'width',
+          transitionTimingFunction: CONST.animTimingFn,
+          transitionDuration: `${CONST.animDurationMs}ms`
+        }}
+      />        
+    </div>),
+    globalThis?.document?.body
+  )
+})
+
+export default CheckoutWidget

package/components/commerce/checkout-widget/obs-string-set.ts

@@ -1,48 +1,48 @@
-import { 
-  action, 
-  computed, 
-  makeObservable, 
-  observable 
-} from 'mobx'
-
-class ObsStringSet {
-
-  private _set = observable.set(new Set<string>())
-
-  constructor(initial: string[] = []) {
-    initial.forEach((el)  => {this._set.add(el)})
-    makeObservable(this, {
-      add: action,
-      remove: action,   
-      asArray: computed
-    })
-  }  
-
-  add = (v: string | string[]): void => {
-    if (Array.isArray(v)) {
-      v.forEach((el)  => {this._set.add(el)})
-    }
-    else {
-      this._set.add(v) 
-    }
-  }
-
-  remove = (v: string | string[]): void => {
-    if (Array.isArray(v)) {
-      v.forEach((el)  => {this._set.delete(el)})
-    }
-    else {
-      this._set.delete(v) 
-    }
-  }
-
-  has = (v: string): boolean => (
-    this._set.has(v)
-  )
-
-  get asArray() {
-    return Array.from(this._set)
-  }
-}
-
-export default ObsStringSet
+import { 
+  action, 
+  computed, 
+  makeObservable, 
+  observable 
+} from 'mobx'
+
+class ObsStringSet {
+
+  private _set = observable.set(new Set<string>())
+
+  constructor(initial: string[] = []) {
+    initial.forEach((el)  => {this._set.add(el)})
+    makeObservable(this, {
+      add: action,
+      remove: action,   
+      asArray: computed
+    })
+  }  
+
+  add = (v: string | string[]): void => {
+    if (Array.isArray(v)) {
+      v.forEach((el)  => {this._set.add(el)})
+    }
+    else {
+      this._set.add(v) 
+    }
+  }
+
+  remove = (v: string | string[]): void => {
+    if (Array.isArray(v)) {
+      v.forEach((el)  => {this._set.delete(el)})
+    }
+    else {
+      this._set.delete(v) 
+    }
+  }
+
+  has = (v: string): boolean => (
+    this._set.has(v)
+  )
+
+  get asArray() {
+    return Array.from(this._set)
+  }
+}
+
+export default ObsStringSet

package/components/commerce/checkout-widget/use-anim-clx-set.ts

@@ -1,57 +1,57 @@
-import { useEffect, useRef } from 'react'
-import { reaction, runInAction} from 'mobx'
-
-import ObsStringSet from './obs-string-set'
-import { useCommerce, useCommerceUI } from '@hanzo/commerce'
-
-export default (isCheckout: boolean): ObsStringSet => {
-
-  const ui = useCommerceUI()
-  const cmmc = useCommerce()
-
-  const clxSetRef = useRef<ObsStringSet>(new ObsStringSet(
-    (cmmc.cartEmpty || ui.buyOptionsSkuPath || isCheckout) ? ['hidden'] : []
-  ))
-
-  useEffect(() => (
-    reaction(
-      () => ({
-        microOpen: !(cmmc.cartEmpty || !!ui.buyOptionsSkuPath || isCheckout),
-        buyOpen: !!ui.buyOptionsSkuPath
-      }),
-      (val, prev) => {
-
-        runInAction(() => {
-          if (!val.microOpen && prev.microOpen) {
-            clxSetRef.current.add('checkout-widget-disappears')   
-          }
-          else if (val.microOpen && !prev.microOpen) {
-            clxSetRef.current.remove('hidden')   
-            clxSetRef.current.add('checkout-widget-appears')   
-          }
-          if (!val.buyOpen && prev.buyOpen) {
-            clxSetRef.current.add('checkout-widget-appears-after-buy-drawer-closes')   
-          }
-          else {
-            clxSetRef.current.remove('checkout-widget-appears-after-buy-drawer-closes')   
-          }
-        })
-
-        setTimeout(() => {runInAction(() => {
-          clxSetRef.current.remove(['checkout-widget-appears', 'checkout-widget-appears-after-buy-drawer-closes'])   
-          if (clxSetRef.current.has('checkout-widget-disappears') ) {
-            clxSetRef.current.remove('checkout-widget-disappears')   
-            clxSetRef.current.add('hidden')   
-          }
-        })}, 800)
-      },
-      {equals: (val, prev) => (
-        val.microOpen === prev.microOpen 
-        && 
-        val.buyOpen === prev.buyOpen
-      )}
-    )
-  ), [isCheckout])
-
-  return clxSetRef.current
+import { useEffect, useRef } from 'react'
+import { reaction, runInAction} from 'mobx'
+
+import ObsStringSet from './obs-string-set'
+import { useCommerce, useCommerceUI } from '@hanzo/commerce'
+
+export default (isCheckout: boolean): ObsStringSet => {
+
+  const ui = useCommerceUI()
+  const cmmc = useCommerce()
+
+  const clxSetRef = useRef<ObsStringSet>(new ObsStringSet(
+    (cmmc.cartEmpty || ui.buyOptionsSkuPath || isCheckout) ? ['hidden'] : []
+  ))
+
+  useEffect(() => (
+    reaction(
+      () => ({
+        microOpen: !(cmmc.cartEmpty || !!ui.buyOptionsSkuPath || isCheckout),
+        buyOpen: !!ui.buyOptionsSkuPath
+      }),
+      (val, prev) => {
+
+        runInAction(() => {
+          if (!val.microOpen && prev.microOpen) {
+            clxSetRef.current.add('checkout-widget-disappears')   
+          }
+          else if (val.microOpen && !prev.microOpen) {
+            clxSetRef.current.remove('hidden')   
+            clxSetRef.current.add('checkout-widget-appears')   
+          }
+          if (!val.buyOpen && prev.buyOpen) {
+            clxSetRef.current.add('checkout-widget-appears-after-buy-drawer-closes')   
+          }
+          else {
+            clxSetRef.current.remove('checkout-widget-appears-after-buy-drawer-closes')   
+          }
+        })
+
+        setTimeout(() => {runInAction(() => {
+          clxSetRef.current.remove(['checkout-widget-appears', 'checkout-widget-appears-after-buy-drawer-closes'])   
+          if (clxSetRef.current.has('checkout-widget-disappears') ) {
+            clxSetRef.current.remove('checkout-widget-disappears')   
+            clxSetRef.current.add('hidden')   
+          }
+        })}, 800)
+      },
+      {equals: (val, prev) => (
+        val.microOpen === prev.microOpen 
+        && 
+        val.buyOpen === prev.buyOpen
+      )}
+    )
+  ), [isCheckout])
+
+  return clxSetRef.current
 }

package/components/commerce/checkout-widget/use-lagging-item-ref.ts

@@ -1,30 +1,30 @@
-import { useEffect, useRef } from 'react'
-import { reaction } from 'mobx'
-
-import type { LineItem, ObsLineItemRef } from "@hanzo/commerce/types"
-import { LineItemRef } from '@hanzo/commerce'
-
-export default (orig: ObsLineItemRef, lagMs: number): ObsLineItemRef => {
-
-    // a ref that is synced to 'orig', but persists for lagMs longer
-    // so ui does not jump while animating out.
-    // (Fascilitates for start and end states in animation) 
-  const laggingRef = useRef<LineItemRef>(new LineItemRef())
-
-  useEffect(() => (
-    reaction(
-      () => (orig.item),
-      (item: LineItem | undefined) => {
-        if (item) { 
-          laggingRef.current.set(item) 
-        }
-        else { 
-          setTimeout(() => { laggingRef.current.set(undefined) }, lagMs) 
-        }
-      },
-      {equals: (val, prev) => (val?.sku === prev?.sku)}
-    )
-  ), [])
-
-  return laggingRef.current
+import { useEffect, useRef } from 'react'
+import { reaction } from 'mobx'
+
+import type { LineItem, ObsLineItemRef } from "@hanzo/commerce/types"
+import { LineItemRef } from '@hanzo/commerce'
+
+export default (orig: ObsLineItemRef, lagMs: number): ObsLineItemRef => {
+
+    // a ref that is synced to 'orig', but persists for lagMs longer
+    // so ui does not jump while animating out.
+    // (Fascilitates for start and end states in animation) 
+  const laggingRef = useRef<LineItemRef>(new LineItemRef())
+
+  useEffect(() => (
+    reaction(
+      () => (orig.item),
+      (item: LineItem | undefined) => {
+        if (item) { 
+          laggingRef.current.set(item) 
+        }
+        else { 
+          setTimeout(() => { laggingRef.current.set(undefined) }, lagMs) 
+        }
+      },
+      {equals: (val, prev) => (val?.sku === prev?.sku)}
+    )
+  ), [])
+
+  return laggingRef.current
 }

package/components/commerce/desktop-bag-popup.tsx

@@ -1,78 +1,78 @@
-'use client'
-import React, { useState, useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-
-import { X } from 'lucide-react'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  PopoverClose,
-} from "@hanzo/ui/primitives"
-
-import { cn } from '@hanzo/ui/util'
-import { CartPanel, useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-import sendGAEvent from '../../next/analytics/google-analytics'
-
-const DesktopBagPopup: React.FC<{
-  triggerClx?: string  
-  popupClx?: string
-  trigger: React.ReactNode
-}> = ({
-  triggerClx='',
-  popupClx='',
-  trigger
-}) => {
-  const cmmc = useCommerce()
-
-  const [bagOpen, setBagOpen] = useState<boolean>(false)
-  const router = useRouter()
-
-  useEffect(() => {
-    if (bagOpen) {
-      sendGAEvent('view_cart', {
-        items: cmmc.cartItems.map((item) => ({
-          item_id: item.sku,
-          item_name: item.title,
-          item_category: item.familyId,
-          price: item.price,
-          quantity: item.quantity
-        })),
-        value: cmmc.cartTotal,
-        currency: 'USD',
-      })
-    }
-  }, [bagOpen])
-
-  return (
-    <Popover open={bagOpen} onOpenChange={setBagOpen}>
-      <PopoverTrigger className={triggerClx}>
-        {trigger}
-      </PopoverTrigger>
-      <PopoverContent sideOffset={28} className={cn('relative  flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
-        <PopoverClose className='absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
-        <CartPanel 
-          handleCheckout={() => {router.push('/checkout')}} 
-          className='mt-4 mb-4 border-none py-0 px-4'
-          listClx='rounded-sm pr-3'
-          scrollAfter={5}
-          scrollHeightClx='h-[70vh]'
-          itemClx='mt-3'
-          totalClx='sticky px-1 pr-2 -bottom-[1px] bg-level-1'
-          buttonClx='max-w-[220px] flex-none'
-        >
-          <div className='flex flex-row items-center flex-none justify-center '>
-            <Icons.bag  className='mr-2 relative w-6 h-7 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>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export default DesktopBagPopup
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+import { X } from 'lucide-react'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverClose,
+} from "@hanzo/ui/primitives"
+
+import { cn } from '@hanzo/ui/util'
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+
+import * as Icons from '../icons'
+import sendGAEvent from '../../next/analytics/google-analytics'
+
+const DesktopBagPopup: React.FC<{
+  triggerClx?: string  
+  popupClx?: string
+  trigger: React.ReactNode
+}> = ({
+  triggerClx='',
+  popupClx='',
+  trigger
+}) => {
+  const cmmc = useCommerce()
+
+  const [bagOpen, setBagOpen] = useState<boolean>(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    if (bagOpen) {
+      sendGAEvent('view_cart', {
+        items: cmmc.cartItems.map((item) => ({
+          item_id: item.sku,
+          item_name: item.title,
+          item_category: item.familyId,
+          price: item.price,
+          quantity: item.quantity
+        })),
+        value: cmmc.cartTotal,
+        currency: 'USD',
+      })
+    }
+  }, [bagOpen])
+
+  return (
+    <Popover open={bagOpen} onOpenChange={setBagOpen}>
+      <PopoverTrigger className={triggerClx}>
+        {trigger}
+      </PopoverTrigger>
+      <PopoverContent sideOffset={28} className={cn('relative  flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
+        <PopoverClose className='absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
+        <CartPanel 
+          handleCheckout={() => {router.push('/checkout')}} 
+          className='mt-4 mb-4 border-none py-0 px-4'
+          listClx='rounded-sm pr-3'
+          scrollAfter={5}
+          scrollHeightClx='h-[70vh]'
+          itemClx='mt-3'
+          totalClx='sticky px-1 pr-2 -bottom-[1px] bg-level-1'
+          buttonClx='max-w-[220px] flex-none'
+        >
+          <div className='flex flex-row items-center flex-none justify-center '>
+            <Icons.bag  className='mr-2 relative w-6 h-7 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>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default DesktopBagPopup