Using Particle Wallet within a web application.
@particle-network/wallet
handles the low-level implementation of Particle Wallet.
This document will cover the process of initializing @particle-network/wallet
and creating an embedded wallet instance using an EIP-1193 provider.
Demo
To view a demo application implementing @particle-network/wallet
within a basic React template (alongside @particle-network/auth-core
), take a look at the low-level Auth Core example repository.
@particle-network/wallet
is a low-level library for adding an instance of Particle Wallet to the frontend of your web application, acting as an interface to an account derived from an existing EIP-1193 provider object. This integration is most commonly materialized through an embedded modal popup in the corner of your application, as shown in the interactive demo below:
Alternative Entry
Notably, Particle Wallet can also be used directly through its web implementation: https://wallet.particle.network.
This interface is customizable through path parameters. Styling changes can be previewed here.
@particle-network/wallet
will primarily involve the following steps:
@particle-network/wallet
, as shown in the example below:
projectId
, clientKey
, and appId
.
All of Particle Network’s SDKs require these values for API authentication, and thus they’re easily accessible through the Particle dashboard.
@particle-network/wallet
is installed and you’ve retrieved your projectId
, clientKey
, and appId
values, you’re ready to initialize Particle Wallet.
Both initialization and implementation will be handled by walletEntryPlugin
, an object that can be imported from @particle-network/wallet
. To initialize walletEntryPlugin
, you’ll need to call the init
method within the file where you intend to use Particle Wallet.
walletEntryPlugin.init
takes the following parameters:
projectId
, clientKey
, and appId
, previously retrieved from your project created through the Particle dashboard.erc4337
if you’re using a supported smart account, including Biconomy V1 and V2, Light Account, SimpleAccount, and CyberAccount (CyberConnect). erc4337
takes:
name
, the name of the smart account implementation you’re using, such as SIMPLE
, LIGHT
, BICONOMY
, etc.visible
, which takes a Boolean indicating whether or not the wallet entry modal is shown.preload
, a Boolean determining if the wallet should be preloaded upon application entry.entryPosition
, to specify at what position the wallet entry modal will appear (the button opening the embedded wallet interface). Specifically, this refers to what corner of the screen it’ll appear. This takes an EntryPosition
object, which can be imported from @particle-network/wallet
and specified through EntryPosition.BR
(bottom right), EntryPosition.TL
(top left), etc.themeType
, which should be either 'light'
or 'dark'
indicating the color theme of the wallet modal.language
, a string specifying an alternative language for the modal (English being the default).topMenuType
, to change the button in the top left of the embedded wallet modal to either close the interface, or open it in fullscreen. This should either be 'close'
or 'fullscreen'
.customStyle
, for deeply customizing the styling (coloring, border weight, etc.) of the wallet modal. For more information on this, take a look at Customizing Particle Wallet.walletEntryPlugin
has been included below.
setWalletCore
on walletEntryPlugin
, specifying an associated EIP-1193 provider, which can either be from social logins with Particle Auth, or traditional wallets, such as MetaMask.
setWalletCore
should be called before placing/initiating the wallet entry modal.
@particle-network/wallet
is compatible with both EVM-compatible blockchains and Solana.
Throughout this document, provider
refers to either an EIP-1193 provider object for EVM-compatible chains, or a Solana provider object.
walletEntryPlugin.setWalletCore
with the following parameters:
ethereum
, a standard Ethereum provider object (such as an IEthereumProvider
interface, or window.ethereum
).solana
, a Solana provider object (such as window.phantom.solana
).walletEntryPlugin
with a provider (account) assigned. To open the embedded wallet modal (or initiate the wallet entry modal), you have 3 options:
walletEntryCreate
, a method on walletEntryPlugin
that will display the wallet entry modal (a button in the corner of your application, as you optionally defined through entryPosition
). This should be called after the provider is set through setWalletCore
.openWallet
, an alternative to walletEntryCreate
that directly opens the wallet modal in fullscreen upon calling. This takes various additional parameters, which you can learn more about at Customizing Particle Wallet.getWalletUrl
can be called to retrieve an associated URL for the wallet modal, which could instead be opened in an iframe rather than directly through the library as the former two options do.walletEntryCreate
will provide the most out-of-the-box experience, with the latter two requiring custom handling.
Examples of all three approaches can be found below:
walletEntryPlugin
, below is a table containing every relevant one, along with specific parameters and a short description. For methods listed that weren’t covered in the above examples, live implementation often mimics the common structure covered throughout this document.
Class | Methods | Parameters |
---|---|---|
WalletEntryPlugin | constructor | N/A |
WalletEntryPlugin | init | projectConfig: ProjectConfig, options?: WalletOption |
WalletEntryPlugin | setWalletCore | walletCore: WalletCore, customEventHandler?: CustomEventHandler |
WalletEntryPlugin | walletEntryCreate | N/A |
WalletEntryPlugin | walletEntryDestroy | N/A |
WalletEntryPlugin | getWalletUrl | options?: WalletConfig |
WalletEntryPlugin | openWallet | params?: { windowSize?: 'large' | 'small'; pathName?: string; query?: { [key: string]\: any; }; topMenuType?: 'close' | 'fullscreen'; } |
WalletEntryPlugin | setWalletIcon | N/A |