Particle Connect is the flagship SDK driving one-click onboarding through either social logins or standard wallet connection; in just a few minutes, Particle Connect can be implemented to offer a unified modal for bringing users into your dApp.
This document will go through the step-by-step process of configuring, initializing, and using Particle Connect with Flutter.
For complete documentation covering the implementation of Particle Connect on Flutter in more depth, head over to the Flutter SDK reference.
Installing Particle Connect
To start, you’ll need to add particle_connect
to your Flutter application; this will need to be done before moving onto platform-specific configuration.
Configuring Particle Connect
After adding and installing the SDK, you’re ready to move onto configuration; this will differ depending on the platform you intend on using (iOS or Android).
But beforehand, you’ll need to retrieve three key values from the Particle dashboard: your project ID, client key, and app ID. These are used to authenticate your instance of Particle Connect and connect your project to the dashboard; these are required to properly initialize the SDK, regardless of platform.
To grab these keys, follow the steps outlined below:
Access the Particle Dashboard
Sign up or Log in into the Particle dashboard
Create a new project or enter an existing project
Create a new iOS/Android application, or skip this step if you already have one
Retrieve the project ID, client key, and application ID
For more information on the Particle dashboard, take a look at the dashboard quickstart.
If you’re planning on using Android for your React Native application, ensure you meet the following prerequisites (otherwise, expect compatibility issues):
To configure Particle Connect and prepare for initialization, you can begin by going ahead and opening your build.gradle
file, often found at the following file path: ${project name}/android/app/build.gradle
Within your build.gradle
file, you’ll need to add four new lines to ensure Particle Connect runs properly:
minSdkVersion
. In most cases, this will be set to 23
.manifestPlaceholders["PN_PROJECT_ID"]
, the project ID previously retrieved from the Particle dashboard.manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]
, the client key previously retrieved from the Particle dashboard.manifestPlaceholders["PN_APP_ID"]
, the app ID previously retrieved from the Particle dashboard.An example of this has been included below.
Additionally, staying within your build.gradle
file, you’ll need to ensure that you’re using version 17 of Java in both compileOptions
and kotlinOptions
, alongside enabling dataBinding
.
Before beginning, ensure your project meets the following prerequisites:
Xcode 15.0 or later.
iOS 14 or later.
With these requirements set, you’ll need to open an exported iOS project and find ios/{project name}.xcworkspace
.
Configuring ParticleNetwork-info.plist
At the root of your Xcode project, create a new file, ParticleNetwork-Info.plist
. Ensure this is marked under “Target Membership.”
From here, with a fresh ParticleNetwork-Info.plist
file, go ahead and fill it in with the values previously retrieved from the Particle dashboard:
Configuring AppDelegate.swift
Next, you’ll need to head over to your AppDelegate.swift
file to add an import of ParticleConnect
.
Within your application’s application
method (as shown below), you’ll need to include a handler condition derived from ParticleConnect.handleUrl
. This should be as simple as a true
return upon a truthy value of ParticleConnect.handleUrl
, and a super.application(app, open: url, options: options)
return upon a falsy value.
Setting your scheme URL
Additionally, you’ll need to configure your application’s scheme URL. To configure this, select your application from “TARGETS” under the “Info” section, then click ”+” to add a URL type.
For example, if your appId
is 63bfa427-cf5f-4742-9ff1-e8f5a1b9828f
, then the scheme URL would be pn63bfa427-cf5f-4742-9ff1-e8f5a1b9828f
—simply adding pn
to the beginning of the appId
.
Configuring Info.plist
Now, head over to your Info.plist
file and include the following snippet:
Configuring your Podfile
Finally, you’ll need to edit your Podfile to ensure particle_connect
is properly imported. Head over to the linked guide to complete this if you haven’t already.
Another important note before continuing.
Our SDK is a static library (XCFramework). When using the Particle Auth Flutter SDK, you’ll need to specify that you’re using a static framework through the following:
Initializing Particle Connect
Having now installed and configured Particle Connect, the only step remaining before the SDK can be used is initialization.
Particle Connect can be initialized by simply calling the init
method on ParticleConnect
. This takes the following parameters:
chainInfo
, representing the primary chain you intend to use (for example, ChainInfo.Ethereum
, chainInfo.Polygon
).dappMetaData
, derived from DappMetaData
env
, affecting the information logged within your environment (Env.dev
, Env.production
, or Env.staging
).The snippet below is an example of this.
Facilitating connection
Now that Particle Connect has been installed, configured, and initialized, you’re ready to facilitate connection through the Particle Connect modal.
To do this, you’ll need to establish a connectKitConfig
instance specifying the:
connectOptions
(such as .EMAIL
, .PHONE
, SOCIAL
, WALLET
).socialProviders
(such as .GOOGLE
, .APPLE
).walletProviders
(specified through an instance of EnableWalletProvider
, as shown below).additionalLayoutOptions
.logo
.Upon generating this config (with ConnectKitConfig
), you’ll be able to call ParticleConnect.connectWithConnectKitConfig
, initiating the resulting connection modal.
Upon wallet connection (or social login), you’ll be able to retrieve information about the resulting account.
Basic account information can be found through the result of ParticleConnect.connectWithConnectKitConfig
, in this case, that was saved to account
, which contains properties such as publicAddress
and walletType
.
To explicitly retrieve userInfo
(a collection of information regarding the login mechanism, attached addresses, and so on; more information can be found within its API reference), you’ll need to call ParticleAuthCore.getUserInfo
.
An example of both approaches can be found below.
To do this, you’ll need to construct a transaction with EvmService.createTransaction
using standard parameters such as evmAddress
(from, or the sender), data
, value
, and receiverAddres
(to, or the recipient),
To execute the resulting transaction, you’ll need to initialize an instance of the active connected wallet; an example of doing this has been included in the snippet below.
Finally, using this instance, the transaction can be executed through ParticleConnect.signAndSendTransaction
, taking the sender’s address alongside the previously constructed transaction object.
If you included particle_wallet
within your pubspec.yaml
, you can open the (optional) embedded wallet interface at any time after a user connects, use ParticleWallet.setSupportChain
to set supported chains, then ParticleWallet.navigatorWallet
to open the interface.
particle_aa
SDK and refer to this documentation. Additionally, a demo repository can be found here. Particle Connect is the flagship SDK driving one-click onboarding through either social logins or standard wallet connection; in just a few minutes, Particle Connect can be implemented to offer a unified modal for bringing users into your dApp.
This document will go through the step-by-step process of configuring, initializing, and using Particle Connect with Flutter.
For complete documentation covering the implementation of Particle Connect on Flutter in more depth, head over to the Flutter SDK reference.
Installing Particle Connect
To start, you’ll need to add particle_connect
to your Flutter application; this will need to be done before moving onto platform-specific configuration.
Configuring Particle Connect
After adding and installing the SDK, you’re ready to move onto configuration; this will differ depending on the platform you intend on using (iOS or Android).
But beforehand, you’ll need to retrieve three key values from the Particle dashboard: your project ID, client key, and app ID. These are used to authenticate your instance of Particle Connect and connect your project to the dashboard; these are required to properly initialize the SDK, regardless of platform.
To grab these keys, follow the steps outlined below:
Access the Particle Dashboard
Sign up or Log in into the Particle dashboard
Create a new project or enter an existing project
Create a new iOS/Android application, or skip this step if you already have one
Retrieve the project ID, client key, and application ID
For more information on the Particle dashboard, take a look at the dashboard quickstart.
If you’re planning on using Android for your React Native application, ensure you meet the following prerequisites (otherwise, expect compatibility issues):
To configure Particle Connect and prepare for initialization, you can begin by going ahead and opening your build.gradle
file, often found at the following file path: ${project name}/android/app/build.gradle
Within your build.gradle
file, you’ll need to add four new lines to ensure Particle Connect runs properly:
minSdkVersion
. In most cases, this will be set to 23
.manifestPlaceholders["PN_PROJECT_ID"]
, the project ID previously retrieved from the Particle dashboard.manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]
, the client key previously retrieved from the Particle dashboard.manifestPlaceholders["PN_APP_ID"]
, the app ID previously retrieved from the Particle dashboard.An example of this has been included below.
Additionally, staying within your build.gradle
file, you’ll need to ensure that you’re using version 17 of Java in both compileOptions
and kotlinOptions
, alongside enabling dataBinding
.
Before beginning, ensure your project meets the following prerequisites:
Xcode 15.0 or later.
iOS 14 or later.
With these requirements set, you’ll need to open an exported iOS project and find ios/{project name}.xcworkspace
.
Configuring ParticleNetwork-info.plist
At the root of your Xcode project, create a new file, ParticleNetwork-Info.plist
. Ensure this is marked under “Target Membership.”
From here, with a fresh ParticleNetwork-Info.plist
file, go ahead and fill it in with the values previously retrieved from the Particle dashboard:
Configuring AppDelegate.swift
Next, you’ll need to head over to your AppDelegate.swift
file to add an import of ParticleConnect
.
Within your application’s application
method (as shown below), you’ll need to include a handler condition derived from ParticleConnect.handleUrl
. This should be as simple as a true
return upon a truthy value of ParticleConnect.handleUrl
, and a super.application(app, open: url, options: options)
return upon a falsy value.
Setting your scheme URL
Additionally, you’ll need to configure your application’s scheme URL. To configure this, select your application from “TARGETS” under the “Info” section, then click ”+” to add a URL type.
For example, if your appId
is 63bfa427-cf5f-4742-9ff1-e8f5a1b9828f
, then the scheme URL would be pn63bfa427-cf5f-4742-9ff1-e8f5a1b9828f
—simply adding pn
to the beginning of the appId
.
Configuring Info.plist
Now, head over to your Info.plist
file and include the following snippet:
Configuring your Podfile
Finally, you’ll need to edit your Podfile to ensure particle_connect
is properly imported. Head over to the linked guide to complete this if you haven’t already.
Another important note before continuing.
Our SDK is a static library (XCFramework). When using the Particle Auth Flutter SDK, you’ll need to specify that you’re using a static framework through the following:
Initializing Particle Connect
Having now installed and configured Particle Connect, the only step remaining before the SDK can be used is initialization.
Particle Connect can be initialized by simply calling the init
method on ParticleConnect
. This takes the following parameters:
chainInfo
, representing the primary chain you intend to use (for example, ChainInfo.Ethereum
, chainInfo.Polygon
).dappMetaData
, derived from DappMetaData
env
, affecting the information logged within your environment (Env.dev
, Env.production
, or Env.staging
).The snippet below is an example of this.
Facilitating connection
Now that Particle Connect has been installed, configured, and initialized, you’re ready to facilitate connection through the Particle Connect modal.
To do this, you’ll need to establish a connectKitConfig
instance specifying the:
connectOptions
(such as .EMAIL
, .PHONE
, SOCIAL
, WALLET
).socialProviders
(such as .GOOGLE
, .APPLE
).walletProviders
(specified through an instance of EnableWalletProvider
, as shown below).additionalLayoutOptions
.logo
.Upon generating this config (with ConnectKitConfig
), you’ll be able to call ParticleConnect.connectWithConnectKitConfig
, initiating the resulting connection modal.
Upon wallet connection (or social login), you’ll be able to retrieve information about the resulting account.
Basic account information can be found through the result of ParticleConnect.connectWithConnectKitConfig
, in this case, that was saved to account
, which contains properties such as publicAddress
and walletType
.
To explicitly retrieve userInfo
(a collection of information regarding the login mechanism, attached addresses, and so on; more information can be found within its API reference), you’ll need to call ParticleAuthCore.getUserInfo
.
An example of both approaches can be found below.
To do this, you’ll need to construct a transaction with EvmService.createTransaction
using standard parameters such as evmAddress
(from, or the sender), data
, value
, and receiverAddres
(to, or the recipient),
To execute the resulting transaction, you’ll need to initialize an instance of the active connected wallet; an example of doing this has been included in the snippet below.
Finally, using this instance, the transaction can be executed through ParticleConnect.signAndSendTransaction
, taking the sender’s address alongside the previously constructed transaction object.
If you included particle_wallet
within your pubspec.yaml
, you can open the (optional) embedded wallet interface at any time after a user connects, use ParticleWallet.setSupportChain
to set supported chains, then ParticleWallet.navigatorWallet
to open the interface.
particle_aa
SDK and refer to this documentation. Additionally, a demo repository can be found here.