@luxfi/ui 5.3.10 → 5.3.11

package/components/access-code-input.tsx

@@ -1,71 +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
+'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 +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 = data.reqToken
-      console.log(data)
-      console.log(token)
-      if (!!token) {
-        auth.loginWithCustomToken(token)
-      }
-    })
-  }, [auth])
-
-  return ( <></> )
-}
-
-export default AuthListener
+'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 = data.reqToken
+      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 +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
+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 +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
+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 +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
-}
+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,116 +1,116 @@
-'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 }[]
-  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
-        })
-      }
-
-      let url = new URL(redirectUrl ?? '')
-      let params = new URLSearchParams(url.search)
-      params.append('auth-token', token)
-      url.search = params.toString()
-
-      redirectUrl && router.push(url.toString())
-    }
-
-    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}
-                setIsLogin={setIsLogin}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-export default LoginPanel
+'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 }[]
+  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
+        })
+      }
+
+      let url = new URL(redirectUrl ?? '')
+      let params = new URLSearchParams(url.search)
+      params.append('auth-token', token)
+      url.search = params.toString()
+
+      redirectUrl && router.push(url.toString())
+    }
+
+    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}
+                setIsLogin={setIsLogin}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+export default LoginPanel