@luxfi/core 4.3.18 → 4.4.3

package/components/auth/auth-listener.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { useEffect } from "react"
+import { useAuth } from '@hanzo/auth/service'
+
+const AuthListener = () => {
+  const auth = useAuth()
+
+  const requestAuthToken = () => {
+    const childFrame = document.getElementById('login') as HTMLIFrameElement
+    childFrame?.contentWindow?.postMessage(true, process.env.NEXT_PUBLIC_LOGIN_SITE_URL ?? '')
+  }
+
+  useEffect(() => {
+    const handleMessage = (event: any) => {
+      if (event.origin === process.env.NEXT_PUBLIC_AUTH_ORIGIN) {
+        const token = event.data
+        auth.loginWithCustomToken(token)
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => {
+      window.removeEventListener('message', handleMessage)
+    }
+  }, [])
+
+  return (<iframe id='login' onLoad={requestAuthToken} src={process.env.NEXT_PUBLIC_LOGIN_SITE_URL}/>)
+}
+
+export default AuthListener

package/components/auth/common-auth-domains.ts

@@ -0,0 +1,12 @@
+const domains = [
+  { id: 'lux.market', url: 'https://lux.market' },
+  { id: 'lux.credit', url: 'https://lux.credit' },
+  { id: 'lux.network', url: 'https://lux.network' },
+  { id: 'lux.shop', url: 'https://lux.shop' },
+  { id: 'lux.finance', url: 'https://lux.finance' },
+  { id: 'lux.exchange', url: 'https://lux.exchange' },
+]
+
+export {
+  domains as default
+}

package/components/auth/login-panel.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Link from 'next/link'
 import Autoplay from 'embla-carousel-autoplay'
 
@@ -8,6 +10,8 @@ import { LoginPanel as Login } from '@hanzo/auth/components'
 import { Logo } from '..'
 import LuxLogo from '../icons/lux-logo'
 import { legal } from '../../site-def/footer'
+import domains from './common-auth-domains'
+import { useEffect } from 'react'
 
 const LoginPanel: React.FC<{
   close: () => void
@@ -25,6 +29,28 @@ const LoginPanel: React.FC<{
   const termsOfServiceUrl = legal.find(({title}) => title === 'Terms and Conditions')?.href || ''
   const privacyPolicyUrl = legal.find(({title}) => title === 'Privacy Policy')?.href || ''
 
+  const onLogin = (token: string) => {
+    localStorage.setItem('auth-token', token)
+    for (const { url } of domains) {
+      parent?.contentWindow?.postMessage(token, url)
+    }
+  }
+
+  useEffect(() => {
+    const handleMessage = (event: any) => {
+      if (domains.includes(event.origin)) {
+        const token = localStorage.getItem('auth-token')
+        parent.contentWindow?.postMessage(token, event.origin)
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => {
+      window.removeEventListener('message', handleMessage)
+    }
+  }, [])
+
   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'>
@@ -72,6 +98,7 @@ const LoginPanel: React.FC<{
               className='w-full max-w-sm'
               termsOfServiceUrl={termsOfServiceUrl}
               privacyPolicyUrl={privacyPolicyUrl}
+              onLoginChanged={onLogin}
             />
           </div>
         </div>

package/components/commerce/bag-button.tsx

@@ -47,7 +47,7 @@ const BagButton: React.FC<{
       <div className={
         'z-above-content flex flex-col justify-center items-center  ' +
         'absolute left-0 right-0 top-0 bottom-0 ' + 
-        'leading-none font-sans font-bold text-foreground text-xs ' 
+        'leading-none font-sans font-bold text-primary-fg text-xs ' 
       }>
         <div className='h-[3px] w-full' />
         <div>{c.cartQuantity}</div>

package/components/header/mobile.tsx

@@ -55,9 +55,9 @@ const MobileHeader: React.FC<{
 
   const menuOpen = () => (menuState !== 'closed')
 
-  const onLoginChanged = (loggedIn: boolean) => {
+  const onLoginChanged = (token: string) => {
     // by def, menu was in state 'login'
-    if (loggedIn) { setMenuState('nav') }
+    if (!!token) { setMenuState('nav') }
   }
 
   const setMenuOpen = (open: boolean) => {

package/components/icons/bag-icon.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { type LucideProps } from 'lucide-react'
 
 const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg fill="none" viewBox="0 0 15 18" {...props}>
-    <path d="m13.6501 5.19282h-2.3255v-.82146c0-2.01258-1.74959-3.634971-3.87568-3.634971s-3.87572 1.622401-3.87572 3.634971v.82146h-2.32543c-.31008 0-.553678.22588-.553678.51341v10.26827c0 .7393.642278 1.3349 1.439548 1.3349h10.63056c.7973 0 1.4395-.5956 1.4395-1.3349v-10.26827c0-.28753-.2436-.51341-.5536-.51341zm-8.96955-.84198c0-1.43756 1.24021-2.60814 2.76837-2.60814 1.52815 0 2.76838 1.17055 2.76838 2.60814v.82146h-5.53675zm8.08365 11.93176h-10.63056c-.1772 0-.3322-.1438-.3322-.3081v-9.75484h1.77176v2.83405c0 .28753.2436.51341.55367.51341.31008 0 .55368-.22588.55368-.51341v-2.83405h5.53675v2.83405c0 .28753.2436.51341.5537.51341.31 0 .5536-.22588.5536-.51341v-2.83405h1.7718v9.75484c0 .1643-.155.3081-.3322.3081z" fill="currentColor"/>
+  <svg fill="none" viewBox="0 0 1019 1281" {...props}>
+    <path d="m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z" fill="currentColor"/>
   </svg>
 )
 

package/components/index.ts

@@ -15,6 +15,7 @@ export {
 
 export { default as CheckoutPanel } from './commerce/checkout-panel'
 export { default as LoginPanel } from './auth/login-panel'
+export { default as AuthListener } from './auth/auth-listener'
 
 
 /* PLEASE KEEP

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "4.3.18",
+  "version": "4.4.3",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -39,8 +39,8 @@
     "./conf": "./conf/index.ts"
   },
   "dependencies": {
-    "@hanzo/auth": "2.3.6",
-    "@hanzo/commerce": "6.3.4",
+    "@hanzo/auth": "2.4.2",
+    "@hanzo/commerce": "6.4.2",
     "@hanzo/ui": "3.6.3",
     "@next/third-parties": "^14.1.0",
     "embla-carousel-autoplay": "^8.0.1",

package/style/lux-global.css

@@ -17,3 +17,15 @@
 .font-heading, h1, h2, h3 {
   @apply uppercase;
 }
+
+/* Specific style fixes for react-square-web-payments-sdk -
+ * reduce gap between card input and pay button
+ */
+#rswps-card-container {
+  min-height: unset !important;
+}
+
+.sq-card-wrapper .sq-card-message {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}