@hanzo/ui 1.0.15 → 2.0.1

package/common/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/common/mini-chart/mini-chart.tsx

@@ -1,76 +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'
-
-      const copyDiv = document.querySelector('.tradingview-widget-copyright')
-      if (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-[--secondary-2]">{symbol} quotes</span></a>&nbsp;by TradingView
-    </div>
-  </>)
-}
-
-export default MiniChart

package/common/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/context-providers/index.ts

@@ -1 +0,0 @@
-export { default as ThemeProvider } from './theme-provider'

package/next/README.md

@@ -1,11 +0,0 @@
-# Next related Lux helpers
-
-### no `index.ts` file, and `load-and-return-lux-next-fonts-on-import.ts`
-
-Next font loading requires the fonts to be assigned to const's in module scope (ie, loaded when the module is evaluated, exactly once).
-
-If there was an `index.ts` "barrel file", and the client code imported anything from this package, it would have resulted in evaluting all the packages imported including the that loaded the fonts. Without the index, the client code knows what modules import it and thus when it happens.
-
-tl;dr: See [this article from Vercel](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) about this issue. 
-
-(Previously, not having this safegaurd caused a serious bug becuase the fonts were loaded far too early.)

package/next/analytics/fpixel.ts

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

package/next/analytics/pixel-analytics.tsx

@@ -1,55 +0,0 @@
-'use client'
-
-import { usePathname } from 'next/navigation'
-import Script from 'next/script'
-import { useEffect, useState } from 'react'
-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/determine-device-middleware.ts

@@ -1,16 +0,0 @@
-import { NextRequest, NextResponse, userAgent } from 'next/server'
-import { getSelectorsByUserAgent } from 'react-device-detect'
-
-  // writed this way so they can be chained :)
-const determineDeviceMiddleware = async (request: NextRequest) => {
-
-  const ua = userAgent(request)
-  const { isMobileOnly, isTablet, isDesktop } = getSelectorsByUserAgent(ua.ua)
-  const agent = isMobileOnly ? 'phone' : (isTablet ? 'tablet' : (isDesktop ?  'desktop' : 'unknown'))
-  const { nextUrl: url } = request
-  //console.log(`\n=== from ${url.href} on a *${agent && agent.toUpperCase()}* device. ===\n`)
-  url.searchParams.set('agent', agent)
-  return NextResponse.rewrite(url)
-}
-
-export default determineDeviceMiddleware

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

@@ -1,12 +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 () => (
-  nextFonts.map(
-      (desc: NextFontDesc) => (desc.nextFont!.variable)
-    ).join(' ') + ` font-${nextFonts[0].twName}`
-)

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

@@ -1,94 +0,0 @@
-import { Inter } from 'next/font/google'
-import localFont from 'next/font/local'
-
-import type NextFontDesc from './next-font-desc'
-import type TwFontDesc from '../tailwind/tw-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 drukTextWide = localFont({
-  src: [
-    {
-      path: './fonts/DrukTextWide-Medium-Trial.otf',
-      weight: '500',
-      style: 'normal'
-    },
-    {
-      path: './fonts/DrukTextWide-Bold-Trial.otf',
-      weight: '700',
-      style: 'normal'
-    },
-    {
-      path: './fonts/DrukTextWide-Heavy-Trial.otf',
-      weight: '800',
-      style: 'normal',
-    },
-  ],
-  display: 'swap',
-  variable: '--font-druk-text-wide' ,
-})
-
-const drukWide = localFont({
-  src: [
-    {
-      path: './fonts/DrukWide-Medium-Trial.otf',
-      weight: '500',
-      style: 'normal'
-    },
-    {
-      path: './fonts/DrukWide-Bold-Trial.otf',
-      weight: '700',
-      style: 'normal'
-    },
-    {
-      path: './fonts/DrukWide-Heavy-Trial.otf',
-      weight: '500',
-      style: 'normal',
-    },
-  ],
-  display: 'swap',
-  variable: '--font-druk-wide' ,
-})
-
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-})
-  
-export default [
-  {
-    font: inter,
-    twName: 'sans'
-  },
-  {
-    font: drukTextWide,
-    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,
-    })
-  }
-) as NextFontDesc[]
-
-

package/next/next-font-desc.ts

@@ -1,28 +0,0 @@
-import type TwFontDesc from '../tailwind/tw-font-desc'
-
-// 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/not-found-content.mdx

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

package/next/not-found.tsx

@@ -1,23 +0,0 @@
-import React  from 'react'
-
-import Main from '../primitives/main'
-import Footer from '../common/footer'
-import { ApplyTypography } from '../primitives'
-
-import NotFoundMDX from './not-found-content.mdx'
-import type { SiteDef } from '../types'
-
-const NotFound: React.FC<{
-  siteDef: SiteDef
-}>  = ({
-  siteDef
-}) => (<>
-  <Main className='xs:h-[100svh] xs:px-8 sm:px-10 sm:h-[700px]'>
-    <ApplyTypography className='mt-[200px] flex flex-col md:gap-8 '>
-      <NotFoundMDX />
-    </ApplyTypography>
-  </Main>
-  <Footer siteDef={siteDef}/>
-</>)
-
-export default NotFound

package/next/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

package/next/root-layout.tsx

@@ -1,62 +0,0 @@
-import React, { type PropsWithChildren } from 'react'
-
-import type { Viewport } from 'next'
-
-import Header from '../common/header'
-import type { SiteDef } from '../types'
-import getAppRouterBodyFontClasses from './get-app-router-font-classes'
-import { FacebookPixelHead, FacebookPixel } from './analytics/pixel-analytics'
-import { GoogleAnalytics } from '@next/third-parties/google'
-
-// Next 14: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#use-viewport-export
-const viewport = {
-  themeColor: [
-    { media: '(prefers-color-scheme: light)', color: 'white' },
-    { media: '(prefers-color-scheme: dark)', color: 'black' },
-  ],
-} satisfies Viewport
-
-/*
-  These '.variable' fields are actually autogenerate css classnames that *define* the actual
-  css variables ('--<ugly-name>') that one asks for in the tailwind classes. 
-  They are what make them available in the global scope. So this MUST
-  be done like this for the tailwind font classes to work.
-  
-  (...not to be confused with the css var itself.  This field should be named something else!)
-*/
-
-/*
-  re body: overflow-y-hidden overflow-x-hidden, h-full
-  We cannot have these on body tag for scroll-snap to work on iOS!
-*/
-const bodyClasses = 
-  'bg-background text-foreground flex flex-col min-h-full ' + 
-  getAppRouterBodyFontClasses() 
-    
-const RootLayout: React.FC<PropsWithChildren & { 
-  siteDef: SiteDef 
-  header?: boolean
-}> = ({ 
-  header = true,
-  siteDef,
-  children,
-}) =>  (
-  <html lang='en' suppressHydrationWarning className='lux-dark-theme'>
-    <head >
-      {/* https://stackoverflow.com/a/75716588/11645689 */ }
-      <base target='_blank' />
-      <FacebookPixelHead/>
-    </head>
-    <body className={bodyClasses}>
-      <FacebookPixel />
-      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
-      {header && <Header siteDef={siteDef}/>}
-      {children}
-    </body>
-  </html>
-)
-
-export {
-  RootLayout as default,
-  viewport
-}

package/siteDef/footer/community.tsx

@@ -1,67 +0,0 @@
-import type { LinkDef } from '../../types'
-import { Icons } from '../../common'
-
-  // @ts-ignore (will build in project that has @svgr support)
-import SVG_warp_logo from './svg/warpcast-logo.svg'
-
-const SOC_ICON_SIZE = 18
-
-export default   [
-  {
-    title: 'Community',
-    href: '',
-    variant: 'linkFG',
-  },
-
-  {
-    title: 'Lux Channel',
-    href: 'https://warpcast.com/~/channel/lux',
-    icon: <SVG_warp_logo width={SOC_ICON_SIZE} height={SOC_ICON_SIZE} /> //<Icons.SocialIcon network='warpcast' size={SOC_ICON_SIZE} />
-  },
-  {
-    title: 'Lux Discussion',
-    href: 'https://github.com/orgs/luxdefi/discussions',
-    icon: <Icons.SocialIcon network='github' size={SOC_ICON_SIZE} />
-  },
-
-  /*
-  {
-    title: 'Discord',
-    href: 'https://discord.gg/luxdefi',
-    external: true,
-    icon: <Icons.SocialIcon network='discord' size={SOC_ICON_SIZE} />
-  },
-  {
-    title: 'Telegram',
-    href: 'https://t.me/luxdefi',
-    external: true,
-    icon: <Icons.SocialIcon network='telegram' size={SOC_ICON_SIZE} />
-  },
-  */
-
-  {
-    title: '@luxdefi',
-    href: 'https://twitter.com/luxdefi',
-    icon: <Icons.SocialIcon network='x' size={SOC_ICON_SIZE} />
-  },
-  {
-    title: '@luxdefi',
-    href: 'https://facebook.com/luxdefi',
-    icon: <Icons.SocialIcon network='facebook' size={SOC_ICON_SIZE + 2} />
-  },
-  {
-    title: '@luxdefi',
-    href: 'https://www.instagram.com/luxdefi',
-    icon: <Icons.SocialIcon network='instagram' size={SOC_ICON_SIZE + 2} />
-  },
-  {
-    title: '@luxdefi',
-    href: 'https://linkedin.com/company/luxdefi',
-    icon: <Icons.SocialIcon network='linkedin' size={SOC_ICON_SIZE + 2} />
-  },
-  {
-    title: '@luxdefi',
-    href: 'https://www.youtube.com/@luxdefi',
-    icon: <Icons.SocialIcon network='youtube' size={SOC_ICON_SIZE + 2} />
-  },
-] satisfies LinkDef[]

package/siteDef/footer/company.ts

@@ -1,37 +0,0 @@
-import type { LinkDef } from '../../types'
-
-export default [
-  {
-    title: 'Company',
-    href: "https://lux.partners/",
-    variant: 'linkFG',
-    newTab: false,
-  },
-  {
-    title: 'About',
-    href: 'https://lux.partners',
-    newTab: false,
-  },
-  {
-    title: 'Brand',
-    href: 'https://drive.google.com/drive/folders/14OJtKLVakGY6883XO9yGbiHtlFxQUUm5?usp=share_link',
-  },
-  {
-    title: 'Careers',
-    href: 'https://docs.google.com/document/d/1SCt0Hg7EIs06TootKCA1am1xo4mcXoKF/edit#heading=h.30j0zll',
-    newTab: true,
-  },
-  {
-    title: 'Partnerships',
-    href: 'https://apply.lux.partners/',
-    newTab: false,
-  },
-  {
-    title: 'Press',
-    href: 'mailto:ai@lux.partners?subject=%E2%96%BC%20Press',
-  },
-  {
-    title: 'Help',
-    href: 'mailto:ai@lux.partners?subject=%E2%96%BC%20Help',
-  },
-] satisfies LinkDef[]

package/siteDef/footer/ecosystem.ts

@@ -1,37 +0,0 @@
-import type { LinkDef } from '../../types'
-
-export default [
-  {
-    title: 'Ecosystem',
-    href: '',
-    variant: 'linkFG'
-  },
-  {
-    title: 'Lux Silver',
-    href: 'https://lux.market/silver',
-  },
-  {
-    title: 'Lux Gold',
-    href: 'https://lux.market/gold',
-  },
-  {
-    title: 'Lux Credit Card',
-    href: 'https://lux.credit',
-  },
-  {
-    title: 'Lux Exchange',
-    href: 'https://lux.exchange',
-  },
-  {
-    title: 'Lux Finance',
-    href: 'https://lux.finance',
-  },
-  {
-    title: 'Lux Market',
-    href: 'https://lux.market',
-  },
-  {
-    title: 'Lux Network',
-    href: 'https://lux.network',
-  },
-] satisfies LinkDef[]