@luxfi/core 5.2.10 → 5.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/commerce/ui/conf.ts +13 -13
- package/commerce/ui/context.tsx +126 -126
- package/commerce/ui/store.ts +306 -304
- package/components/access-code-input.tsx +71 -71
- package/components/auth/auth-listener.tsx +29 -29
- package/components/auth/auth-token/clear-auth-token.tsx +12 -12
- package/components/auth/auth-token/set-auth-token.tsx +16 -16
- package/components/auth/common-auth-domains.ts +16 -16
- package/components/auth/login-panel.tsx +107 -107
- package/components/back-button.tsx +49 -42
- package/components/chat-widget.tsx +85 -85
- package/components/commerce/add-widget.tsx +20 -20
- package/components/commerce/bag-button.tsx +98 -98
- package/components/commerce/buy-button.tsx +34 -34
- package/components/commerce/checkout-button.tsx +129 -129
- package/components/commerce/checkout-panel/cart-accordian.tsx +66 -0
- package/components/commerce/checkout-panel/checkout-panel-props.ts +10 -0
- package/components/commerce/checkout-panel/{dt-bag-carousel.tsx → desktop-bag-carousel.tsx} +36 -36
- package/components/commerce/checkout-panel/desktop-cp.tsx +83 -0
- package/components/commerce/checkout-panel/index.tsx +126 -129
- package/components/commerce/checkout-panel/mobile-cp.tsx +67 -0
- package/components/commerce/checkout-panel/policy-links.tsx +29 -0
- package/components/commerce/checkout-panel/steps-indicator.tsx +39 -39
- package/components/commerce/checkout-panel/thank-you.tsx +18 -18
- package/components/commerce/checkout-widget/const.ts +13 -13
- package/components/commerce/checkout-widget/index.tsx +192 -192
- package/components/commerce/checkout-widget/obs-string-set.ts +48 -48
- package/components/commerce/checkout-widget/use-anim-clx-set.ts +58 -58
- package/components/commerce/desktop-bag-popup.tsx +78 -78
- package/components/commerce/desktop-nav-menu.tsx +130 -130
- package/components/commerce/drawer/index.tsx +99 -99
- package/components/commerce/drawer/micro.tsx +144 -144
- package/components/commerce/drawer/shell.tsx +85 -85
- package/components/commerce/mobile-bag-drawer.tsx +51 -51
- package/components/commerce/mobile-login-button.tsx +101 -101
- package/components/commerce/mobile-menu-toggle-button.tsx +35 -35
- package/components/commerce/mobile-nav-menu-ai.tsx +47 -48
- package/components/commerce/mobile-nav-menu-item.tsx +49 -49
- package/components/commerce/mobile-nav-menu.tsx +101 -101
- package/components/contact-dialog/contact-form.tsx +113 -113
- package/components/contact-dialog/disclaimer.tsx +13 -13
- package/components/contact-dialog/index.tsx +64 -64
- package/components/copyright.tsx +21 -21
- package/components/drawer-margin.tsx +25 -25
- package/components/footer.tsx +77 -77
- package/components/header/desktop.tsx +50 -50
- package/components/header/index.tsx +52 -52
- package/components/header/mobile.tsx +163 -163
- package/components/header/theme-toggle.tsx +26 -26
- package/components/icons/24k-gold-card.tsx +43 -43
- package/components/icons/ai-chat.tsx +29 -29
- package/components/icons/anodized-titanium.tsx +45 -45
- package/components/icons/avatar.tsx +11 -11
- package/components/icons/bag-icon.tsx +10 -10
- package/components/icons/blog.tsx +20 -20
- package/components/icons/bridge.tsx +68 -68
- package/components/icons/changelog.tsx +21 -21
- package/components/icons/chrome.tsx +45 -45
- package/components/icons/coins.tsx +20 -20
- package/components/icons/compare-cards.tsx +21 -21
- package/components/icons/credit.tsx +20 -20
- package/components/icons/customer-support.tsx +21 -21
- package/components/icons/customers.tsx +33 -33
- package/components/icons/developer-docs.tsx +20 -20
- package/components/icons/exchange.tsx +21 -21
- package/components/icons/explorer.tsx +22 -22
- package/components/icons/faqs.tsx +21 -21
- package/components/icons/github.tsx +14 -14
- package/components/icons/guides.tsx +21 -21
- package/components/icons/gun-metal.tsx +44 -44
- package/components/icons/index.tsx +43 -43
- package/components/icons/integrations.tsx +25 -25
- package/components/icons/irradescent.tsx +41 -41
- package/components/icons/launch-subnet.tsx +21 -21
- package/components/icons/left-arrow.tsx +11 -11
- package/components/icons/lux-finance.tsx +23 -23
- package/components/icons/lux-logo.tsx +10 -10
- package/components/icons/lux-pass.tsx +25 -25
- package/components/icons/lux-quests.tsx +21 -21
- package/components/icons/market.tsx +24 -24
- package/components/icons/mirrored-titanium.tsx +46 -46
- package/components/icons/more-benefits.tsx +21 -21
- package/components/icons/open-source.tsx +26 -26
- package/components/icons/right-arrow.tsx +10 -10
- package/components/icons/safe.tsx +37 -37
- package/components/icons/search.tsx +12 -12
- package/components/icons/secure-delivery.tsx +13 -13
- package/components/icons/shop.tsx +20 -20
- package/components/icons/social-icon.tsx +35 -35
- package/components/icons/social-svg.css +3 -3
- package/components/icons/sterling-silver-card.tsx +44 -44
- package/components/icons/templates.tsx +21 -21
- package/components/icons/validators.tsx +41 -41
- package/components/icons/view-all-card.tsx +20 -20
- package/components/icons/wallet.tsx +20 -20
- package/components/icons/warpcast.tsx +58 -58
- package/components/icons/youtube-logo.tsx +59 -59
- package/components/index.ts +27 -27
- package/components/logo.tsx +89 -89
- package/components/main.tsx +27 -27
- package/components/mini-chart/index.tsx +7 -7
- package/components/mini-chart/mini-chart-props.ts +43 -43
- package/components/mini-chart/mini-chart.tsx +85 -85
- package/components/mini-chart/wrapper.tsx +23 -23
- package/components/not-found/index.tsx +28 -28
- package/components/not-found/not-found-content.mdx +5 -5
- package/components/scripts.tsx +24 -24
- package/components/tooltip.tsx +31 -31
- package/environment.d.ts +5 -5
- package/next/analytics/fpixel.ts +15 -15
- package/next/analytics/google-analytics.ts +13 -13
- package/next/analytics/index.ts +3 -3
- package/next/analytics/pixel-analytics.tsx +54 -54
- package/next/font/get-app-router-font-classes.ts +12 -12
- package/next/font/load-and-return-lux-next-fonts-on-import.ts +68 -68
- package/next/font/next-font-desc.ts +27 -27
- package/next/font/pages-router-font-vars.tsx +18 -18
- package/next/head-metadata/from-next/metadata-types.ts +158 -158
- package/next/head-metadata/from-next/opengraph-types.ts +267 -267
- package/next/head-metadata/from-next/twitter-types.ts +92 -92
- package/next/head-metadata/index.tsx +208 -208
- package/next/middleware/determine-device-mw.ts +16 -16
- package/package.json +79 -79
- package/root-layout/WHY_THIS_IS_SEPARATE.txt +1 -1
- package/root-layout/index.tsx +112 -112
- package/server-actions/firebase-app.ts +14 -14
- package/server-actions/index.ts +5 -5
- package/server-actions/store-contact.ts +51 -51
- package/site-def/footer/community.tsx +67 -67
- package/site-def/footer/company.ts +37 -37
- package/site-def/footer/ecosystem.ts +37 -37
- package/site-def/footer/index.tsx +26 -26
- package/site-def/footer/legal.ts +28 -28
- package/site-def/footer/network.ts +45 -45
- package/site-def/footer/svg/warpcast-logo.svg +11 -11
- package/site-def/index.ts +2 -2
- package/site-def/main-nav.tsx +392 -392
- package/style/cart-animation.css +29 -29
- package/style/checkout-animation.css +23 -23
- package/style/drawer-handle-overrides.css +160 -160
- package/style/lux-colors.css +85 -85
- package/style/lux-global.css +30 -30
- package/tailwind/fontFamily.tailwind.lux.ts +18 -18
- package/tailwind/index.ts +2 -2
- package/tailwind/lux-tw-fonts.ts +39 -39
- package/tailwind/tailwind.config.lux-preset.ts +10 -10
- package/tsconfig.json +15 -15
- package/types/chatbot-config.ts +6 -6
- package/types/chatbot-suggested-question.ts +7 -7
- package/types/contact-info.ts +10 -10
- package/types/index.ts +4 -4
- package/types/site-def.ts +43 -43
- package/components/commerce/checkout-panel/dt-checkout-panel.tsx +0 -85
- package/components/commerce/checkout-panel/links-row.tsx +0 -21
- package/components/commerce/checkout-panel/mb-checkout-panel.tsx +0 -55
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
|
|
3
|
-
import React, { useEffect, useRef } from 'react'
|
|
4
|
-
import { type MiniChartProps } from './mini-chart-props'
|
|
5
|
-
|
|
6
|
-
const MiniChart: React.FC<MiniChartProps> = ({
|
|
7
|
-
widgetProps,
|
|
8
|
-
containerStyles = {}
|
|
9
|
-
}) => {
|
|
10
|
-
|
|
11
|
-
const {
|
|
12
|
-
symbol,
|
|
13
|
-
exchange,
|
|
14
|
-
lineColor,
|
|
15
|
-
topGradientColor,
|
|
16
|
-
bottomGradientColor,
|
|
17
|
-
width,
|
|
18
|
-
height,
|
|
19
|
-
autosize,
|
|
20
|
-
locale,
|
|
21
|
-
...rest
|
|
22
|
-
} = widgetProps
|
|
23
|
-
|
|
24
|
-
const symbolString = (exchange) ? `${exchange}:${symbol}` : symbol
|
|
25
|
-
|
|
26
|
-
const containerRef = useRef<HTMLDivElement | null>(null)
|
|
27
|
-
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
if (!containerRef.current) {
|
|
30
|
-
return
|
|
31
|
-
}
|
|
32
|
-
const script = document.createElement('script')
|
|
33
|
-
script.type = 'text/javascript'
|
|
34
|
-
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js'
|
|
35
|
-
script.async = true
|
|
36
|
-
script.onload = async () => {
|
|
37
|
-
const iframe = containerRef.current?.querySelector('iframe')
|
|
38
|
-
if (iframe && iframe instanceof Element) {
|
|
39
|
-
iframe.style.colorScheme = 'normal'
|
|
40
|
-
setTimeout(() => {
|
|
41
|
-
const value = document.querySelector('#mini-symbol-overview-ticker')
|
|
42
|
-
console.log("TICKER: " + value)
|
|
43
|
-
}, 1200) // from experimentation
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
const copyDiv = document.querySelector('.tradingview-widget-copyright')
|
|
49
|
-
if (copyDiv) {
|
|
50
|
-
console.log("COPY: " + copyDiv)
|
|
51
|
-
setTimeout(() => {
|
|
52
|
-
copyDiv.classList.remove('invisible')
|
|
53
|
-
}, 1200) // from experimentation
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
const config = JSON.stringify({
|
|
57
|
-
symbol: symbolString,
|
|
58
|
-
width: autosize ? '100%' : (width || 350),
|
|
59
|
-
height: autosize ? '100%' : (height || 220),
|
|
60
|
-
locale: locale ?? 'en',
|
|
61
|
-
isTransparent: 'true',
|
|
62
|
-
trendLineColor: lineColor || 'rgba(41, 98, 255, 1)',
|
|
63
|
-
underLineColor: topGradientColor || 'rgba(41, 98, 255, 0.3)',
|
|
64
|
-
underLineBottomColor: bottomGradientColor || 'rgba(41, 98, 255, 0)',
|
|
65
|
-
...rest,
|
|
66
|
-
})
|
|
67
|
-
script.innerHTML = config
|
|
68
|
-
containerRef.current.appendChild(script)
|
|
69
|
-
return () => {
|
|
70
|
-
while (containerRef.current?.firstChild) {
|
|
71
|
-
containerRef.current.removeChild(containerRef.current.firstChild)
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}, [ JSON.stringify(widgetProps) ])
|
|
75
|
-
|
|
76
|
-
return (<>
|
|
77
|
-
<div style={containerStyles} className='tradingview-widget-container h-[150px]' ref={containerRef} />
|
|
78
|
-
<div className='tradingview-widget-copyright border-t w-full invisible'>
|
|
79
|
-
<a href={`https://www.tradingview.com/symbols/${symbol}${exchange ? `/?exchange=${exchange}` : '' }`} rel="noopener" target="_blank">
|
|
80
|
-
<span className="text-[--hz-ui-primary]">{symbol} quotes</span></a> by TradingView
|
|
81
|
-
</div>
|
|
82
|
-
</>)
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
export default MiniChart
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import React, { useEffect, useRef } from 'react'
|
|
4
|
+
import { type MiniChartProps } from './mini-chart-props'
|
|
5
|
+
|
|
6
|
+
const MiniChart: React.FC<MiniChartProps> = ({
|
|
7
|
+
widgetProps,
|
|
8
|
+
containerStyles = {}
|
|
9
|
+
}) => {
|
|
10
|
+
|
|
11
|
+
const {
|
|
12
|
+
symbol,
|
|
13
|
+
exchange,
|
|
14
|
+
lineColor,
|
|
15
|
+
topGradientColor,
|
|
16
|
+
bottomGradientColor,
|
|
17
|
+
width,
|
|
18
|
+
height,
|
|
19
|
+
autosize,
|
|
20
|
+
locale,
|
|
21
|
+
...rest
|
|
22
|
+
} = widgetProps
|
|
23
|
+
|
|
24
|
+
const symbolString = (exchange) ? `${exchange}:${symbol}` : symbol
|
|
25
|
+
|
|
26
|
+
const containerRef = useRef<HTMLDivElement | null>(null)
|
|
27
|
+
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (!containerRef.current) {
|
|
30
|
+
return
|
|
31
|
+
}
|
|
32
|
+
const script = document.createElement('script')
|
|
33
|
+
script.type = 'text/javascript'
|
|
34
|
+
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js'
|
|
35
|
+
script.async = true
|
|
36
|
+
script.onload = async () => {
|
|
37
|
+
const iframe = containerRef.current?.querySelector('iframe')
|
|
38
|
+
if (iframe && iframe instanceof Element) {
|
|
39
|
+
iframe.style.colorScheme = 'normal'
|
|
40
|
+
setTimeout(() => {
|
|
41
|
+
const value = document.querySelector('#mini-symbol-overview-ticker')
|
|
42
|
+
console.log("TICKER: " + value)
|
|
43
|
+
}, 1200) // from experimentation
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
const copyDiv = document.querySelector('.tradingview-widget-copyright')
|
|
49
|
+
if (copyDiv) {
|
|
50
|
+
console.log("COPY: " + copyDiv)
|
|
51
|
+
setTimeout(() => {
|
|
52
|
+
copyDiv.classList.remove('invisible')
|
|
53
|
+
}, 1200) // from experimentation
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
const config = JSON.stringify({
|
|
57
|
+
symbol: symbolString,
|
|
58
|
+
width: autosize ? '100%' : (width || 350),
|
|
59
|
+
height: autosize ? '100%' : (height || 220),
|
|
60
|
+
locale: locale ?? 'en',
|
|
61
|
+
isTransparent: 'true',
|
|
62
|
+
trendLineColor: lineColor || 'rgba(41, 98, 255, 1)',
|
|
63
|
+
underLineColor: topGradientColor || 'rgba(41, 98, 255, 0.3)',
|
|
64
|
+
underLineBottomColor: bottomGradientColor || 'rgba(41, 98, 255, 0)',
|
|
65
|
+
...rest,
|
|
66
|
+
})
|
|
67
|
+
script.innerHTML = config
|
|
68
|
+
containerRef.current.appendChild(script)
|
|
69
|
+
return () => {
|
|
70
|
+
while (containerRef.current?.firstChild) {
|
|
71
|
+
containerRef.current.removeChild(containerRef.current.firstChild)
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}, [ JSON.stringify(widgetProps) ])
|
|
75
|
+
|
|
76
|
+
return (<>
|
|
77
|
+
<div style={containerStyles} className='tradingview-widget-container h-[150px]' ref={containerRef} />
|
|
78
|
+
<div className='tradingview-widget-copyright border-t w-full invisible'>
|
|
79
|
+
<a href={`https://www.tradingview.com/symbols/${symbol}${exchange ? `/?exchange=${exchange}` : '' }`} rel="noopener" target="_blank">
|
|
80
|
+
<span className="text-[--hz-ui-primary]">{symbol} quotes</span></a> by TradingView
|
|
81
|
+
</div>
|
|
82
|
+
</>)
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
export default MiniChart
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import BaseChart from './mini-chart'
|
|
4
|
-
|
|
5
|
-
const Wrapper: React.FC<{
|
|
6
|
-
symbol: string,
|
|
7
|
-
exchange?: string
|
|
8
|
-
}> = ({
|
|
9
|
-
symbol,
|
|
10
|
-
exchange
|
|
11
|
-
}) => (
|
|
12
|
-
<BaseChart widgetProps ={{
|
|
13
|
-
symbol,
|
|
14
|
-
exchange,
|
|
15
|
-
autosize: true,
|
|
16
|
-
colorTheme: 'dark',
|
|
17
|
-
lineColor: "rgb(114, 27, 228)",
|
|
18
|
-
bottomGradientColor: "rgba(255, 255, 255, 0.1)",
|
|
19
|
-
dateRange: '60M',
|
|
20
|
-
}}/>
|
|
21
|
-
)
|
|
22
|
-
|
|
23
|
-
export default Wrapper
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import BaseChart from './mini-chart'
|
|
4
|
+
|
|
5
|
+
const Wrapper: React.FC<{
|
|
6
|
+
symbol: string,
|
|
7
|
+
exchange?: string
|
|
8
|
+
}> = ({
|
|
9
|
+
symbol,
|
|
10
|
+
exchange
|
|
11
|
+
}) => (
|
|
12
|
+
<BaseChart widgetProps ={{
|
|
13
|
+
symbol,
|
|
14
|
+
exchange,
|
|
15
|
+
autosize: true,
|
|
16
|
+
colorTheme: 'dark',
|
|
17
|
+
lineColor: "rgb(114, 27, 228)",
|
|
18
|
+
bottomGradientColor: "rgba(255, 255, 255, 0.1)",
|
|
19
|
+
dateRange: '60M',
|
|
20
|
+
}}/>
|
|
21
|
+
)
|
|
22
|
+
|
|
23
|
+
export default Wrapper
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import { ApplyTypography } from '@hanzo/ui/primitives'
|
|
4
|
-
|
|
5
|
-
import type { SiteDef } from '../../site-def'
|
|
6
|
-
import Footer from '../footer'
|
|
7
|
-
import Header from '../header'
|
|
8
|
-
import Main from '../main'
|
|
9
|
-
|
|
10
|
-
import NotFoundMDX from './not-found-content.mdx'
|
|
11
|
-
|
|
12
|
-
const NotFound: React.FC<{
|
|
13
|
-
header?: boolean
|
|
14
|
-
siteDef: SiteDef
|
|
15
|
-
}> = ({
|
|
16
|
-
header=false,
|
|
17
|
-
siteDef
|
|
18
|
-
}) => (<>
|
|
19
|
-
{header && <Header siteDef={siteDef}/>}
|
|
20
|
-
<Main className='h-[100svh] sm:h-[700px] px-8 sm:px-10 ' headerSpace={header}>
|
|
21
|
-
<ApplyTypography className='mt-[200px] flex flex-col md:gap-8 '>
|
|
22
|
-
<NotFoundMDX />
|
|
23
|
-
</ApplyTypography>
|
|
24
|
-
</Main>
|
|
25
|
-
<Footer siteDef={siteDef}/>
|
|
26
|
-
</>)
|
|
27
|
-
|
|
28
|
-
export default NotFound
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import { ApplyTypography } from '@hanzo/ui/primitives'
|
|
4
|
+
|
|
5
|
+
import type { SiteDef } from '../../site-def'
|
|
6
|
+
import Footer from '../footer'
|
|
7
|
+
import Header from '../header'
|
|
8
|
+
import Main from '../main'
|
|
9
|
+
|
|
10
|
+
import NotFoundMDX from './not-found-content.mdx'
|
|
11
|
+
|
|
12
|
+
const NotFound: React.FC<{
|
|
13
|
+
header?: boolean
|
|
14
|
+
siteDef: SiteDef
|
|
15
|
+
}> = ({
|
|
16
|
+
header=false,
|
|
17
|
+
siteDef
|
|
18
|
+
}) => (<>
|
|
19
|
+
{header && <Header siteDef={siteDef}/>}
|
|
20
|
+
<Main className='h-[100svh] sm:h-[700px] px-8 sm:px-10 ' headerSpace={header}>
|
|
21
|
+
<ApplyTypography className='mt-[200px] flex flex-col md:gap-8 '>
|
|
22
|
+
<NotFoundMDX />
|
|
23
|
+
</ApplyTypography>
|
|
24
|
+
</Main>
|
|
25
|
+
<Footer siteDef={siteDef}/>
|
|
26
|
+
</>)
|
|
27
|
+
|
|
28
|
+
export default NotFound
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
### ...Huh?
|
|
2
|
-
#### Sorry, we're fresh out of those.
|
|
3
|
-
<br/>
|
|
4
|
-
#### ...try something from the [Home Page](/)?
|
|
5
|
-
|
|
1
|
+
### ...Huh?
|
|
2
|
+
#### Sorry, we're fresh out of those.
|
|
3
|
+
<br/>
|
|
4
|
+
#### ...try something from the [Home Page](/)?
|
|
5
|
+
|
package/components/scripts.tsx
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
|
|
3
|
-
import { useEffect } from 'react'
|
|
4
|
-
import { GoogleAnalytics } from '@next/third-parties/google'
|
|
5
|
-
import { FacebookPixel } from '../next/analytics'
|
|
6
|
-
|
|
7
|
-
// TODO: Rename this component, since Next has one called Script
|
|
8
|
-
const Scripts = () => {
|
|
9
|
-
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
document.body.style.display = 'flex'
|
|
12
|
-
}, [])
|
|
13
|
-
|
|
14
|
-
return (
|
|
15
|
-
<>
|
|
16
|
-
<FacebookPixel />
|
|
17
|
-
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
|
|
18
|
-
</>
|
|
19
|
-
)
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export {
|
|
23
|
-
Scripts as default
|
|
24
|
-
}
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import { useEffect } from 'react'
|
|
4
|
+
import { GoogleAnalytics } from '@next/third-parties/google'
|
|
5
|
+
import { FacebookPixel } from '../next/analytics'
|
|
6
|
+
|
|
7
|
+
// TODO: Rename this component, since Next has one called Script
|
|
8
|
+
const Scripts = () => {
|
|
9
|
+
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
document.body.style.display = 'flex'
|
|
12
|
+
}, [])
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<>
|
|
16
|
+
<FacebookPixel />
|
|
17
|
+
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
|
|
18
|
+
</>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export {
|
|
23
|
+
Scripts as default
|
|
24
|
+
}
|
package/components/tooltip.tsx
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
import { Tooltip as RTTooltip, type PlacesType } from 'react-tooltip'
|
|
4
|
-
|
|
5
|
-
const Tooltip: React.FC<{
|
|
6
|
-
select: string
|
|
7
|
-
text: string
|
|
8
|
-
position?: PlacesType // https://react-tooltip.com/docs/options
|
|
9
|
-
clx?: string
|
|
10
|
-
offset?: number
|
|
11
|
-
}> = ({
|
|
12
|
-
select,
|
|
13
|
-
text,
|
|
14
|
-
clx='',
|
|
15
|
-
position='bottom',
|
|
16
|
-
offset=2
|
|
17
|
-
}) => (
|
|
18
|
-
<RTTooltip
|
|
19
|
-
anchorSelect={select}
|
|
20
|
-
noArrow
|
|
21
|
-
opacity={1}
|
|
22
|
-
content={text}
|
|
23
|
-
place={position}
|
|
24
|
-
offset={offset}
|
|
25
|
-
delayShow={100}
|
|
26
|
-
delayHide={100}
|
|
27
|
-
className={'!opacity-100 !bg-level-2 border rounded-[3px] !px-1.5 !py-1 z-floating' + clx}
|
|
28
|
-
/>
|
|
29
|
-
)
|
|
30
|
-
|
|
31
|
-
export default Tooltip
|
|
1
|
+
'use client'
|
|
2
|
+
import React from 'react'
|
|
3
|
+
import { Tooltip as RTTooltip, type PlacesType } from 'react-tooltip'
|
|
4
|
+
|
|
5
|
+
const Tooltip: React.FC<{
|
|
6
|
+
select: string
|
|
7
|
+
text: string
|
|
8
|
+
position?: PlacesType // https://react-tooltip.com/docs/options
|
|
9
|
+
clx?: string
|
|
10
|
+
offset?: number
|
|
11
|
+
}> = ({
|
|
12
|
+
select,
|
|
13
|
+
text,
|
|
14
|
+
clx='',
|
|
15
|
+
position='bottom',
|
|
16
|
+
offset=2
|
|
17
|
+
}) => (
|
|
18
|
+
<RTTooltip
|
|
19
|
+
anchorSelect={select}
|
|
20
|
+
noArrow
|
|
21
|
+
opacity={1}
|
|
22
|
+
content={text}
|
|
23
|
+
place={position}
|
|
24
|
+
offset={offset}
|
|
25
|
+
delayShow={100}
|
|
26
|
+
delayHide={100}
|
|
27
|
+
className={'!opacity-100 !bg-level-2 border rounded-[3px] !px-1.5 !py-1 z-floating' + clx}
|
|
28
|
+
/>
|
|
29
|
+
)
|
|
30
|
+
|
|
31
|
+
export default Tooltip
|
package/environment.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
namespace NodeJS {
|
|
2
|
-
interface ProcessEnv {
|
|
3
|
-
NEXT_PUBLIC_GA_MEASUREMENT_ID: string;
|
|
4
|
-
NEXT_PUBLIC_FACEBOOK_PIXEL_ID: string;
|
|
5
|
-
}
|
|
1
|
+
namespace NodeJS {
|
|
2
|
+
interface ProcessEnv {
|
|
3
|
+
NEXT_PUBLIC_GA_MEASUREMENT_ID: string;
|
|
4
|
+
NEXT_PUBLIC_FACEBOOK_PIXEL_ID: string;
|
|
5
|
+
}
|
|
6
6
|
}
|
package/next/analytics/fpixel.ts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
declare global {
|
|
2
|
-
interface Window {
|
|
3
|
-
fbq: Function;
|
|
4
|
-
}
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
|
|
8
|
-
|
|
9
|
-
export const pageview = () => {
|
|
10
|
-
window.fbq('track', 'PageView')
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
// https://developers.facebook.com/docs/meta-pixel/reference
|
|
14
|
-
export const sendFBEvent = (name: string, options = {}) => {
|
|
15
|
-
window.fbq('track', name, options)
|
|
1
|
+
declare global {
|
|
2
|
+
interface Window {
|
|
3
|
+
fbq: Function;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
|
|
8
|
+
|
|
9
|
+
export const pageview = () => {
|
|
10
|
+
window.fbq('track', 'PageView')
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// https://developers.facebook.com/docs/meta-pixel/reference
|
|
14
|
+
export const sendFBEvent = (name: string, options = {}) => {
|
|
15
|
+
window.fbq('track', name, options)
|
|
16
16
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
declare global {
|
|
2
|
-
interface Window {
|
|
3
|
-
gtag: Function;
|
|
4
|
-
}
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
// https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtag
|
|
8
|
-
const sendGAEvent = (name: string, options = {}) => {
|
|
9
|
-
window.gtag('event', name, options)
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export {
|
|
13
|
-
sendGAEvent as default
|
|
1
|
+
declare global {
|
|
2
|
+
interface Window {
|
|
3
|
+
gtag: Function;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
// https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtag
|
|
8
|
+
const sendGAEvent = (name: string, options = {}) => {
|
|
9
|
+
window.gtag('event', name, options)
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export {
|
|
13
|
+
sendGAEvent as default
|
|
14
14
|
}
|
package/next/analytics/index.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { sendFBEvent } from './fpixel'
|
|
2
|
-
export { default as sendGAEvent } from './google-analytics'
|
|
3
|
-
export { FacebookPixel } from './pixel-analytics'
|
|
1
|
+
export { sendFBEvent } from './fpixel'
|
|
2
|
+
export { default as sendGAEvent } from './google-analytics'
|
|
3
|
+
export { FacebookPixel } from './pixel-analytics'
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
|
|
3
|
-
import { usePathname } from 'next/navigation'
|
|
4
|
-
import Script from 'next/script'
|
|
5
|
-
import { useEffect, useState } from 'react'
|
|
6
|
-
import * as fbq from './fpixel'
|
|
7
|
-
|
|
8
|
-
const FacebookPixelHead = () => {
|
|
9
|
-
return (
|
|
10
|
-
<noscript>
|
|
11
|
-
<img
|
|
12
|
-
height='1'
|
|
13
|
-
width='1'
|
|
14
|
-
style={{ display: 'none' }}
|
|
15
|
-
src={`https://www.facebook.com/tr?id=${fbq.FB_PIXEL_ID}&ev=PageView&noscript=1`}
|
|
16
|
-
/>
|
|
17
|
-
</noscript>
|
|
18
|
-
)
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const FacebookPixel = () => {
|
|
22
|
-
const [loaded, setLoaded] = useState(false)
|
|
23
|
-
const pathname = usePathname()
|
|
24
|
-
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
if (!loaded) return
|
|
27
|
-
|
|
28
|
-
fbq.pageview()
|
|
29
|
-
}, [pathname, loaded])
|
|
30
|
-
|
|
31
|
-
return (
|
|
32
|
-
<div>
|
|
33
|
-
<Script
|
|
34
|
-
id='fb-pixel'
|
|
35
|
-
strategy='afterInteractive'
|
|
36
|
-
onLoad={() => setLoaded(true)}
|
|
37
|
-
dangerouslySetInnerHTML={{
|
|
38
|
-
__html: `
|
|
39
|
-
!function(f,b,e,v,n,t,s)
|
|
40
|
-
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
|
|
41
|
-
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
|
|
42
|
-
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
|
|
43
|
-
n.queue=[];t=b.createElement(e);t.async=!0;
|
|
44
|
-
t.src=v;s=b.getElementsByTagName(e)[0];
|
|
45
|
-
s.parentNode.insertBefore(t,s)}(window, document,'script',
|
|
46
|
-
'https://connect.facebook.net/en_US/fbevents.js');
|
|
47
|
-
fbq('init', ${fbq.FB_PIXEL_ID});
|
|
48
|
-
`,
|
|
49
|
-
}}
|
|
50
|
-
/>
|
|
51
|
-
</div>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
54
|
-
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import { usePathname } from 'next/navigation'
|
|
4
|
+
import Script from 'next/script'
|
|
5
|
+
import { useEffect, useState } from 'react'
|
|
6
|
+
import * as fbq from './fpixel'
|
|
7
|
+
|
|
8
|
+
const FacebookPixelHead = () => {
|
|
9
|
+
return (
|
|
10
|
+
<noscript>
|
|
11
|
+
<img
|
|
12
|
+
height='1'
|
|
13
|
+
width='1'
|
|
14
|
+
style={{ display: 'none' }}
|
|
15
|
+
src={`https://www.facebook.com/tr?id=${fbq.FB_PIXEL_ID}&ev=PageView&noscript=1`}
|
|
16
|
+
/>
|
|
17
|
+
</noscript>
|
|
18
|
+
)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const FacebookPixel = () => {
|
|
22
|
+
const [loaded, setLoaded] = useState(false)
|
|
23
|
+
const pathname = usePathname()
|
|
24
|
+
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (!loaded) return
|
|
27
|
+
|
|
28
|
+
fbq.pageview()
|
|
29
|
+
}, [pathname, loaded])
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<div>
|
|
33
|
+
<Script
|
|
34
|
+
id='fb-pixel'
|
|
35
|
+
strategy='afterInteractive'
|
|
36
|
+
onLoad={() => setLoaded(true)}
|
|
37
|
+
dangerouslySetInnerHTML={{
|
|
38
|
+
__html: `
|
|
39
|
+
!function(f,b,e,v,n,t,s)
|
|
40
|
+
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
|
|
41
|
+
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
|
|
42
|
+
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
|
|
43
|
+
n.queue=[];t=b.createElement(e);t.async=!0;
|
|
44
|
+
t.src=v;s=b.getElementsByTagName(e)[0];
|
|
45
|
+
s.parentNode.insertBefore(t,s)}(window, document,'script',
|
|
46
|
+
'https://connect.facebook.net/en_US/fbevents.js');
|
|
47
|
+
fbq('init', ${fbq.FB_PIXEL_ID});
|
|
48
|
+
`,
|
|
49
|
+
}}
|
|
50
|
+
/>
|
|
51
|
+
</div>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
|
|
55
55
|
export {FacebookPixelHead, FacebookPixel}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import nextFonts from './load-and-return-lux-next-fonts-on-import'
|
|
2
|
-
import type NextFontDesc from './next-font-desc'
|
|
3
|
-
|
|
4
|
-
// These will be injected for <body> in app router app that uses our RootLayout
|
|
5
|
-
|
|
6
|
-
// First is assumed to be mapped to the default font and is injected into <body>
|
|
7
|
-
// as a normal tw font family class.
|
|
8
|
-
export default () => (
|
|
9
|
-
nextFonts.map(
|
|
10
|
-
(desc: NextFontDesc) => (desc.nextFont!.variable)
|
|
11
|
-
).join(' ') + ` font-${nextFonts[0].twName}`
|
|
12
|
-
)
|
|
1
|
+
import nextFonts from './load-and-return-lux-next-fonts-on-import'
|
|
2
|
+
import type NextFontDesc from './next-font-desc'
|
|
3
|
+
|
|
4
|
+
// These will be injected for <body> in app router app that uses our RootLayout
|
|
5
|
+
|
|
6
|
+
// First is assumed to be mapped to the default font and is injected into <body>
|
|
7
|
+
// as a normal tw font family class.
|
|
8
|
+
export default () => (
|
|
9
|
+
nextFonts.map(
|
|
10
|
+
(desc: NextFontDesc) => (desc.nextFont!.variable)
|
|
11
|
+
).join(' ') + ` font-${nextFonts[0].twName}`
|
|
12
|
+
)
|