@luxfi/ui 8.1.0 → 8.2.0

package/src/site/components/logo.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { Box, css } from '@hanzo/ui'
+import Link from 'next/link'
+
+import { type TShirtSize } from '@hanzo/ui/types'
+import { Logo as Mark, Wordmark } from '@luxfi/logo'
+
+/**
+ * mark     — the triangle alone
+ * wordmark — the LUX letterforms alone
+ * full     — the mark beside the wordmark
+ *
+ * Both halves come from @luxfi/logo, which is the one home for Lux brand art.
+ * This file used to draw its own triangle and set the letters "LUX" in the body
+ * font, so every Lux site wore typed text where the wordmark belongs — and no
+ * variant could fix it, because neither the mark nor the wordmark was here to
+ * ask for. Art lives in the brand package; this composes it.
+ */
+type LogoVariant = 'mark' | 'wordmark' | 'full'
+
+/** Mark height in px, and the wordmark height that stands with it. */
+const SIZE: Record<string, { mark: number, word: number, gap: string }> = {
+  xl: { mark: 40, word: 22, gap: 'gap-4' },
+  lg: { mark: 40, word: 22, gap: 'gap-4' },
+  md: { mark: 32, word: 18, gap: 'gap-3' },
+  sm: { mark: 24, word: 13, gap: 'gap-2' },
+  xs: { mark: 16, word: 9, gap: 'gap-1.5' },
+}
+
+const Logo: React.FC<{
+  size?: TShirtSize
+  variant?: LogoVariant
+  onClick?: () => void
+  href?: string
+  outerClx?: string
+}> = ({
+  size = 'md',
+  href, // no default please!
+  outerClx = '',
+  variant = 'full',
+  onClick,
+}) => {
+  const s = SIZE[size as string] ?? SIZE.md
+  const clx = 'flex flex-row items-center ' + s.gap + ' '
+    + (href ? 'hover:opacity-80 cursor-pointer ' : 'cursor-default ')
+    + outerClx
+
+  // White on both counts: the Lux ground is black and the brand's accent is
+  // white, so the mark and the letters carry the same value.
+  const art = (<>
+    {variant !== 'wordmark' && <Mark variant='white' size={s.mark} />}
+    {variant !== 'mark' && <Wordmark height={s.word} />}
+  </>)
+
+  return href ? (
+    <Link href={href} style={css(clx)} onClick={onClick}>{art}</Link>
+  ) : (
+    <Box tag="span" className={clx} onClick={onClick}>{art}</Box>
+  )
+}
+
+export {
+  Logo as default,
+  type LogoVariant
+}

package/src/site/components/main.tsx

@@ -0,0 +1,26 @@
+import React, { type PropsWithChildren } from 'react'
+import { Box, cn } from '@hanzo/ui'
+const Main: React.FC<PropsWithChildren & { 
+  id?: string
+  className?: string 
+  headerSpace?: boolean
+  standardWidth?: boolean
+}> = ({
+  children,
+  className='',
+  headerSpace=true,
+  standardWidth=true,
+  id
+}) => (
+  <Box tag="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}
+  </Box>
+)
+
+export default Main

package/src/site/components/mini-chart/index.tsx

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

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

@@ -0,0 +1,44 @@
+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/src/site/components/mini-chart/mini-chart.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+import { Box } from '@hanzo/ui'
+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">
+        <Box tag="span" className="text-[--hz-ui-primary]">{symbol} quotes</Box></a>&nbsp;by TradingView
+    </div>
+  </>)
+}
+
+export default MiniChart

package/src/site/components/mini-chart/wrapper.tsx

@@ -0,0 +1,23 @@
+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/src/site/components/not-found/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { ApplyTypography } from '@hanzo/ui'
+
+import type { SiteDef } from '../../site-def'
+import Footer from '../footer'
+import Header from '../header'
+import Main from '../main'
+
+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'>
+      <h3>...Huh?</h3>
+      <h4>Sorry, we&apos;re fresh out of those.</h4>
+      <h4>...try something from the <a href='/'>Home Page</a>?</h4>
+    </ApplyTypography>
+  </Main>
+  <Footer siteDef={siteDef}/>
+</>)
+
+export default NotFound

package/src/site/components/security/index.tsx

@@ -0,0 +1,55 @@
+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'
+
+const Security: React.FC<{
+  contact: string
+  header?: boolean
+  siteDef: SiteDef
+}> = ({
+  contact,
+  header = false,
+  siteDef
+}) => (<>
+  {header && <Header siteDef={siteDef} />}
+  <Main className='px-8 sm:px-10 pb-16'>
+    <ApplyTypography className='w-full max-w-[46rem] mx-auto flex flex-col gap-6 pt-12'>
+      <h1>Reporting a security problem</h1>
+      <p>
+        Email <a href={`mailto:${contact}`}>{contact}</a>. Tell us what you found and how to
+        reproduce it. Send it to us before you tell anyone else, and do not open a public issue.
+      </p>
+      <p>
+        A real report from a stranger is worth more than another internal review. We read every one.
+      </p>
+      <h2>What happens next</h2>
+      <p>
+        Someone will read your report and reply. If we can reproduce the problem we will tell you
+        what we are doing about it, and tell you again once it is fixed. If we cannot reproduce it
+        we will say so and ask you for what we are missing.
+      </p>
+      <h2>While you are looking</h2>
+      <p>
+        Test against accounts and data that are your own. Do not read, change, or keep data that
+        belongs to someone else. If you reach it by accident, stop, and say so in your report.
+      </p>
+      <p>
+        Do not run anything that degrades the service for other people. No load testing, no denial
+        of service, no mass automated scanning, and no social engineering of our staff or our users.
+      </p>
+      <h2>For scanners</h2>
+      <p>
+        This page is the policy named by{' '}
+        <a href='/.well-known/security.txt'>/.well-known/security.txt</a>, per RFC 9116.
+      </p>
+    </ApplyTypography>
+  </Main>
+  <Footer siteDef={siteDef} />
+</>)
+
+export default Security

package/src/site/components/tooltip.tsx

@@ -0,0 +1,31 @@
+'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/src/site/next/analytics/fpixel.ts

@@ -0,0 +1,16 @@
+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/src/site/next/analytics/google-analytics.ts

@@ -0,0 +1,14 @@
+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/src/site/next/analytics/index.ts

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

package/src/site/next/analytics/pixel-analytics.tsx

@@ -0,0 +1,55 @@
+'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/src/site/next/font/font-desc.ts

@@ -0,0 +1,18 @@
+/**
+ * A font in this site's vocabulary.
+ *
+ * `name` is the ROLE the font plays — `sans`, `nav`, `heading`, `serif`, `mono`
+ * — not a file and not a family. The stack is what the browser resolves, and
+ * `cssVar` is the custom property the next/font loader publishes the loaded
+ * face under, so the stack can point at it.
+ *
+ * It lived in a Tailwind preset and was called `TwFontDesc`, which named the
+ * engine that happened to read it rather than what it is. The engine is gone;
+ * the fonts are not.
+ */
+export type FontDesc = {
+  /** The role: `sans`, `nav`, `heading`, `serif`, `mono`. */
+  name: string
+  fontFamily: string[]
+  cssVar?: string
+}

package/src/site/next/font/fonts.ts

@@ -0,0 +1,40 @@
+import type { FontDesc } from './font-desc'
+
+
+/* Read by ./load-and-return-lux-next-fonts-on-import.ts */
+
+export default [
+  {
+    fontFamily: ['var(--font-inter)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-inter',
+    name: 'sans'
+  },
+  {
+    fontFamily: ['var(--font-inter)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-inter',
+    name: 'nav'
+  },
+  {
+    fontFamily: ['var(--font-zen-sans)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-zen-sans',
+    name: 'heading'
+  },
+  {
+    name: 'serif',
+    fontFamily: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times']
+  },
+  {
+    name: 'mono',
+    fontFamily: [
+      'ui-monospace',
+      'SFMono-Regular',
+      'Menlo',
+      'Monaco',
+      'Consolas',
+      '"Liberation Mono"',
+      '"Courier New"',
+      'monospace',
+    ] 
+  }
+
+] as FontDesc[]

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

@@ -0,0 +1,19 @@
+import nextFonts from './load-and-return-lux-next-fonts-on-import'
+import type NextFontDesc from './next-font-desc'
+
+/**
+ * next/font's own generated class names, for <body> in an app-router app using
+ * our RootLayout.
+ *
+ * Each one DEFINES a custom property holding the face it loaded, so they have
+ * to land on an element before anything can name `var(--font-inter)`.
+ *
+ * It used to append `font-<role>` for the default face as well. That was a
+ * utility class, and with no engine generating it the body had a name no sheet
+ * served — the family is set on `body` in lux-global.css instead, where it can
+ * point at the property these classes define.
+ */
+export default () => {
+  const named = nextFonts.map((desc: NextFontDesc) => desc.nextFont!.variable)
+  return [...new Set(named)].join(' ')
+}

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

@@ -0,0 +1,60 @@
+// import { Inter } from 'next/font/google'
+import localFont from 'next/font/local'
+
+import type { FontDesc } from './font-desc'
+import type NextFontDesc from './next-font-desc'
+
+import fonts from './fonts'
+
+/*
+  Creating NextFontDesc's and FontDesc'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 zen = localFont({
+  src: './local/Zen-Variable.woff2',
+  weight: '100 900',
+  display: 'swap',
+  variable: '--font-zen-sans',
+})
+
+const inter = localFont({
+  src: './local/InterVariable.ttf',
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+export default [
+  {
+    font: inter,
+    name: 'sans'
+  },
+  {
+    font: inter,
+    name: 'nav'
+  },
+  {
+    // Zen is one variable face over 100-900, so the display cut is weight and
+    // tracking in CSS rather than a second file: '.font-heading' in style/lux-global.css.
+    font: zen,
+    name: 'heading'
+  }
+].map (
+  (el) => {
+    const font: FontDesc | undefined = fonts.find((f: FontDesc) => (el.name === f.name))
+    if (!font) {
+      throw new Error('lux-next-fonts: Next font is not paired to a TW font!')
+    }
+
+    return ({
+      ...font,
+      nextFont: el.font,
+    })
+  }
+) satisfies NextFontDesc[]
+
+

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

@@ -0,0 +1,29 @@
+import type localFont from 'next/font/local'
+
+import type { FontDesc } from './font-desc'
+
+/**
+ * What a next/font loader hands back, DERIVED from the loader.
+ *
+ * These were two hand-copied declarations marked "from next repo" — a copy of a
+ * type that keeps moving, which is how the OpenGraph types in ../head-metadata
+ * went stale and failed as "two different types with this name exist, but they
+ * are unrelated". `ReturnType` names the position and lets Next say what lives
+ * there. The loader answers with a union — a font is only given a variable
+ * when it was asked for one — so `Extract` picks the half that has it.
+ */
+export type NextFontWithVariable = Extract<ReturnType<typeof localFont>, { variable: string }>
+
+/*
+  NextFontDesc and FontDesc 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 FontDesc {
+  nextFont: NextFontWithVariable
+}
+
+export {
+  type NextFontDesc as default,
+}

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

@@ -0,0 +1,18 @@
+
+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