@luxfi/ui 5.5.3 → 5.6.0

package/components/index.ts

@@ -1,26 +0,0 @@
-export { default as AccessCodeInput } from './access-code-input'
-export { default as ChatWidget } from './chat-widget'
-export { default as ContactDialog } from './contact-dialog'
-export { default as Copyright} from './copyright'
-export { default as Footer } from './footer'
-export { default as Header } from './header'
-export * as Icons from './icons'
-export { default as Logo, type LogoVariant } from './logo'
-export { default as Main } from './main'
-export { default as MiniChart } from './mini-chart'
-export { default as NotFound } from './not-found'
-
-export { default as AuthListener } from './auth/auth-listener'
-export { default as BackButton } from './back-button'
-export { default as BuyDrawer } from './commerce/drawer'
-export { default as DrawerMargin } from './drawer-margin'
-export { default as BuyButton } from './commerce/buy-button'
-export { default as CheckoutButton } from './commerce/checkout-button'
-export { default as CheckoutPanel } from './commerce/checkout-panel'
-export { default as LoginPanel } from './auth/login-panel'
-export { default as SignupPanel } from './auth/signup-panel'
-export { default as Analytics } from './analytics'
-export { default as Tooltip } from './tooltip'
-
-export { default as EmblaAutoplay } from 'embla-carousel-autoplay'
-

package/components/logo.tsx

@@ -1,92 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-
-import { type TShirtSize  } from '@hanzo/ui/types'
-
-import { LuxLogo } from './icons'
-
-const TEXT = 'LUX'
-type LogoVariant = 'text-only' | 'logo-only' | 'full'
-
-
-const Logo: React.FC<{
-  size?: TShirtSize
-  variant?: LogoVariant
-  onClick?: () => void
-  href?: string
-  outerClx?: string
-  textClx?: string
-}> = ({
-  size,
-  href, // no default please!
-  outerClx='',
-  textClx='',
-  variant='full',
-  onClick,
-}) => {
-  let classes: any = {}
-  const toAdd = (variant === 'logo-only') ? 
-    {
-      span: 'hidden',
-      icon: ''
-    }  
-    :
-    (variant === 'text-only') ? 
-      {
-        span: '',
-        icon: 'hidden'
-      } 
-      : 
-      {
-        span: '',
-        icon: ''
-      }
-
-  if (size === 'lg' || size === 'xl' ) { // for safety
-    classes.icon = 'h-10 w-10 mr-4 color-inherit ' 
-    classes.span = 'text-3xl ' 
-  }
-    // match lux.network
-  else if (size === 'md') {
-    classes.icon = 'h-[32px] w-[32px] mr-[12px] color-inherit '
-    classes.span = 'text-[1.8rem]/[1.8rem] tracking-tighter '
-  }
-  else if (size === 'sm' ) {
-    classes.icon = 'h-6 w-6 mr-2 color-inherit ' 
-    classes.span = 'text-lg '
-  }
-    // xs
-  else {
-    classes.icon = 'h-4 w-4 mr-1 color-inherit '
-    classes.span = 'text-base '
-  }
-
-  classes.icon += toAdd.icon
-  classes.span += toAdd.span
-
-
-  const outerClasses = 'flex flex-row items-center ' + outerClx
-  const spanClasses = 'inline-block font-bold font-heading ' 
-    + textClx
-    + (href ? ' hover:text-accent cursor-pointer ' : ' cursor-default ') 
-    + classes.span 
-
-  return (
-    href ? (
-      <Link href={href} className={outerClasses} onClick={onClick} >
-        <LuxLogo className={classes.icon} />
-        <span className={spanClasses}>{TEXT}</span>
-      </Link>
-    ) : (
-      <span className={outerClasses} onClick={onClick}>
-        <LuxLogo className={classes.icon} />
-        <span className={spanClasses}>{TEXT}</span>
-      </span>
-    )
-  )
-}
-
-export {
-  Logo as default,
-  type LogoVariant
-}

package/components/main.tsx

@@ -1,27 +0,0 @@
-import React, { type PropsWithChildren } from 'react'
-import { cn } from '@hanzo/ui/util'
-
-const Main: React.FC<PropsWithChildren & { 
-  id?: string
-  className?: string 
-  headerSpace?: boolean
-  standardWidth?: boolean
-}> = ({
-  children,
-  className='',
-  headerSpace=true,
-  standardWidth=true,
-  id
-}) => (
-  <main id={id ?? 'LUX_UI_MAIN'} className={cn(
-    'flex flex-col justify-start items-center',
-    'px-4 md:px-6 lg:px-8',
-    standardWidth ? 'max-w-screen-2xl w-full lg:mx-auto' : '',
-    headerSpace ? 'pt-[44px] md:pt-[80px]' : 'py-4',
-    className
-  )}>
-    {children}
-  </main>
-)
-
-export default Main

package/components/mini-chart/index.tsx

@@ -1,8 +0,0 @@
-import MiniChart from './wrapper'
-// import { type MiniChartProps, type MiniChartDateRanges } from './mini-chart-props'
-
-export {
-  MiniChart as default,
-  // type MiniChartProps,
-  // type MiniChartDateRanges
-}

package/components/mini-chart/mini-chart-props.ts

@@ -1,44 +0,0 @@
-import type { CSSProperties } from 'react'
-
-  // https://www.typescriptlang.org/docs/handbook/enums.html#enums-at-runtime
-const enum MiniChartDateRangesValues {
-    '1D',
-    '1M',
-    '3M',
-    '12M',
-    '60M',
-    'ALL',
-}
-
-type MiniChartDateRanges = keyof typeof MiniChartDateRangesValues
-
-interface MiniChartBaseProps {
-  symbol: string  
-  exchange?: string
-	dateRange: MiniChartDateRanges
-  noTimeScale?: boolean
-	width?: number | string
-	height?: number | string
-	locale?: string
-	colorTheme?: "light" | "dark"
-  // @ts-ignore // TODO
-	lineColor?: CSSProperties["color"]
-  // @ts-ignore // TODO
-	topGradientColor?: CSSProperties["color"]
-  // @ts-ignore // TODO
-	bottomGradientColor?: CSSProperties["color"]
-	isTransparent?: boolean
-	autosize?: boolean
-	chartOnly?: boolean
-	largeChartUrl?: string
-}
-
-type MiniChartProps = {
-  widgetProps: MiniChartBaseProps
-  containerStyles?: CSSProperties
-}
-
-export {
-  type MiniChartProps,
-  type MiniChartDateRanges
-}

package/components/mini-chart/mini-chart.tsx

@@ -1,85 +0,0 @@
-'use client'
-
-import React, { useEffect, useRef } from 'react'
-import { type MiniChartProps } from './mini-chart-props'
-
-const MiniChart: React.FC<MiniChartProps> = ({ 
-  widgetProps,
-  containerStyles = {} 
-}) => {
-
-  const {
-    symbol,
-    exchange,
-    lineColor, 
-    topGradientColor, 
-    bottomGradientColor, 
-    width, 
-    height, 
-    autosize,
-    locale, 
-    ...rest
-  } = widgetProps
-
-  const symbolString = (exchange) ? `${exchange}:${symbol}` : symbol
-
-  const containerRef = useRef<HTMLDivElement | null>(null)
-
-	useEffect(() => {
-		if (!containerRef.current) {
-      return
-    }
-		const script = document.createElement('script')
-		script.type = 'text/javascript'
-		script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js'
-		script.async = true
-		script.onload = async () => {
-			const iframe = containerRef.current?.querySelector('iframe')
-			if (iframe && iframe instanceof Element) {
-        iframe.style.colorScheme = 'normal'
-        setTimeout(() => {
-          const value = document.querySelector('#mini-symbol-overview-ticker')
-          //console.log("TICKER: " + value)
-        }, 1200) // from experimentation 
-      
-
-      }
-
-      const copyDiv = document.querySelector('.tradingview-widget-copyright')
-      if (copyDiv) {
-        //console.log("COPY: " + copyDiv)
-        setTimeout(() => {
-          copyDiv.classList.remove('invisible')
-        }, 1200) // from experimentation 
-      }
-		}
-		const config = JSON.stringify({
-      symbol: symbolString,
-			width: autosize ? '100%' : (width || 350),
-			height: autosize ? '100%' : (height || 220),
-      locale: locale ?? 'en',
-      isTransparent: 'true',
-			trendLineColor: lineColor || 'rgba(41, 98, 255, 1)',
-			underLineColor: topGradientColor || 'rgba(41, 98, 255, 0.3)',
-			underLineBottomColor: bottomGradientColor || 'rgba(41, 98, 255, 0)',
-			...rest,
-		})
-		script.innerHTML = config
-		containerRef.current.appendChild(script)
-		return () => {
-			while (containerRef.current?.firstChild) {
-				containerRef.current.removeChild(containerRef.current.firstChild)
-			}
-		}
-	}, [ JSON.stringify(widgetProps) ])
-
-	return (<>
-		<div style={containerStyles} className='tradingview-widget-container h-[150px]' ref={containerRef} />
-    <div className='tradingview-widget-copyright border-t w-full invisible'>
-      <a href={`https://www.tradingview.com/symbols/${symbol}${exchange ? `/?exchange=${exchange}` : '' }`} rel="noopener" target="_blank">
-        <span className="text-[--hz-ui-primary]">{symbol} quotes</span></a>&nbsp;by TradingView
-    </div>
-  </>)
-}
-
-export default MiniChart

package/components/mini-chart/wrapper.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import BaseChart from './mini-chart'
-
-const Wrapper: React.FC<{
-  symbol: string,
-  exchange?: string
-}> = ({
-  symbol,
-  exchange
-}) => (
-  <BaseChart widgetProps ={{
-    symbol,
-    exchange,
-    autosize: true,
-    colorTheme: 'dark',
-    lineColor: "rgb(114, 27, 228)",
-    bottomGradientColor: "rgba(255, 255, 255, 0.1)",
-    dateRange: '60M',
-  }}/>   
-)
-
-export default Wrapper

package/components/not-found/index.tsx

@@ -1,28 +0,0 @@
-import React  from 'react'
-
-import { ApplyTypography } from '@hanzo/ui/primitives'
-
-import type { SiteDef } from '../../site-def'
-import Footer from '../footer'
-import Header from '../header'
-import Main from '../main'
-
-import NotFoundMDX from './not-found-content.mdx'
-
-const NotFound: React.FC<{
-  header?: boolean
-  siteDef: SiteDef
-}>  = ({
-  header=false,
-  siteDef
-}) => (<>
-  {header && <Header siteDef={siteDef}/>}
-  <Main className='h-[100svh] sm:h-[700px] px-8 sm:px-10 ' headerSpace={header}>
-    <ApplyTypography className='mt-[200px] flex flex-col md:gap-8 '>
-      <NotFoundMDX />
-    </ApplyTypography>
-  </Main>
-  <Footer siteDef={siteDef}/>
-</>)
-
-export default NotFound

package/components/not-found/not-found-content.mdx

@@ -1,5 +0,0 @@
-### ...Huh?
-#### Sorry, we're fresh out of those.
-<br/>
-#### ...try something from the [Home Page](/)?
-

package/components/tooltip.tsx

@@ -1,31 +0,0 @@
-'use client'
-import React from 'react'
-import { Tooltip as RTTooltip, type PlacesType } from 'react-tooltip'
-
-const Tooltip: React.FC<{
-  select: string
-  text: string
-  position?: PlacesType // https://react-tooltip.com/docs/options
-  clx?: string
-  offset?: number
-}> = ({
-  select,
-  text,
-  clx='',
-  position='bottom',
-  offset=2
-}) => (
-  <RTTooltip 
-    anchorSelect={select} 
-    noArrow 
-    opacity={1} 
-    content={text} 
-    place={position}
-    offset={offset}
-    delayShow={100}
-    delayHide={100}
-    className={'!opacity-100 !bg-level-2 border rounded-[3px] !px-1.5 !py-1 z-floating' + clx}
-  />
-)
-
-export default Tooltip

package/environment.d.ts

@@ -1,6 +0,0 @@
-namespace NodeJS {
-  interface ProcessEnv {
-    NEXT_PUBLIC_GA_MEASUREMENT_ID: string;
-    NEXT_PUBLIC_FACEBOOK_PIXEL_ID: string;
-  }
-}

package/next/analytics/fpixel.ts

@@ -1,16 +0,0 @@
-declare global {
-  interface Window {
-    fbq: Function;
-  }
-}
-
-export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
-
-export const pageview = () => {
-  window.fbq('track', 'PageView')
-}
-
-// https://developers.facebook.com/docs/meta-pixel/reference
-export const sendFBEvent = (name: string, options = {}) => {
-  window.fbq('track', name, options)
-}

package/next/analytics/google-analytics.ts

@@ -1,14 +0,0 @@
-declare global {
-  interface Window {
-    gtag: Function;
-  }
-}
-
-// https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtag
-const sendGAEvent = (name: string, options = {}) => {
-  window.gtag('event', name, options)
-}
-
-export {
-  sendGAEvent as default
-}

package/next/analytics/index.ts

@@ -1,3 +0,0 @@
-export { sendFBEvent } from './fpixel'
-export { default as sendGAEvent } from './google-analytics'
-export { FacebookPixel } from './pixel-analytics'

package/next/analytics/pixel-analytics.tsx

@@ -1,55 +0,0 @@
-'use client'
-import React, { useEffect, useState } from 'react'
-import { usePathname } from 'next/navigation'
-import Script from 'next/script'
-
-import * as fbq from './fpixel'
-
-const FacebookPixelHead = () => {
-  return (
-    <noscript>
-      <img
-        height='1'
-        width='1'
-        style={{ display: 'none' }}
-        src={`https://www.facebook.com/tr?id=${fbq.FB_PIXEL_ID}&ev=PageView&noscript=1`}
-      />
-    </noscript>
-  )
-}
-
-const FacebookPixel = () => {
-  const [loaded, setLoaded] = useState(false)
-  const pathname = usePathname()
-
-  useEffect(() => {
-    if (!loaded) return
-
-    fbq.pageview()
-  }, [pathname, loaded])
-
-  return (
-    <div>
-       <Script
-        id='fb-pixel'
-        strategy='afterInteractive'
-        onLoad={() => setLoaded(true)}
-        dangerouslySetInnerHTML={{
-          __html: `
-            !function(f,b,e,v,n,t,s)
-            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
-            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
-            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
-            n.queue=[];t=b.createElement(e);t.async=!0;
-            t.src=v;s=b.getElementsByTagName(e)[0];
-            s.parentNode.insertBefore(t,s)}(window, document,'script',
-            'https://connect.facebook.net/en_US/fbevents.js');
-            fbq('init', ${fbq.FB_PIXEL_ID});
-          `,
-        }}
-      />
-    </div>
-  )
-}
-
-export {FacebookPixelHead, FacebookPixel}

package/next/font/get-app-router-font-classes.ts

@@ -1,17 +0,0 @@
-import nextFonts from './load-and-return-lux-next-fonts-on-import'
-import type NextFontDesc from './next-font-desc'
-
-  // These will be injected for <body> in app router app that uses our RootLayout
-
-  // First is assumed to be mapped to the default font and is injected into <body>
-  // as a normal tw font family class.
-export default () => {
-  let nf = nextFonts.map((desc: NextFontDesc) => (desc.nextFont!.variable))
-    // dedupe
-  nf = nf.filter(
-    (str, i, arr) => (
-      arr.indexOf(str) === i
-    )  
-  )
-  return nf.join(' ') + ` font-${nextFonts[0].twName}`
-}

package/next/font/load-and-return-lux-next-fonts-on-import.ts

@@ -1,68 +0,0 @@
-// import { Inter } from 'next/font/google'
-import localFont from 'next/font/local'
-
-import type { TwFontDesc } from '@hanzo/ui/tailwind' // TODO
-import type NextFontDesc from './next-font-desc'
-
-import twFonts from '../../tailwind/lux-tw-fonts'
-
-/*
-  Creating NextFontDesc's and TwFontDesc's has to be seperated because they are needed
-  at different times during the next compile / build.  Otherwise a nasty
-  race condition happens!
-
-  Also, requires that "Font loaders must be called and assigned to a const in the module scope"
-
-*/
-
-const drukWide = localFont({
-  src: [
-    {
-      path: './local/Druk-Wide-Bold.ttf',
-      weight: '700',
-      style: 'normal'
-    },
-    {
-      path: './local/Druk-Wide-Medium.ttf',
-      weight: '500',
-      style: 'normal',
-    },
-  ],
-  display: 'swap',
-  variable: '--font-druk-wide',
-})
-
-const inter = localFont({
-  src: './local/InterVariable.ttf',
-  display: 'swap',
-  variable: '--font-inter',
-})
-
-export default [
-  {
-    font: inter,
-    twName: 'sans'
-  },
-  {
-    font: inter,
-    twName: 'nav'
-  },
-  {
-    font: drukWide,
-    twName: 'heading'
-  }
-].map (
-  (el) => {
-    const twFont: TwFontDesc | undefined = twFonts.find((twf: TwFontDesc) => (el.twName === twf.twName))
-    if (!twFont) {
-      throw new Error('lux-next-fonts: Next font is not paired to a TW font!')
-    }
-
-    return ({
-      ...twFont,
-      nextFont: el.font,
-    })
-  }
-) satisfies NextFontDesc[]
-
-

package/next/font/next-font-desc.ts

@@ -1,28 +0,0 @@
-import type { TwFontDesc } from '@hanzo/ui/tailwind' 
-
-// from next repo
-type NextFont = {
-  className: string
-  style: { fontFamily: string; fontWeight?: number; fontStyle?: string }
-}
-
-// from next repo
-type NextFontWithVariable = NextFont & {
-  variable: string
-}
-
-
-/*
-  NextFontDesc and TwFontDesc have to be seperate because they are needed 
-  at different times during the next compile / build.  Otherwise a nasty 
-  race condition happens! That's why they are in different files.
-*/
-
-interface NextFontDesc extends TwFontDesc {
-  nextFont: NextFontWithVariable 
-}
-
-export {
-  type NextFontDesc as default,
-  type NextFontWithVariable,
-}

package/next/font/pages-router-font-vars.tsx

@@ -1,18 +0,0 @@
-
-import nextFonts from './load-and-return-lux-next-fonts-on-import'
-import type NextFontDesc from './next-font-desc'
-
-const PagesRouterFontVars: React.FC = () => {
-
-  const fontVars = nextFonts.map((fd: NextFontDesc) => (
-    `${fd.cssVar}: ${fd.nextFont.style.fontFamily};`
-  )).join('\n')
-
-  return <style jsx global>{`
-    html {
-      ${fontVars}
-    }
-  `}</style>
-}
-
-export default PagesRouterFontVars