@luxfi/ui 5.3.16 → 5.3.17

package/components/auth/signup-panel.tsx

@@ -1,113 +1,113 @@
-'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, SignupPanel as Signup } from '@hanzo/auth/components'
-
-import Logo from '../logo'
-import { EmblaAutoplay } from '..'
-import LuxLogo from '../icons/lux-logo'
-import { legal } from '../../site-def/footer'
-
-const SignupPanel: React.FC<{
-  close: () => void
-  getStartedUrl?: string
-  redirectUrl?: string
-  className?: string
-  reviews: { text: string, author: string, href: string }[]
-  setIsLogin?: React.Dispatch<React.SetStateAction<boolean>>
-}> = ({
-  close,
-  getStartedUrl = '/',
-  redirectUrl,
-  className = '',
-  reviews,
-  setIsLogin
-}) => {
-    const router = useRouter()
-
-    const termsOfServiceUrl = legal.find(({ title }) => title === 'Terms and Conditions')?.href || ''
-    const privacyPolicyUrl = legal.find(({ title }) => title === 'Privacy Policy')?.href || ''
-    const domains = ['lux.id', 'lux.credit', 'lux.market', 'lux.network', 'lux.shop', 'wallet.lux.network', 'safe.lux.network', 'lux.finance', 'lux.exchange', 'lux.quest']
-
-    // 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) => {
-      for (let i = 0; i < domains.length; i++) {
-        setCookie('auth-token', token, {
-          domain: domains[i],
-          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-[radial-gradient(circle_at_24.1%_68.8%_,_rgba(15,14,14,0)_,_rgba(9,9,9,99.4))] 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>
-              <Signup
-                getStartedUrl={getStartedUrl}
-                redirectUrl={redirectUrl}
-                className='w-full max-w-sm'
-                termsOfServiceUrl={termsOfServiceUrl}
-                privacyPolicyUrl={privacyPolicyUrl}
-                onLoginChanged={onLogin}
-                setIsLogin={setIsLogin}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-export default SignupPanel
+'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, SignupPanel as Signup } from '@hanzo/auth/components'
+
+import Logo from '../logo'
+import { EmblaAutoplay } from '..'
+import LuxLogo from '../icons/lux-logo'
+import { legal } from '../../site-def/footer'
+
+const SignupPanel: React.FC<{
+  close: () => void
+  getStartedUrl?: string
+  redirectUrl?: string
+  className?: string
+  reviews: { text: string, author: string, href: string }[]
+  setIsLogin?: React.Dispatch<React.SetStateAction<boolean>>
+}> = ({
+  close,
+  getStartedUrl = '/',
+  redirectUrl,
+  className = '',
+  reviews,
+  setIsLogin
+}) => {
+    const router = useRouter()
+
+    const termsOfServiceUrl = legal.find(({ title }) => title === 'Terms and Conditions')?.href || ''
+    const privacyPolicyUrl = legal.find(({ title }) => title === 'Privacy Policy')?.href || ''
+    const domains = ['lux.id', 'lux.credit', 'lux.market', 'lux.network', 'lux.shop', 'wallet.lux.network', 'safe.lux.network', 'lux.finance', 'lux.exchange', 'lux.quest']
+
+    // 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) => {
+      for (let i = 0; i < domains.length; i++) {
+        setCookie('auth-token', token, {
+          domain: domains[i],
+          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-[radial-gradient(circle_at_24.1%_68.8%_,_rgba(15,14,14,0)_,_rgba(9,9,9,99.4))] 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>
+              <Signup
+                getStartedUrl={getStartedUrl}
+                redirectUrl={redirectUrl}
+                className='w-full max-w-sm'
+                termsOfServiceUrl={termsOfServiceUrl}
+                privacyPolicyUrl={privacyPolicyUrl}
+                onLoginChanged={onLogin}
+                setIsLogin={setIsLogin}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+export default SignupPanel

package/components/back-button.tsx

@@ -1,49 +1,49 @@
-'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
+'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 +1,85 @@
-'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
+'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 +1,13 @@
-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)'
-  }
-} 
+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)'
+  }
+}