@luxfi/ui 5.4.1 → 5.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -37,7 +37,6 @@
   },
   "dependencies": {
     "@next/third-parties": "^14.1.0",
-    "@types/node": "^20.12.12",
     "@types/validator": "^13.12.1",
     "cookies-next": "^4.1.1",
     "date-fns": "^3.6.0",
@@ -51,18 +50,19 @@
     "usehooks-ts": "^3.1.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "*",
-    "@hanzo/commerce": "*",
-    "@hanzo/ui": "*",
+    "@hanzo/auth": "catalog:",
+    "@hanzo/commerce": "catalog:",
+    "@hanzo/ui": "catalog:",
+    "@luxfi/menu-icons": "1.0.1",
     "@hookform/resolvers": "^3.3.2",
-    "lucide-react": "^0.344.0",
+    "lucide-react": "catalog:",
     "mobx": "^6.12.3",
     "mobx-react-lite": "^4.0.7",
-    "next": "15.0.1",
+    "next": "catalog:",
     "next-themes": "^0.2.1",
-    "react": "*",
-    "react-dom": "*",
-    "react-hook-form": "^7.51.4",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-hook-form": "catalog:",
     "validator": "^13.11.0",
     "zod": "3.23.8"
   },
@@ -73,15 +73,10 @@
     "@types/facebook-pixel": "^0.0.30",
     "@types/gtag.js": "^0.0.19",
     "@types/mdx": "^2.0.9",
-    "@types/node": "^20.11.24",
-    "@types/react": "*",
-    "@types/react-dom": "*",
-    "lucide-react": "^0.344.0",
-    "next-themes": "^0.2.1",
-    "react-hook-form": "^7.51.4",
-    "tailwindcss": "^3.4.3",
-    "typescript": "5.6.3",
-    "validator": "^13.11.0",
-    "zod": "3.23.8"
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
   }
 }

package/site-def/footer/community.tsx

@@ -1,5 +1,6 @@
 import type { LinkDef } from '@hanzo/ui/types'
-import { Icons } from '../../components'
+
+import { SocialIcon } from '../../components/icons'
 
   // @ts-ignore (will build in project that has @svgr support)
 import SVG_warp_logo from './svg/warpcast-logo.svg'
@@ -12,56 +13,49 @@ export default   [
     href: '',
     variant: 'linkFG',
   },
-
   {
     title: 'Lux Channel',
     href: 'https://warpcast.com/~/channel/lux',
-    icon: <SVG_warp_logo width={SOC_ICON_SIZE} height={SOC_ICON_SIZE} /> //<Icons.SocialIcon network='warpcast' size={SOC_ICON_SIZE} />
+    icon: <SVG_warp_logo width={SOC_ICON_SIZE} height={SOC_ICON_SIZE} /> //<SocialIcon network='warpcast' size={SOC_ICON_SIZE} />
   },
   {
     title: 'Lux Discussions',
     href: 'https://github.com/orgs/luxfi/discussions',
-    icon: <Icons.SocialIcon network='github' size={SOC_ICON_SIZE} />
+    icon: <SocialIcon network='github' size={SOC_ICON_SIZE} />
   },
-
-  /*
   {
     title: 'Discord',
-    href: 'https://discord.gg/luxdefi',
-    external: true,
-    icon: <Icons.SocialIcon network='discord' size={SOC_ICON_SIZE} />
+    href: 'https://discord.gg/sxaS7FFHwh',
+    icon: <SocialIcon network='discord' size={SOC_ICON_SIZE} />
   },
   {
     title: 'Telegram',
     href: 'https://t.me/luxdefi',
-    external: true,
-    icon: <Icons.SocialIcon network='telegram' size={SOC_ICON_SIZE} />
+    icon: <SocialIcon network='telegram' size={SOC_ICON_SIZE} />
   },
-  */
-
   {
     title: '@luxdefi',
     href: 'https://twitter.com/luxdefi',
-    icon: <Icons.SocialIcon network='x' size={SOC_ICON_SIZE} />
+    icon: <SocialIcon network='x' size={SOC_ICON_SIZE} />
   },
   {
     title: '@luxdefi',
     href: 'https://facebook.com/luxdefi',
-    icon: <Icons.SocialIcon network='facebook' size={SOC_ICON_SIZE + 2} />
+    icon: <SocialIcon network='facebook' size={SOC_ICON_SIZE + 2} />
   },
   {
     title: '@luxdefi',
     href: 'https://www.instagram.com/luxdefi',
-    icon: <Icons.SocialIcon network='instagram' size={SOC_ICON_SIZE + 2} />
+    icon: <SocialIcon network='instagram' size={SOC_ICON_SIZE + 2} />
   },
   {
     title: '@luxdefi',
     href: 'https://linkedin.com/company/luxdefi',
-    icon: <Icons.SocialIcon network='linkedin' size={SOC_ICON_SIZE + 2} />
+    icon: <SocialIcon network='linkedin' size={SOC_ICON_SIZE + 2} />
   },
   {
     title: '@luxdefi',
     href: 'https://www.youtube.com/@luxdefi',
-    icon: <Icons.SocialIcon network='youtube' size={SOC_ICON_SIZE + 2} />
+    icon: <SocialIcon network='youtube' size={SOC_ICON_SIZE + 2} />
   },
 ] satisfies LinkDef[]

package/site-def/index.ts

@@ -1,3 +1,4 @@
-export * as footer from './footer' // so footer.standard, footer.community, etc
+export * as footer from './footer' // footer.standard, footer.community, etc
 export { default as mainNav } from './main-nav'
+export type { ChildMenu, LinkDefExtended } from './main-nav'
 export type { SiteDef } from '../types'

package/site-def/main-nav.tsx

@@ -1,75 +1,77 @@
 import type { LinkDef } from '@hanzo/ui/types'
-import Anodized from '../components/icons/anodized-titanium'
-import GunMetal from '../components/icons/gun-metal'
-import  Chrome from '../components/icons/chrome'
-import Irradescent from '../components/icons/irradescent'
-import CompareCards from '../components/icons/compare-cards'
-import ViewAllCards from '../components/icons/view-all-card'
-import MoreBenefits from '../components/icons/more-benefits'
-import GoldCard from '../components/icons/24k-gold-card'
-import Sterling from '../components/icons/sterling-silver-card'
-import MirroredTitanium from '../components/icons/mirrored-titanium'
-import AIChat from '../components/icons/ai-chat'
-import Exchange from '../components/icons/exchange'
-import Market from '../components/icons/market'
-import Shop from '../components/icons/shop'
-import Credit from '../components/icons/credit'
-import LuxFinance from '../components/icons/lux-finance'
-import LuxQuests from '../components/icons/lux-quests'
-import DeveloperDocs from '../components/icons/developer-docs'
-import Integration from '../components/icons/integrations'
-import Templates from '../components/icons/templates'
-import Guides from '../components/icons/guides'
-import Customers from '../components/icons/customers'
-import Blog from '../components/icons/blog'
-import ChangeLog from '../components/icons/changelog'
-import type { CLIENT_STATIC_FILES_PATH } from 'next/dist/shared/lib/constants'
-import CustomerSupport from '../components/icons/customer-support'
-import FAQs from '../components/icons/faqs'
-import Bridge from '../components/icons/bridge'
-import Explorer from '../components/icons/explorer'
-import LaunchSubnet from '../components/icons/launch-subnet'
-import Coins from '../components/icons/coins'
-import Safe from '../components/icons/safe'
-import Wallet from '../components/icons/wallet'
-import Validators from '../components/icons/validators'
-import OpenSource from '../components/icons/open-source'
-import LuxPass from '../components/icons/lux-pass'
-import CompareCardsAct from '../components/icons/compare-cards-act'
-import ViewAllCardsAct from '../components/icons/view-all-card-act'
-import MoreBenefitsAct from '../components/icons/more-benefits-act'
-import AIChatAct from '../components/icons/ai-chat-act'
-import ExchangeAct from '../components/icons/exchange-act'
-import MarketAct from '../components/icons/market-act'
-import ShopAct from '../components/icons/shop-act'
-import CreditAct from '../components/icons/credit-act'
-import LuxFinanceAct from '../components/icons/lux-finance-act'
-import LuxQuestsAct from '../components/icons/lux-quests-act'
-import BridgeAct from '../components/icons/bridge-act'
-import ExplorerAct from '../components/icons/explorer-act'
-import LaunchSubnetAct from '../components/icons/launchsubnet-act'
-import CoinsAct from '../components/icons/coins-act'
-import SafeAct from '../components/icons/safe-act'
-import LuxWalletAct from '../components/icons/wallet-act'
-import ValidatorsAct from '../components/icons/validators-act'
-import DeveloperDocsAct from '../components/icons/developer-docs-act'
-import OpenSourceAct from '../components/icons/open-source-act'
-import LuxPassAct from '../components/icons/lux-pass-act'
-import IntegrationAct from '../components/icons/integrations-act'
-import TemplatesAct from '../components/icons/templates-act'
-import CustomersAct from '../components/icons/customers-act'
-import BlogAct from '../components/icons/blog-act'
-import ChangeLogAct from '../components/icons/changelog-act'
-import CustomerSupportAct from '../components/icons/customer-support-act'
-import FAQsAct from '../components/icons/faqs-act'
-import GuidesAct from '../components/icons/guides-act'
+
+import {
+  AIChatAct,
+  AIChat,
+  Anodized,
+  BlogAct,
+  Blog,
+  BridgeAct,
+  Bridge,
+  ChangeLogAct,
+  ChangeLog,
+  Chrome,
+  CoinsAct,
+  Coins,
+  CompareCardsAct,
+  CompareCards,
+  CreditAct,
+  Credit,
+  CustomersAct,
+  Customers,
+  CustomerSupportAct,
+  CustomerSupport,
+  DeveloperDocsAct,
+  DeveloperDocs,
+  ExchangeAct,
+  Exchange,
+  ExplorerAct,
+  Explorer,
+  FAQsAct,
+  FAQs,
+  GoldCard,
+  GuidesAct,
+  Guides,
+  GunMetal,
+  IntegrationAct,
+  Integration,
+  Irradescent,
+  LaunchSubnetAct,
+  LaunchSubnet,
+  LuxFinanceAct,
+  LuxFinance,
+  LuxPassAct,
+  LuxPass,
+  LuxQuestsAct,
+  LuxQuests,
+  LuxWalletAct,
+  MarketAct,
+  Market,
+  MirroredTitanium,
+  MoreBenefitsAct,
+  MoreBenefits,
+  OpenSourceAct,
+  OpenSource,
+  SafeAct,
+  Safe,
+  ShopAct,
+  Shop,
+  Sterling,
+  TemplatesAct,
+  Templates,
+  ValidatorsAct,
+  Validators,
+  ViewAllCardsAct,
+  ViewAllCards,
+  Wallet,
+} from '@luxfi/menu-icons'
+
 
 export interface LinkDefExtended extends LinkDef {
   isAIMenu?: boolean
   icon?: any,
   details?: string,
   childMenu?: ChildMenu[]
-
 }
 
 export interface ChildMenu extends LinkDef{

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)'
-  }
-} 

package/components/commerce/_to_deprecate_checkout-widget/index.tsx_

@@ -1,188 +0,0 @@
-'use client'
-import React, { useRef } 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 { useStepAnimation } from '@hanzo/ui/util-client'
-
-import { Image } from '@hanzo/ui/primitives'
-
-import CheckoutButton from '../checkout-button'
-import useAnimationClxSet from './use-anim-clx-set'
-import CONST from './const'
-import type { LineItem } from '@hanzo/commerce/types'
-
-const transStyle = (t: { transition: string, from : string, to: string } | undefined) : any => (
-  t ? {
-    transitionProperty: t.transition,
-    transitionTimingFunction: CONST.animTimingFn,
-    transitionDuration: `${CONST.animDurationMs}ms`
-  } : {}        
-)
-
-const transClx = (on: boolean, t: { transition: string, from : string, to: string } | undefined) : string => (
-  on ? (t?.from ?? '') : (t?.to ?? '')
-)
-
-const VARS: any = {
-  BR: {
-    pos: 'bottom-[24px] right-[66px]',
-    width: 'w-initial', 
-    centerText: false,
-    coClx: 'w-auto',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      co: { 
-        transition: 'none',
-        from : 'px-3 gap-2.5', 
-        to: ''
-      },
-      coText: {
-        transition: 'max-width',
-        from : 'max-w-[100px]', 
-        to: 'max-w-[0px]'
-      },
-      info: { 
-        transition: 'transform, opacity',
-        from : 'scale-x-100 opacity-100 origin-right', 
-        to: 'scale-x-0 opacity-0 origin-right'
-      }
-    },
-    showArrow: true
-  },
-  TR: {
-    pos: 'top-[48px] md:top-[80px] right-[28px]',
-    width: 'w-initial', 
-    centerText: false,
-    showQuantity: false,
-    showArrow: true,
-    coClx: 'w-auto px-3 gap-1',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      co: { 
-        transition: 'none',
-        from : 'px-3 gap-2.5', 
-        to: ''
-      },
-      coText: {
-        transition: 'max-width',
-        from : 'max-w-[100px]', 
-        to: 'max-w-[0px]'
-      },
-      info: { 
-        transition: 'transform',
-        from : 'scale-x-100 origin-right', 
-        to: 'scale-x-0 origin-right'
-      }
-    },
-  },
-  TRIO: {
-    pos: 'top-[48px] md:top-[70px] right-[28px]',
-    centerText: false,
-    showQuantity: true,
-    showArrow: true,
-    width: 'w-initial', 
-    coClx: 'hidden',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      info: { 
-        transition: 'transform, opacity',
-        from : 'scale-x-100 opacity-100', 
-        to: 'scale-x-50 opacity-0'
-      }
-    },
-  }
-}
-
-const v = 'TR'
-
-const CheckoutWidget: React.FC<{
-  clx?: string
-}> = observer(({
-  clx=''
-}) => {
-
-  const router = useRouter()
-
-  const isCheckout = usePathname() === '/checkout'
-  const clxSet = useAnimationClxSet(isCheckout)
-
-    // for rendering content after recentActivity.item() would return false
-  const persistentRef = useRef<LineItem | undefined>(undefined)
-
-    // Doing double duty of being initial step fn for StepAnimation,
-    // and also capturing the item for persistentRef :)
-  const initialStepFn = (): boolean => {
-    if (!!recentActivity.item && !persistentRef.current) {
-      persistentRef.current = recentActivity.item
-    }  
-    return !!recentActivity.item
-  }
-  const steps = useStepAnimation(initialStepFn, [CONST.animDurationMs, CONST.animDurationMs, CONST.animDurationMs])
-
-  const handleCheckout = () => { router.push('/checkout')}
-
-  return globalThis?.document?.body && createPortal(
-    (<div 
-      className={cn(
-        VARS[v].width,
-        'z-below-modal-2 fixed ',
-        VARS[v].pos,
-        'rounded-lg',
-        'flex',
-        steps.notPast(0) ? 'bg-background' : '',
-        steps.notPast(1) ? 'gap-2' : '',
-        clxSet.asArray.join(' ')
-      )}
-      style={steps.notPast(1) ? {} : VARS[v].coClx?.includes('hidden') ? {} : CONST.shadowStyle}
-    >
-      <div 
-        className={cn(
-          'flex flex-row justify-between items-center', 
-          transClx(steps.notPast(0), VARS[v].activeItemAnim.info),
-          VARS[v].itemClx, 
-          steps.notPast(1) ? 'px-3 border rounded-lg bg-level-1 border-muted-3' : '' 
-        )}
-        style={transStyle(VARS[v].activeItemAnim.info)}
-      >
-        {steps.notPast(1) && persistentRef.current?.img && (
-          <Image def={persistentRef.current.img} constrainTo={CONST.itemImgConstraint} preload className='grow-0 shrink-0'/>
-        )} 
-        {steps.notPast(1) && persistentRef.current && (<div className='text-foreground grow ml-1'>
-          <p className='whitespace-nowrap text-ellipsis text-sm'>{persistentRef.current.title}</p>
-          <p className='whitespace-nowrap text-clip text-xxs' >recently added...</p>
-        </div>)}
-      </div>
-      <CheckoutButton 
-        handleCheckout={handleCheckout} 
-        centerText={VARS[v].centerText ?? !steps.notPast(0)}
-        variant='primary' 
-        rounded='lg' 
-        showQuantity={VARS[v].showQuantity ?? true}
-        showArrow={VARS[v].showArrow ?? true}
-        className={cn(
-            // for setting and unsetting 'gap'
-          transClx((VARS[v].activeItemAnim.coText ? steps.notPast(3) : true), VARS[v].activeItemAnim.co),
-          VARS[v].coClx
-        )} 
-        style={transStyle(VARS[v].activeItemAnim.co)}
-      >
-        <div 
-          className={cn(
-            'overflow-hidden',
-            'flex justify-center items-center',
-            transClx(steps.notPast(2), VARS[v].activeItemAnim.coText),
-          )} 
-          style={transStyle(VARS[v].activeItemAnim.coText)}
-        >
-          Checkout
-        </div>
-      </CheckoutButton>
-    </div>),
-    globalThis?.document?.body
-  )
-})
-
-export default CheckoutWidget

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

@@ -1,48 +0,0 @@
-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/_to_deprecate_checkout-widget/use-anim-clx-set.ts

@@ -1,59 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { reaction, runInAction} from 'mobx'
-
-import { useCommerce } from '@hanzo/commerce'
-
-import ObsStringSet from './obs-string-set'
-import { useSelectAndBuy } from '../../../commerce/ui/context'
-
-export default (isCheckout: boolean): ObsStringSet => {
-
-  const ui = useSelectAndBuy()
-  const cmmc = useCommerce()
-
-  const clxSetRef = useRef<ObsStringSet>(new ObsStringSet(
-    (cmmc.cartEmpty || ui.currentSkuPath || isCheckout) ? ['hidden'] : []
-  ))
-
-  useEffect(() => (
-    reaction(
-      () => ({
-        microOpen: !(cmmc.cartEmpty || !!ui.currentSkuPath || isCheckout),
-        buyOpen: !!ui.currentSkuPath
-      }),
-      (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/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