@funkit/connect 3.5.0 → 4.0.0

package/dist/providers/FunkitMeshProvider.d.ts

@@ -1,24 +1,24 @@
-import { LinkPayload } from '@meshconnect/web-link-sdk';
+import { type LinkPayload } from '@meshconnect/web-link-sdk';
 import React from 'react';
-import { MeshExchanges } from '../utils/mesh';
+import { MeshExchangeType } from '~/consts/mesh';
 export declare function FunkitMeshProvider({ children }: any): React.JSX.Element;
 export declare function useFunkitMesh(): {
-    unlinkBrokerage: (exchange: MeshExchanges) => void;
-    getActiveConnection: (brokerage: MeshExchanges) => (LinkPayload & {
+    unlinkBrokerage: (brokerType: MeshExchangeType) => void;
+    getActiveConnection: (brokerType: MeshExchangeType) => (LinkPayload & {
         connectionExpiresAtMs: number;
-    }) | null;
+    }) | null | undefined;
     getFirstActiveConnection: () => {
         accessToken?: import("@meshconnect/web-link-sdk").AccessTokenPayload;
         delayedAuth?: import("@meshconnect/web-link-sdk").DelayedAuthPayload;
-        connectionExpiresAtMs: number;
-        brokerage: MeshExchanges;
+        connectionExpiresAtMs?: number | undefined;
+        brokerType: MeshExchangeType;
     } | null;
 };
 interface FunkitMeshHook {
     onBeforeConnect(): void;
     onConnected(data: {
         brokerData: LinkPayload;
-        brokerage: MeshExchanges;
+        brokerType: MeshExchangeType;
     } | null): void;
     onMeshModalClose(): void;
 }
@@ -27,5 +27,5 @@ interface FunkitMeshHook {
  * capturing the latest value in render.
  * useMeshConnect will return a stable function.
  * */
-export declare function useMeshConnect(hooks: FunkitMeshHook): (brokerage: MeshExchanges) => Promise<void>;
+export declare function useMeshConnect(hooks: FunkitMeshHook): (brokerType: MeshExchangeType) => Promise<void>;
 export {};

package/dist/providers/FunkitMoonpayProvider.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { FunButtonProps } from '../components/FunButton/FunButton';
+import React, { type ReactNode } from 'react';
+import type { FunButtonProps } from '../components/FunButton/FunButton';
 export declare function FunkitMoonpayProvider({ children, debug, }: {
     children: ReactNode;
     debug: boolean;

package/dist/providers/FunkitProvider.d.ts

@@ -1,20 +1,16 @@
-import { QueryClient } from '@tanstack/react-query';
-import React, { ReactNode } from 'react';
+import { type QueryClient } from '@tanstack/react-query';
+import React, { type ReactNode } from 'react';
 import type { Chain } from 'wagmi/chains';
-import { CreateFunkitWagmiConfigParameters } from '../config/getDefaultConfig';
-import { ThemeVars } from '../css/sprinkles.css';
-import { Locale } from '../locales';
-import { DisclaimerComponent } from './AppContext';
-import { AvatarComponent } from './AvatarContext';
-import { FunkitConfig } from './FunkitConfigContext';
-import { ModalSizes } from './ModalSizeContext';
+import { type CreateFunkitWagmiConfigParameters } from '../config/getDefaultConfig';
+import type { Locale } from '../locales';
+import { type DisclaimerComponent } from './AppContext';
+import { type AvatarComponent } from './AvatarContext';
+import { type FunkitConfig } from './FunkitConfigContext';
+import { type Theme } from './FunkitThemeProvider';
+import { type ModalSizes } from './ModalSizeContext';
 export declare const useThemeRootProps: () => {
     "data-rk": string;
 };
-export type Theme = ThemeVars | {
-    lightMode: ThemeVars;
-    darkMode: ThemeVars;
-};
 interface FunkitProviderInnerProps {
     initialChain?: number;
     id?: string;

package/dist/providers/FunkitThemeProvider.d.ts

@@ -1,148 +1,17 @@
 import React from 'react';
-import { ThemeVars } from '../css/sprinkles.css';
-export declare const defaultTheme: {
-    colors: {
-        accentColor: string;
-        accentColorForeground: string;
-        actionButtonBorder: string;
-        connectButtonBackground: string;
-        connectButtonBackgroundError: string;
-        connectButtonText: string;
-        connectButtonTextError: string;
-        connectionIndicator: string;
-        error: string;
-        errorBackground: string;
-        errorBorder: string;
-        generalBorder: string;
-        generalBorderDim: string;
-        menuItemBackground: string;
-        selectedOptionBorder: string;
-        paymentOptionBorderDisabled: string;
-        standby: string;
-        success: string;
-        loadingBase: string;
-        loadingAccent: string;
-        chainIconBorder: string;
-        modalBackdrop: string;
-        modalBackground: string;
-        modalBorder: string;
-        notificationPrimary: string;
-        offBackground: string;
-        hoverState: string;
-        offBackgroundInverse: string;
-        lightStroke: string;
-        mediumStroke: string;
-        strokeColor: string;
-        dydxSwitchActiveBackground: string;
-        primaryText: string;
-        secondaryText: string;
-        tertiaryText: string;
-        textSelection: string;
-        inputBackground: string;
-        inputBorderBase: string;
-        inputBorderHover: string;
-        actionColor: string;
-        actionColorHover: string;
-        actionColorDisabled: string;
-        buttonPrimary: string;
-        buttonDisabled: string;
-        buttonWarning: string;
-        buttonSuccess: string;
-        buttonTextWarning: string;
-        buttonTextSuccess: string;
-        buttonTextPrimary: string;
-        buttonTextDisabled: string;
-        transparent: string;
-        buttonBackgroundTertiary: string;
-        buttonBackgroundHoverTertiary: string;
-        buttonTextTertiary: string;
-        buttonTextDisabledTertiary: string;
-        buttonStrokeTertiary: string;
-        buttonBackground: string;
-        buttonBackgroundHover: string;
-        buttonBackgroundDisabled: string;
-        buttonStroke: string;
-        buttonTextSecondaryDisabled: string;
-        buttonTextSecondary: string;
-        buttonIconBackgroundHover: string;
-        buttonIconBackgroundPressed: string;
-        buttonIconStroke: string;
-    };
-    shadows: {
-        connectButton: string;
-        dialog: string;
-        selectedOption: string;
-        selectedWallet: string;
-        button: string;
-    };
-    moonpayTheme: string;
-    fontSize: {
-        '8': {
-            fontSize: string;
-            lineHeight: string;
-        };
-        '10': {
-            fontSize: string;
-            lineHeight: string;
-        };
-        '12': {
-            fontSize: string;
-            lineHeight: string;
-        };
-        '13': {
-            fontSize: string;
-            lineHeight: string;
-        };
-        '14': {
-            fontSize: string;
-            lineHeight: string;
-        };
-        '16': {
-            fontSize: string;
-            lineHeight: string;
-        };
-        '18': {
-            fontSize: string;
-            lineHeight: string;
-        };
-        '20': {
-            fontSize: string;
-            lineHeight: string;
-        };
-        '23': {
-            fontSize: string;
-            lineHeight: string;
-        };
-        '40': {
-            fontSize: string;
-            lineHeight: string;
-        };
-        '57': {
-            fontSize: string;
-            lineHeight: string;
-        };
-    };
-    fontWeight: {
-        regular: string;
-        medium: string;
-        semibold: string;
-        bold: string;
-        heavy: string;
-    };
-    fonts: {
-        body: string;
-    };
-    radii: {
-        actionButton: string;
-        connectButton: string;
-        menuButton: string;
-        modal: string;
-        modalMobile: string;
-    };
-    blurs: {
-        modalOverlay: string;
-    };
+import type { ThemeVars } from '../css/sprinkles.css';
+type ColorScheme = 'light' | 'dark';
+export type ThemeColorScheme = ColorScheme | undefined;
+export type SystemColorScheme = ColorScheme | undefined;
+export type ThemeSet = {
+    lightTheme: ThemeVars;
+    darkTheme: ThemeVars;
 };
+export type Theme = ThemeVars | ThemeSet;
+export interface FunkitThemeProps {
+    children: React.ReactNode;
+    theme?: Theme;
+}
 export declare const ThemeIdContext: React.Context<string | undefined>;
 export declare const createThemeRootProps: (id: string | undefined) => {
     "data-rk": string;
@@ -151,12 +20,8 @@ export declare const createThemeRootSelector: (id: string | undefined) => string
 export declare const useThemeRootProps: () => {
     "data-rk": string;
 };
-export type Theme = ThemeVars | {
-    lightMode: ThemeVars;
-    darkMode: ThemeVars;
-};
 export declare const useActiveTheme: () => {
-    active: {
+    activeTheme: {
         colors: {
             accentColor: string;
             accentColorForeground: string;
@@ -293,14 +158,17 @@ export declare const useActiveTheme: () => {
             selectedOption: string;
             selectedWallet: string;
             button: string;
+            tooltip: string;
         };
         blurs: {
             modalOverlay: string;
         };
         moonpayTheme: string;
     };
+    /** Overrides the currently active `theme` with disregard to the `theme` provided to the `FunkitProvider`, ie. `toggleTheme` will switch to the `theme` provided to the `FunkitProvider`, not the theme set by `setTheme` */
     setTheme: (theme: ThemeVars) => void;
-    lightMode: {
+    /** Returns the `light` theme as long as a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it will be returned as `lightTheme` and `darkTheme` making them the same */
+    lightTheme: {
         colors: {
             accentColor: string;
             accentColorForeground: string;
@@ -437,13 +305,15 @@ export declare const useActiveTheme: () => {
             selectedOption: string;
             selectedWallet: string;
             button: string;
+            tooltip: string;
         };
         blurs: {
             modalOverlay: string;
         };
         moonpayTheme: string;
     } | null | undefined;
-    darkMode: {
+    /** Returns the `dark` theme as long as a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it will be returned as `darkTheme` and `lightTheme` making them the same */
+    darkTheme: {
         colors: {
             accentColor: string;
             accentColorForeground: string;
@@ -580,16 +450,17 @@ export declare const useActiveTheme: () => {
             selectedOption: string;
             selectedWallet: string;
             button: string;
+            tooltip: string;
         };
         blurs: {
             modalOverlay: string;
         };
         moonpayTheme: string;
     } | null | undefined;
-    toggleTheme: () => void;
+    /** Toggles between `light` and `dark` themes as long as they were passed to the `FunkitProvider`, if only a single theme object was passed toggling will be disabled */
+    toggleTheme: (colorScheme?: ThemeColorScheme) => void;
+    /** Returns an indication whether a `light` or a `dark` theme should be currently active, has meaning only if a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it reflects the system color scheme */
+    themeColorScheme: ThemeColorScheme;
 };
-export interface FunkitThemeProps {
-    children: React.ReactNode;
-    theme?: Theme;
-}
-export declare const FunkitThemeProvider: ({ children, theme, }: FunkitThemeProps) => React.JSX.Element;
+export declare const FunkitThemeProvider: ({ children, theme: themeOrThemeSet, }: FunkitThemeProps) => React.JSX.Element;
+export {};

package/dist/providers/FunkitWeb2Provider.d.ts

@@ -1,6 +1,6 @@
-import { OAuthProviderType } from '@privy-io/js-sdk-core';
-import React, { ReactNode } from 'react';
-import { FunkitUserInfoBase, PrivyLoginMethod } from '../consts/funkit';
+import { type OAuthProviderType } from '@privy-io/js-sdk-core';
+import React, { type ReactNode } from 'react';
+import { type FunkitUserInfoBase, PrivyLoginMethod } from '../consts/funkit';
 export declare const ERROR_MESSAGES: {
     readonly MISSING_LOGIN_CODES: "Missing login codes";
     readonly INVALID_LOGIN_METHOD: "Invalid login method";

package/dist/providers/GeneralWalletProvider.d.ts

@@ -1,8 +1,8 @@
-import { AssetBalanceInfo } from '@funkit/api-base';
+import type { AssetBalanceInfo } from '@funkit/api-base';
 import { Auth, FunWallet } from '@funkit/core';
 import React from 'react';
-import { Address } from 'viem';
-import { FunkitUserInfo } from '../consts/funkit';
+import type { Address } from 'viem';
+import { type FunkitUserInfo } from '../consts/funkit';
 export interface KnownAssetBalanceInfo extends AssetBalanceInfo {
     price: number;
     totalUsdValue: number;

package/dist/providers/I18nContext.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { i18n, Locale } from '../locales';
+import React, { type ReactNode } from 'react';
+import { type Locale, i18n } from '../locales';
 export declare const I18nContext: React.Context<{
     i18n: typeof i18n;
 }>;

package/dist/providers/ModalContext.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { SelectedHomeTab } from '../modals/ProfileDetails/FunProfileViews/Home';
+import React, { type ReactNode } from 'react';
+import type { SelectedHomeTab } from '../modals/ProfileDetails/FunProfileViews/Home';
 interface ModalProviderProps {
     children: ReactNode;
 }

package/dist/providers/ModalSizeContext.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export declare const ModalSizeOptions: {
     readonly COMPACT: "compact";
     readonly WIDE: "wide";

package/dist/providers/ShowBalanceContext.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { ResponsiveValue } from '../css/sprinkles.css';
+import React, { type ReactNode } from 'react';
+import type { ResponsiveValue } from '../css/sprinkles.css';
 interface ShowBalanceContextValue {
     showBalance: ResponsiveValue<boolean> | undefined;
     setShowBalance: (showBalance: ResponsiveValue<boolean>) => void;

package/dist/providers/provideFunkitConnectChains.d.ts

@@ -1,4 +1,4 @@
-import { FunkitConnectChain } from './FunkitConnectChainContext';
+import type { FunkitConnectChain } from './FunkitConnectChainContext';
 export declare const chainMetadataById: {
     [k: string]: {
         name?: string;

package/dist/themes/baseTheme.d.ts

@@ -1,4 +1,6 @@
-import { ThemeVars } from '../css/sprinkles.css';
+import type { ThemeVars } from '../css/sprinkles.css';
+/** System font fallbacks */
+export declare const systemFontStack = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
 declare const fontStacks: {
     readonly rounded: "SFRounded, ui-rounded, \"SF Pro Rounded\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
     readonly system: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";

package/dist/themes/baseTheme.js

@@ -1,7 +1,9 @@
 "use client";
 import {
-  baseTheme
-} from "../chunk-BY224HGT.js";
+  baseTheme,
+  systemFontStack
+} from "../chunk-OMAXDH7G.js";
 export {
-  baseTheme
+  baseTheme,
+  systemFontStack
 };

package/dist/themes/darkTheme.d.ts

@@ -1,147 +1,6 @@
-import { AccentColor, AccentColorPreset, ThemeOptions } from './baseTheme';
+import type { ThemeVars } from '~/css/sprinkles.css';
+import { type AccentColor, type AccentColorPreset, type ThemeOptions } from './baseTheme';
 export declare const darkTheme: {
-    ({ accentColor, accentColorForeground, customColors, customShadows, ...baseThemeOptions }?: ThemeOptions): {
-        colors: {
-            accentColor: string;
-            accentColorForeground: string;
-            actionButtonBorder: string;
-            connectButtonBackground: string;
-            connectButtonBackgroundError: string;
-            connectButtonText: string;
-            connectButtonTextError: string;
-            connectionIndicator: string;
-            error: string;
-            errorBackground: string;
-            errorBorder: string;
-            generalBorder: string;
-            generalBorderDim: string;
-            menuItemBackground: string;
-            selectedOptionBorder: string;
-            paymentOptionBorderDisabled: string;
-            standby: string;
-            success: string;
-            loadingBase: string;
-            loadingAccent: string;
-            chainIconBorder: string;
-            modalBackdrop: string;
-            modalBackground: string;
-            modalBorder: string;
-            notificationPrimary: string;
-            offBackground: string;
-            hoverState: string;
-            offBackgroundInverse: string;
-            lightStroke: string;
-            mediumStroke: string;
-            strokeColor: string;
-            dydxSwitchActiveBackground: string;
-            primaryText: string;
-            secondaryText: string;
-            tertiaryText: string;
-            textSelection: string;
-            inputBackground: string;
-            inputBorderBase: string;
-            inputBorderHover: string;
-            actionColor: string;
-            actionColorHover: string;
-            actionColorDisabled: string;
-            buttonPrimary: string;
-            buttonDisabled: string;
-            buttonWarning: string;
-            buttonSuccess: string;
-            buttonTextWarning: string;
-            buttonTextSuccess: string;
-            buttonTextPrimary: string;
-            buttonTextDisabled: string;
-            transparent: string;
-            buttonBackgroundTertiary: string;
-            buttonBackgroundHoverTertiary: string;
-            buttonTextTertiary: string;
-            buttonTextDisabledTertiary: string;
-            buttonStrokeTertiary: string;
-            buttonBackground: string;
-            buttonBackgroundHover: string;
-            buttonBackgroundDisabled: string;
-            buttonStroke: string;
-            buttonTextSecondaryDisabled: string;
-            buttonTextSecondary: string;
-            buttonIconBackgroundHover: string;
-            buttonIconBackgroundPressed: string;
-            buttonIconStroke: string;
-        };
-        shadows: {
-            connectButton: string;
-            dialog: string;
-            selectedOption: string;
-            selectedWallet: string;
-            button: string;
-        };
-        moonpayTheme: string;
-        fontSize: {
-            '8': {
-                fontSize: string;
-                lineHeight: string;
-            };
-            '10': {
-                fontSize: string;
-                lineHeight: string;
-            };
-            '12': {
-                fontSize: string;
-                lineHeight: string;
-            };
-            '13': {
-                fontSize: string;
-                lineHeight: string;
-            };
-            '14': {
-                fontSize: string;
-                lineHeight: string;
-            };
-            '16': {
-                fontSize: string;
-                lineHeight: string;
-            };
-            '18': {
-                fontSize: string;
-                lineHeight: string;
-            };
-            '20': {
-                fontSize: string;
-                lineHeight: string;
-            };
-            '23': {
-                fontSize: string;
-                lineHeight: string;
-            };
-            '40': {
-                fontSize: string;
-                lineHeight: string;
-            };
-            '57': {
-                fontSize: string;
-                lineHeight: string;
-            };
-        };
-        fontWeight: {
-            regular: string;
-            medium: string;
-            semibold: string;
-            bold: string;
-            heavy: string;
-        };
-        fonts: {
-            body: string;
-        };
-        radii: {
-            actionButton: string;
-            connectButton: string;
-            menuButton: string;
-            modal: string;
-            modalMobile: string;
-        };
-        blurs: {
-            modalOverlay: string;
-        };
-    };
+    ({ accentColor, accentColorForeground, customColors, customShadows, ...baseThemeOptions }?: ThemeOptions): ThemeVars;
     accentColors: Record<AccentColorPreset, AccentColor>;
 };

package/dist/themes/darkTheme.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   darkTheme
-} from "../chunk-XWW5QOD4.js";
-import "../chunk-BY224HGT.js";
+} from "../chunk-LTOE4GIY.js";
+import "../chunk-OMAXDH7G.js";
 export {
   darkTheme
 };