
Prerequisites
Looking for a lighter version?
Setting up Cosmos Wallets
Para integrates with leading Cosmos wallets. Our integration leverages a modified fork of the React library.Supported Wallets
Para supports the following Cosmos wallets:- - A secure and user-friendly wallet for the Cosmos ecosystem
- - The interchain wallet for the Cosmos ecosystem
- - A comprehensive wallet and validator operator for Cosmos SDK-based blockchains
1
Import components
Import the necessary wallet connectors and chain configurations:
main.tsx
If you encounter type issues with
@getpara/graz/chains
,@alpha you’ll need to generate the chain files. You can:- Add a postinstall script to your package.json:
- Or run
npx graz --generate
manually after installation
2
Configure chains
Set up your Cosmos chain configurations with the necessary RPC and REST endpoints. You can extend the existing chain configurations with your custom endpoints:
main.tsx
3
Configure the provider
Similar to the Cosmos and Solana providers, configure the
ParaProvider
component by wrapping your application content in the ParaProvider
component. Pass in the required configuration props:main.tsx
For the ParaCosmosProvider wrapping you don’t need to include a QueryClientProvider as the provider already includes
one.
External Wallet Configuration
External Wallets with Linked Embedded Wallets
You can also provision linked embedded wallets for external wallets. In this case, the external wallet would be the Para auth method for the user’s embedded wallet (instead of an email or social login). Embedded wallets would be created according to your API key settings. To enable this, you can include thecreateLinkedEmbeddedForExternalWallets
prop to indicate which external wallets this setting should be applied to.
Advanced Provider Pattern
Setting up a dedicated provider component that encapsulates all the necessary providers and modal state management is considered a best practice. This pattern makes it easier to manage the modal state globally and handle session management throughout your application.Server-Side Rendering Considerations
When using Next.js or other SSR frameworks, proper client-side initialization is crucial since web3 functionality relies on browser APIs. There are two main approaches:-
Using the
'use client'
directive in Next.js 13+:- Add the directive at the component level where browser APIs are needed
- Ensures the CosmosProvider component and its dependencies only run on the client
- Maintains better code splitting and page performance
-
Using dynamic imports:
- Lazily loads the provider component
- Automatically handles client-side only code
- Provides fallback options during loading
Configuring the Para Modal
After setting up your providers you need to configure the ParaModal component to display the external wallets and authentication options to your users. You need to pass in theexternalWallets
and authLayout
configuration options
to the ParaModal component to control which of the wallets show in the modal that were specified in the provider
configuration.
Set the modal props
Modal Props Config
Modal prop options for customizing the Para Modal are included below. For advanced customization options, refer to .External Wallet Verification
External wallet verification adds a verification step during external connection to ensure the user owns the wallet. Enabling this feature establishes a valid Para session, which you can later use in your app to securely validate wallet ownership. To enable this, set the following option on yourexternalWalletConfig
of your ParaProvider
:
Connection Only Wallets
Connection only external wallets bypass all Para functionality (account creation, user tracking, etc.) when connecting an external wallet. To enable this, set the following option on yourexternalWalletConfig
of your ParaProvider
:
Since connection only wallets bypass Para, most Para functionality will be unavailable. This includes linked embedded wallets, external wallet verification, on & off ramping, etc.
Examples
For an example of what the Para External Wallets Modal might look like in your application, check out our live demo:Modal Designer
GitHub Repository
Next Steps
Now that you have integrated Cosmos wallets into your Para Modal, you can explore more advanced features like signing using the Para SDK with popular libraries likeCosmJS
.