@opexa/portal-components 0.0.40 → 0.0.42

package/dist/components/PortalProvider/PortalProvider.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface PortalProviderProps {
     googleAnalyticsId?: string;
     googleTagManagerId?: string;
@@ -6,4 +6,4 @@ export interface PortalProviderProps {
     facebookPixelId?: string;
     children: ReactNode;
 }
-export declare function PortalProvider({ children, ...props }: PortalProviderProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function PortalProvider({ children, facebookPixelId, googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, }: PortalProviderProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/PortalProvider/PortalProvider.js

@@ -1,15 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import {} from 'react';
 import { prefetchAccountQuery, prefetchSessionQuery, prefetchWalletQuery, } from '../../server/utils/index.js';
+import { FacebookPixel, GoogleRecaptcha } from '../../third-parties/index.js';
 import { getQueryClient } from '../../utils/index.js';
-import { PortalProvider__client } from './PortalProvider.client.js';
-export async function PortalProvider({ children, ...props }) {
+import { Providers } from './Providers.js';
+import { Snackbar } from './Snackbar.js';
+import { WebVitals } from './WebVitals.js';
+export async function PortalProvider({ children, facebookPixelId, googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, }) {
     const queryClient = getQueryClient();
     await Promise.all([
         prefetchSessionQuery(),
         prefetchAccountQuery(),
         prefetchWalletQuery(),
     ]);
-    return (_jsx(PortalProvider__client, { ...props, children: _jsx(HydrationBoundary, { state: dehydrate(queryClient), children: children }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Providers, { children: _jsx(HydrationBoundary, { state: dehydrate(queryClient), children: children }) }), _jsx(Snackbar, {}), _jsx(WebVitals, {}), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
 }

package/dist/components/PortalProvider/Providers.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function Providers({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/PortalProvider/Providers.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClientProvider } from '@tanstack/react-query';
+import dynamic from 'next/dynamic';
+import { getQueryClient } from '../../utils/index.js';
+const ThemeProvider = dynamic(() => import('next-themes').then((mod) => mod.ThemeProvider), {
+    ssr: false,
+});
+export function Providers({ children }) {
+    const queryClient = getQueryClient();
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemeProvider, { attribute: "class", storageKey: "WebPortalTheme", enableSystem: false, enableColorScheme: false, defaultTheme: "dark", disableTransitionOnChange: true, children: children }) }));
+}

package/dist/components/PortalProvider/Snackbar.d.ts

@@ -0,0 +1 @@
+export declare function Snackbar(): import("react/jsx-runtime").JSX.Element;

package/dist/components/PortalProvider/Snackbar.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast, Toaster } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { toaster } from '../../client/utils/index.js';
+import { AlertCircleIcon, XIcon } from '../../icons/index.js';
+export function Snackbar() {
+    return (_jsx(Toaster, { toaster: toaster, children: (toast) => (_jsxs(Toast.Root, { className: twMerge('group', 'p-xl', 'border', 'border-border-primary', 'bg-bg-primary-alt', 'flex', 'items-start', 'gap-lg', 'w-[21.438rem]', 'lg:w-[1200px]', 'max-w-full', 'rounded-xl', 'shadow-xs', 'h-[var(--height)]', 'z-[var(--z-index)]', 'scale-[var(--scale)]', 'opacity-[var(--opacity)]', '[translate:var(--x)_var(--y)_0]', 'transition-all', 'duration-300'), children: [_jsxs("div", { className: "flex grow flex-col gap-xl lg:flex-row lg:gap-lg", children: [_jsx("div", { className: twMerge('flex', 'items-center', 'justify-center', 'size-9.5', 'border-2', 'rounded-full', toast.type === 'success' && 'border-text-success-primary/15', toast.type === 'warning' && 'border-text-warning-primary/15', toast.type === 'error' && 'border-text-error-primary/15'), children: _jsx("div", { className: twMerge('flex', 'items-center', 'justify-center', 'size-7', 'border-2', 'rounded-full', toast.type === 'success' && 'border-text-success-primary/35', toast.type === 'warning' && 'border-text-warning-primary/35', toast.type === 'error' && 'border-text-error-primary/35'), children: _jsx(AlertCircleIcon, { className: twMerge('size-5', toast.type === 'success' && 'text-text-success-primary', toast.type === 'warning' && 'text-text-warning-primary', toast.type === 'error' && 'text-text-error-primary') }) }) }), _jsxs("div", { className: "grow text-sm leading-none", children: [_jsx(Toast.Title, { className: "text-text-secondary-700 font-semibold", children: toast.title
+                                        ? toast.title
+                                        : toast.type === 'error'
+                                            ? 'Error'
+                                            : toast.type === 'warning'
+                                                ? 'Warning'
+                                                : 'Success' }), _jsx(Toast.Description, { className: "text-text-tertiary-600 mt-xs", children: toast.description
+                                        ? toast.description
+                                        : toast.type === 'error'
+                                            ? 'Something went wrong.'
+                                            : toast.type === 'warning'
+                                                ? 'Please be cautious.'
+                                                : 'Operation completed successfully.' })] })] }), _jsx(Toast.CloseTrigger, { className: "text-text-secondary-700", children: _jsx(XIcon, { className: "size-5" }) })] }, toast.id)) }));
+}

package/dist/components/PortalProvider/WebVitals.d.ts

@@ -0,0 +1 @@
+export declare function WebVitals(): null;

package/dist/components/PortalProvider/WebVitals.js

@@ -0,0 +1,8 @@
+'use client';
+import { useReportWebVitals } from 'next/web-vitals';
+export function WebVitals() {
+    useReportWebVitals((metrics) => {
+        console.log(metrics);
+    });
+    return null;
+}

package/dist/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './Games';
 export * from './GamesSearch';
 export * from './JackpotCounter';
 export * from './Jackpots';
+export * from './KYC';
 export * from './Marquee';
 export * from './Messages';
 export * from './PortalProvider';

package/dist/components/index.js

@@ -16,6 +16,7 @@ export * from './Games/index.js';
 export * from './GamesSearch/index.js';
 export * from './JackpotCounter/index.js';
 export * from './Jackpots/index.js';
+export * from './KYC/index.js';
 export * from './Marquee/index.js';
 export * from './Messages/index.js';
 export * from './PortalProvider/index.js';

package/dist/icons/SpinnerIcon.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function SpinnerIcon(props) {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { fill: "currentColor", d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25" }), _jsx("path", { fill: "currentColor", d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", children: _jsx("animateTransform", { attributeName: "transform", dur: "0.75s", repeatCount: "indefinite", type: "rotate", values: "0 12 12;360 12 12" }) })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", className: "fill-bg-tertiary" }), _jsx("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "fill-text-brand-primary-600", children: _jsx("animateTransform", { attributeName: "transform", dur: "0.75s", repeatCount: "indefinite", type: "rotate", values: "0 12 12;360 12 12" }) })] }));
 }

package/dist/styles/theme.css

@@ -3,7 +3,7 @@
 
 @layer base {
   html {
-    @apply scheme-dark scroll-smooth;
+    @apply scheme-light dark:scheme-dark scroll-smooth;
   }
 
   body {
@@ -193,9 +193,11 @@
   --color-success-400: #47cd89;
   --color-success-700: #067647;
   --color-success-800: #085d3a;
+  --color-cyan-950: #0d2d3a;
 
   --color-button-primary-bg: #fac515;
   --color-button-primary-fg: #542c0d;
+  --color-button-primary-border: #fac515;
   --color-button-secondary-bg: #13161b;
   --color-button-secondary-fg: #fac515;
   --color-button-secondary-border: #fac515;
@@ -216,6 +218,8 @@
   --color-bg-disabled-subtle: #f9fafb;
   --color-bg-success-secondary: #079455;
   --color-bg-overlay: #22262f;
+  --color-bg-error-secondary: #d92d20;
+  --color-bg-warning-secondary: #dc6803;
 
   --color-text-brand: #feee95;
   --color-text-brand-primary-600: #eaaa08;
@@ -237,9 +241,11 @@
   --color-text-success-primary: #17b26a;
   --color-text-success-primary-600: #47cd89;
   --color-text-warning-primary: #f79009;
+  --color-text-warning-primary-600: #fdb022;
   --color-text-error-primary: #f04438;
   --color-text-featured-icon-light-success: #abefc6;
   --color-text-featured-icon-light-error: #fecdca;
+  --color-text-featured-icon-light-warning: #fedf89;
 
   --color-border-primary: #373a41;
   --color-border-secondary: #22262f;
@@ -351,6 +357,8 @@
   --animate-slide-in-right: slide-in-right 400ms cubic-bezier(0.05, 0.7, 0.1, 1);
   --animate-slide-out-right: slide-out-right 250ms
     cubic-bezier(0.3, 0, 0.8, 0.15);
+  --animate-slide-in-down: slide-in-down 400ms cubic-bezier(0.05, 0.7, 0.1, 1);
+  --animate-slide-out-down: slide-out-down 250ms cubic-bezier(0.3, 0, 0.8, 0.15);
   --animate-marquee: marquee 10s linear infinite forwards;
 
   @keyframes fade-in {
@@ -597,6 +605,24 @@
     }
   }
 
+  @keyframes slide-in-down {
+    from {
+      transform: translateY(-100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-down {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-100%);
+    }
+  }
+
   @keyframes marquee {
     to {
       transform: translateX(-100%);
@@ -624,3 +650,4 @@
 @custom-variant scrollbar (&::-webkit-scrollbar);
 @custom-variant scrollbar-thumb (&::-webkit-scrollbar-thumb);
 @custom-variant scrollbar-track (&::-webkit-scrollbar-track);
+@custom-variant dark (&:where(.dark, .dark *));