@openfort/react 0.3.1 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openfort/react",
-  "version": "0.3.1",
+  "version": "1.0.0",
   "author": "Openfort (https://www.openfort.io)",
   "license": "BSD-2-Clause license",
   "description": "The easiest way to integrate Openfort to your project.",
@@ -11,10 +11,37 @@
   },
   "type": "module",
   "exports": {
-    "import": "./build/index.es.js",
-    "types": "./build/index.d.ts"
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js"
+    },
+    "./solana": {
+      "types": "./build/solana/index.d.ts",
+      "import": "./build/solana/index.js"
+    },
+    "./ethereum": {
+      "types": "./build/ethereum/index.d.ts",
+      "import": "./build/ethereum/index.js"
+    },
+    "./wagmi": {
+      "types": "./build/wagmi/index.d.ts",
+      "import": "./build/wagmi/index.js"
+    }
   },
   "types": "./build/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "solana": [
+        "./build/solana/index.d.ts"
+      ],
+      "ethereum": [
+        "./build/ethereum/index.d.ts"
+      ],
+      "wagmi": [
+        "./build/wagmi/index.d.ts"
+      ]
+    }
+  },
   "engines": {
     "node": ">=12.4"
   },
@@ -22,18 +49,19 @@
     "build",
     "README.md"
   ],
+  "sideEffects": false,
   "keywords": [
-    "ens",
     "react-hook",
     "blockchain",
     "hooks",
     "Openfort",
     "ethereum",
+    "solana",
+    "wallet",
     "react"
   ],
   "dependencies": {
-    "@openfort/openfort-js": "^1.2.0",
-    "axios": "^1.7.7",
+    "@openfort/openfort-js": "^1.2.1",
     "buffer": "^6.0.3",
     "detect-browser": "^5.3.0",
     "fast-password-entropy": "^1.1.1",
@@ -44,10 +72,11 @@
     "react-transition-state": "^1.1.4",
     "react-use-measure": "^2.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "zustand": "^5.0.11"
   },
   "peerDependencies": {
-    "@tanstack/react-query": ">=5.0.0",
+    "@solana/kit": "^2.0.0 || ^5.0.0",
     "react": "17.x || 18.x || 19.x",
     "react-dom": "17.x || 18.x || 19.x",
     "viem": "2.x",
@@ -55,21 +84,43 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",
+    "@tanstack/react-query": "^5.90.21",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/node": "18.7.18",
     "@types/qrcode": "^1.4.2",
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
     "@types/styled-components": "^5.1.25",
-    "axios": "^1.7.7",
+    "@wagmi/connectors": "^6.2.0",
+    "@wagmi/core": "^2.22.1",
+    "happy-dom": "^20.8.3",
+    "jsdom": "^28.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
+    "styled-components": "^5.3.5",
     "typescript": "^5.0.4",
-    "typescript-plugin-styled-components": "^2.0.0"
+    "typescript-plugin-styled-components": "^2.0.0",
+    "vitest": "^2.0.0",
+    "wagmi": "^2.18.2"
+  },
+  "peerDependenciesMeta": {
+    "@solana/kit": {
+      "optional": true
+    },
+    "wagmi": {
+      "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
+    }
   },
   "scripts": {
     "start": "rollup --config rollup.config.dev.js -w",
     "dev": "rollup --config rollup.config.dev.js -w",
     "build": "rollup --config rollup.config.prod.js",
-    "format": "biome format --write ."
+    "format": "biome format --write .",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }

package/build/components/PageLayout/index.d.ts

@@ -1,6 +0,0 @@
-export type PageLayoutProps = {
-    children?: React.ReactNode;
-    width?: number | string;
-    header?: string;
-};
-export declare const PageLayout: ({ children, width, header }: PageLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/build/components/contexts/web3/index.d.ts

@@ -1,13 +0,0 @@
-export declare const Web3ContextProvider: ({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-/**
- * React hook to access the {@link Web3Context} values.
- *
- * @returns Shared Web3 utilities exposed by the provider.
- *
- * @example
- * ```ts
- * const { account } = useWeb3();
- * ```
- */

package/build/constants/erc20.d.ts

@@ -1,42 +0,0 @@
-export declare const erc20Abi: readonly [{
-    readonly name: "balanceOf";
-    readonly type: "function";
-    readonly stateMutability: "view";
-    readonly inputs: readonly [{
-        readonly type: "address";
-        readonly name: "owner";
-    }];
-    readonly outputs: readonly [{
-        readonly type: "uint256";
-    }];
-}, {
-    readonly name: "transfer";
-    readonly type: "function";
-    readonly stateMutability: "nonpayable";
-    readonly inputs: readonly [{
-        readonly type: "address";
-        readonly name: "to";
-    }, {
-        readonly type: "uint256";
-        readonly name: "value";
-    }];
-    readonly outputs: readonly [{
-        readonly type: "bool";
-    }];
-}, {
-    readonly name: "decimals";
-    readonly type: "function";
-    readonly stateMutability: "view";
-    readonly inputs: readonly [];
-    readonly outputs: readonly [{
-        readonly type: "uint8";
-    }];
-}, {
-    readonly name: "symbol";
-    readonly type: "function";
-    readonly stateMutability: "view";
-    readonly inputs: readonly [];
-    readonly outputs: readonly [{
-        readonly type: "string";
-    }];
-}];

package/build/hooks/openfort/auth/useWalletAuth.d.ts

@@ -1,20 +0,0 @@
-import { type Connector } from 'wagmi';
-import { OpenfortError, type OpenfortHookOptions } from '../../../types';
-type ConnectWalletOptions = {
-    connector: Connector | string;
-};
-export declare const useWalletAuth: (hookOptions?: OpenfortHookOptions) => {
-    isLoading: boolean;
-    isError: boolean;
-    isSuccess: boolean;
-    error: OpenfortError | null | undefined;
-    walletConnectingTo: string | null;
-    connectWallet: (options: ConnectWalletOptions) => Promise<{
-        error: OpenfortError;
-    } | undefined>;
-    linkWallet: (options: ConnectWalletOptions) => Promise<{
-        error: OpenfortError;
-    } | undefined>;
-    availableWallets: import("../../../wallets/useWagmiWallets").WalletProps[];
-};
-export {};

package/build/hooks/openfort/useConnectWithSiwe.d.ts

@@ -1,8 +0,0 @@
-import { OpenfortError } from '@openfort/openfort-js';
-export declare function useConnectWithSiwe(): ({ onError, onConnect, connectorType: propsConnectorType, walletClientType: propsWalletClientType, link, }?: {
-    connectorType?: string;
-    walletClientType?: string;
-    onError?: (error: string, openfortError?: OpenfortError) => void;
-    onConnect?: () => void;
-    link?: boolean;
-}) => Promise<void>;

package/build/hooks/openfort/useWalletAssets.d.ts

@@ -1,16 +0,0 @@
-import type { Asset } from '../../components/Openfort/types';
-import { OpenfortError, type OpenfortWalletConfig } from '../../types';
-type WalletAssetsHookOptions = {
-    assets?: OpenfortWalletConfig['assets'];
-    staleTime?: number;
-};
-export declare const useWalletAssets: ({ assets: hookCustomAssets, staleTime }?: WalletAssetsHookOptions) => {
-    data: readonly Asset[] | null;
-    isLoading: boolean;
-    isError: boolean;
-    isSuccess: boolean;
-    isIdle: boolean;
-    error: OpenfortError | undefined;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<readonly Asset[], Error>>;
-};
-export {};

package/build/hooks/openfort/useWallets.d.ts

@@ -1,134 +0,0 @@
-import { AccountTypeEnum, RecoveryMethod, type RecoveryParams } from '@openfort/openfort-js';
-import type { Hex } from 'viem';
-import { type Connector } from 'wagmi';
-import { OpenfortError, type OpenfortHookOptions } from '../../types';
-import type { BaseFlowState } from './auth/status';
-type SimpleAccount = {
-    chainId?: number;
-    id: string;
-};
-export type UserWallet = {
-    address: Hex;
-    connectorType?: string;
-    walletClientType?: string;
-    connector?: Connector;
-    id: string;
-    isAvailable: boolean;
-    isActive?: boolean;
-    isConnecting?: boolean;
-    accounts: SimpleAccount[];
-    recoveryMethod?: RecoveryMethod;
-    accountId?: string;
-    accountType?: AccountTypeEnum;
-    ownerAddress?: Hex;
-    implementationType?: string;
-    createdAt?: number;
-    salt?: string;
-};
-type WalletRecovery = {
-    recoveryMethod: RecoveryMethod;
-    password?: string;
-    otpCode?: string;
-};
-export type RequestWalletRecoverOTPResponse = {
-    error?: OpenfortError;
-    sentTo?: 'email' | 'phone';
-    email?: string;
-    phone?: string;
-};
-type SetActiveWalletResult = {
-    error?: OpenfortError;
-    wallet?: UserWallet;
-    isOTPRequired?: boolean;
-};
-type SetActiveWalletOptions = {
-    walletId: string;
-    recovery?: WalletRecovery;
-    address?: Hex | undefined;
-    showUI?: boolean;
-} & OpenfortHookOptions<SetActiveWalletResult>;
-type CreateWalletResult = SetActiveWalletResult;
-type CreateWalletOptions = {
-    recovery?: WalletRecovery;
-    accountType?: AccountTypeEnum;
-} & OpenfortHookOptions<CreateWalletResult>;
-type RecoverEmbeddedWalletResult = SetActiveWalletResult;
-type SetRecoveryOptions = {
-    previousRecovery: RecoveryParams;
-    newRecovery: RecoveryParams;
-} & OpenfortHookOptions<CreateWalletResult>;
-type WalletOptions = OpenfortHookOptions<SetActiveWalletResult | CreateWalletResult>;
-export type WalletFlowStatus = BaseFlowState | {
-    status: 'creating' | 'connecting';
-    address?: Hex;
-    error?: never;
-};
-/**
- * Hook for managing and interacting with user wallets
- *
- * This hook manages both embedded Openfort wallets and external wallets connected via Wagmi.
- * It handles wallet creation, recovery, connection, and switching between different wallet types.
- * The hook provides comprehensive wallet management functionality including creating embedded wallets,
- * recovering existing ones, and managing wallet connections across multiple providers.
- *
- * @param hookOptions - Optional configuration with callback functions and wallet options
- * @returns Current wallet state with management actions
- *
- * @example
- * ```tsx
- * const wallets = useWallets({
- *   onCreateWalletSuccess: (result) => console.log('Wallet created:', result.wallet),
- *   onCreateWalletError: (error) => console.error('Wallet creation failed:', error),
- *   onSetActiveWalletSuccess: (result) => console.log('Wallet activated:', result.wallet),
- * });
- *
- * // Create a new embedded wallet with automatic recovery
- * await wallets.createWallet({
- *   recovery: { recoveryMethod: RecoveryMethod.AUTOMATIC },
- *   accountType: AccountTypeEnum.SMART_ACCOUNT,
- * });
- *
- * // Set active wallet by ID
- * await wallets.setActiveWallet('embedded-wallet-id');
- *
- * // Set active wallet with custom recovery
- * await wallets.setActiveWallet({
- *   walletId: 'embedded-wallet-id',
- *   recovery: { recoveryMethod: RecoveryMethod.PASSWORD, password: 'user-password' },
- *   showUI: true,
- * });
- *
- * // Set recovery method for existing wallet
- * await wallets.setRecovery({
- *   previousRecovery: { recoveryMethod: RecoveryMethod.AUTOMATIC },
- *   newRecovery: { recoveryMethod: RecoveryMethod.PASSWORD, password: 'new-password' },
- * });
- *
- * // Export private key from embedded wallet (requires authentication)
- * try {
- *   const privateKey = await wallets.exportPrivateKey();
- *   console.log('Private key exported:', privateKey);
- * } catch (error) {
- *   console.error('Failed to export private key:', error);
- * }
- * ```
- */
-export declare function useWallets(hookOptions?: WalletOptions): {
-    exportPrivateKey: () => Promise<string>;
-    error: OpenfortError | null | undefined;
-    isError: boolean;
-    isSuccess: boolean;
-    isCreating: boolean;
-    isConnecting: boolean;
-    isLoadingWallets: boolean;
-    wallets: UserWallet[];
-    availableWallets: import("../../wallets/useWagmiWallets").WalletProps[];
-    activeWallet: UserWallet | undefined;
-    setRecovery: (params: SetRecoveryOptions) => Promise<RecoverEmbeddedWalletResult>;
-    reset: () => void;
-    createWallet: ({ recovery, ...options }?: CreateWalletOptions) => Promise<CreateWalletResult>;
-    setActiveWallet: (options: SetActiveWalletOptions | string) => Promise<SetActiveWalletResult>;
-    requestWalletRecoverOTP: () => Promise<RequestWalletRecoverOTPResponse>;
-    isWalletRecoveryOTPEnabled: boolean;
-};
-export {};

package/build/hooks/useChainIsSupported.d.ts

@@ -1,24 +0,0 @@
-/**
- * Hook for checking if a blockchain chain is supported.
- *
- * This hook verifies whether a specific blockchain chain ID is part of the
- * configured Wagmi chains. Use it to validate chain compatibility before
- * attempting operations or rendering chain-specific UI.
- *
- * @param chainId - The blockchain chain ID to check for support.
- * @returns `true` when the chain is configured, `false` otherwise.
- *
- * @example
- * ```tsx
- * const ChainStatus: React.FC<{ chainId?: number }> = ({ chainId }) => {
- *   const isSupported = useChainIsSupported(chainId);
- *
- *   return (
- *     <span>
- *       {chainId ?? 'Unknown chain'}: {isSupported ? 'Supported' : 'Unsupported'}
- *     </span>
- *   );
- * };
- * ```
- */
-export declare function useChainIsSupported(chainId?: number): boolean;

package/build/hooks/useChains.d.ts

@@ -1,41 +0,0 @@
-import type { Chain } from 'viem';
-/**
- * Hook for accessing configured blockchain chains
- *
- * This hook provides access to all blockchain chains configured in the Wagmi config.
- * It returns an array of chain objects containing network information such as
- * chain ID, name, RPC URLs, and other blockchain-specific configuration.
- *
- * @returns Array of configured blockchain chains
- *
- * @example
- * ```tsx
- * const chains = useChains();
- *
- * // Display available chains
- * console.log('Available chains:', chains.map(chain => ({
- *   id: chain.id,
- *   name: chain.name,
- *   nativeCurrency: chain.nativeCurrency,
- * })));
- *
- * // Check if specific chains are available
- * const hasEthereum = chains.some(chain => chain.id === 1);
- * const hasPolygon = chains.some(chain => chain.id === 137);
- *
- * // Example usage in component
- * return (
- *   <div>
- *     <h3>Available Networks:</h3>
- *     <ul>
- *       {chains.map(chain => (
- *         <li key={chain.id}>
- *           {chain.name} (ID: {chain.id})
- *         </li>
- *       ))}
- *     </ul>
- *   </div>
- * );
- * ```
- */
-export declare function useChains(): Chain[];

package/build/hooks/useConnect.d.ts

@@ -1,24 +0,0 @@
-/**
- * Custom wrapper around {@link wagmiUseConnect} that adds Openfort specific logic.
- *
- * @param props - Optional configuration passed through to Wagmi's hook.
- * @returns Connection helpers augmented with Openfort defaults and logging.
- *
- * @example
- * ```ts
- * const { connect, connectors } = useConnect();
- * await connect({ connector: connectors[0] });
- * ```
- */
-import { type Connector, type CreateConnectorFn, type UseConnectParameters, type UseConnectReturnType } from 'wagmi';
-type CustomConnectParams = {
-    connector: CreateConnectorFn | Connector;
-    chainId?: number;
-    mutation?: UseConnectParameters['mutation'];
-};
-type CustomUseConnectReturnType = Omit<UseConnectReturnType, 'connect' | 'connectAsync'> & {
-    connect: (params: CustomConnectParams) => void;
-    connectAsync: (params: CustomConnectParams) => Promise<unknown>;
-};
-export declare function useConnect({ ...props }?: UseConnectParameters): CustomUseConnectReturnType;
-export {};

package/build/hooks/useEnsFallbackConfig.d.ts

@@ -1 +0,0 @@
-export declare function useEnsFallbackConfig(): undefined;