@01tech/sportsbook-web 0.64.0

package/README.md

@@ -0,0 +1 @@
+# @01tech/sportsbook-web

package/dist/index.d.ts

@@ -0,0 +1,238 @@
+interface EventMap {
+    [key: string]: unknown;
+}
+interface TypedEventListener<TEventMap extends EventMap> {
+    addEventListener<TEvent extends keyof TEventMap>(event: TEvent, listener: (...payload: TEventMap[TEvent] extends void ? [] : [TEventMap[TEvent]]) => void): void;
+    removeEventListener<TEvent extends keyof TEventMap>(event: TEvent, listener: (...args: unknown[]) => void): void;
+}
+
+type SportsFramePlatformType = 'mobile' | 'tablet' | 'desktop';
+type SportsFrameColorSchemeType = 'light' | 'dark';
+type SportsFrameColorSchemeModalType = SportsFrameColorSchemeType | 'auto';
+interface SportsFrameNotificationEventPayload {
+    variant: 'success' | 'info' | 'error';
+    title: string;
+    text?: string;
+}
+interface SportsFrameModalState {
+    opened: boolean;
+}
+interface SportsFrameImageVariant {
+    url: string;
+    /**
+     * Mostly used to avoid unnecessary layout shift; in most cases, recommended to use.
+     */
+    height?: number;
+    width?: number;
+}
+type SportsFrameCoefFormat = 'decimal' | 'fractional' | 'american' | 'hong_kong' | 'indonesian' | 'malay';
+
+interface ExperimentPayload {
+    /**
+     * The key of the experiment.
+     */
+    key?: string;
+    /**
+     * The value of the experiment
+     */
+    value?: string;
+}
+interface SportFrameExperimentAdapter {
+    get(name: string): ExperimentPayload | undefined;
+    exposure(name: string): void;
+}
+
+interface SportsFrameNavigationModeSync {
+    type: 'sync';
+    initialPath: string;
+    push(path: string): Promise<void>;
+    replace(path: string): Promise<void>;
+    back(): void;
+    forward(): void;
+}
+interface SportsFrameNavigationModeAuto {
+    type: 'auto';
+}
+type SportsFrameNavigation = SportsFrameNavigationModeSync | SportsFrameNavigationModeAuto;
+
+interface SportsFrameThemeConfig {
+    readonly preset?: {
+        readonly name: string;
+        readonly env?: 'prod' | 'preprod';
+    };
+}
+interface SportsFrameBonusWalletOptions {
+    readonly bonusId: string;
+    readonly amount: number;
+    /**
+     * The bonus has its own currency and does not use the system-defined currency.
+     */
+    readonly currencyCode: string;
+}
+interface SportsFrameGraphicsConfig {
+    readonly betslipEmpty?: SportsFrameImageVariant;
+    readonly betslipSuccess?: SportsFrameImageVariant;
+    readonly freebetPromoBanner?: SportsFrameImageVariant;
+    readonly watermarkLogo?: SportsFrameImageVariant;
+}
+interface SportsFrameFeaturesConfig {
+    readonly sharedBet?: boolean;
+    readonly broadcast?: boolean;
+    /**
+     * Enables the ability to switch themes within the frame.
+     * This is a stateless setting — you must manually subscribe to theme change events
+     * and update the corresponding parameter inside the frame accordingly.
+     */
+    readonly colorThemeSwitcher?: boolean;
+    readonly trends?: boolean;
+}
+interface SportsFrameAppearanceConfig {
+    /**
+     * z-index values for different floating UI elements.
+     * Accepts either a number or a string. The string can be a raw value (like '1000'),
+     * a CSS variable (e.g., 'var(--z-modal)'), or any custom value as needed.
+     * Used to control the stacking order of UI elements like popups, modals, and tooltips.
+     */
+    readonly index?: {
+        /**
+         * z-index for popup elements.
+         */
+        readonly popup?: number | string;
+        /**
+         * z-index for modal windows.
+         */
+        readonly modal?: number | string;
+        /**
+         * z-index for tooltip components.
+         */
+        readonly tooltip?: number | string;
+    };
+    /**
+     * Safe area offsets used when positioning floating elements that stick to the
+     * top or bottom edges of the screen. Helps ensure elements like top popups, match score board
+     * or bottom-fixed buttons (e.g. a betslip trigger above a tab bar)
+     */
+    readonly safeArea?: {
+        /**
+         * Safe spacing from the top edge — useful for floating elements that appear from the top.
+         */
+        readonly top?: number | string;
+        /**
+         * Safe spacing from the bottom edge — useful for sticky buttons or
+         * bottom-aligned elements that must avoid overlapping with the tab bar or similar UI.
+         */
+        readonly bottom?: number | string;
+    };
+}
+interface SportsFrameInitOptions {
+    /**
+     * Api Url
+     */
+    baseUrl: string;
+    navigation?: SportsFrameNavigation;
+    apiUrl: string;
+    cdnUrl?: string;
+    partnerId: string;
+    token?: string;
+    authed: boolean;
+    languageCode?: string;
+    rtl?: boolean;
+    currencyCode?: string;
+    balanceAmount?: number;
+    bonusWallet?: SportsFrameBonusWalletOptions;
+    platform: SportsFramePlatformType;
+    colorScheme?: SportsFrameColorSchemeType;
+    colorSchemeModal?: SportsFrameColorSchemeModalType;
+    theme?: SportsFrameThemeConfig;
+    inert?: boolean;
+    appearance?: SportsFrameAppearanceConfig;
+    features?: SportsFrameFeaturesConfig;
+    graphics?: SportsFrameGraphicsConfig;
+    shareLinkBehavior?: 'native' | 'manual' | 'hidden';
+    defaultCoefFormat?: SportsFrameCoefFormat;
+}
+/**
+ * @private
+ */
+interface SportFrameTrackEventPayload {
+    event: string;
+    eventCat: string;
+    eventName: string;
+    payload: Record<string, string | number>;
+}
+/**
+ * Так как это конфигурация для внутреннего использования, все параметры должны быть опциональные
+ *   данный конфиг не должен попасть в публичный sdk
+ *
+ * @private
+ */
+interface SportFrameInitOptionsInternal extends SportsFrameInitOptions {
+    _debug?: boolean;
+    _trackEvent?: (payload: SportFrameTrackEventPayload) => void;
+    _experiments?: SportFrameExperimentAdapter;
+    _monitoring?: {
+        error?: boolean;
+    };
+    /**
+     * Configuration for proxying backend images
+     * prefix: '/imageproxy/path' will transform 'https://somecdn.com/flag.png'
+     * to '/imageproxy/path/https://somecdn.com/flag.png'
+     */
+    _contentResourcesPrefix?: string;
+    /**
+     * @deprecated
+     *
+     * frontend/frontend backward compatibility
+     */
+    assetsUrl?: string;
+    __sdk?: {
+        cssStyleUrl: string;
+        version: string;
+        stage: string;
+    };
+}
+
+type SportFrameEvents = {
+    ready: void;
+    error: Error;
+    login: 'bets' | 'wheel' | undefined;
+    deposit: void;
+    renewToken: void;
+    notify: SportsFrameNotificationEventPayload;
+    setModalState: SportsFrameModalState;
+    shareLink: string;
+    setColorScheme: SportsFrameColorSchemeType;
+};
+/**
+ * @public
+ */
+interface SportFrameApp extends TypedEventListener<SportFrameEvents> {
+    mount(el: HTMLElement): void;
+    destroy(): void;
+    setToken(token: string | undefined): void;
+    setPlatform(platform: SportsFramePlatformType): void;
+    setLanguageCode(languageCode: string | undefined): void;
+    setRtl(rtl: boolean | undefined): void;
+    setColorScheme(colorScheme: SportsFrameColorSchemeType): void;
+    setColorSchemeModal(colorScheme: SportsFrameColorSchemeModalType): void;
+    setAuthed(authed: boolean): void;
+    setInert(inert: boolean): void;
+    setCurrencyCode(currencyCode: string | undefined): void;
+    setBalanceAmount(balance: number | undefined): void;
+    setBonusWallet(wallet: SportsFrameBonusWalletOptions | undefined): void;
+    setAppearance(appearance: SportsFrameAppearanceConfig): void;
+    navigateTo(path: string, type?: 'push' | 'replace'): void;
+}
+
+type Options = {
+    cdnUrl?: string;
+};
+declare function loadAppModule(cdnUrl: string, version: string): Promise<{
+    createSportsbookFrame: (config: SportFrameInitOptionsInternal) => SportFrameApp;
+}>;
+declare function loadSportsbookFrameModule(options: Options): Promise<{
+    createApp: (config: SportsFrameInitOptions) => SportFrameApp;
+}>;
+
+export { loadAppModule, loadSportsbookFrameModule };
+export type { SportFrameApp };

package/dist/index.js

@@ -0,0 +1,49 @@
+async function i(s) {
+  const e = `${s.cdnUrl}/manifest/v1/stable/sportsbook/manifest.json`, t = await fetch(e);
+  if (!t.ok)
+    throw new Error(`Failed to fetch manifest: ${t.status} ${t.statusText}`);
+  return await t.json();
+}
+const l = "1.0.0-rc.1", m = "https://01-sports-frame-cdn.com";
+async function p(s, e) {
+  return {
+    createSportsbookFrame: (await import(
+      /* @vite-ignore */
+      `${s}/sportsbook/v1/core/v/${e}/esm/entry.js`
+    )).createSportsbookFrame
+  };
+}
+async function f(s) {
+  const e = s, { cdnUrl: t = m } = e;
+  let o;
+  try {
+    o = (await i({
+      cdnUrl: t,
+      stage: "stable"
+    })).v1.main.version;
+  } catch (r) {
+    throw console.error("Error loading manifest:", r), r;
+  }
+  console.log("Version:", o);
+  const a = `${t}/sportsbook/v1/core/v/${o}/esm/style.css`, c = await p(t, o);
+  return {
+    createApp: (r) => {
+      const n = r;
+      return c.createSportsbookFrame({
+        ...n,
+        // TODO: add path resolver
+        assetsUrl: n.cdnUrl + "/sportsbook/v1/static/",
+        cdnUrl: n.cdnUrl ?? t,
+        __sdk: {
+          stage: "stable",
+          version: l,
+          cssStyleUrl: a
+        }
+      });
+    }
+  };
+}
+export {
+  p as loadAppModule,
+  f as loadSportsbookFrameModule
+};

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@01tech/sportsbook-web",
+  "private": false,
+  "version": "0.64.0",
+  "type": "module",
+  "scripts": {
+    "sdk:build:prepare": "rm -rf ./dist",
+    "sdk:build:dts": "rollup -c rollup.dts.config.mjs",
+    "sdk:build:js": "NODE_ENV=production vite build --config vite.config.ts",
+    "sdk:build": "npm run sdk:build:prepare && npm run sdk:build:dts && npm run sdk:build:js",
+    "sdk:dev": "NODE_ENV=development vite build --watch --config vite.config.ts"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  }
+}