@miden-sdk/miden-wallet-adapter-react 0.13.0

package/__tests__/MidenFiSignerProvider.test.tsx

@@ -0,0 +1,426 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, render, screen, cleanup, act } from '@testing-library/react';
+import React from 'react';
+
+// Create a mock adapter factory
+const createMockAdapter = (overrides = {}) => {
+  const listeners: Record<string, Function[]> = {};
+  return {
+    name: 'Miden Wallet',
+    url: 'https://miden.fi/',
+    icon: 'icon-data',
+    readyState: 'Unsupported',
+    connected: false,
+    address: null,
+    publicKey: null,
+    connect: vi.fn().mockResolvedValue(undefined),
+    disconnect: vi.fn().mockResolvedValue(undefined),
+    signBytes: vi.fn().mockResolvedValue(new Uint8Array(67)),
+    on: vi.fn((event: string, handler: Function) => {
+      if (!listeners[event]) listeners[event] = [];
+      listeners[event].push(handler);
+    }),
+    off: vi.fn((event: string, handler: Function) => {
+      if (listeners[event]) {
+        listeners[event] = listeners[event].filter((h) => h !== handler);
+      }
+    }),
+    emit: vi.fn((event: string, ...args: any[]) => {
+      if (listeners[event]) {
+        listeners[event].forEach((h) => h(...args));
+      }
+    }),
+    ...overrides,
+  };
+};
+
+let mockAdapter = createMockAdapter();
+
+// Mock modules before imports
+vi.mock('@miden-sdk/miden-wallet-adapter-miden', () => ({
+  MidenWalletAdapter: vi.fn().mockImplementation((config) => {
+    mockAdapter._config = config;
+    return mockAdapter;
+  }),
+}));
+
+vi.mock('@miden-sdk/react', () => ({
+  SignerContext: React.createContext(null),
+}));
+
+vi.mock('@miden-sdk/miden-sdk', () => ({
+  AccountStorageMode: {
+    public: vi.fn(() => ({ toString: () => 'public' })),
+    private: vi.fn(() => ({ toString: () => 'private' })),
+  },
+}));
+
+vi.mock('@miden-sdk/miden-wallet-adapter-base', () => ({
+  PrivateDataPermission: {
+    UponRequest: 'UponRequest',
+    Allowed: 'Allowed',
+    Denied: 'Denied',
+  },
+  WalletAdapterNetwork: {
+    Testnet: 'testnet',
+    Devnet: 'devnet',
+  },
+  AllowedPrivateData: {
+    None: 'None',
+    All: 'All',
+  },
+  WalletReadyState: {
+    Installed: 'Installed',
+    NotDetected: 'NotDetected',
+    Loadable: 'Loadable',
+    Unsupported: 'Unsupported',
+  },
+  WalletNotSelectedError: class WalletNotSelectedError extends Error {
+    constructor() {
+      super('Wallet not selected');
+    }
+  },
+  WalletNotReadyError: class WalletNotReadyError extends Error {
+    constructor() {
+      super('Wallet not ready');
+    }
+  },
+  WalletNotConnectedError: class WalletNotConnectedError extends Error {
+    constructor() {
+      super('Wallet not connected');
+    }
+  },
+}));
+
+import { SignerContext } from '@miden-sdk/react';
+import {
+  MidenFiSignerProvider,
+  useMidenFiWallet,
+} from '../MidenFiSignerProvider';
+import { MidenWalletAdapter } from '@miden-sdk/miden-wallet-adapter-miden';
+
+// Test helpers
+const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe('MidenFiSignerProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockAdapter = createMockAdapter();
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('rendering', () => {
+    it('renders children', () => {
+      render(
+        <MidenFiSignerProvider>
+          <div data-testid="child">Test Child</div>
+        </MidenFiSignerProvider>
+      );
+
+      expect(screen.getByTestId('child')).toBeDefined();
+      expect(screen.getByText('Test Child')).toBeDefined();
+    });
+  });
+
+  describe('default adapter', () => {
+    it('creates MidenWalletAdapter with default appName', () => {
+      render(
+        <MidenFiSignerProvider>
+          <div>Test</div>
+        </MidenFiSignerProvider>
+      );
+
+      expect(MidenWalletAdapter).toHaveBeenCalledWith({ appName: 'Miden DApp' });
+    });
+
+    it('creates MidenWalletAdapter with custom appName', () => {
+      render(
+        <MidenFiSignerProvider appName="Custom App">
+          <div>Test</div>
+        </MidenFiSignerProvider>
+      );
+
+      expect(MidenWalletAdapter).toHaveBeenCalledWith({ appName: 'Custom App' });
+    });
+
+    it('uses custom wallets when provided', () => {
+      const customAdapter = createMockAdapter({ name: 'Custom Wallet' });
+
+      const { result } = renderHook(() => useMidenFiWallet(), {
+        wrapper: ({ children }) => (
+          <MidenFiSignerProvider wallets={[customAdapter as any]}>
+            {children}
+          </MidenFiSignerProvider>
+        ),
+      });
+
+      expect(result.current.wallets[0].adapter.name).toBe('Custom Wallet');
+    });
+  });
+
+  describe('SignerContext when wallet not connected', () => {
+    it('provides SignerContext with isConnected false when wallet not connected', async () => {
+      let capturedContext: any = null;
+      const TestConsumer = () => {
+        const context = React.useContext(SignerContext);
+        capturedContext = context;
+        return null;
+      };
+
+      render(
+        <MidenFiSignerProvider>
+          <TestConsumer />
+        </MidenFiSignerProvider>
+      );
+
+      await act(async () => {
+        await flushPromises();
+      });
+
+      expect(capturedContext).not.toBeNull();
+      expect(capturedContext.isConnected).toBe(false);
+    });
+
+    it('signCb throws when wallet not connected', async () => {
+      let capturedContext: any = null;
+      const TestConsumer = () => {
+        const context = React.useContext(SignerContext);
+        capturedContext = context;
+        return null;
+      };
+
+      render(
+        <MidenFiSignerProvider>
+          <TestConsumer />
+        </MidenFiSignerProvider>
+      );
+
+      await act(async () => {
+        await flushPromises();
+      });
+
+      await expect(
+        capturedContext.signCb(new Uint8Array(), new Uint8Array())
+      ).rejects.toThrow('MidenFi wallet not connected');
+    });
+  });
+
+  describe("SignerContext name", () => {
+    it("includes correct name ('MidenFi')", async () => {
+      let capturedContext: any = null;
+      const TestConsumer = () => {
+        const context = React.useContext(SignerContext);
+        capturedContext = context;
+        return null;
+      };
+
+      render(
+        <MidenFiSignerProvider>
+          <TestConsumer />
+        </MidenFiSignerProvider>
+      );
+
+      await act(async () => {
+        await flushPromises();
+      });
+
+      expect(capturedContext.name).toBe('MidenFi');
+    });
+  });
+
+  describe('useMidenFiWallet hook', () => {
+    it('throws when used outside provider', () => {
+      const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      expect(() => {
+        renderHook(() => useMidenFiWallet());
+      }).toThrow('useMidenFiWallet must be used within MidenFiSignerProvider');
+
+      consoleError.mockRestore();
+    });
+
+    it('returns wallet context inside provider', () => {
+      const { result } = renderHook(() => useMidenFiWallet(), {
+        wrapper: ({ children }) => (
+          <MidenFiSignerProvider>{children}</MidenFiSignerProvider>
+        ),
+      });
+
+      expect(result.current).toBeDefined();
+      expect(result.current.wallets).toBeDefined();
+      expect(result.current.connect).toBeDefined();
+      expect(result.current.disconnect).toBeDefined();
+    });
+
+    it('has wallets array with default MidenWalletAdapter', () => {
+      const { result } = renderHook(() => useMidenFiWallet(), {
+        wrapper: ({ children }) => (
+          <MidenFiSignerProvider>{children}</MidenFiSignerProvider>
+        ),
+      });
+
+      expect(result.current.wallets).toHaveLength(1);
+      expect(result.current.wallets[0].adapter.name).toBe('Miden Wallet');
+    });
+
+    it('connected is false initially', () => {
+      const { result } = renderHook(() => useMidenFiWallet(), {
+        wrapper: ({ children }) => (
+          <MidenFiSignerProvider>{children}</MidenFiSignerProvider>
+        ),
+      });
+
+      expect(result.current.connected).toBe(false);
+    });
+
+    it('has select function', () => {
+      const { result } = renderHook(() => useMidenFiWallet(), {
+        wrapper: ({ children }) => (
+          <MidenFiSignerProvider>{children}</MidenFiSignerProvider>
+        ),
+      });
+
+      expect(typeof result.current.select).toBe('function');
+    });
+
+    it('autoConnect defaults to true', () => {
+      const { result } = renderHook(() => useMidenFiWallet(), {
+        wrapper: ({ children }) => (
+          <MidenFiSignerProvider>{children}</MidenFiSignerProvider>
+        ),
+      });
+
+      expect(result.current.autoConnect).toBe(true);
+    });
+
+    it('autoConnect can be set to false', () => {
+      const { result } = renderHook(() => useMidenFiWallet(), {
+        wrapper: ({ children }) => (
+          <MidenFiSignerProvider autoConnect={false}>{children}</MidenFiSignerProvider>
+        ),
+      });
+
+      expect(result.current.autoConnect).toBe(false);
+    });
+  });
+
+  describe('SignerContext connect/disconnect', () => {
+    it('SignerContext has connect function', async () => {
+      let capturedContext: any = null;
+      const TestConsumer = () => {
+        const context = React.useContext(SignerContext);
+        capturedContext = context;
+        return null;
+      };
+
+      render(
+        <MidenFiSignerProvider>
+          <TestConsumer />
+        </MidenFiSignerProvider>
+      );
+
+      await act(async () => {
+        await flushPromises();
+      });
+
+      expect(typeof capturedContext.connect).toBe('function');
+    });
+
+    it('SignerContext has disconnect function', async () => {
+      let capturedContext: any = null;
+      const TestConsumer = () => {
+        const context = React.useContext(SignerContext);
+        capturedContext = context;
+        return null;
+      };
+
+      render(
+        <MidenFiSignerProvider>
+          <TestConsumer />
+        </MidenFiSignerProvider>
+      );
+
+      await act(async () => {
+        await flushPromises();
+      });
+
+      expect(typeof capturedContext.disconnect).toBe('function');
+    });
+  });
+
+  describe('accountConfig', () => {
+    it('accountType is RegularAccountImmutableCode when connected', async () => {
+      // Create a connected adapter
+      mockAdapter = createMockAdapter({
+        connected: true,
+        publicKey: new Uint8Array(32).fill(0x42),
+        address: '0xtest-address',
+        readyState: 'Installed',
+      });
+
+      let capturedContext: any = null;
+      const TestConsumer = () => {
+        const context = React.useContext(SignerContext);
+        capturedContext = context;
+        return null;
+      };
+
+      render(
+        <MidenFiSignerProvider>
+          <TestConsumer />
+        </MidenFiSignerProvider>
+      );
+
+      // Auto-select single wallet
+      await act(async () => {
+        await flushPromises();
+        await flushPromises();
+        await flushPromises();
+      });
+
+      if (capturedContext?.accountConfig) {
+        expect(capturedContext.accountConfig.accountType).toBe(
+          'RegularAccountImmutableCode'
+        );
+      }
+    });
+  });
+
+  describe('storeName', () => {
+    it('uses midenfi_ prefix for database isolation', async () => {
+      mockAdapter = createMockAdapter({
+        connected: true,
+        publicKey: new Uint8Array(32),
+        address: '0xunique-address',
+        readyState: 'Installed',
+      });
+
+      let capturedContext: any = null;
+      const TestConsumer = () => {
+        const context = React.useContext(SignerContext);
+        capturedContext = context;
+        return null;
+      };
+
+      render(
+        <MidenFiSignerProvider>
+          <TestConsumer />
+        </MidenFiSignerProvider>
+      );
+
+      await act(async () => {
+        await flushPromises();
+        await flushPromises();
+        await flushPromises();
+      });
+
+      if (capturedContext?.storeName && capturedContext.storeName !== '') {
+        expect(capturedContext.storeName).toContain('midenfi_');
+      }
+    });
+  });
+});

package/dist/MidenFiSignerProvider.d.ts

@@ -0,0 +1,113 @@
+import { type FC, type ReactNode } from 'react';
+import { type Adapter, AllowedPrivateData, type MessageSignerWalletAdapterProps, PrivateDataPermission, WalletAdapterNetwork, WalletError, type WalletName, WalletReadyState } from '@miden-sdk/miden-wallet-adapter-base';
+export interface Wallet {
+    adapter: Adapter;
+    readyState: WalletReadyState;
+}
+export interface WalletContextState {
+    autoConnect: boolean;
+    wallets: Wallet[];
+    wallet: Wallet | null;
+    address: string | null;
+    publicKey: Uint8Array | null;
+    connected: boolean;
+    connecting: boolean;
+    disconnecting: boolean;
+    select(walletName: WalletName): void;
+    connect(): Promise<void>;
+    disconnect(): Promise<void>;
+    requestTransaction?: MessageSignerWalletAdapterProps['requestTransaction'];
+    requestAssets?: MessageSignerWalletAdapterProps['requestAssets'];
+    requestPrivateNotes?: MessageSignerWalletAdapterProps['requestPrivateNotes'];
+    signBytes?: MessageSignerWalletAdapterProps['signBytes'];
+    importPrivateNote?: MessageSignerWalletAdapterProps['importPrivateNote'];
+    requestConsumableNotes?: MessageSignerWalletAdapterProps['requestConsumableNotes'];
+    waitForTransaction?: MessageSignerWalletAdapterProps['waitForTransaction'];
+    requestSend?: MessageSignerWalletAdapterProps['requestSend'];
+    requestConsume?: MessageSignerWalletAdapterProps['requestConsume'];
+}
+declare const WalletContext: import("react").Context<WalletContextState>;
+export interface MidenFiSignerProviderProps {
+    children: ReactNode;
+    /** Wallet adapters to use. Defaults to [MidenWalletAdapter] */
+    wallets?: Adapter[];
+    /** App name passed to the default MidenWalletAdapter */
+    appName?: string;
+    /** Network to connect to */
+    network?: WalletAdapterNetwork;
+    /** Auto-connect to previously selected wallet on mount. Defaults to true */
+    autoConnect?: boolean;
+    /** Private data permission level */
+    privateDataPermission?: PrivateDataPermission;
+    /** Allowed private data types */
+    allowedPrivateData?: AllowedPrivateData;
+    /** Error handler */
+    onError?: (error: WalletError) => void;
+    /** LocalStorage key for persisting wallet selection */
+    localStorageKey?: string;
+}
+/**
+ * MidenFiSignerProvider bridges the MidenFi wallet with MidenProvider.
+ *
+ * This is a unified provider that handles both wallet connection and signer context.
+ *
+ * @example
+ * ```tsx
+ * // Simplest usage - uses MidenWalletAdapter by default
+ * <MidenFiSignerProvider>
+ *   <MidenProvider config={{ rpcUrl: "testnet" }}>
+ *     <App />
+ *   </MidenProvider>
+ * </MidenFiSignerProvider>
+ *
+ * // With custom options
+ * <MidenFiSignerProvider
+ *   appName="My DApp"
+ *   network={WalletAdapterNetwork.Testnet}
+ *   autoConnect={true}
+ * >
+ *   <MidenProvider config={{ rpcUrl: "testnet" }}>
+ *     <App />
+ *   </MidenProvider>
+ * </MidenFiSignerProvider>
+ *
+ * // With custom wallets
+ * <MidenFiSignerProvider wallets={[new CustomWalletAdapter()]}>
+ *   <MidenProvider config={{ rpcUrl: "testnet" }}>
+ *     <App />
+ *   </MidenProvider>
+ * </MidenFiSignerProvider>
+ * ```
+ *
+ * For wallet operations, use the useMidenFiWallet hook:
+ *
+ * @example
+ * ```tsx
+ * const { connected, connect, disconnect, select, wallets } = useMidenFiWallet();
+ *
+ * // If multiple wallets, select one first
+ * select(wallets[0].adapter.name);
+ *
+ * // Then connect
+ * await connect();
+ * ```
+ */
+export declare const MidenFiSignerProvider: FC<MidenFiSignerProviderProps>;
+/**
+ * Hook for MidenFi wallet operations beyond the unified useSigner interface.
+ * Use this to access wallet-specific methods like requestTransaction, requestAssets, etc.
+ *
+ * @example
+ * ```tsx
+ * const { connected, connect, disconnect, wallets, select } = useMidenFiWallet();
+ *
+ * // Connect
+ * await connect();
+ *
+ * // Request a transaction
+ * const txId = await requestTransaction({ ... });
+ * ```
+ */
+export declare function useMidenFiWallet(): WalletContextState;
+export { WalletContext };
+export type { WalletContextState as MidenFiWalletContextState };