@particle-network/auth-core-modal
, the primary mechanism for facilitating social logins.
@particle-network/aa
, for generating and assigning ERC-4337 smart accounts to traditional accounts (EOAs) created and linked to the user’s identity through social login.
@particle-network/chains
, for using peaq.
@particle-network/auth-core-modal
and @particle-network/aa
need to be configured independently, although a common denominator between the two is the need for three key values from the Particle dashboard:
@particle-network/auth-core-modal
, open it within your JSX. You’ll need to use the options property for configuration. This takes the following values:
projectId
, clientKey
, and appId
. These are the values you found on the Particle dashboard.
wallet
, a collection of properties for configuring the embedded wallet modal that optionally shows after a user logs in with their social account. wallet
contains:
visible
, a Boolean dictating whether the embedded wallet interface is shown post-login. If true
, this materializes by default through a button placed near the bottom right of the application.
customStyle
, which, in this example, takes supportChains
, an array of chain objects that dictate the blockchains supported within the embedded wallet modal. To lock this to peaq, import PeaqKrest
or PeaqAgungTestnet
from @particle-network/chains
.
erc4337
, used for specifying a Smart Account implementation to be shown within the embedded wallet modal rather than the EOA. If visible
is false
on wallet
, ignore this property. erc4337
contains:
name
, the name of the Smart Account implementation used within your application. For both peaq and agung, this should be 'SIMPLE'
.
version
, the version of the Smart Account implementation referenced in name
. Currently, only '1.0.0'
is supported with 'SIMPLE'
.
@particle-network/aa
will need to be configured within the same component where you intend to leverage Particle Auth.
Specifically, @particle-network/aa
has a key “master” object, SmartAccount, which, once initialized, enables end-to-end management of the user’s smart account.
After configuring Particle Auth Core, you’ll need to define provider from the useEthereum hook (imported through @particle-network/auth-core-modal
) within your application. provider represents the EIP-1193 provider object we’ll need to configure an attached smart account. Below is an example of this.
projectId
, clientKey
, and appId
, as was previously defined in AuthCoreContextProvider
.aaOptions
, containing:
accountContracts
, a collection of the Smart Account implementations you intend to support. For peaq, this should just be:
SIMPLE
, an array of objects which takes:
chainIds
, an array of chain IDs (integers) for the blockchain(s) you’ll be using the Smart Account on.
version
, the version of the Smart Account you’ll use; in the case of SIMPLE
, this should be '1.0.0'
.
@particle-network/auth-core-modal
. useConnect exposes the connect function, which directly handles social logins. This takes the following parameters:
socialType
, the specific social login mechanism to be opened. If this is left as a blank string (''
), a generalized interface will open, allowing a user to enter their email, choose an external social account, etc. Otherwise, if a string such as 'google'
or 'twitter'
is used, these will be opened directly.
chain
, the blockchain to be connected to. This should be an object from @particle-network/chains
, either PeaqKrest
or PeaqAgungTestnet
in this case.
Below is a snippet showcasing an example implementation of connect
:
@particle-network/aa
, either:
SmartAccount
directly.
SmartAccount
sendTransaction
sendUserOperation
sendSignedUserOperation
buildUserOperation
getFeeQuotes
signUserOperation
Both vary in granularity and operational significance; although for this example we’ll focus on the most straightforward method, sendTransaction
. For information about the others listed above, head over to Particle Network’s documentation.
sendTransaction
can be used to construct and execute any standard transaction; just as you would with Ethers, Web3.js, or any related library.
Transactions should be constructed using typical parameters such as to
, value
, and data
. Upon calling {your SmartAccount instance}.sendTransaction
, the user will be asked to confirm the transaction through an in-app popup. Upon doing so, it’ll be executed on-chain.
The snippet below is an example of this approach:
@particle-network/aa
within your instance of SmartAccount. After plugging this into an object such as new ethers.providers.Web3Provider, you’ll be able to interact with the smart account directly through Ethers.
Below is an example of this configuration process: