@varity-labs/ui-kit 2.0.0-alpha.1

package/dist/providers/VarityProvider.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { DEFAULT_CHAIN, SUPPORTED_CHAINS } from '../config/chains';
+export interface VarityProviderProps {
+    children: ReactNode;
+    clientId?: string;
+    activeChain?: typeof DEFAULT_CHAIN;
+    supportedChains?: typeof SUPPORTED_CHAINS;
+    theme?: 'light' | 'dark' | 'system';
+}
+/**
+ * Main provider wrapper for Varity applications
+ *
+ * This component wraps your application with all necessary Web3 providers:
+ * - Thirdweb client for wallet connections
+ * - Chain configuration for Varity L3
+ * - Theme management (light/dark mode)
+ *
+ * @example
+ * ```tsx
+ * import { VarityProvider } from '@varity-labs/ui-kit';
+ *
+ * function App() {
+ *   return (
+ *     <VarityProvider>
+ *       <YourApp />
+ *     </VarityProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function VarityProvider({ children, clientId, activeChain, supportedChains, theme, }: VarityProviderProps): JSX.Element;
+//# sourceMappingURL=VarityProvider.d.ts.map

package/dist/providers/VarityProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VarityProvider.d.ts","sourceRoot":"","sources":["../../src/providers/VarityProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAsB,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIvF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,aAAa,CAAC;IACnC,eAAe,CAAC,EAAE,OAAO,gBAAgB,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAA6B,EAC7B,WAA2B,EAC3B,eAAkC,EAClC,KAAgB,GACjB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAsCnC"}

package/dist/providers/VarityProvider.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ThirdwebProvider } from 'thirdweb/react';
+import { createThirdwebClient } from 'thirdweb';
+import { THIRDWEB_CLIENT_ID, DEFAULT_CHAIN, SUPPORTED_CHAINS } from '../config/chains';
+/**
+ * Main provider wrapper for Varity applications
+ *
+ * This component wraps your application with all necessary Web3 providers:
+ * - Thirdweb client for wallet connections
+ * - Chain configuration for Varity L3
+ * - Theme management (light/dark mode)
+ *
+ * @example
+ * ```tsx
+ * import { VarityProvider } from '@varity-labs/ui-kit';
+ *
+ * function App() {
+ *   return (
+ *     <VarityProvider>
+ *       <YourApp />
+ *     </VarityProvider>
+ *   );
+ * }
+ * ```
+ */
+export function VarityProvider({ children, clientId = THIRDWEB_CLIENT_ID, activeChain = DEFAULT_CHAIN, supportedChains = SUPPORTED_CHAINS, theme = 'system', }) {
+    // Create Thirdweb client
+    const client = React.useMemo(() => createThirdwebClient({ clientId }), [clientId]);
+    // Apply theme to document
+    React.useEffect(() => {
+        const root = document.documentElement;
+        if (theme === 'dark') {
+            root.classList.add('dark');
+        }
+        else if (theme === 'light') {
+            root.classList.remove('dark');
+        }
+        else {
+            // System theme
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            const updateTheme = () => {
+                if (mediaQuery.matches) {
+                    root.classList.add('dark');
+                }
+                else {
+                    root.classList.remove('dark');
+                }
+            };
+            updateTheme();
+            mediaQuery.addEventListener('change', updateTheme);
+            return () => mediaQuery.removeEventListener('change', updateTheme);
+        }
+    }, [theme]);
+    return (React.createElement(ThirdwebProvider, null, children));
+}
+//# sourceMappingURL=VarityProvider.js.map

package/dist/providers/VarityProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VarityProvider.js","sourceRoot":"","sources":["../../src/providers/VarityProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAYvF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,GAAG,kBAAkB,EAC7B,WAAW,GAAG,aAAa,EAC3B,eAAe,GAAG,gBAAgB,EAClC,KAAK,GAAG,QAAQ,GACI;IACpB,yBAAyB;IACzB,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,QAAQ,EAAE,CAAC,EACxC,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,0BAA0B;IAC1B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QAEtC,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;YACrB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC;aAAM,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,eAAe;YACf,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;YACrE,MAAM,WAAW,GAAG,GAAG,EAAE;gBACvB,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;oBACvB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBAC7B,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBAChC,CAAC;YACH,CAAC,CAAC;YAEF,WAAW,EAAE,CAAC;YACd,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;YAEnD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QACrE,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,oBAAC,gBAAgB,QACd,QAAQ,CACQ,CACpB,CAAC;AACJ,CAAC"}

package/dist/providers/WalletContext.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+import type { Account } from 'thirdweb/wallets';
+export interface WalletContextValue {
+    address: string | null;
+    account: Account | null;
+    isConnected: boolean;
+    isConnecting: boolean;
+    disconnect: () => Promise<void>;
+}
+export interface WalletProviderProps {
+    children: ReactNode;
+    onConnect?: (address: string) => void;
+    onDisconnect?: () => void;
+}
+/**
+ * Wallet state management provider
+ *
+ * Manages wallet connection state and provides utilities for:
+ * - Accessing current wallet address
+ * - Checking connection status
+ * - Disconnecting wallet
+ * - Event callbacks for connection changes
+ *
+ * @example
+ * ```tsx
+ * import { WalletProvider } from '@varity-labs/ui-kit';
+ *
+ * function App() {
+ *   return (
+ *     <WalletProvider
+ *       onConnect={(address) => console.log('Connected:', address)}
+ *       onDisconnect={() => console.log('Disconnected')}
+ *     >
+ *       <YourApp />
+ *     </WalletProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function WalletProvider({ children, onConnect, onDisconnect }: WalletProviderProps): JSX.Element;
+/**
+ * Hook to access wallet context
+ *
+ * @returns {WalletContextValue} Wallet state and utilities
+ * @throws {Error} If used outside WalletProvider
+ *
+ * @example
+ * ```tsx
+ * import { useWallet } from '@varity-labs/ui-kit';
+ *
+ * function MyComponent() {
+ *   const { address, isConnected, disconnect } = useWallet();
+ *
+ *   if (!isConnected) {
+ *     return <p>Please connect your wallet</p>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Connected: {address}</p>
+ *       <button onClick={disconnect}>Disconnect</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useWallet(): WalletContextValue;
+//# sourceMappingURL=WalletContext.d.ts.map

package/dist/providers/WalletContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletContext.d.ts","sourceRoot":"","sources":["../../src/providers/WalletContext.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA0C,SAAS,EAAa,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACjC;AAID,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAwCtG;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}

package/dist/providers/WalletContext.js

@@ -0,0 +1,98 @@
+import React, { createContext, useContext, useCallback, useEffect } from 'react';
+import { useActiveAccount, useDisconnect, useActiveWallet } from 'thirdweb/react';
+const WalletContext = createContext(null);
+/**
+ * Wallet state management provider
+ *
+ * Manages wallet connection state and provides utilities for:
+ * - Accessing current wallet address
+ * - Checking connection status
+ * - Disconnecting wallet
+ * - Event callbacks for connection changes
+ *
+ * @example
+ * ```tsx
+ * import { WalletProvider } from '@varity-labs/ui-kit';
+ *
+ * function App() {
+ *   return (
+ *     <WalletProvider
+ *       onConnect={(address) => console.log('Connected:', address)}
+ *       onDisconnect={() => console.log('Disconnected')}
+ *     >
+ *       <YourApp />
+ *     </WalletProvider>
+ *   );
+ * }
+ * ```
+ */
+export function WalletProvider({ children, onConnect, onDisconnect }) {
+    const account = useActiveAccount();
+    const wallet = useActiveWallet();
+    const { disconnect: thirdwebDisconnect } = useDisconnect();
+    // Note: Connection state is managed by thirdweb hooks
+    const isConnecting = false;
+    const address = account?.address || null;
+    const isConnected = !!address;
+    // Handle connection events
+    useEffect(() => {
+        if (isConnected && address && onConnect) {
+            onConnect(address);
+        }
+    }, [isConnected, address, onConnect]);
+    const disconnect = useCallback(async () => {
+        try {
+            if (wallet) {
+                await thirdwebDisconnect(wallet);
+            }
+            if (onDisconnect) {
+                onDisconnect();
+            }
+        }
+        catch (error) {
+            console.error('Error disconnecting wallet:', error);
+        }
+    }, [wallet, thirdwebDisconnect, onDisconnect]);
+    const value = {
+        address,
+        account: account || null,
+        isConnected,
+        isConnecting,
+        disconnect,
+    };
+    return React.createElement(WalletContext.Provider, { value: value }, children);
+}
+/**
+ * Hook to access wallet context
+ *
+ * @returns {WalletContextValue} Wallet state and utilities
+ * @throws {Error} If used outside WalletProvider
+ *
+ * @example
+ * ```tsx
+ * import { useWallet } from '@varity-labs/ui-kit';
+ *
+ * function MyComponent() {
+ *   const { address, isConnected, disconnect } = useWallet();
+ *
+ *   if (!isConnected) {
+ *     return <p>Please connect your wallet</p>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Connected: {address}</p>
+ *       <button onClick={disconnect}>Disconnect</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useWallet() {
+    const context = useContext(WalletContext);
+    if (!context) {
+        throw new Error('useWallet must be used within WalletProvider');
+    }
+    return context;
+}
+//# sourceMappingURL=WalletContext.js.map

package/dist/providers/WalletContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletContext.js","sourceRoot":"","sources":["../../src/providers/WalletContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAWlF,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC;AAQrE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAuB;IACvF,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IACnC,MAAM,MAAM,GAAG,eAAe,EAAE,CAAC;IACjC,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,GAAG,aAAa,EAAE,CAAC;IAE3D,sDAAsD;IACtD,MAAM,YAAY,GAAG,KAAK,CAAC;IAE3B,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC;IACzC,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC;IAE9B,2BAA2B;IAC3B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,OAAO,IAAI,SAAS,EAAE,CAAC;YACxC,SAAS,CAAC,OAAO,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtC,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACxC,IAAI,CAAC;YACH,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,kBAAkB,CAAC,MAAM,CAAC,CAAC;YACnC,CAAC;YACD,IAAI,YAAY,EAAE,CAAC;gBACjB,YAAY,EAAE,CAAC;YACjB,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;QACtD,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/C,MAAM,KAAK,GAAuB;QAChC,OAAO;QACP,OAAO,EAAE,OAAO,IAAI,IAAI;QACxB,WAAW;QACX,YAAY;QACZ,UAAU;KACX,CAAC;IAEF,OAAO,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAA0B,CAAC;AACnF,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAClE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/providers/WalletSyncProvider.d.ts

@@ -0,0 +1,84 @@
+import React, { ReactNode } from 'react';
+/**
+ * Wallet Sync State
+ * Provides unified wallet state from Privy and Thirdweb
+ */
+export interface WalletSyncState {
+    /** The connected wallet address (from Privy embedded wallet or external wallet) */
+    address: string | null;
+    /** Whether wallet state is still loading */
+    isLoading: boolean;
+    /** Whether Privy and Thirdweb wallets are in sync */
+    isSynced: boolean;
+    /** Whether the user is authenticated via Privy */
+    isAuthenticated: boolean;
+    /** The authentication method used (email, google, wallet, etc.) */
+    authMethod: string | null;
+}
+/**
+ * WalletSyncContext - Provides unified wallet state across Privy and Thirdweb
+ *
+ * This context synchronizes embedded wallets (created by Privy for email/social users)
+ * with Thirdweb's wallet context, ensuring a consistent experience.
+ */
+export declare const WalletSyncContext: React.Context<WalletSyncState>;
+/**
+ * Hook to access wallet sync state
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { address, isLoading, isSynced } = useWalletSync();
+ *
+ *   if (isLoading) return <Spinner />;
+ *   if (!address) return <ConnectButton />;
+ *
+ *   return <p>Connected: {address}</p>;
+ * }
+ * ```
+ */
+export declare const useWalletSync: () => WalletSyncState;
+export interface WalletSyncProviderProps {
+    children: ReactNode;
+    /**
+     * Callback when wallet address changes
+     */
+    onAddressChange?: (address: string | null) => void;
+    /**
+     * Callback when sync state changes
+     */
+    onSyncStateChange?: (state: WalletSyncState) => void;
+}
+/**
+ * WalletSyncProvider - Synchronizes Privy embedded wallets with Thirdweb
+ *
+ * This provider ensures that when a user signs in with email/Google,
+ * their embedded wallet is immediately available to all components using Thirdweb hooks.
+ *
+ * Features:
+ * - Syncs Privy wallets with Thirdweb context
+ * - Supports embedded wallets (email/social login)
+ * - Supports external wallets (MetaMask, WalletConnect, etc.)
+ * - Provides unified wallet state across the app
+ *
+ * @example
+ * ```tsx
+ * import { WalletSyncProvider, VarityPrivyProvider } from '@varity-labs/ui-kit';
+ * import { ThirdwebProvider } from 'thirdweb/react';
+ *
+ * function App() {
+ *   return (
+ *     <VarityPrivyProvider appId="your-privy-app-id">
+ *       <ThirdwebProvider>
+ *         <WalletSyncProvider>
+ *           <YourApp />
+ *         </WalletSyncProvider>
+ *       </ThirdwebProvider>
+ *     </VarityPrivyProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function WalletSyncProvider({ children, onAddressChange, onSyncStateChange, }: WalletSyncProviderProps): React.JSX.Element;
+export default WalletSyncProvider;
+//# sourceMappingURL=WalletSyncProvider.d.ts.map

package/dist/providers/WalletSyncProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletSyncProvider.d.ts","sourceRoot":"","sources":["../../src/providers/WalletSyncProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkD,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzF;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,mFAAmF;IACnF,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,4CAA4C;IAC5C,SAAS,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,eAAe,EAAE,OAAO,CAAC;IACzB,mEAAmE;IACnE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,gCAM5B,CAAC;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,uBAAsC,CAAC;AAEjE,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,eAAe,EACf,iBAAiB,GAClB,EAAE,uBAAuB,qBA2EzB;AAED,eAAe,kBAAkB,CAAC"}

package/dist/providers/WalletSyncProvider.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect, createContext, useContext } from 'react';
+import { usePrivy, useWallets } from '@privy-io/react-auth';
+import { useActiveAccount } from 'thirdweb/react';
+/**
+ * WalletSyncContext - Provides unified wallet state across Privy and Thirdweb
+ *
+ * This context synchronizes embedded wallets (created by Privy for email/social users)
+ * with Thirdweb's wallet context, ensuring a consistent experience.
+ */
+export const WalletSyncContext = createContext({
+    address: null,
+    isLoading: true,
+    isSynced: false,
+    isAuthenticated: false,
+    authMethod: null,
+});
+/**
+ * Hook to access wallet sync state
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { address, isLoading, isSynced } = useWalletSync();
+ *
+ *   if (isLoading) return <Spinner />;
+ *   if (!address) return <ConnectButton />;
+ *
+ *   return <p>Connected: {address}</p>;
+ * }
+ * ```
+ */
+export const useWalletSync = () => useContext(WalletSyncContext);
+/**
+ * WalletSyncProvider - Synchronizes Privy embedded wallets with Thirdweb
+ *
+ * This provider ensures that when a user signs in with email/Google,
+ * their embedded wallet is immediately available to all components using Thirdweb hooks.
+ *
+ * Features:
+ * - Syncs Privy wallets with Thirdweb context
+ * - Supports embedded wallets (email/social login)
+ * - Supports external wallets (MetaMask, WalletConnect, etc.)
+ * - Provides unified wallet state across the app
+ *
+ * @example
+ * ```tsx
+ * import { WalletSyncProvider, VarityPrivyProvider } from '@varity-labs/ui-kit';
+ * import { ThirdwebProvider } from 'thirdweb/react';
+ *
+ * function App() {
+ *   return (
+ *     <VarityPrivyProvider appId="your-privy-app-id">
+ *       <ThirdwebProvider>
+ *         <WalletSyncProvider>
+ *           <YourApp />
+ *         </WalletSyncProvider>
+ *       </ThirdwebProvider>
+ *     </VarityPrivyProvider>
+ *   );
+ * }
+ * ```
+ */
+export function WalletSyncProvider({ children, onAddressChange, onSyncStateChange, }) {
+    const { authenticated, user, ready: privyReady } = usePrivy();
+    const { wallets, ready: walletsReady } = useWallets();
+    const activeAccount = useActiveAccount();
+    const [syncState, setSyncState] = useState({
+        address: null,
+        isLoading: true,
+        isSynced: false,
+        isAuthenticated: false,
+        authMethod: null,
+    });
+    useEffect(() => {
+        // Get the primary wallet address
+        // Priority: Privy wallet > Thirdweb active account
+        const privyWallet = wallets && wallets.length > 0 ? wallets[0] : null;
+        const thirdwebAddress = activeAccount?.address;
+        const primaryAddress = privyWallet?.address || thirdwebAddress || null;
+        // Determine auth method
+        let authMethod = null;
+        if (user?.email) {
+            authMethod = 'email';
+        }
+        else if (user?.google) {
+            authMethod = 'google';
+        }
+        else if (user?.twitter) {
+            authMethod = 'twitter';
+        }
+        else if (user?.discord) {
+            authMethod = 'discord';
+        }
+        else if (user?.github) {
+            authMethod = 'github';
+        }
+        else if (user?.wallet) {
+            authMethod = 'wallet';
+        }
+        // Determine loading state
+        const isLoading = !privyReady || (authenticated && !walletsReady);
+        // Determine sync state
+        const isSynced = authenticated && !!primaryAddress && walletsReady;
+        const newState = {
+            address: primaryAddress,
+            isLoading,
+            isSynced,
+            isAuthenticated: authenticated,
+            authMethod,
+        };
+        setSyncState(newState);
+        // Call callbacks if provided
+        if (onAddressChange && newState.address !== syncState.address) {
+            onAddressChange(newState.address);
+        }
+        if (onSyncStateChange) {
+            onSyncStateChange(newState);
+        }
+    }, [authenticated, user, wallets, walletsReady, privyReady, activeAccount, onAddressChange, onSyncStateChange, syncState.address]);
+    // Store wallet address in localStorage for persistence across sessions
+    useEffect(() => {
+        if (syncState.address) {
+            localStorage.setItem('wallet_address', syncState.address);
+        }
+        else if (!syncState.isLoading && !syncState.isAuthenticated) {
+            localStorage.removeItem('wallet_address');
+        }
+    }, [syncState.address, syncState.isLoading, syncState.isAuthenticated]);
+    return (React.createElement(WalletSyncContext.Provider, { value: syncState }, children));
+}
+export default WalletSyncProvider;
+//# sourceMappingURL=WalletSyncProvider.js.map

package/dist/providers/WalletSyncProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletSyncProvider.js","sourceRoot":"","sources":["../../src/providers/WalletSyncProvider.tsx"],"names":[],"mappings":"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"}

package/dist/providers/index.d.ts

@@ -0,0 +1,47 @@
+export { VarityProvider, type VarityProviderProps } from './VarityProvider';
+export { WalletProvider, useWallet, type WalletProviderProps, type WalletContextValue } from './WalletContext';
+export { ChainProvider, useChain, type ChainProviderProps, type ChainContextValue } from './ChainContext';
+export { VarityPrivyProvider, type VarityPrivyProviderProps } from './PrivyProvider';
+export { PrivyStack, type PrivyStackProps } from './PrivyStack';
+export { WalletSyncProvider, WalletSyncContext, useWalletSync, type WalletSyncState, type WalletSyncProviderProps, } from './WalletSyncProvider';
+export { VarityDashboardProvider, type VarityDashboardProviderProps, } from './VarityDashboardProvider';
+/**
+ * Provider Setup Guide
+ *
+ * For simple Thirdweb-only apps:
+ * @example
+ * ```tsx
+ * import { VarityProvider, WalletProvider, ChainProvider } from '@varity-labs/ui-kit';
+ *
+ * function App() {
+ *   return (
+ *     <VarityProvider>
+ *       <WalletProvider>
+ *         <ChainProvider>
+ *           <YourApp />
+ *         </ChainProvider>
+ *       </WalletProvider>
+ *     </VarityProvider>
+ *   );
+ * }
+ * ```
+ *
+ * For dashboards with Privy authentication (RECOMMENDED):
+ * @example
+ * ```tsx
+ * import { VarityDashboardProvider } from '@varity-labs/ui-kit';
+ *
+ * function App() {
+ *   return (
+ *     <VarityDashboardProvider
+ *       privyAppId="your-privy-app-id"
+ *       thirdwebClientId="your-thirdweb-client-id"
+ *       appearance={{ theme: 'light', accentColor: '#2563EB' }}
+ *     >
+ *       <YourDashboard />
+ *     </VarityDashboardProvider>
+ *   );
+ * }
+ * ```
+ */
+//# sourceMappingURL=index.d.ts.map

package/dist/providers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,KAAK,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAG1G,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAGrF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAGhE,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,aAAa,EACb,KAAK,eAAe,EACpB,KAAK,uBAAuB,GAC7B,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EACL,uBAAuB,EACvB,KAAK,4BAA4B,GAClC,MAAM,2BAA2B,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG"}

package/dist/providers/index.js

@@ -0,0 +1,51 @@
+export { VarityProvider } from './VarityProvider';
+export { WalletProvider, useWallet } from './WalletContext';
+export { ChainProvider, useChain } from './ChainContext';
+// Privy Integration
+export { VarityPrivyProvider } from './PrivyProvider';
+// Privy Stack (All-in-one provider setup - PRODUCTION PATTERN)
+export { PrivyStack } from './PrivyStack';
+// Wallet Sync (Privy + Thirdweb synchronization)
+export { WalletSyncProvider, WalletSyncContext, useWalletSync, } from './WalletSyncProvider';
+// Complete Dashboard Provider (Privy + Thirdweb + WalletSync + React Query)
+export { VarityDashboardProvider, } from './VarityDashboardProvider';
+/**
+ * Provider Setup Guide
+ *
+ * For simple Thirdweb-only apps:
+ * @example
+ * ```tsx
+ * import { VarityProvider, WalletProvider, ChainProvider } from '@varity-labs/ui-kit';
+ *
+ * function App() {
+ *   return (
+ *     <VarityProvider>
+ *       <WalletProvider>
+ *         <ChainProvider>
+ *           <YourApp />
+ *         </ChainProvider>
+ *       </WalletProvider>
+ *     </VarityProvider>
+ *   );
+ * }
+ * ```
+ *
+ * For dashboards with Privy authentication (RECOMMENDED):
+ * @example
+ * ```tsx
+ * import { VarityDashboardProvider } from '@varity-labs/ui-kit';
+ *
+ * function App() {
+ *   return (
+ *     <VarityDashboardProvider
+ *       privyAppId="your-privy-app-id"
+ *       thirdwebClientId="your-thirdweb-client-id"
+ *       appearance={{ theme: 'light', accentColor: '#2563EB' }}
+ *     >
+ *       <YourDashboard />
+ *     </VarityDashboardProvider>
+ *   );
+ * }
+ * ```
+ */
+//# sourceMappingURL=index.js.map

package/dist/providers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA4B,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,SAAS,EAAqD,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAmD,MAAM,gBAAgB,CAAC;AAE1G,oBAAoB;AACpB,OAAO,EAAE,mBAAmB,EAAiC,MAAM,iBAAiB,CAAC;AAErF,+DAA+D;AAC/D,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAEhE,iDAAiD;AACjD,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,aAAa,GAGd,MAAM,sBAAsB,CAAC;AAE9B,4EAA4E;AAC5E,OAAO,EACL,uBAAuB,GAExB,MAAM,2BAA2B,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG"}

package/dist/tests/mocks/httpClient.mock.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Mock HTTP Client for testing
+ */
+import { HTTPClient } from '../../utils/http';
+export declare class MockHTTPClient extends HTTPClient {
+    private mockResponses;
+    private callHistory;
+    constructor();
+    /**
+     * Mock a GET response
+     */
+    mockGet(path: string, response: any): void;
+    /**
+     * Mock a POST response
+     */
+    mockPost(path: string, response: any): void;
+    /**
+     * Mock a PUT response
+     */
+    mockPut(path: string, response: any): void;
+    /**
+     * Mock a DELETE response
+     */
+    mockDelete(path: string, response: any): void;
+    /**
+     * Get call history
+     */
+    getCallHistory(): Array<{
+        method: string;
+        path: string;
+        data?: any;
+    }>;
+    /**
+     * Clear call history
+     */
+    clearHistory(): void;
+    /**
+     * Clear all mocks
+     */
+    clearMocks(): void;
+    /**
+     * Override GET method
+     */
+    get<T = any>(path: string): Promise<T>;
+    /**
+     * Override POST method
+     */
+    post<T = any>(path: string, data?: any): Promise<T>;
+    /**
+     * Override PUT method
+     */
+    put<T = any>(path: string, data?: any): Promise<T>;
+    /**
+     * Override DELETE method
+     */
+    delete<T = any>(path: string): Promise<T>;
+}
+/**
+ * Create a mock HTTP client
+ */
+export declare function createMockHTTPClient(): MockHTTPClient;
+//# sourceMappingURL=httpClient.mock.d.ts.map