@txnlab/use-wallet-ui-react 1.0.0 → 1.1.0

package/dist/types/plugins/types.d.ts

@@ -0,0 +1,109 @@
+import { Theme, ResolvedTheme } from '../hooks/useResolvedTheme';
+import { Wallet } from '@txnlab/use-wallet-react';
+import { ComponentType, ReactNode } from 'react';
+/** Context available to all plugin render functions */
+export interface PluginRenderContext {
+    activeAddress: string | null;
+    activeWallet: Wallet | null;
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+    /** Open a plugin dialog by key */
+    openDialog: (key: string) => void;
+    /** Close a plugin dialog by key */
+    closeDialog: (key: string) => void;
+}
+/** Extended context available to menu items rendered inside ConnectedWalletMenu */
+export interface MenuRenderContext extends PluginRenderContext {
+    /** Close the ConnectedWalletMenu dropdown */
+    closeMenu: () => void;
+    /** Navigate to a plugin panel by key, or null to return to main view */
+    setActivePanel: (key: string | null) => void;
+    /** Currently active panel key, or null if showing main view */
+    activePanel: string | null;
+}
+/**
+ * Named slots in ConnectedWalletMenu where plugins can inject UI.
+ * Ordered from top to bottom of the menu layout.
+ */
+export type MenuSlot = 'after-balance' | 'after-accounts' | 'after-wallet-info' | 'before-actions' | 'actions';
+/** A menu item contributed by a plugin to a named slot */
+export interface PluginMenuItem {
+    /** Unique key for React rendering */
+    key: string;
+    /** Which slot to render in */
+    slot: MenuSlot;
+    /** Ordering weight within the slot. Lower = earlier. Default: 100. */
+    order?: number;
+    /** Return false to hide this item */
+    enabled?: (ctx: MenuRenderContext) => boolean;
+    /** The React element to render */
+    render: (ctx: MenuRenderContext) => ReactNode;
+}
+/** A dialog contributed by a plugin, rendered via FloatingPortal */
+export interface PluginDialog {
+    /** Unique key for React rendering and dialog open/close control */
+    key: string;
+    /** The dialog component */
+    render: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+        ctx: PluginRenderContext;
+    }) => ReactNode;
+}
+/** A full panel view contributed by a plugin to ConnectedWalletMenu */
+export interface PluginPanel {
+    /** Unique key for this panel */
+    key: string;
+    /** Label shown on the navigation trigger (e.g., "Manage", "Bridge") */
+    label: string;
+    /** Optional icon component rendered alongside the label */
+    icon?: (props: {
+        className?: string;
+    }) => ReactNode;
+    /** Return false to hide this panel's trigger */
+    enabled?: (ctx: MenuRenderContext) => boolean;
+    /** Ordering weight in the panel trigger list. Lower = earlier. Default: 100. */
+    order?: number;
+    /** The panel content renderer. Receives a `goBack` function to return to main view. */
+    render: (props: {
+        ctx: MenuRenderContext;
+        goBack: () => void;
+    }) => ReactNode;
+}
+/** Wallet lifecycle event hooks */
+export interface PluginLifecycleHooks {
+    /** Called after a wallet connects */
+    onConnect?: (ctx: PluginRenderContext) => void | Promise<void>;
+    /** Called after a wallet disconnects */
+    onDisconnect?: () => void | Promise<void>;
+    /** Called when the active account changes */
+    onAccountChange?: (newAddress: string, prevAddress: string | null, ctx: PluginRenderContext) => void;
+}
+/**
+ * The main plugin interface. Every field except `id` is optional.
+ * A plugin declares what it contributes; the core system
+ * collects and renders those contributions.
+ */
+export interface WalletUIPlugin {
+    /** Unique identifier for the plugin */
+    id: string;
+    /** Human-readable name (for debugging) */
+    name?: string;
+    /** Menu items to inject into ConnectedWalletMenu slots */
+    menuItems?: PluginMenuItem[];
+    /** Dialogs that the plugin manages */
+    dialogs?: PluginDialog[];
+    /** Panels that replace ConnectedWalletMenu content when navigated to */
+    panels?: PluginPanel[];
+    /** Wallet lifecycle event hooks */
+    lifecycle?: PluginLifecycleHooks;
+    /**
+     * Optional React component that wraps the provider's children.
+     * Used by plugins that need to provide their own React context.
+     */
+    Provider?: ComponentType<{
+        children: ReactNode;
+        ctx: PluginRenderContext;
+    }>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/plugins/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/plugins/types.ts"],"names":[],"mappings":"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"}

package/dist/types/providers/WalletUIProvider.d.ts

@@ -0,0 +1,58 @@
+import { QueryClient } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+import { Theme, ResolvedTheme } from '../hooks/useResolvedTheme';
+import { NfdView } from '../hooks/useNfd';
+import { WalletUIPlugin } from '../plugins/types';
+interface WalletUIContextType {
+    queryClient: QueryClient;
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+}
+interface WalletUIProviderProps {
+    children: ReactNode;
+    queryClient?: QueryClient;
+    /**
+     * Whether to automatically prefetch data for all accounts in connected wallets (defaults to true)
+     */
+    enablePrefetching?: boolean;
+    /**
+     * NFD view type for prefetching (defaults to 'thumbnail')
+     */
+    prefetchNfdView?: NfdView;
+    /**
+     * Theme setting for wallet UI components.
+     * - 'light': Always use light mode
+     * - 'dark': Always use dark mode
+     * - 'system': Follow the user's OS/browser preference (default)
+     *
+     * The library also respects the `.dark` class on ancestor elements (Tailwind convention),
+     * which will enable dark mode unless explicitly overridden with theme="light".
+     */
+    theme?: Theme;
+    /**
+     * Plugins to register. Each plugin can contribute menu items, dialogs,
+     * lifecycle hooks, and context providers.
+     */
+    plugins?: WalletUIPlugin[];
+}
+/**
+ * Provider that enables wallet UI components to work with TanStack Query.
+ * It can use an existing QueryClient from the parent application or create its own.
+ * Also creates a QueryClientProvider if none exists in the parent tree.
+ *
+ * Automatically prefetches data for all accounts in connected wallets for smoother
+ * account switching experience.
+ *
+ * Supports theme configuration via the `theme` prop:
+ * - 'light': Always use light mode
+ * - 'dark': Always use dark mode
+ * - 'system': Follow the user's OS/browser preference (default)
+ */
+export declare function WalletUIProvider({ children, queryClient: externalQueryClient, enablePrefetching, prefetchNfdView, theme, plugins, }: WalletUIProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the WalletUI context
+ * @throws Error if used outside of WalletUIProvider
+ */
+export declare function useWalletUI(): WalletUIContextType;
+export {};
+//# sourceMappingURL=WalletUIProvider.d.ts.map

package/dist/types/providers/WalletUIProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletUIProvider.d.ts","sourceRoot":"","sources":["../../../src/providers/WalletUIProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EAGZ,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAEL,SAAS,EAKV,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,KAAK,KAAK,EACV,KAAK,aAAa,EACnB,MAAM,2BAA2B,CAAA;AAKlC,OAAO,KAAK,EAAqB,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACjE,OAAO,KAAK,EAAuB,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAoF3E,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAA;IACxB,KAAK,EAAE,KAAK,CAAA;IACZ,aAAa,EAAE,aAAa,CAAA;CAC7B;AAED,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;CAC3B;AA0KD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,WAAW,EAAE,mBAAmB,EAChC,iBAAwB,EACxB,eAA6B,EAC7B,KAAgB,EAChB,OAAY,GACb,EAAE,qBAAqB,2CAmDvB;AA2CD;;;GAGG;AACH,wBAAgB,WAAW,IAAI,mBAAmB,CAMjD"}

package/dist/types/test/setup.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=setup.d.ts.map

package/dist/types/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../../src/test/setup.ts"],"names":[],"mappings":""}

package/dist/types/utils/cn.d.ts

@@ -0,0 +1,16 @@
+import { ClassValue } from 'clsx';
+/**
+ * Uses clsx and tailwind-merge to construct className strings conditionally.
+ * @param {ClassValue[]} inputs - Any number of arguments, can be Object, Array, Boolean, or String
+ * @returns {string} The combined class names, merged without style conflicts
+ * @see {@link https://github.com/lukeed/clsx#usage}
+ * @see {@link https://github.com/dcastil/tailwind-merge}
+ * @example
+ * ```jsx
+ * <p className={cn('text-center', { 'text-blue-500': isBlue })}>
+ *   Hello, world!
+ * </p>
+ * ```
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/types/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C;;;;;;;;;;;;GAYG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/types/utils/fontLoader.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Initializes font loading for the UI components.
+ * Safe to use in any environment (SSR, CSR, Next.js, etc).
+ * Will automatically inject the Aeonik font for components using the 'wallet-custom-font' class.
+ * Falls back gracefully to system fonts if loading fails.
+ */
+export declare const initializeFonts: () => void;
+//# sourceMappingURL=fontLoader.d.ts.map

package/dist/types/utils/fontLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontLoader.d.ts","sourceRoot":"","sources":["../../../src/utils/fontLoader.ts"],"names":[],"mappings":"AAsEA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,QAAO,IAIlC,CAAA"}

package/dist/types/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { cn } from './cn';
+export * from './fontLoader';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,cAAc,cAAc,CAAA"}

package/dist/types/utils/ipfs.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Check availability of an IPFS resource and return appropriate URL
+ * Tries images.nf.domains first, falls back to IPFS gateway
+ * Only returns URLs for image content types
+ *
+ * @param url - IPFS URL to check
+ * @returns URL to use (either images.nf.domains or fallback gateway)
+ */
+export declare const checkIpfsAvailability: (url: string) => Promise<string>;
+//# sourceMappingURL=ipfs.d.ts.map

package/dist/types/utils/ipfs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ipfs.d.ts","sourceRoot":"","sources":["../../../src/utils/ipfs.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,GAAU,KAAK,MAAM,KAAG,OAAO,CAAC,MAAM,CAgGvE,CAAA"}

package/dist/types/utils/ipfs.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ipfs.test.d.ts.map

package/dist/types/utils/ipfs.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ipfs.test.d.ts","sourceRoot":"","sources":["../../../src/utils/ipfs.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txnlab/use-wallet-ui-react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React components for use-wallet UI",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -17,6 +17,16 @@
         "default": "./dist/cjs/index.cjs"
       }
     },
+    "./plugins/export-key": {
+      "import": {
+        "types": "./dist/types/plugins/export-key/index.d.ts",
+        "default": "./dist/esm/plugins/export-key.js"
+      },
+      "require": {
+        "types": "./dist/types/plugins/export-key/index.d.cts",
+        "default": "./dist/cjs/plugins/export-key.cjs"
+      }
+    },
     "./dist/style.css": "./dist/style.css",
     "./theme.css": "./src/theme.css",
     "./package.json": "./package.json"
@@ -65,28 +75,28 @@
     "generate:css": "npx @tailwindcss/cli -c ./tailwind.config.js -i ./src/input.css -o ./dist/style.css && node ./scripts/post-process-css.js"
   },
   "peerDependencies": {
-    "@txnlab/use-wallet-react": "^4.0.1",
+    "@txnlab/use-wallet-react": "^4.6.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@floating-ui/react": "0.27.16",
+    "@floating-ui/react": "0.27.18",
     "@headlessui/react": "2.2.9",
-    "@tanstack/react-query": "5.90.19",
+    "@tanstack/react-query": "5.90.21",
     "@txnlab/utils-ts": "0.1.0",
     "clsx": "2.1.1",
-    "tailwind-merge": "3.4.0"
+    "tailwind-merge": "3.5.0"
   },
   "devDependencies": {
-    "@tailwindcss/cli": "4.1.18",
-    "@types/react": "19.2.8",
+    "@tailwindcss/cli": "4.2.1",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitest/coverage-v8": "3.2.4",
     "algosdk": "3.5.2",
-    "publint": "0.3.16",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "tailwindcss": "4.1.18",
+    "publint": "0.3.17",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tailwindcss": "4.2.1",
     "tsx": "4.21.0",
     "vite": "6.4.1",
     "vite-plugin-dts": "4.5.4",