setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}> {imgUrl &&

{title}

{description}

; }; ## Overview This guide covers the migration process from Capsule to Para SDKs. The migration includes package namespace changes, method signature updates to use object parameters, and introduces new React hooks for state management. ## Package Changes All packages have been migrated from the `@usecapsule` namespace to `@getpara`. Update your dependencies by replacing `@usecapsule` with `@getpara` in your package.json: ```diff theme={null} { "dependencies": { - "@usecapsule/react-sdk": "^3.0.0", - "@usecapsule/evm-wallet-connectors": "^3.0.0" + "@getpara/react-sdk": "^1.0.0", + "@getpara/evm-wallet-connectors": "^1.0.0" } } ``` All packages have been reset to version 1.0.0 under the new namespace. The functionality and package names remain the same - only the organization prefix has changed from `@usecapsule` to `@getpara`. ```bash npm theme={null} npm install @getpara/[package-name] --save-exact ``` ```bash yarn theme={null} yarn add @getpara/[package-name] --exact ``` ```bash pnpm theme={null} pnpm add @getpara/[package-name] --save-exact ``` ## Mobile SDK Updates ### Flutter The Flutter package has moved from `capsule` to `para` on pub.dev: ```diff theme={null} dependencies: - capsule: 0.7.0 + para: ^1.0.0 ``` Create instances using `Para()` instead of `Capsule()`. All method signatures remain unchanged. ### Swift The Swift SDK package is now available at `github.com/getpara/swift-sdk`. The main class has been renamed from `CapsuleManager` to `ParaManager`, while maintaining the same method signatures: ```diff theme={null} - let manager = CapsuleManager() + let manager = ParaManager() ``` Method signatures and functionality remain identical for both mobile SDKs - only the package names and main class names have changed. ## Breaking Changes ### Method Updates All methods have been updated to use object parameters instead of multiple arguments. This change improves extensibility, type safety, and reflects our commitment to consistent API design. ```typescript theme={null} // Old createUser(email: string) // New createUser({ email: string }) ``` ```typescript theme={null} // Old createUserByPhone(phone: string, countryCode: string) // New createUserByPhone({ phone: string, countryCode: string }) ``` ```typescript theme={null} // Old externalWalletLogin(address: string, type: string, provider?: string, addressBech32?: string) // New externalWalletLogin({ address: string, type: string, provider?: string, addressBech32?: string }) ``` ```typescript theme={null} // Old createWallet(type: WalletType, skipDistribute?: boolean) // New createWallet({ type: WalletType, skipDistribute?: boolean = false }) ``` ```typescript theme={null} // Old createWalletPerType(skipDistribute?: boolean, types?: WalletType[]) // New. Note: Function name changed, default value added, and types is now required createWalletPerType({ skipDistribute?: boolean = false, types: WalletType[] }) ``` ```typescript theme={null} // Old distributeNewWalletShare( walletId: string, userShare?: string, skipBiometricShareCreation?: boolean, forceRefreshRecovery?: boolean ) // New distributeNewWalletShare({ walletId: string, userShare?: string, skipBiometricShareCreation?: boolean = false, forceRefresh?: boolean = false }) ``` ```typescript theme={null} // Old createWalletPreGen( type: WalletType, pregenIdentifier: string, pregenIdentifierType?: PregenIdentifierType ) // New createPregenWallet({ type: WalletType, pregenIdentifier: string, pregenIdentifierType?: PregenIdentifierType }) ``` ```typescript theme={null} // Old - Note: Function name changed updateWalletIdentifierPreGen( newIdentifier: string, walletId: string, newType?: PregenIdentifierType ) // New updatePregenWalletIdentifier({ walletId: string, newPregenIdentifier: string, newPregenIdentifierType?: PregenIdentifierType }) ``` ```typescript theme={null} // Old signMessage( walletId: string, messageBase64: string, timeoutMs?: number, cosmosSignDocBase64?: string ) // New signMessage({ walletId: string, messageBase64: string, timeoutMs?: number, cosmosSignDocBase64?: string }) ``` ```typescript theme={null} // Old signTransaction( walletId: string, rlpEncodedTxBase64: string, timeoutMs?: number, chainId: string ) // New signTransaction({ walletId: string, rlpEncodedTxBase64: string, timeoutMs?: number, chainId: string }) ``` All methods now use object parameters with optional properties defaulting to reasonable values. This change makes the SDK more maintainable and easier to extend in the future. ## New Features: React Hooks Para now includes React hooks for easier state management and SDK interaction. Here's a basic setup: ```typescript theme={null} import { ParaProvider } from "@getpara/react-sdk"; function App() { return ( ); } ``` ### Available Hooks Access current account state and connection status Get current wallet information and state Create a new Para user account Check if a user exists by email Start the login process Handle user logout Maintain active user session Create wallet after passkey verification Sign messages with connected wallet Sign transactions with connected wallet Handle login flow and initial setup Monitor account creation process Access Para client instance Control Para modal visibility Manage wallet state ## Next Steps 1. Update your package dependencies to use `@getpara/*` packages 2. Migrate method calls to use new object parameters 3. Consider implementing React hooks for simpler state management 4. Review framework-specific integration guides for detailed setup instructions