Integrate social logins within Web3Modal through Particle Auth.
WalletConnect’s Web3Modal is one of the most widely used connection kits to date, acting as a seamless, lightweight solution to facilitate wallet connection and utilization within applications built on EVM-compatible blockchains. Particle Auth Core, materialized as “Particle Wallet”, is directly compatible with Web3Modal, resulting in the introduction of social logins natively to the Web3Modal interface. For developers already using Web3Modal, Particle Auth Core can be added in just a few lines of code, as this page will cover.
@web3modal/ethers
)To begin, we’ll be walking through the process of implementing Particle Auth Core within Web3Modal through @web3modal/ethers
. A complete demo repository for this example can be found here.
Starting with the first example, Particle Auth Core can be added as an option within Web3Modal by simply configuring and initializing the SDK through createWeb3Modal
, then placing the resulting instance within Particle Auth Core’s AuthCoreContextProvider
React component, which will then wrap your core application component containing wallet connection and handling logic (by using <w3m-button>
, for example).
This can be achieved through the following steps:
Configuration of supported chains within Web3Modal. Required to initialize Web3Modal through createWeb3Modal
, you’ll first need to configure one or multiple chains to be supported within your application. This can be done by simply defining objects containing the following values:
chainId
name
currency
explorerUrl
rpcUrl
For example, configuring Ethereum Mainnet and Ethereum Goerli would be done by defining the objects outlined below:
Defining application metadata. In addition to configuring the chains you’ll be using with Web3Modal, you also have the opportunity to define application-specific metadata, including:
name
, the name of your application.description
, a description of your application.url
, the expected origin URL of your application (which will be using Web3Modal).icons
, one or multiple icons representing your project.Configuring and initializing Web3Modal. Using createWeb3Modal
from @web3modal/ethers/react
, an instance of Web3Modal can be created. createWeb3Modal
will take various parameters, including those we defined above. The three key required parameters are the following:
ethersConfig
, which in this example is defaultConfig
loaded with metadata
.chains
, an array of supported chains you intend to use.projectId
, your WalletConnect project ID (retrieved from the WalletConnect dashboard).enableOnramp
, enableAnalytics
, etc. See the example below for a standard implementation of createWeb3Modal
.Initiating AuthCoreContextProvider. With web3Modal
(or the equivalent within your application) defined, you’ll need to place it within the web3Modal
property when configuring AuthCoreContextProvider
(the primary React component used for initializing Particle Auth Core). AuthCoreContextProvider
, with web3Modal
defined, should wrap your core application component containing your “Connect Wallet” button (through <w3m-button>
).
As a result of the four steps outlined above, your implementation of Web3Modal through AuthCoreContextProvider
may look similar to the snippet shown below.
Integrate social logins within Web3Modal through Particle Auth.
WalletConnect’s Web3Modal is one of the most widely used connection kits to date, acting as a seamless, lightweight solution to facilitate wallet connection and utilization within applications built on EVM-compatible blockchains. Particle Auth Core, materialized as “Particle Wallet”, is directly compatible with Web3Modal, resulting in the introduction of social logins natively to the Web3Modal interface. For developers already using Web3Modal, Particle Auth Core can be added in just a few lines of code, as this page will cover.
@web3modal/ethers
)To begin, we’ll be walking through the process of implementing Particle Auth Core within Web3Modal through @web3modal/ethers
. A complete demo repository for this example can be found here.
Starting with the first example, Particle Auth Core can be added as an option within Web3Modal by simply configuring and initializing the SDK through createWeb3Modal
, then placing the resulting instance within Particle Auth Core’s AuthCoreContextProvider
React component, which will then wrap your core application component containing wallet connection and handling logic (by using <w3m-button>
, for example).
This can be achieved through the following steps:
Configuration of supported chains within Web3Modal. Required to initialize Web3Modal through createWeb3Modal
, you’ll first need to configure one or multiple chains to be supported within your application. This can be done by simply defining objects containing the following values:
chainId
name
currency
explorerUrl
rpcUrl
For example, configuring Ethereum Mainnet and Ethereum Goerli would be done by defining the objects outlined below:
Defining application metadata. In addition to configuring the chains you’ll be using with Web3Modal, you also have the opportunity to define application-specific metadata, including:
name
, the name of your application.description
, a description of your application.url
, the expected origin URL of your application (which will be using Web3Modal).icons
, one or multiple icons representing your project.Configuring and initializing Web3Modal. Using createWeb3Modal
from @web3modal/ethers/react
, an instance of Web3Modal can be created. createWeb3Modal
will take various parameters, including those we defined above. The three key required parameters are the following:
ethersConfig
, which in this example is defaultConfig
loaded with metadata
.chains
, an array of supported chains you intend to use.projectId
, your WalletConnect project ID (retrieved from the WalletConnect dashboard).enableOnramp
, enableAnalytics
, etc. See the example below for a standard implementation of createWeb3Modal
.Initiating AuthCoreContextProvider. With web3Modal
(or the equivalent within your application) defined, you’ll need to place it within the web3Modal
property when configuring AuthCoreContextProvider
(the primary React component used for initializing Particle Auth Core). AuthCoreContextProvider
, with web3Modal
defined, should wrap your core application component containing your “Connect Wallet” button (through <w3m-button>
).
As a result of the four steps outlined above, your implementation of Web3Modal through AuthCoreContextProvider
may look similar to the snippet shown below.