EVM Wallets
Learn how to combine the Para Modal with EVM wallets.
This guide will walk you through the process of integrating EVM Wallets into your Para Modal and Para-enabled application, allowing you to onboard new users and connect with existing users who may already have external wallets like MetaMask, Coinbase Wallet and more.
Prerequisites
Before integrating wallet connections, ensure you have an existing Para project with the Para Modal set up. If you havenโt set up Para yet, follow one of our Framework Setup guides like this
React + Viteguide.
Setting up EVM Wallets
Setup is simple - just wrap your app in a provider and pass the appropriate props and configuration options to the provider. Once configured, the Para modal and wallet options will automatically appear in the modal when opened.
Para provides seamless integration with popular EVM wallets including
MetaMask, Rainbow ,
Coinbase Wallet,
WalletConnect,
ZerionSafe App Registration: To use Safe as an external wallet, youโll need to register your application as a Safe App in the Safe App Registry. This is required because Safe apps need to run within Safeโs context to ensure proper security and functionality. The registration process involves providing your appโs details and undergoing a review by the Safe team.
Install dependencies
Install the required packages alongside your existing Para dependencies:
Import components
Import the wallet connectors and supporting components you need. Adjust the imports based on which wallets you want to support:
Configure the providers
Configure the ParaEvmProvider
component by wrapping your application content in the QueryClientProvider
and ParaEvmProvider
components. Pass in the required configuration props:
Provider Configuration
WalletConnect (Reown) Setup: Youโll need a WalletConnect project ID if youโre using their connector. Get one from the
WalletConnect (Reown) Developer Portal. You can use an empty string for testing, but this isnโt recommended for production.
The ParaEvmProvider
extends Wagmiโs provider functionality, giving you access to all Wagmi Hooksin your application. Place the provider near the root of your component tree for optimal performance.
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.
Creating a Custom Provider
A custom provider component can be created to encapsulate the ParaEvmProvider and ParaModal, allowing for easier management of the modal state and wallet connections. An example implementation is shown below:
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. If using a custom provider, add the directive to the top of the provider file.
- Ensures the Web3Provider component and its dependencies only run on the client side
-
Using dynamic imports:
- In Next.js, use the
dynamic
function to import the provider component with{ ssr: false }
. - Lazily loads the provider component
- Automatically handles client-side only code
- Provides fallback options during loading
- In Next.js, use the
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 the externalWallets
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.
Optionally, you can pass the externalWalletsWithParaAuth
prop to include full Para authentication for specific wallets.
This will add a signature verification step for these wallets and will setup a full Para account for the user, including creating Para wallets according to your APi key settings.
Set the modal props
Modal Props Config
Modal prop options for customizing the Para Modal are included below. For advanced customization options, refer to
Customization Guide.
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 your Para instance:
Since connection only wallets bypass Para, most Para functionality will be unavailable. This includes full Para auth with external wallets, 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:
For an example code implementation using EVM Wallets, check out our GitHub repository:
Next Steps
Now that you have integrated EVM wallets into your Para Modal, you can explore more advanced features like signing using
the Para SDK with popular libraries like Ethers.js
.